［修練之路-JS］1. JS and jQuery’s Singleton Design Pattern
參考文件: How To Develop a jQuery Plugin , Terse JavaScript 101 – part 1 , Essential JavaScript And jQuery Design Patterns – A Free New Book
// 一. 進階變數宣告
var prpt0 = (function(){})(); // undefined
var prpt1 = (function(){return undefined;})(); // undefined
var prpt2 = (function(){return; })(); // undefined
// 二. 將已存在之物件當作參數建構變數
var prpt3 = (function(){return window; })(window); // 回傳參數
var prpt4 = (function(){return window.alert; })(window); // 回傳參數之方法(closure: prpt4('1234'); )
var prpt5 = (function(){return window.screenTop; })(window); // 回傳參數之屬性
var prpt6 = (function(window){return window;})(); // undefined
prpt6 = (function(w){return w;})(window); // 回傳參數, 換掉參數名(簡化)
var prpt7 = (function(){return window;})(); // 回傳已存在的global物件
// 三. 內部變數
var prpt8 = (function(){
var inner = 'inner';
return inner;
})(); // 回傳內部參數
var prpt9 = (function(){
var inner = function(){
return { type:"inner", exec: function(){ document.write('exec'); } };
};
return inner; // function
})();
// 回傳內部物件宣告, 使用如: new prpt9().inner; prpt9().inner; , 不可用 prpt9.inner
// 四. Static object
var prpt10 = (function(){
var inner = function(){
return { type:"inner", exec: function(){ document.write('exec'); } };
};
return inner(); // function
})(); // 直接建立內部物件, 使用如: prpt10.type; 不可用prpt10().type
var prpt11 = (function(){
return { type:"inner", exec: function(){ document.write('exec'); } }; // function
})(); // 直接建立內部物件, 使用如: prpt10.type; 不可用 prpt11().type
// 五. Singletone pattern
var CardFactory = (function(){
//1. 類別宣告
var CardFactory = function(){
return { produce: function(name){
return { name: name, expire: new Date() }
}
}};
//2. 宣告單一物件
var _Instance;
//3. 實作static物件, 初始化單一物件
var _Factory = {
getInstance: function(){
if(_Instance==null)
_Instance = new CardFactory();
return _Instance;
}
};
//4. 回傳單一物件
return _Factory;
})();
var card = CardFactory.getInstance().produce('Hector');
document.write(card.name + " / " + card.expire);
// 六. jQuery plug-in
(function($){
//2. 宣告單一物件(必須放在這裡成為jQuery的global變數)
var _Instance;
$.fn.Singleton = function(){
//1. 類別宣告
var CardFactory = function(){
return { produce: function(name){
return { name: name, expire: new Date() }
}
}};
//3. 實作static物件, 初始化單一物件
var _Factory = {
getInstance: function(){
if(_Instance==null)
_Instance = new CardFactory();
return _Instance;
}
};
//4. 回傳單一物件
return _Factory;
}
})(jQuery); // $().Singleton.getInstance().produce(‘abcd’);