Chém Gió Về JavaScript Design Pattern Phần 2

https://codelearn.io/sharing/chem-gio-ve-javascript-design-pattern-phan-2

Chém Gió Về JavaScript Design Pattern Phần 2

"Đối với lập trình viên frontend mà nói, 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 đó lập trình viên cần phải nắm được design pattern trong JavaScript"

Tiếp tục chủ đề chém gió về JavaScript Design Pattern. Bài viết này sẽ giới thiệu đến các bạn một số design pattern thông dụng được viết bằng ngôn ngữ JavaScript.

Factory pattern

Mục đích của pattern này là tạo các object

• Thực hiện các thao tác lặp lại khi tạo các đối tượng tương tự nhau

• Cung cấp các phương thức để tạo object mà không cần biết kiểu tạo thời điểm biên dịch

Hãy xem ví dụ sau

• Constructor CarMaker

• Car Maker có static method factory() để tạo các car objects

• Constructor đặc biệt như CarMaker.Compact, CarMaker.SUV, and CarMaker.Convertible kế thừa CarMaker. Tất cả constructor trên được định nghĩa như static – properties

Bạn sẽ implement như sau

var corolla = CarMaker.factory('Compact');

var solstice = CarMaker.factory('Convertible');

var cherokee = CarMaker.factory('SUV');

corolla.drive(); // "Vroom, I have 4 doors"

solstice.drive(); // "Vroom, I have 2 doors"

cherokee.drive(); // "Vroom, I have 17 doors"

Trong đoạn code trên, đây là phần cần chú ý nhất

var corolla = CarMaker.factory('Compact');

Bạn chỉ cần truyền tham số vào method factory, CarMaker sẽ trả về object tương ứng. Như vậy bạn không cần phải dùng từ khóa new để tạo object, chỉ cần dùng method để tạo object dựa vào tham số truyền vào

Dưới đây là toàn bộ source code đầy đủ

// parent typeuctor

function CarMaker() {}

// a method of the parent

CarMaker.prototype.drive = function () {

 return "Vroom, I have " + this.doors + " doors";

};

// the static factory method

CarMaker.factory = function (type) {

 var newcar;

 // error if the typeuctor doesn't exist

 if (typeof CarMaker[type] !== "function") {

   throw {

     name: "Error",

     message: type + " doesn't exist"

   };

 }

 // at this point the typeuctor is known to exist

 // let's have it inherit the parent but only once

 if (typeof CarMaker[type].prototype.drive !== "function") {

   CarMaker[type].prototype = new CarMaker();

 }

 // create a new instance

 newcar = new CarMaker[type]();

 // optionally call some methods and then return...

 return newcar;

};

// define specific car makers

CarMaker.Compact = function () {

 this.doors = 4;

};

CarMaker.Convertible = function () {

 this.doors = 2;

};

CarMaker.SUV = function () {

 this.doors = 24;

};

Built-in Object Factory

JavaScript cung cấp built-in object là Object() constructor. Object này có behavior tương tự như factory, do nó cho phép tạo ra các object khác nhau dựa trên tham số đầu vào.

Ví dụ nếu bạn truyền tham số đầu vào là string, Object() sẽ tạo ra string object, truyền vào là số thì tạo ra object kiểu số.

Ví dụ

var obj = new Object(),

 numberObj = new Object(1),

 stringObj = Object('1'),

 boolObj = Object(true);

// test

obj.constructor === Object; // true

numberObj.constructor === Number; // true

stringObj.constructor === String; // true

boolObj.constructor === Boolean; // true

Iterator

Trong pattern này, bạn có một object chứa data có cấu trúc phức tạp, bạn muốn truy cập vào thuộc tính của object này một cách dễ dàng. Người dùng object không cần biết cấu trúc của object, họ chỉ cần làm việc với các thuộc tính riêng lẻ

Trong mô hình này, bạn cần phát triển một method next(),gọi hàm này để lấy phần tử tiếp theo

var element;

while (element = agg.next()) {

 // do something with the element ...

 console.log(element);

}

Implement iterator pattern như sau

var agg = (function () {

 var index = 0,

   data = [1, 2, 3, 4, 5],

   length = data.length;

 return {

   next: function () {

     var element;

     if (!this.hasNext()) {

       return null;

     }

     element = data[index];

     index = index + 1;

     return element;



   },

   hasNext: function () {

     return index < length;

   }

 };

}());

Để dễ dàng truy cập data, bạn có thể implement thêm một số method sau

rewind() : reset pointer trở về đầu

current(): trả về phần tử hiện tại

var agg = (function () {

 // [snip...]

 return {

   // [snip...]

   rewind: function () {

     index = 0;

   },

   current: function () {

     return data[index];

   }

 };

}());

Tạm kết

Cùng với kiến thức về Creational, Constructor, Singleton và The module pattern, hôm nay mình đã giới thiệu tới anh em về Factory pattern và Iteractor - những pattern phổ biến nhất trong JS. Còn rất nhiều pattern nữa được mình sẽ giới thiệu tiếp, các bạn đón đọc phần sau nha.