Chém gió về JavaScript Design Pattern - part 1

GIAOSUCAN'S BLOG - CHIA SẺ KIẾN THỨC KĨ THUẬT THEO CÁCH BÁ ĐẠO

http://www.giaosucan.com

Like fan page để đón đọc những bài viết mới nhất nhé

https://www.facebook.com/Giaosucan/

Cố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
Creational Pattern
Pattern này chuyên dùng để khởi tạo Object. Trong JavaScript có nhiều cách khác nhau để tạo object
Ví dụ để tạo object Idol thì làm 1 trong 3 cách như sau

var idol = {}; // or
var idol = Object.create(null); // or
var 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ực
Dướ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 syntax
idol.leg = 'long leg'; // Write properties
var leg = idol.leg; // Access properties

// 2. Square bracket syntax
idol['leg'] = 'long leg'; // Write properties
var key = idol['leg']; // Access properties

// 3. Object.defineProperty
Object.defineProperty(idol, "leg", {
    value: "long leg",
    writable: true,
    enumerable: true,
    configurable: true
});

Constructor Pattern
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 constructor

function 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ủng
Function 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.protype

function 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());

Singleton Pattern
Đâ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ào
Mặ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 nhau

var 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ớ
The Module Pattern
Đố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/Value
Ví 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, behavior
Ví 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 functionality
coder.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ên
Ngoài ra còn có thể định nghĩa kiểu privacy giống như public hay private trong Java

var testModule = (function () {
    var counter = 0;
    return {
        incrementCounter: function () {
            return counter++;
        },
        resetCounter: function () {
            console.log('counter value prior to reset:' + counter);
            counter = 0;
        }
    };
})();
// test
testModule.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 đối
Design Pattern nhiều như cát ngoài sa mạc
Kiến thức JavaScript lắm tựa nước ở biển khơi
Pattern 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.

Đón đọc part 2 với nhiều pattern mới