## 介紹
本篇主要是介紹創建對象方面的模式的下篇,利用各種技巧可以極大地避免了錯誤或者可以編寫出非常精簡的代碼。
## 模式6:函數語法糖
函數語法糖是為一個對象快速添加方法(函數)的擴展,這個主要是利用prototype的特性,代碼比較簡單,我們先來看一下實現代碼:
~~~
if (typeof Function.prototype.method !== "function") {
Function.prototype.method = function (name, implementation) {
this.prototype[name] = implementation;
return this;
};
}
~~~
擴展對象的時候,可以這么用:
~~~
var Person = function (name) {
this.name = name;
}
.method('getName',
function () {
return this.name;
})
.method('setName', function (name) {
this.name = name;
return this;
});
~~~
這樣就給Person函數添加了getName和setName這2個方法,接下來我們來驗證一下結果:
~~~
var a = new Person('Adam');
console.log(a.getName()); // 'Adam'
console.log(a.setName('Eve').getName()); // 'Eve'
~~~
## 模式7:對象常量
對象常量是在一個對象提供set,get,ifDefined各種方法的體現,而且對于set的方法只會保留最先設置的對象,后期再設置都是無效的,已達到別人無法重載的目的。實現代碼如下:
~~~
var constant = (function () {
var constants = {},
ownProp = Object.prototype.hasOwnProperty,
// 只允許設置這三種類型的值
allowed = {
string: 1,
number: 1,
boolean: 1
},
prefix = (Math.random() + "_").slice(2);
return {
// 設置名稱為name的屬性
set: function (name, value) {
if (this.isDefined(name)) {
return false;
}
if (!ownProp.call(allowed, typeof value)) {
return false;
}
constants[prefix + name] = value;
return true;
},
// 判斷是否存在名稱為name的屬性
isDefined: function (name) {
return ownProp.call(constants, prefix + name);
},
// 獲取名稱為name的屬性
get: function (name) {
if (this.isDefined(name)) {
return constants[prefix + name];
}
return null;
}
};
} ());
~~~
驗證代碼如下:
~~~
// 檢查是否存在
console.log(constant.isDefined("maxwidth")); // false
// 定義
console.log(constant.set("maxwidth", 480)); // true
// 重新檢測
console.log(constant.isDefined("maxwidth")); // true
// 嘗試重新定義
console.log(constant.set("maxwidth", 320)); // false
// 判斷原先的定義是否還存在
console.log(constant.get("maxwidth")); // 480
~~~
## 模式8:沙盒模式
沙盒(Sandbox)模式即時為一個或多個模塊提供單獨的上下文環境,而不會影響其他模塊的上下文環境,比如有個Sandbox里有3個方法event,dom,ajax,在調用其中2個組成一個環境的話,和調用三個組成的環境完全沒有干擾。Sandbox實現代碼如下:
~~~
function Sandbox() {
// 將參數轉為數組
var args = Array.prototype.slice.call(arguments),
// 最后一個參數為callback
callback = args.pop(),
// 除最后一個參數外,其它均為要選擇的模塊
modules = (args[0] && typeof args[0] === "string") ? args : args[0],
i;
// 強制使用new操作符
if (!(this instanceof Sandbox)) {
return new Sandbox(modules, callback);
}
// 添加屬性
this.a = 1;
this.b = 2;
// 向this對象上需想添加模塊
// 如果沒有模塊或傳入的參數為 "*" ,則以為著傳入所有模塊
if (!modules || modules == '*') {
modules = [];
for (i in Sandbox.modules) {
if (Sandbox.modules.hasOwnProperty(i)) {
modules.push(i);
}
}
}
// 初始化需要的模塊
for (i = 0; i < modules.length; i += 1) {
Sandbox.modules[modules[i]](this);
}
// 調用 callback
callback(this);
}
// 默認添加原型對象
Sandbox.prototype = {
name: "My Application",
version: "1.0",
getName: function () {
return this.name;
}
};
~~~
然后我們再定義默認的初始模塊:
~~~
Sandbox.modules = {};
Sandbox.modules.dom = function (box) {
box.getElement = function () {
};
box.getStyle = function () {
};
box.foo = "bar";
};
Sandbox.modules.event = function (box) {
// access to the Sandbox prototype if needed:
// box.constructor.prototype.m = "mmm";
box.attachEvent = function () {
};
box.detachEvent = function () {
};
};
Sandbox.modules.ajax = function (box) {
box.makeRequest = function () {
};
box.getResponse = function () {
};
};
~~~
調用方式如下:
~~~
// 調用方式
Sandbox(['ajax', 'event'], function (box) {
console.log(typeof (box.foo));
// 沒有選擇dom,所以box.foo不存在
});
Sandbox('ajax', 'dom', function (box) {
console.log(typeof (box.attachEvent));
// 沒有選擇event,所以event里定義的attachEvent也不存在
});
Sandbox('*', function (box) {
console.log(box); // 上面定義的所有方法都可訪問
});
~~~
通過三個不同的調用方式,我們可以看到,三種方式的上下文環境都是不同的,第一種里沒有foo; 而第二種則沒有attachEvent,因為只加載了ajax和dom,而沒有加載event; 第三種則加載了全部。
## 模式9:靜態成員
靜態成員(Static Members)只是一個函數或對象提供的靜態屬性,可分為私有的和公有的,就像C#或Java里的public static和private static一樣。
我們先來看一下公有成員,公有成員非常簡單,我們平時聲明的方法,函數都是公有的,比如:
~~~
// 構造函數
var Gadget = function () {
};
// 公有靜態方法
Gadget.isShiny = function () {
return "you bet";
};
// 原型上添加的正常方法
Gadget.prototype.setPrice = function (price) {
this.price = price;
};
// 調用靜態方法
console.log(Gadget.isShiny()); // "you bet"
// 創建實例,然后調用方法
var iphone = new Gadget();
iphone.setPrice(500);
console.log(typeof Gadget.setPrice); // "undefined"
console.log(typeof iphone.isShiny); // "undefined"
Gadget.prototype.isShiny = Gadget.isShiny;
console.log(iphone.isShiny()); // "you bet"
~~~
而私有靜態成員,我們可以利用其閉包特性去實現,以下是兩種實現方式。
**第一種實現方式:**
~~~
var Gadget = (function () {
// 靜態變量/屬性
var counter = 0;
// 閉包返回構造函數的新實現
return function () {
console.log(counter += 1);
};
} ()); // 立即執行
var g1 = new Gadget(); // logs 1
var g2 = new Gadget(); // logs 2
var g3 = new Gadget(); // logs 3
~~~
可以看出,雖然每次都是new的對象,但數字依然是遞增的,達到了靜態成員的目的。
**第二種方式:**
~~~
var Gadget = (function () {
// 靜態變量/屬性
var counter = 0,
NewGadget;
//新構造函數實現
NewGadget = function () {
counter += 1;
};
// 授權可以訪問的方法
NewGadget.prototype.getLastId = function () {
return counter;
};
// 覆蓋構造函數
return NewGadget;
} ()); // 立即執行
var iphone = new Gadget();
iphone.getLastId(); // 1
var ipod = new Gadget();
ipod.getLastId(); // 2
var ipad = new Gadget();
ipad.getLastId(); // 3
~~~
數字也是遞增了,這是利用其內部授權方法的閉包特性實現的。
## 總結
這是對象創建模式的下篇,兩篇一起總共9種模式,是我們在日常JavaScript編程中經常使用的對象創建模式,不同的場景起到了不同的作用,希望大家根據各自的需求選擇適用的模式。
參考:http://shichuan.github.com/javascript-patterns/#object-creation-patterns
- (1)編寫高質量JavaScript代碼的基本要點
- (2)揭秘命名函數表達式
- (3)全面解析Module模式
- (4)立即調用的函數表達式
- (5)強大的原型和原型鏈
- (6)S.O.L.I.D五大原則之單一職責SRP
- (7)S.O.L.I.D五大原則之開閉原則OCP
- (8)S.O.L.I.D五大原則之里氏替換原則LSP
- (9)根本沒有“JSON對象”這回事!
- (10)JavaScript核心(晉級高手必讀篇)
- (11)執行上下文(Execution Contexts)
- (12)變量對象(Variable Object)
- (13)This? Yes, this!
- (14)作用域鏈(Scope Chain)
- (15)函數(Functions)
- (16)閉包(Closures)
- (17)面向對象編程之一般理論
- (18)面向對象編程之ECMAScript實現
- (19)求值策略
- (20)《你真懂JavaScript嗎?》答案詳解
- (21)S.O.L.I.D五大原則之接口隔離原則ISP
- (22)S.O.L.I.D五大原則之依賴倒置原則DIP
- (23)JavaScript與DOM(上)——也適用于新手
- (24)JavaScript與DOM(下)
- (25)設計模式之單例模式
- (26)設計模式之構造函數模式
- (27)設計模式之建造者模式
- (28)設計模式之工廠模式
- (29)設計模式之裝飾者模式
- (30)設計模式之外觀模式
- (31)設計模式之代理模式
- (32)設計模式之觀察者模式
- (33)設計模式之策略模式
- (34)設計模式之命令模式
- (35)設計模式之迭代器模式
- (36)設計模式之中介者模式
- (37)設計模式之享元模式
- (38)設計模式之職責鏈模式
- (39)設計模式之適配器模式
- (40)設計模式之組合模式
- (41)設計模式之模板方法
- (42)設計模式之原型模式
- (43)設計模式之狀態模式
- (44)設計模式之橋接模式
- (45)代碼復用模式(避免篇)
- (46)代碼復用模式(推薦篇)
- (47)對象創建模式(上篇)
- (48)對象創建模式(下篇)
- (49)Function模式(上篇)
- (50)Function模式(下篇)
- (結局篇)