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.
Mục đích của pattern này là tạo các object
Hãy xem ví dụ sau- 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
- 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
0 Nhận xét