js 常用的設計模式

大吉祥發表於2018-07-10

單例模式

在當前作用域中,例項只初始化一次(例如:在工作專案中下訂單跳轉到收銀臺頁面,通過建立form表單提交) form 只建立一次, 多次使用就夠了
function createForm(){
    return document.createElement('form');
};
var formDom = (function(){
    var obj;
    return function(){
        if(!obj){
            obj = createForm();
        }
        return obj;
    }
})();
var a =formDom();
var b =formDom();
var c =formDom();
複製程式碼

策略模式

用過配置的方法可以讓實現不同的方法, 方法與方法之間耦合度比低, 可以用來解決程式碼中多個 if else if,等問題(例如: 在專案用時間問題, 後臺返回一個時間戳, 但是我們在頁面中顯示的可能是yyyy-mm-dd hh:mm:ss, 也可以能是 MM月DD日, 也可能是hh:mm)
function analysisTimeStamp(timeStamp){
  var date = new Date(timeStamp);
  var Y = date.getFullYear();
  var M = date.getMonth() + 1;
  var D = date.getDate();
  var H = date.getHours();
  var m = date.getMinutes();
  var s = date.getSeconds();
  return {Y:Y,M:M,D:D,H:H,m:m,s:s};  
};
var timeObj = {
    'yyyy-mm-dd hh:mm:ss': function(date){
        return date.Y + '-' + date.M + '-' + date.D + ' ' + date.H + ':' + date.m + ':' + date.s;
       },
    'MMDD': function(date){
        return date.M + '月' + date.D + '日';
       },
    'hh:mm': function(date){
        return date.H + ':' + date.m;
       },
};
function formatTime(timeStamp, format){
    return timeObj[format](analysisTimeStamp(timeStamp));
}
var time = formatTime(new Date().getTime(), 'yyyy-mm-dd hh:mm:ss')
複製程式碼

代理模式

當函式不適合直接訪問另外一個函式可以用代理模式(在專案中,廣告推薦位的資料一般都比較固定, 如果每次訪問這個頁面,每次都請求的話, 效能太低了, 考慮請求一次, 資料本地儲存(設定一個快取機制, 比如30分鐘清本地快取一次),再次請求時,先判斷本地有沒有,本地有用本地資料, 本地沒有請求伺服器)
function ajax(){ return {a:1} };  //模式請求伺服器資料
function  proxyAjax(){
    var dataString =localStorage.getItem('data');
    var data = JSON.parse(dataString);
    if(!data){
        data =ajax();
        localStorage.setItem('data', JSON.stringify(data));
    }
    return data;
};
proxyAjax();
proxyAjax();
proxyAjax();
複製程式碼
常用的還有享元模式, 職責鏈模式, 介面卡模式, 釋出訂閱模式,
下次更新
用的比較少: 狀態模式, 中介者模式, 裝飾者模式, 命令模式, 組合模式, 模板方法模式,

相關文章