Các phần tiếp theo sẽ đi sâu vào những phương thức liên quan đến DOM trong thư viện Zepto — cụ thể là các hàm được định nghĩa trên đối tượng $.fn.

Bộ mã nguồn phân tích được lưu trữ công khai trên GitHub: reading-zepto

Phiên bản mã nguồn được sử dụng

Bài viết này dựa trên Zepto phiên bản 1.2.0.

Phương thức forEach

forEach: emptyArray.forEach

Vì đối tượng Zepto hoạt động như một mảng giả (array-like object), nên phương thức này chỉ đơn giản trỏ tới Array.prototype.forEach, kế thừa hành vi gốc mà không cần điều chỉnh.

Phương thức reduce

reduce: emptyArray.reduce

Tương tự, đây là ánh xạ trực tiếp tới phương thức tiêu chuẩn của mảng.

Phương thức push

push: emptyArray.push

Không có logic bổ sung — chỉ tái sử dụng nguyên bản Array.prototype.push.

Phương thức sort

sort: emptyArray.sort

Thực hiện sắp xếp trên tập kết quả bằng cách gọi phương thức sort của mảng nền.

Phương thức splice

splice: emptyArray.splice

Hỗ trợ chèn/xóa/cắt phần tử với cùng giao diện và ngữ nghĩa như mảng JavaScript thuần.

Phương thức indexOf

indexOf: emptyArray.indexOf

Tìm vị trí đầu tiên của phần tử khớp — cũng kế thừa hoàn toàn từ mảng tiêu chuẩn.

Phương thức get

get: function(index) {
  return index === undefined 
    ? slice.call(this) 
    : this[index >= 0 ? index : index + this.length];
}

Khi không truyền tham số, get() trả về một bản sao mảng thuần (thông qua Array.prototype.slice). Khi có chỉ số index, nó hỗ trợ cả chỉ số dương và âm — ví dụ $('div').get(-1) lấy phần tử cuối cùng.

Phương thức toArray

toArray: function() { return this.get(); }

Là dạng rút gọn của get() không tham số — do đó luôn trả về mảng JavaScript thuần, không còn mang đặc tính của đối tượng Zepto.

Phương thức size

size: function() { return this.length; }

Trả về số lượng phần tử hiện tại trong tập hợp — tương đương với thuộc tính length nội tại.

Phương thức concat

concat: function() {
  const args = Array.from(arguments).map(item => 
    zepto.isZ(item) ? item.toArray() : item
  );
  const base = zepto.isZ(this) ? this.toArray() : this;
  return concat.apply(base, args);
}

Khác với các phương thức trước, concat không thể ánh xạ trực tiếp vì nó yêu cầu xử lý riêng biệt cho các đối tượng Zepto: mỗi tham số kiểu ZeptoObject phải được chuyển thành mảng trước khi nối; đồng thời bản thân this cũng cần được chuẩn hóa nếu là đối tượng Zepto. Kết quả trả về luôn là mảng thuần — không còn khả năng gọi tiếp các phương thức Zepto.

Phương thức map

map: function(transformer) {
  return $(this.map((el, i) => transformer.call(el, i, el)));
}

Sử dụng hàm tiện ích $.map bên trong để duyệt và biến đổi từng phần tử. Hàm callback được thực thi với this trỏ tới phần tử hiện tại, giúp truy cập trực tiếp thuộc tính hoặc phương thức DOM. Kết quả sau khi biến đổi được bao bọc lại bởi $() để duy trì tính chất chuỗi (chaining) và khả năng gọi tiếp các phương thức Zepto.

Phương thức slice

slice: function() {
  return $(slice.apply(this, arguments));
}

Tương tự map, slice áp dụng Array.prototype.slice lên tập hợp, rồi đóng gói lại thành đối tượng Zepto mới — đảm bảo tính nhất quán trong hệ sinh thái phương thức.

Phương thức each

each: function(callback) {
  emptyArray.every.call(this, (el, idx) => callback.call(el, idx, el) !== false);
  return this;
}

Triển khai thông minh dựa trên Array.prototype.every: nếu callback trả về false (đúng kiểu boolean), vòng lặp sẽ dừng ngay lập tức — mô phỏng hành vi "break" trong vòng lặp thông thường. Lưu ý rằng việc kiểm tra dùng !== false để tránh nhầm lẫn với giá trị undefined (khi callback không trả về gì). Phương thức luôn trả về this, cho phép tiếp tục chuỗi gọi phương thức khác.

Phương thức add

add: function(selector, context) {
  return $(uniq(this.concat($(selector, context))));
}

Chấp nhận một bộ chọn (selector) và ngữ cảnh (context), tạo ra tập hợp mới từ kết quả truy vấn, sau đó nối với tập hợp hiện tại. Hàm uniq loại bỏ các phần tử trùng lặp (dựa trên tham chiếu DOM), và kết quả cuối cùng được bao bọc lại dưới dạng đối tượng Zepto để duy trì tính nhất quán.