微信h5棋牌平臺搭建JS常用設計模式
微信h5棋牌平臺搭建（h5.ttkmwl.com QQ:2172243813）JS常用設計模式
大型單頁應用裏，復雜度上升到一定程度時，沒有適當的設計模式進行降耦，後續的開發也難以下手。
而設計模式正是為了降耦而存在。
單例模式
單例模式的核心是確保只有一個實例，並且提供全局訪問。
特點
滿足“單一職責原則” ： 使用代理模式，不在構造函數中判斷是否已經創建過該單例;
滿足惰性原則
應用
彈出登陸窗口。
實例
var getSingle = function (fn) { var res; return function() { return res || (res = fn.apply(this, arguments)); } } var createPopup() { var p = document.createElement(‘p‘); p.innerHTML = "Login window"; p.style.display = "none"; document.body.appendChild(p); return p; } var createLoginPopup = getSingle(createPopup); //create popup p here by using a given function, 滿足兩個原則 document.getElementById("loginBt").onclick = function() { var popup = createLoginPopup(); pop.style.display = "block"; }
構造函數模式
/**
* 構造一個動物的函數
*/
function Animal(name, color){
this.name = name;
this.color = color;
this.getName = function(){
return this.name;
}
}
// 實例一個對象
var cat = new Animal(‘貓‘, ‘白色‘);
console.log( cat.getName() );
原型模式
function Person(){
}
Person.prototype.name = "bill";
Person.prototype.address = "GuangZhou";
Person.sayName = function (){
alert(this.name);
}
var person1 = new Person();
var person2 = new Person();
//測試代碼
alert(person1.name); // bill
alert(person2.name); // bill
person1.sayName(); //bill
person2.sayName(); //bill
person1.name = "666";
alert(person1.name); // 666
alert(person2.name); // bill
person1.sayName(); //666
person2.sayName(); //bill
混合模式
/**
* 混合模式 = 原型模式 + 構造函數模式
*/
function Animal(name, color){
this.name = name;
this.color = color;
console.log( this.name + this.color)
}
Animal.prototype.getInfo = function(){
console.log(‘名稱：‘+ this.name);
}
function largeCat(name, color){
Animal.call(null, name, color);
this.color = color;
}
largeCat.prototype = create(Animal.prototype);
function create (parentObj){
function F(){}
F.prototype = parentObj;
return new F();
};
largeCat.prototype.getColor = function(){
return this.color;
}
var cat = new largeCat("Persian", "白色");
console.log( cat )
工廠模式
工廠：函數內部產生b對象並返回。
1.
function a(name){
var b = new object();
b.name = name;
b.say = function(){
alert(this.name);
}
return b
}
2.
function Animal(opts){
var obj = new Object();
obj.name = opts.name;
obj.color = opts.color;
obj.getInfo = function(){
return ‘名稱：‘+obj.name +‘， 顏色：‘+ obj.color;
}
return obj;
}
var cat = Animal({name: ‘波斯貓‘, color: ‘白色‘});
cat.getInfo();
簡單工廠模式
簡單工廠模式的理念就是創建對象，對不同類的實例化；只需要創建一個對象，然後通過對這個對象大量的方法和屬性，並在最終將對象返回出來
//basketball base class
var Baseketball = function(){
this.intro = ‘baseketball is hotting at unitedstates‘;
}
Baseketball.prototype = {
getMember : function(){\
console.log(‘each team needs five players‘);
},
getBallSize : function(){
console.log(‘basketball is big‘);
}
}
//football base class
var Football = function(){
this.intro = ‘football is popular at all of the world‘;
}
Football = function(){
getMember = function(){
},
getBallSize = function(){
}
}
//sport factory
var SportsFactory = function(name){
switch(name){
case ‘NBA‘:
return new Baseketball();
case ‘wordCup‘:
return new Football();
}
}
//when you want football
var football = SportsFactory(‘wordCup‘);
console.log(football);
console.log(football.intro);
football.getMember();
叠代器模式
裝飾者模式
策略模式
定義一個個可以相互替換的算法，並且把他們封裝起來。
特點
-
符合開放-封閉原則 ： 要修改使用的算法時不用深入函數內部進行修改，只需修改策略類;
-
將算法的實現與使用分離開，提高算法復用性;
-
通過組合、委托和多態避免多重條件選擇語句;
應用
動畫實現不同的緩動效果。
一般分為兩個部分：策略類於環境類。策略類用於封裝各種算法，並且負責具體的計算過程; 環境類負責接收用戶的請求，並且把請求委托給某一個策略類。因為各個策略類實現的算法和計算的結果不同，而環境類調用策略類的方法卻是相同的，這就體現了多態性。要想實現不同的算法，只需要替換環境類中的策略類即可。
在js中，我們不必構造策略類，可直接使用函數作為策略對象。
示例
var strategies = {
"s1": function() {
//algo 1
},
"s2": function() {
//algo 2
},
"s3": function() {
//algo 3
}
}
var someContext = new SomeConext();
someContext.start("s1"); //using s1 to calculate
//someContext.add("s1"); or add s1 as a rule for validation
外觀模式
也可譯為門面模式。它為子系統中的一組接口提供一個一致的界面， Facade模式定義了一個高層接口，這個接口使得這一子系統更加容易使用。引入外觀角色之後，使用者只需要直接與外觀角色交互，使用者與子系統之間的復雜關系由外觀角色來實現，從而降低了系統的耦合度。
比如在家要看電影，需要打開音響，再打開投影儀，再打開播放器等等，引入外觀角色之後，只需要調用“打開電影設備”方法就可以。外觀角色封裝了打開投影儀等操作，給使用者提供更容易使用的方法。
作用
-
簡化復雜接口
-
解耦和，屏蔽使用者對子系統的直接訪問
實例
在形式上，外觀模式在javascript中就像這樣：
function a(x){
// do something
}
function b(y){
// do something
}
function ab( x, y ){
a(x);
b(y);
}
下面的一個例子，把阻止冒泡和阻止默認事件放到了外觀角色中：
var N = window.N || {};
N.tools = {
stopPropagation : function( e ){
if( e.stopPropagation ){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
},
preventDefault : function( e ){
if( e.preventDefault ){
e.preventDefault();
}else{
e.returnValue = false;
}
},
stopEvent : function( e ){
N.tools.stopPropagation( e );
N.tools.preventDefault( e );
}
外觀模式在javascript的應用主要可以分為兩類，某塊代碼反復出現，比如函數a的調用基本都出現在函數b的調用之前，那麽可以考慮考慮將這塊代碼使用外觀角色包裝一下來優化結構。還有一種就是對於一些瀏覽器不兼容的API，放置在外觀內部進行判斷，處理這些問題最好的方式便是將跨瀏覽器差異全部集中放置到一個外觀模式實例中來提供一個對外接口。
代理模式
代理模式的定義：為其他對象提供一種代理以控制對這個對象的訪問。在某些情況下，一個對象不適合或者不能直接引用另一個對象，而代理對象可以在客戶端和目標對象之間起到中介的作用。
虛擬代理
虛擬代理是把一些開銷很大的對象，延遲到真正需要它的時候才去創建執行
圖片懶加載
//圖片加載
let imageEle = (function(){
let node = document.createElement(‘img‘);
document.body.appendChild(node);
return {
setSrc:function(src){
node.src = src;
}
}
})();
//代理對象
let proxy = (function(){
let img = new Image();
img.onload = function(){
imageEle.setSrc(this.src);
};
return {
setSrc:function(src){
img.src = src;
imageEle.setSrc(‘loading.gif‘);
}
}
})();
proxy.setSrc(‘example.png‘);
合並http請求
如果有一個功能需要頻繁進行請求操作，這樣開銷比較大，可以通過一個代理函數收集一段時間內請求數據，一次性發出
//上傳請求
let upload = function(ids){
$.ajax({
data: {
id:ids
}
})
}
//代理合並請求
let proxy = (function(){
let cache = [],
timer = null;
return function(id){
cache[cache.length] = id;
if(timer) return false;
timer = setTimeout(function(){
upload(cache.join(‘,‘));
clearTimeout(timer);
timer = null;
cache = [];
},2000);
}
})();
// 綁定點擊事件
let checkbox = document.getElementsByTagName( "input" );
for(var i= 0, c; c = checkbox[i++];){
c.onclick = function(){
if(this.checked === true){
proxy(this.id);
}
}
}
緩存代理
緩存代理可以作為一些開銷大的運算結果提供暫時的存儲，下次運算時，如果傳遞進來的參數跟之前一致，則可以直接返回前面存儲的運算結果
//計算乘積
let mult = function(){
let result = 1;
for(let i = 0,len = arguments.length;i < len;i++){
result*= arguments[i];
}
return result;
}
//緩存代理
let proxy = (function(){
let cache = {};
reutrn function(){
let args = Array.prototype.join.call(arguments,‘,‘);
if(args in cache){
return cache[args];
}
return cache[args] = mult.apply(this,arguments);
}
})();
優缺點
1.優點：代理模式能將代理對象與被調用對象分離，降低了系統的耦合度。代理模式在客戶端和目標對象之間起到一個中介作用，這樣可以起到保護目標對象的作用。代理對象也可以對目標對象調用之前進行其他操作。
2.缺點：增加了系統的復雜度
觀察者模式
模塊模式
/**
* 模塊模式 = 封裝大部分代碼，只暴露必需接口
*/
var Car = (function(){
var name = ‘法拉利‘;
function sayName(){
console.log( name );
}
function getColor(name){
console.log( name );
}
return {
name: sayName,
color: getColor
}
})();
Car.name();
Car.color(‘紅色‘);
微信h5棋牌平臺搭建JS常用設計模式