Các thư viện mình dùng trong dự án khi làm việc với javascript nói chung và angularjs nói riêng

Mở đầu

Dạo gần đây trong dự án mình đang join thì mình đảm nhận công việc về phía clientside khá nhiều vì thế nên ít nhiều có chút hiểu biết về javascript và mình muốn chia sẻ những trải nghiệm của mình về javascript với mọi người.

Có 1 luật bất thành văn khi làm việc trên clientside đó là: Nếu làm việc với sự kiện nhiều thì nên sử dụng Jquery, còn nếu làm việc với dữ liệu nhiều thì nên sử dụng AngularJS. Ở đây mình không nói về việc dùng library nào tốt hơn mà chỉ muốn nói nên dùng library nào trong trường hợp nào. Và trong phần việc mình đang làm thì mình thao tác chủ yếu với dữ liệu vì thế mình dùng AngularJS. Nhưng bài viết này không nhắm vào angularJS mà mình muốn nói đến các library hỗ trợ việc sử lí mảng trong AngularJS nói riêng và Javascript nói chung. Lets begin.

1. Lodash

Lodash là 1 library hỗ trợ cho việc xử lí data rất tuyệt vời trong Javascript bạn chỉ cần cài thư viện vào project là đã có thể sử dụng các function của nó.

<script src="lodash.js"></script>

Tại sao phải sử dụng Lodash

Cùng điểm qua 1 vài ví dụ sau nhé:

 // Giả sử bạn có 1 mảng như sau:

var users = [
  { 'user': 'barney', 'age': 36, 'active': false },
  { 'user': 'fred',   'age': 40, 'active': true },
  { 'user': 'tuan', 'age': 88, 'active': false },
  { 'user': 'dat', 'age': 18, 'active': true },
];

H nhiệm vụ của bạn là phải tìm ra user có tuổi là 40 Thông thường sẽ có 1 vài cách để làm việc này(tính thêm cả việc sử dụng angularJS) như sau:

var loopNative = function() {
    for (i = 0; i < users.length; i++) {
        console.log(i)
        if(users[i].age === 40) {
            return;
        }
    }
}

var loopAngular = function() {
    angular.forEach(users, function(user, i) {
      console.log(i)
      if(user.age === 40) {
          return;
      }
    });
}

var loopAngular = function() {
    angular.forEach(users, function(user, i) {
      console.log(i)
      if(user.age === 40) {
          return;
      }
    });
}

var loopLodash = function() {
    _.forEach(users, function(user, i) {
      console.log(i);
      if(user) {
          return
      }
    });
}
loopNative()
# OutPut: 0,1
loopAngular()
# OutPut: 0,1,2,3
loopLodash()
# OutPut: 0,1

OK! Giờ chúng ta sẽ phân tích kết quả. Ở trường hợp thứ nhất: loop Native cho kết quả là chúng ta kết quả khá tốt, nhưng nhược điểm của nó là 1 đoạn code quá dài chỉ để thực thi 1 thao tác là find. Tuy có kết quả tốt, nhưng việc code quá dài cho 1 thao tác đơn giản rất hại não cho những người maintain về sau (nhìn toét mắt mới hiểu ý nghĩa). Đó là điểm trừ.

Ở trường hợp thứ 2: loopAngular nói chung là bị reject hoant toàn, tuy khắc phục được nhược điểm là code ngắn gọn hơn nhưng lại không thể break vòng lặp (điều này có ý nghĩa rất lớn cho việc tối ưu tốc độ).

Ở trường hợp thứ 3: loopLodash đã hoàn toàn khắc phục nhược điểm của 2 cách trên. Không chỉ vậy nếu đem so sánh tốc độ bạn sẽ nhận được kết quả là lodash còn nhanh hơn cả loopNative. Vậy 1 công cụ tốt như vầy tại sao lại không nên sử dụng. Hơn nữa nếu trường hợp find đơn giản như này lodash còn có thể viết code ngắn gọn hơn nữa.

_.find(users, { 'age': 40});

Ví dụ trên tuy đơn giản nhưng nếu nhìn rộng ra thì nó có ý nghĩa rất lớn khi bạn build những ứng dụng angularJS ( thao tác nhiều với dữ liệu):

• với 1 lượng data lớn, việc break vòng lặp rất quan trong để tăng hiệu xuất, với angularJS lại càng quan trọng vì binding 2 chiều nên các hàm gọi lại liên tục với tần xuất khá cao sẽ cải thiện rất nhiều cho performance.

• Code trong sáng ngắn gọn, dễ maintain (ai hay fix bug chắc hieru nỗi thống khổ này :3). Chỉ với 3 hàm _.foreach, _.find, _.filter là đã đủ thuyết phục mình dùng lodash.

• Làm việc với dữ liệu thì chủ yếu là duyệt mảng. Tuy ví dụ trên ngắn nhưng ứng dụng của nó thì đến 80% số hàm mình sẽ viết.

• Còn rất nhiều hàm bổ trợ sử lí mảng hay trong lodash giúp cải thiện tốc độ và trong sạch code. Hãy sử dụng lodash và cùng mình khám phá nó nhé.

2.Prototype trong Javascript

Ở trên chúng ta đã thống nhất là việc sử dụng lodash là rất cần thiết để build 1 applicaton tương tác dữ liệu. Nhưng thử nhìn nó xem. dấu _ là cái cái j vậy. Đó là 1 Prototype được định nghĩa mới để lưu trữ các hàm sử dụng trong lodash nhằm tránh bị conflict với bất kì methods nào lỡ như chẳng may có bị trùng tên. Để tạo ra 1 propotype trong javascript ta sử dụng cú pháp sau:

 function _() {
    this.find = function() {}
    this.filter = function() {}
    this.foreAch = function() {}
}

var "_" = new "_"();

Prototype là cách cơ bản mà các thư viện như jquery, angularjs, hay lodash được tạo ra và được đóng gói. Bản thân mình khi viết code cũng luôn cố gắng để gom các hàm vào các prototype các datatype có sẵn vì mình cho rằng đây là cách tốt để ruby và javascript tương đồng hơn. Ruby sử dụng hàm ntn thì mình cũng viết hàm tương tự và đưa vào propotype. Hay nhìn rộng ra là viết ra 1 thư viện mới :3> Đó là quan điểm for coding style của mình trong thời gian gần đây. Hy vọng sẽ nhận được góp ý từ mọi người và tìm được những người bạn có cùng suy nghĩ