【JS】常用設計模式

VishKozus 發布于2019-08-26 11:45 / 3351人閱讀

摘要：常用設計模式大型單頁應用里，復雜度上升到一定程度時，沒有適當的設計模式進行降耦，后續的開發也難以下手。而設計模式正是為了降耦而存在。特點滿足單一職責原則使用代理模式，不在構造函數中判斷是否已經創建過該單例滿足惰性原則應用彈出登陸窗口。

JS常用設計模式

大型單頁應用里，復雜度上升到一定程度時，沒有適當的設計模式進行降耦，后續的開發也難以下手。
而設計模式正是為了降耦而存在。

單例模式

單例模式的核心是確保只有一個實例，并且提供全局訪問。

特點

滿足“單一職責原則” ：使用代理模式，不在構造函數中判斷是否已經創建過該單例;

滿足惰性原則

應用

彈出登陸窗口。

實例

 var getSingle = function (fn) {
    var res;
    return function() {
        return res || (res = fn.apply(this, arguments));
    }
}

var createPopup() {
    var div = document.createElement("div");
    div.innerHTML = "Login window";
    div.style.display = "none"; 
    document.body.appendChild(div);
    return div;
}

var createLoginPopup = getSingle(createPopup);            
//create popup div 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("紅色");

GPU云服務器云服務器 php常用設計模式 JS常用特效 js 常用數據類型 js常用數據類型

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/107494.html

JS / CSS 常用實戰代碼片段

摘要：常用模式片段之摘要第一次看到這個字眼是在中，即。之后也見到一些別人的代碼里有，它和頁面的有什么關系，以及和有何淵源。以前都見過這些詞，但都似懂非懂，今天查了些資料收集了些代碼，做個完整的理解。 CSS篇常用模式片段之CSS布局篇 http://jsorz.cn/blog/2016/08/code-patterns-of-css-layout.html 摘要：position 拉伸性質...

sutaking 2019-08-30 13:14 評論0 收藏0
JS / CSS 常用實戰代碼片段

摘要：常用模式片段之摘要第一次看到這個字眼是在中，即。之后也見到一些別人的代碼里有，它和頁面的有什么關系，以及和有何淵源。以前都見過這些詞，但都似懂非懂，今天查了些資料收集了些代碼，做個完整的理解。 CSS篇常用模式片段之CSS布局篇 http://jsorz.cn/blog/2016/08/code-patterns-of-css-layout.html 摘要：position 拉伸性質...

stackfing 2019-08-22 10:50 評論0 收藏0
大前端2018現在上車還還得及么

摘要：面向對象三大特征繼承性多態性封裝性接口。第五階段封裝一個屬于自己的框架框架封裝基礎事件流冒泡捕獲事件對象事件框架選擇框架。核心模塊和對象全局對象，，，事件驅動，事件發射器加密解密，路徑操作，序列化和反序列化文件流操作服務端與客戶端。第一階段： HTML+CSS:HTML進階、CSS進階、div+css布局、HTML+css整站開發、 JavaScript基礎：Js基礎教程、js內置對...

stormgens 2019-08-01 18:25 評論0 收藏0
大前端2018現在上車還還得及么

摘要：面向對象三大特征繼承性多態性封裝性接口。第五階段封裝一個屬于自己的框架框架封裝基礎事件流冒泡捕獲事件對象事件框架選擇框架。核心模塊和對象全局對象，，，事件驅動，事件發射器加密解密，路徑操作，序列化和反序列化文件流操作服務端與客戶端。第一階段： HTML+CSS:HTML進階、CSS進階、div+css布局、HTML+css整站開發、 JavaScript基礎：Js基礎教程、js內置對...

mylxsw 2019-08-22 13:49 評論0 收藏0
three.js中兩種常用的攝像機模式

摘要：中常用的有兩種，透視投影相機與正交投影相機。這里的投影是指將三維空間中的物體坐標投影到二維平面上。正交投影是只考慮所有點的坐標，每一個二維空間中的點都是與軸平行的直線在觀察平面上的投影。所看到的物體大小不會受到距離遠近的影響。 three.js中常用的camera有兩種，透視投影相機（PerspectiveCamera）與正交投影相機（OrthographicCamera）。這里的投影...

fish 2019-08-26 11:37 評論0 收藏0