Chém gió về JavaScript Design Pattern - Part 2
Javascript
260
design pattern
23
White

Giaosucan viết ngày 15/05/2018

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

http://www.giaosucan.com/

alt text
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

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Giaosucan

39 bài viết.
336 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
50 5
Bản quyền thuộc Fsoft Potato Tech Mag Giới thiệu series chuyện về kiến trúc Microservice từ thiết kế đển implementation Giaosucan's blog: Chia sẻ...
Giaosucan viết 10 tháng trước
50 5
White
30 3
Đón đọc những bài viết đặc sắc ở blog https://giaosucan.blogspot.com Lịch sử ra đời Những người làm trong ngành tài chính ngân hàng sẽ không xa lạ...
Giaosucan viết 1 năm trước
30 3
White
25 5
Bản quyền thuộc Fsoft Potato Tech Mag Đón đọc những bài viết đặc sắc ở blog https://giaosucan.blogspot.com Năm Donal Trump lần thứ nhất, cách mạ...
Giaosucan viết hơn 1 năm trước
25 5
Bài viết liên quan
Male avatar
9 5
Facade Design Patern Facade Patern thuộc vào họ mô hình cấu trúc (structural patern). Facade patern phát biểu rằng : "just provide a unified an...
DuongVanTien viết 2 năm trước
9 5
White
49 8
Tăng sức mạnh cho javascript với lodash Lần này mình sẽ giới thiệu 1 thư viện javascript vô cùng bá đạo có tên là "lodash]1]", có thể nói nó là LI...
Huy Hoàng Phạm viết gần 3 năm trước
49 8
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
39 bài viết.
336 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!