Khái niệm getters và setters trong JavaScript chỉ là một trong những điều bạn nên hiểu. Chúng rất hay trong jQuery vì API rất nhất quán nên một khi bạn có được nó, bạn có thể đoán được nó sẽ hoạt động như thế nào đối với các phương thức khác nhau. Ở cấp độ cơ bản nhất…
Người định cư làm điều gì đó.
Getters trả về một giá trị .
Thường thì một phương pháp duy nhất có thể được sử dụng theo một trong hai cách. Lấy ví dụ phương pháp chiều cao.
// Used as a "setter" - will set the height $("#example").height(100); // Used as a "getter" - will return a value var theHeight = $("#example").height();Thấy sự khác biệt? Bộ cài đặt truyền một tham số khi phương thức được sử dụng. Không có gì vượt qua getter . Đó là cách mà bản thân jQuery biết phải làm gì. Nó chỉ kiểm tra xem có một tham số ở đó hay không. Nếu không, nó hoạt động giống như một getter. Nếu nó ở đó, nó hoạt động như một người định cư. Nó chỉ đơn thuần là một sự tiện lợi của API, thay vì có các phương thức riêng biệt như getHeight và setHeight.
Cần lưu ý rằng một getter được sử dụng bởi chính nó không làm gì cả.
// Useless $("#example").height();Và nếu bạn đặt giá trị của một biến bằng cách sử dụng setter, bạn sẽ nhận được đối tượng jQuery được trả về.
// x will be a jQuery object containing #example var x = $("#example").height(100);Đó có thể là một điều khó hiểu, nhưng cũng là một mẹo nhỏ tiện lợi để lưu mã. Nếu bạn biết rằng bạn cần phải lưu cả hai đối tượng jQuery đó vào bộ nhớ cache và đặt chiều cao của nó, thì bạn cũng có thể làm điều đó trong một dòng mã.
Xem Bút 8ff68485673396d452f650bfb437fb2a của Chris Coyier (@chriscoyier) trên CodePen
Cũng được đề cập trong bài báo là box-sizing: border-box;. Định cỡ hộp là một thuộc tính CSS siêu hữu ích. Tôi là người ủng hộ lớn việc thiết lập nó trên tất cả các yếu tố, như:
* ( box-sizing: border-box; )Như đã lưu ý trong video, điều này cũng làm cho height()jQuery dễ đoán và nhất quán hơn một chút. Không có bộ hộp viền, height()bằng thuộc tính chiều cao trong CSS hoặc bất kỳ chiều cao nào mà phần tử tự nhiên là, trừ phần đệm và đường viền. Với border-boxset, height()là chính xác chiều cao mà phần tử đó chiếm trên màn hình, bao gồm cả phần đệm và đường viền. Nếu không có border-boxset, để có được điều đó, bạn cần sử dụng outerHeight()jQuery.