Chém gió về JavaScript Design Pattern - Part 2

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

http://www.giaosucan.com/

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];

    }

  };
}());

Còn rất nhiều pattern nữa, đón đọc phần sau nha