Method Chaining trong JavaScript là gì
Method Chaining là một pattern phổ biến trong JavaScript khá quen thuộc với Javascript Programer. Bài viết này mình xin giải thích ngắn gọn về Method Chaining trong JavaScript là gì. Đưa ra một số ví dụ về cách jQuery sử dụng Method Chaining và cách implementing Method Chaining trong ...
Method Chaining là một pattern phổ biến trong JavaScript khá quen thuộc với Javascript Programer. Bài viết này mình xin giải thích ngắn gọn về Method Chaining trong JavaScript là gì. Đưa ra một số ví dụ về cách jQuery sử dụng Method Chaining và cách implementing Method Chaining trong Javascript.
Xem thêm jQuery là gì.
OK! Lest’go!
Method Chaining trong JavaScript là gì?
Đơn giản thì Method Chainning là một kỹ thuật được sử dụng để viết code một cách ngắn gọn và đơn giản hơn trong việc gọi các hàm liên tiếp trên cùng một đối tượng, nó sẽ gọi một chuỗi các hàm trong một câu lệnh duy nhất.
Đây là một ví dụ về cách bạn sử dụng method chaining trong jQuery.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// Không sử dung METHOD CHAINING var $div = $('#my-div'); $div.css('background', 'blue'); $div.height(100); $div.fadeIn(200); // Sử dụng METHOD CHAINING $('#my-div').css('background', 'blue').height(100).fadeIn(200); // hoặc đẹp hơn sẽ là: $('#my-div') .css('background', 'blue') .height(100) .fadeIn(200); |
Như bạn có thể thấy, sử dụng Method Chainning có thể làm cho code gọn gàng hơn khá nhiều, tuy nhiên một số lập rình viên có thể sẽ không thích phong cách “chuỗi” của Method Chainning này.
Tổng quan về Method Chaining
Để dễ hình dung chúng ta sẽ định nghĩa một lớp Kitten với một vài phương thức để gọi như sau:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
// define the class var Kitten = function() { this.name = 'Garfield'; this.color = 'brown'; this.gender = 'male'; }; Kitten.prototype.setName = function(name) { this.name = name; }; Kitten.prototype.setColor = function(color) { this.color = color; }; Kitten.prototype.setGender = function(gender) { this.gender = gender; }; Kitten.prototype.save = function() { console.log( 'saving ' + this.name + ', the ' + this.color + ' ' + this.gender + ' kitten...' ); // save to database here... }; |
Bây giờ, hãy khởi tạo một đối tượng Kitten và gọi các phương thức của nó.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
var bob = new Kitten(); bob.setName('Bob'); bob.setColor('black'); bob.setGender('male'); bob.save(); // OUTPUT: // > saving Bob, the black male kitten... |
Bạn có thấy có một sự lặp tại ở đây không, bản thân mình thích cách code đơn giản hơn và Method Chainning chính là giải pháp.
Bạn có thấy có một sự lặp lại ở đây không? Method Chainning sẽ là hoàn hảo cho việc giải quết vấn đề lặp lại ở đây như sau:
|
1 2 3 4 5 |
var bob = new Kitten(); bob.setName('Bob').setColor('black'); |
Nhưng điều này sẽ không hoạt động. Đây là lý do tại sao:
|
1 2 3 4 |
// ERROR: // > Uncaught TypeError: Cannot call method 'setColor' of undefined |
Để hiểu rõ hơn tại sao điều này không hoạt động, chúng tôi sẽ sắp xếp lại mã ở trên một chút.
|
1 2 3 4 5 6 7 8 9 |
var bob = new Kitten(); var tmp = bob.setName('Bob'); tmp.setColor('black'); // ERROR: // > Uncaught TypeError: Cannot call method 'setColor' of undefined |
Điều này trả về cùng một lỗi. Điều này là do hàm setName() không trả về một giá trị nào, do đó tmp sẽ được gán cho undefined. Cách điển hình để kích hoạt Method Chainning là trả về đối tượng hiện tại ở cuối mỗi hàm.
Implementing Method Chaining
Hãy viết lại lớp Kitten như sau:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
// define the class var Kitten = function() { this.name = 'Garfield'; this.color = 'brown'; this.gender = 'male'; }; Kitten.prototype.setName = function(name) { this.name = name; return this; }; Kitten.prototype.setColor = function(color) { this.color = color; return this; }; Kitten.prototype.setGender = function(gender) { this.gender = gender; return this; }; Kitten.prototype.save = function() { console.log( 'saving ' + this.name + ', the ' + this.color + ' ' + this.gender + ' kitten...' ); // save to database here... return this; }; |
Bây giờ, nếu chúng ta chạy lại đoạn mã trước, biến tmp sẽ tham chiếu cùng một đối tượng với biến bob:
|
1 2 3 4 5 6 7 8 9 10 11 |
var bob = new Kitten(); var tmp = bob.setName('Bob'); tmp.setColor('black'); console.log(tmp === bob); // OUTPUT: // > true |
Để rút ngắn code hơn nữa, chúng ta thậm chí không cần tạo biến bob.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
// WITHOUT CHAINING var bob = new Kitten(); bob.setName('Bob'); bob.setColor('black'); bob.setGender('male'); bob.save(); // OUTPUT: // > saving Bob, the black male kitten... // WITH CHAINING new Kitten() .setName('Bob') .setColor('black') .setGender('male') .save(); // OUTPUT: // > saving Bob, the black male kitten... |
Bằng cách sử dụng phương thức Method Chainning, ta sẽ có clean code, sạch và dễ hiểu hơn rất nhiều.
Kết luận
Đó chính là nó! Phương pháp Method Chainning có thể là một kỹ thuật rất hữu ích cần có trong các programming tools của bạn.
Dưới đây là một cách tuyệt vời để tự động hóa việc bổ sung return this;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
function chainify(obj) { Object.keys(obj).forEach(function(key){ var member = obj[key]; if(typeof member === "function" && !/breturnb/.test(member)){ obj[key] = function() { member.apply(this, arguments); return this; } } }); } // define the class var Kitten = function() { this.name = 'Garfield'; this.color = 'brown'; this.gender = 'male'; }; Kitten.prototype.setName = function(name) { this.name = name; }; Kitten.prototype.setColor = function(color) { this.color = color; }; Kitten.prototype.setGender = function(gender) { this.gender = gender; }; Kitten.prototype.save = function() { console.log( 'saving ' + this.name + ', the ' + this.color + ' ' + this.gender + ' kitten...' ); // save to database here... }; Kitten.prototype.sayHi = function(name) { return "Hi " + name + "! My name is " + this.name + "."; }; chainify(Kitten.prototype); var bob = new Kitten() .setName('Bob') .setColor('black') .setGender('male') .save(); console.log(bob.sayHi("Tom")); |
Đừng bỏ lỡ những bài viết hay:
- Javascript Prototype là gì?
- Scope và Closure trong Javascript
- Copying Objects trong JavaScrip
Xem thêm việc làm JavaScript Developer trên TopDev
TopDev via viblo.asia
- 1 Những lập trình viên phiên bản X-men: Những code project “dị” nhất trên GitHub
- 2 11 nguyên tắc code để cải thiện code của bạn
- 3 SASS và SCSS – Bạn chọn gì? (Phần 1)
- 4 Thế nào là dân IT?
- 5 So sánh Java và Node.js: Cuộc chiến không hồi kết?
- 6 Tăng hiệu suất cho ASP.NET: 9 loại công cụ bạn cần biết!
- 7 Kĩ năng “back of the envelope” của các developer thần thánh
- 8 Xuất hiện lỗ hổng an ninh mạng Wi-Fi toàn cầu đã bị hack
- 9 CGAffineTransform trong IOS
- 10 Mô tả công việc – Vị trí lập trình Front-end