Trước hết cũng cần phải hiểu composite là cái gì. Đại loại là cấu trúc dạng cây, ông bà , bố mẹ, đến con cháu, nhánh cuối cùng không có nhánh con thì gọi là Leaf, còn lại là Composite hếtÝ tưởng của composite là group các objects lại theo dạng cha, con như trên. Điều này cần thiết khi bạn phải xử lý 1 số lượng lớn các objects. Pattern này được thiết kế để tổ chức object và pass operation từ level cao đến level thấp hơn. Sử dụng pattern này cho phép bạn tạo object loosely coupled hơnVí dụ về pattern này, tưởng tượng bạn cần tạo 1 form nhập liệu, trong đó các input được validate và lưu trữ. Tuy nhiên tùy vào user, form này có thể thay đổi chẳng hạn user thuộc loại doanh nghiệp thì sẽ không hiển thị text box website chẳng hạn. Tức là bạn cần phải tạo ra một dynamic formRõ ràng, là không tạo form theo kiểu hardcode được, và composite pattern phát huy tác dụng của nó trong trường hợp nàyTa có thể tạo composite object như sau, top level chính là cái form của bạn Bạn sẽ tạo ra 1 form cho phép add thêm hoặc remove các field mà không cần phải viết lại codeImplement code theo class diagram như sauVí dụ class CompositeFormvar CompositeForm = function (id, method, action) { // implements Composite, FormItem this.formComponents = []; this.element = document.createElement('form'); this.element.id = id; this.element.method = method || 'POST'; this.element.action = action || '#';};CompositeForm.prototype.add = function (child) { Interface.ensureImplements(child, Composite, FormItem); this.formComponents.push(child); this.element.appendChild(child.getElement());};
CompositeForm.prototype.getChild = function (i) { return this.formComponents[i];};CompositeForm.prototype.save = function () { for (var i = 0, len = this.formComponents.length; i < len; i++) { this.formComponents[i].save(); }};CompositeForm.prototype.getElement = function () { return this.element;};
Các field của form được lưu trong 1 array formComponents nên dễ dàng thêm bớt fieldField class (leaf node) không có thuộc tính add, remove, getChild ví nó là Leaf node trong cấu trúc cây compositevar Field = function (id) { // implements Composite, FormItem this.id = id; this.element;};Field.prototype.add = function () {};Field.prototype.remove = function () {};Field.prototype.getChild = function () {};Field.prototype.save = function () { setCookie(this.id, this.getValue);};Field.prototype.getElement = function () { return this.element;};
InputField, TextAreaField, SelectField là 3 class đại diên cho 3 GUI component là Input Text. TextArea, Dropdownbox, bạn có thể add các html element vàoVí dụ InputField
var InputField = function (id, label) { // implements Composite, FormItem Field.call(this, id); this.input = document.createElement('input'); this.input.id = id; this.label = document.createElement('label'); var labelTextNode = document.createTextNode(label); this.label.appendChild(labelTextNode); this.element = document.createElement('div'); this.element.className = 'input-field'; this.element.appendChild(this.label); this.element.appendChild(this.input);};extend(InputField, Field); // Inherit from Field.InputField.prototype.getValue = function () { return this.input.value;};
Và cuối cùng bạn có thể tạo dynamic form như sauvar contactForm = new CompositeForm('contact-form', 'POST', 'contact.php');contactForm.add(new InputField('first-name', 'First Name'));contactForm.add(new InputField('last-name', 'Last Name'));contactForm.add(new InputField('address', 'Address'));contactForm.add(new InputField('city', 'City'));contactForm.add(new SelectField('state', 'State', stateArray));// var stateArray =[{'al', 'Alabama'}, ...];contactForm.add(new InputField('zip', 'Zip'));contactForm.add(new TextareaField('comments', 'Comments'));addEvent(window, 'unload', contactForm.save);
Trên đây 2 pattern khá hữu ích trong JS, bài tiếp sẽ giới thiệu nhiều pattern khác độc đáo hơn
