http://www.giaosucan.com/2018/01/chem-gio-ve-javascript-design-pattern.html
Last updated
GIAOSUCAN THÁNG 1 16, 2018Cốt đơ phải biết Java (Script)Nếu mà không biết thì tra Gúc GồMấy bài trước toàn nói đến những công nghệ cao siêu như Blockchain, Microservice, Machine Learning … nên bài này mình sẽ viết về chủ đề coding để các bạn sinh viên có thể tìm hiểu. Đúng như lời bác Obama căn dặn, Coder phải biết ngôn ngữ JavaScript. Đặc biệt là lập trình viên frontend. Tuy nhiên nếu chỉ biết code đúng cú pháp, chạy vài ứng dụng web đơn giản thì chưa đủ. Với sự phát triển của vòng đời sản phẩm, coder cần phải tính đến viết code sao cho tiện cho việc maintain cũng như mở rộng sau này. Do đó cần phải nắm được design pattern trong JavaScript.Design pattern là những mẫu hình thiết kế đã được kiểm nghiệm và có thể reuse cho nhiều ứng dụng khác nhau. Bài này sẽ giới thiệu một vài design pattern cơ bản sử dụng ngôn ngữ JavaScript
Pattern này chuyên dùng để khởi tạo Object. Trong JavaScript có nhiều cách khác nhau để tạo objectVí dụ để tạo object Idol thì làm 1 trong 3 cách như sauvar idol = {}; // orvar idol = Object.create(null); // orvar idol = new Object(); Code trên tạo object Idol nhưng là object empty. Nhưng idol nào thì cũng phải có thuộc tính như chân, tay, mông, ngựcDưới đây là 3 cách để tạo thuộc tính cho idol. Chẳng hạn cần tạo thuộc tính chân cho idol, value là chân dài// 1. Dot syntaxidol.leg = 'long leg'; // Write propertiesvar leg = idol.leg; // Access properties // 2. Square bracket syntaxidol['leg'] = 'long leg'; // Write propertiesvar key = idol['leg']; // Access properties // 3. Object.definePropertyObject.defineProperty(idol, "leg", { value: "long leg", writable: true, enumerable: true, configurable: true});
Khái niệm constructor thì khá quen thuộc với các bạn coder rồi. Chuyên dụng để tạo một object cụ thể nào đó. Ví dụ idol là object chung chung, nhưng cụ thể idol thì có Ngọc Trinh, Kỳ Hân, Hoàng Thùy Linh. Đã là Idol thì đều có thuộc tính chân nhưng e Ngọc Trinh thì chân trắng, em Kỳ Hân thì chân dài, em Hoàng Thùy Linh là chân to.Mặc dù JavaScript không có khái niệm về class như Java (trừ TypeScript, một dạng mở rộng của JavaScript) nhưng nó vẫn hỗ trợ hàm constructorfunction Idol(name, leg, chest) { this.name = name; this.leg = leg; this.chest = chest; this.toString = function () { return this.name + " has " + this.leg + " and" + this.chest; };} var ngocTrinh = new Idol("Ngoc Trinh", "dài", "lép");var thuyTop = new Idol("Thuy Top", "to", "khủng"); Nhìn code trên thì có 2 object được tạo theo pattern là ngocTrinh chân dài ngực lép với thuyTop chân to ngực khủngFunction trong JavaScript còn có kiểu thuộc tính gọi là prototype. Protoype tạm hiểu là cha của một object. Cha của Idol là Idol.protypefunction Idol(name, leg, chest) { this.name = name; this.leg = leg; this.chest = chest;} Idol.prototype.toString = function () { return this.name + " has " + this.leg + " and" + this.chest;}; var ngocTrinh = new Idol("Ngoc Trinh", "dài", "lép");var thuyTop = new Idol("Thuy Top", "to", "khủng"); console.log(ngocTrinh.toString());
Đây là pattern kinh điển của giới code đạo. Giống như kiểu võ công nhập môn của coder, bất kì ai cũng phải nắm được. Mình sẽ không giải thích kĩ mà chỉ mô tả dùng pattern này trong JavaScript thế nàoMặc dù cách code pattern trong JavaScript khá dị so với ngôn ngữ Java thông thường nhưng về tư tưởng là giống nhauvar KieuPhongSingleton = (function () { var instantiated; function init() { // KieuPhongSingleton here return { thiTrienVoCong: function (chieuthuc) { console.log('Thi trien vo cong ' + chieuthuc); } }; } return { getInstance: function () { if (!instantiated) { instantiated = init(); } return instantiated; } };})(); // calling public methods is then as easy as:KieuPhongSingleton.getInstance().thiTrienVoCong('Hàng Long Thập Bát Chưởng'); Ở ví dụ trên instance KieuPhong được tạo ra là duy nhất và thực hiện method thiTrienVoCong Hàng Long Thập Bát Chưởng. Pattern tránh tạo ra quá nhiều object không cần thiết gây lãng phí bộ nhớ
Đối với app lớn nhiều chức năng thì việc code theo module là điều tối quan trọng. Module pattern này dựa vào khái niệm là Object Literals. Cái này dịch ra tiếng Việt hiểu chết liền nên mình để nguyên tiếng Anh. Đại loại là một object nhưng được viết theo cặp Key/ValueVí dụvar myObjectLiteral = { variableKey: variableValue, functionKey: function () { // ... }}; Bằng cách sử dụng kiểu viết này, bạn có thể định nghĩa một module phức tạp với đầy đủ thuộc tính, behaviorVí dụ bạn cần phát triển một module coder có các thuộc tính như đầu to, mắt cận, có behavior như đạo code, quay tay…var coder = { head: 'đầu to', // a very basic method daoCode: function (website) { console.log('Copy paste from ' + website); }, // output a value based on current configuration quayTay: function (times) { console.log('Chuyên quay tay vào lúc ' + times); }}; coder.daoCode('google'); // I can haz functionalitycoder.quayTay('12 đêm'); // outputs enabled Như code trên thì có thể thấy được là ở module pattern, bạn không phải tạo object bằng từ khóa new như các pattern trênNgoài ra còn có thể định nghĩa kiểu privacy giống như public hay private trong Javavar testModule = (function () { var counter = 0; return { incrementCounter: function () { return counter++; }, resetCounter: function () { console.log('counter value prior to reset:' + counter); counter = 0; } };})();// testtestModule.incrementCounter();testModule.resetCounter(); Trong ví dụ trên thì counter là một biến private còn incrementCounter và resetCounter là public, testModule chỉ có thể truy cập vào public method còn private thì không.Tóm lại nói về Design Pattern thì chỉ gói gọn trong 2 câu đốiDesign Pattern nhiều như cát ngoài sa mạcKiến thức JavaScript lắm tựa nước ở biển khơiPattern trong JavaScript còn rất nhiều trong khuôn khổ 1 bài viết sẽ không thể nói hết. Các bạn có thể tìm kiếm ví dụ thêm trên Google.
