常用的JavaScript設計模式

mcterry 發布于2019-08-23 14:47 / 549人閱讀

摘要：即如果代碼已經走過第一個分支邏輯，那么接下來，就沒必要再讓代碼去執行各個分支的判斷，直接執行第一個邏輯即可示例代碼

1，委托模式

通過將多個對象的統一格式請求委托給同一個對象來減少事件處理或者內存開銷

示例代碼：

/*一般方式*/







let change = function(){
    //do sth here
}

/*委托方式*/







let change = function(event){
    //根據event判斷如果是LI標簽，則統一觸發事件
    //do sth here
}

備注：該代碼不僅可以節省事件內存開銷，也使動態的插入或者移除HTML元素時，無需重新綁定事件

2，觀察者模式

通過定義一種對象和觀察者之間的依賴關系，解決對象和觀察者之間的強耦合

3，工廠模式

通過分類抽象出對象工廠，然后方便的生產出各種標準一致的‘產品’

示例代碼：

//對象工廠
let person = {
    age:"",
    sex:"",
    name:"",
    income:"",
    address:"",
    idCard:""
}
/*工廠方法*/
let createStudent = function(options){
    return Object.assign(person,options)
}

/*生產學生*/
let studentA = createStudent({
    grade:"大四",
    schoolName:"中國科技大學"
})

//組裝工廠
let jsonToQueryString = function(json){
        return "?" +
            Object.keys(json).map(function (key) {
                return encodeURIComponent(key) + "=" +
                    encodeURIComponent(json[key]);
            }).join("&");
}

let getStr = jsonToQueryString({
    a:"1",
    b:"2",
    c:{
        c1:"",
        c2:""
    }
})

//拆卸工廠等：略

備注：該模式可以節省重復勞動，節省代碼量，使代碼美觀易讀易維護，
并讓各部分的邏輯參數等符合同樣的標準，避免人工手寫復制粘貼或者拼接失誤等

4，享元模式

通過共享細粒度的數據而節省內存和開銷

5，單例模式

//單例模式
let global = {};
let singleModel = function(obj){
    //do sth
    global = Object.assign(obj,global);
    return global
}

new singleModel({
    doSthA:function(){console.log("a")},
    doSthB:function(){console.log("b")}
});
    
new singleModel({
    doSthB:function(){console.log("b1")},
    doSthC:function(){console.log("c")}
})
//使用
global....

是指只允許實例化一次的對象類，避免方法和命名沖突等

6，鏈式調用

鏈式模式的核心思想就是在調用完對象的方法以后可以回當前對象（this）,然后繼續調用下去

//示例代碼：
let jQuery = {
    foundId:function(){console.log(1);return this},
    addArr:function(){console.log(2);return this},
    delArr:function(){console.log(3);return this},
}
//執行
jQuery.foundId().addArr().delArr()

備注：這只是一種最簡單的調用方式，僅供參考，舉一反三

7，策略模式

策略模式的 目的是使算法脫離于模塊而獨立管理，解除代碼之間的耦合影響

8，狀態模式

解決程序中繁雜的分支判斷語句問題，避免大量多層的if else 嵌套

//示例代碼：

//一般寫法：
if(a){}
else if(b){}
else if(c){}
else if(d){}

//狀態管理例子
let obj = {
    a:function(){
    
    },
    b:function(){
    
    }
    //...
}

//使用
let type = a || b || c || d;
obj[type]();

obj[a]();

狀態管理模式可以較方便的解除各狀態之間的耦合，
使本來只能從上到下的上下文執行方式，
變成可以分為多個分支的執行方式，而且更方便復用。

9，橋接模式

通過將實現層（如綁定的事件）與抽象層（如頁面UI邏輯）解除耦合，使兩部分可以獨立

10，模版模式（某些框架的組件）

通過定義一套操作算法骨架，使得子類可以不改變父類的算法結構的同時，重新定義算法中的某些實現步驟

11，適配器模式

將一個類（對象）的接口（方法或屬性）轉化為另外一個接口或對象，用來避免過多的硬編碼和兼容

//示例代碼：
let schoolA  = {
    name:"帝國學院",
    studentList:[
    {name:"秦始皇",no:"000000",code:"555555555"},
    {name:"劉邦",no:"000001",code:"555555554"}
    ]
}

let schoolB = {
    name:"謀士學院",
    studentList:{
    {studentName:"黃石公",sno:"000007",grade:"111111111"},
    {studentName:"張良",sno:"000006",grade:"111111112"}
    }
}

//適配器
let reflectStu = function(student){
    let newStu = {}
    if(name==="帝國學院"){
        newStu["sName"]=student.name;
        newStu["idNo"]=student.no;
        newStu["score"]=student.code;
    }else{
        newStu["sName"]=student.studentName;
        newStu["idNo"]=student.sno;
        newStu["score"]=student.grade;
    }
    return newStu;
}

