UmbrellaJS là sự thay thế của bạn cho jQuery

Bài viết có tham khảo nguồn UmbrellaJS is Your Alternative to jQuery.

Các thư viện mã nguồn mở jQuery đã chiếm ưu thế phát triển web trong nhiều năm qua, nó vẫn là một trong những mã nguồn đáng tin cậy nhất cho JavaScript. Nhưng bây giờ, chúng ta có một thư viện mới tên là UmbrellaJS

Được phát triển bởi Francisco Presencia

Tiny library for DOM manipulation, events and AJAX It is strongly influenced by jQuery with many similar methods so you'll feel at ease developing with Umbrella.

Đúng như lời giói thiệu, UmbrellaJS cũng là một mã nguồn mở hoàn toàn và nó cung cấp nhiều chức năng tương tự jQuery như :

• DOM tranversal (selector, filter, find, each, etc)
• DOM editing (classes & attributes, html, before, etc)
• Event handling
• AJAX

UmbrellaJS hoạt động gần như giống chính xác như jQuery ngoại trừ việc nó có cú pháp và các gọi hàm khác nhau mà thôi. Vậy, lợi ích của việc sử dụng nó là gì ?

UmbrellaJS nhỏ gọn hơn rất nhiều nếu so sánh với jQuery, và nó chỉ cho thao tác DOM. Thư viện đầy đủ của nó có dung lượng tầm khoảng 4KB (có thể 3KB khi gzipped), trong khi phiên bản mới nhất của jQuery có dung lượng lên tới khoảng 250KB.

Do đó, nếu bạn đang tìm kiếm một phiên bản đơn giản của jQuery thì Umbrella là một lựa chọn hay - load nhanh hơn và sử dụng đơn giản hơn.

Có các document cung cấp một danh sách của tất cả các hàm cùng với các tham sô bạn có thể truyền vào. Bạn có thể tìm hiểu thêm ở link trên. Document trên liên tục được cập nhật.

Nhiều hàm của jQuery cũng được mô phỏng tương tự trên Umbrella nên cú pháp của nó cũng rất dễ đọc. Với các bạn đã từng hay là quen sử dụng jQuery rồi thì cũng rất dễ để làm quen thôi. Ví dụ như hàm .on() thì hoàn toàn tương tự, bạn có thể truyền vào tất cả các sự kiện như click, hover...

Điểm khác biệt lớn nhất là Umbrella selectors sử dụng cú pháp u(selector) chứ không phải là $(selector). Dưới đây là một ví dụ đơn giản in ra alert khi ai đó click vào button có class button :

u("button").on("click", function() {
  alert("Hello world");
});

Hoặc là một ví dụ gửi form qua AJAX khi submit :

u("form.login").ajax(function(err, res) {
  window.href = "/user/" + res.id;
});

Đó là một ví dụ đơn giản, nhưng nó hoàn toàn minh họa giá trị của Umbrella.

Bạn có thể xem source 2 hàm đơn gian của Umbrella :

// Find the nodes matched by a selector
u.prototype.find = function(selector) {
  return this.map(function(node){
    return u(selector || "*", node);
  });
};

// Check if any node matches the selector
u.prototype.is = function(selector){
  return this.filter(selector).length > 0;
};

Để bắt đầu thì đơn giản là bạn chỉ cần download source code file umbrella.min.js ở đây về và thêm vào project của bạn.

<script src="umbrella.min.js"></script>

Bạn có thể theo dõi demo phức tạp hơn ở dưới đây để hiểu rõ hơn cách thức UmbrellaJS hoạt động. Rất dễ hiểu thôi