//使用
...

12，節流模式

通過對重復執行的的業務邏輯進行控制，在執行完最后一次符合某條件的操作后，取消操作，并清理內存

//示例代碼：
let timer= 0;
let _st = setInterval(function(){
    //do sth repeated
    let pass = checkPass();
    if(timer>=1000 || pass){
        clearInterval(_st)
    }
},1000);

let checkPass = function(){
    //TODO sth
    return true || false
};

應該是最簡單的節流模式了orz

13，惰性模式

減少每次代碼執行時的重復性的分支判斷，通過對對象重新定義來屏蔽原對象中的分支判斷。
即如果代碼已經走過第一個分支邏輯，那么接下來，就沒必要再讓代碼去執行各個分支的判斷，
直接執行第一個邏輯即可

//示例代碼：
let AddEvent = function(dom, type, fn){
  if(dom.addEventListener){
    AddEvent = function(dom, type, fn){
        dom.addEventListener(type, fn, false);
      }
  }else if(dom.attachEvent){
    AddEvent = function(dom, type, fn){
        dom.attachEvent("on"+type, fn);
      }
  }else{
    AddEvent = function(dom, type, fn){
        dom["on"+type] = fn;
      }
  }
 AddEvent(dom, type, fn);
};

云服務器 GPU云服務器 php常用設計模式 javascript常用代碼 javascript常用事件 javascript常用框架

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

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

+【13】JavaScript設計原則&&常用設計模式

摘要：打個比方源碼使用了模式，解決了問題，但是，在選擇模式解決問題的背后又有多少思考 showImg(https://segmentfault.com/img/bVbupTE?w=480&h=260); 【前言】最近閱讀了《JavaScript設計模式與開發實踐》，收獲頗豐，于是想寫一點總結及感想 showImg(https://segmentfault.com/img/bVbupUE?w...

opengps 2019-08-23 18:29 評論0 收藏0
JavaScript常用設計模式

摘要：原文鏈接常用設計模式設計模式設計模式是一種在長時間的經驗與錯誤中總結出來可服用的解決方案。用來模擬接口的相關操作我很帥通過適配器函數來調用目的我很帥學習資料聽飛狐聊設計模式系列設計模式湯姆大叔原文鏈接： JavaScript常用設計模式設計模式設計模式是一種在長時間的經驗與錯誤中總結出來可服用的解決方案。設計模式主要分為3類：創建型設計模式：專注于處理對象的創建 Const...

RyanHoo 2019-08-22 18:24 評論0 收藏0
JavaScript常用的設計模式

摘要：前言設計模式幾十種，閱讀了設計模式與開發實踐這本書后，個人感覺就是圍繞對象來設計的，發現日常寫代碼能用上的并不多，下面是常用的幾種設計模式。前端服務端可以參考我的另一個倉庫地址，一個簡單的實時聊天參考來自設計模式與開發實踐讀書筆記前言設計模式幾十種，閱讀了《JavaScript設計模式與開發實踐》這本書后，個人感覺js就是圍繞對象來設計的，發現日常寫代碼能用上的并不多，下面是常用的...

mengbo 2019-08-21 17:14 評論0 收藏0
學Java編程需要注意的地方

摘要：學編程真的不是一件容易的事不管你多喜歡或是多會編程，在學習和解決問題上總會碰到障礙。熟練掌握核心內容，特別是和多線程初步具備面向對象設計和編程的能力掌握基本的優化策略。　　學Java編程真的不是一件容易的事,不管你多喜歡或是多會Java編程，在學習和解決問題上總會碰到障礙。工作的時間越久就越能明白這個道理。不過這倒是一個讓人進步的機會，因為你要一直不斷的學習才能很好的解決你面前的難題...

leanxi 2019-08-14 17:48 評論0 收藏0
ES6-7

摘要：的翻譯文檔由的維護很多人說，阮老師已經有一本關于的書了入門，覺得看看這本書就足夠了。前端的異步解決方案之和異步編程模式在前端開發過程中，顯得越來越重要。為了讓編程更美好，我們就需要引入來降低異步編程的復雜性。 JavaScript Promise 迷你書（中文版）超詳細介紹promise的gitbook，看完再不會promise...... 本書的目的是以目前還在制定中的ECMASc...

mudiyouyou 2019-08-21 18:40 評論0 收藏0
個人分享--web前端學習資源分享

摘要：前言月份開始出沒社區，現在差不多月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了一般來說，差不多到了轉正的時候，會進行總結或者分享會議那么今天我就把看過的一些學習資源主要是博客，博文推薦分享給大家。 1.前言 6月份開始出沒社區，現在差不多9月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了！一般來說，差不多到了轉正的時候，會進行總結或者分享會議！那么今天我就...

sherlock221 2019-08-20 18:59 評論0 收藏0