前端常用設計模式

像流水線作業，產出一樣的產品。傳參進去，操作的具體邏輯封裝在乙個方法裡，最終返回乙個物件。

將new操作單獨封裝,遇到new時，就要考慮是否用工廠模式

這個creator就是乙個工廠，裡面有create函式，工廠通過create函式建立product。這樣通過create已經把真正的建構函式封裝起來，外部只需要知道create能生成乙個例項就行。

class product 
init() 
fn1() 
fn2() 
}class creator 
}let creator = new creator();
let p = creator.create('sunny');
p.init();
p.fn1();
p.fn2();

單例模式也叫單體模式，是乙個將一批屬性和方法組織在一起的物件，如果他可以被例項化，那麼只能被例項化一次。

建構函式每次建立物件只有乙個被建立。（乙個類只有乙個例項，並提供乙個全域性訪問點，類似與vuex全域性狀態管理，提供乙個介面訪問）

建立單例模式的方法

1. 宣告乙個變數，賦值乙個自執行函式

var getinstance = (function()
var instance = null;
return function(_name)
return instance;
}})();
var p1 = getinstance("張三");
var p2 = getinstance("李四");
console.log(p1); //person 
console.log(p2); //person

2. prototype原型

var singleton = function(_name)
this.name = _name;
return this.instance;
}var p1 = new singleton("張三");
var p2 = new singleton("李四");
console.log(p1); //person 
console.log(p2); //person

3. 靜態變數

var singleton = function(_name);
}return singleton.instance;
}var p1 = new singleton("張三");
var p2 = new singleton("李四");
console.log(p1); //
console.log(p2); //

單例模式的使用場景有: 彈出視窗

相當於乙個轉換介面：解決兩個軟體實體間的介面不相容問題。

var map1 = 
}var map2 = 
}var readmap = function (map) 
}// 介面卡
var map2adapter = 
}readmap(map1);
readmap(map2adapter);

**是乙個物件，它可以用來控制對本體物件的訪問，而本體物件則負責執行所分派的那個物件的函式或者類，簡單的來講本體物件注重的去執行頁面上的**，**則控制本地物件何時被例項化，何時被使用。

在有耦合關係的兩個物件之間建立**物件，**物件起到類似中介的作用，比如校驗，合併。

(在事件(事件委託)的時候其實就是用了**模式，委託父元素進行監聽，這樣增加元素/刪除元素就不用去修改監聽的**)

經典事例一：屌絲想送女神花，條件：女神心情多變，心情好時會說thanks，不好會說getout.所以屌絲找到乙個中間者監聽女生的心情，心情好時通知屌絲送花

var diaosi = 
}var girl = ,
changemood: function () , 300)
}}var olddriver = 
}, 300)
}}girl.changemood();
olddriver.watch();

事例二：預載入和懶載入**。控制的懶載入和預載入的發生時間和過程

懶載入：針對的是全載入，把頁面中的全載入完，增加網路請求的負擔，造成請求支援浪費，這個時候就可以用到懶載入，什麼時候需要什麼時候再載入

預載入：針對的是完全onload了資源以後，才往dom中插入(對應的是直接設定src和直接插入dom)。容易造成載入過程**現從上往下慢慢加一段段出現，加重了瀏覽器的渲染負擔。

var insertimg = (function () 
var img = new image();
this.setsrc = function (src) 
result = this;
}})();
document.onscroll = function () 
}var proxy = (function () 
myimg.src = src;
}})();

事例三：快取**

觀察者模式又叫發布-訂閱模式，它定義了物件間的一種一對多的關係，讓多個觀察者物件同時監聽某乙個主題物件，當乙個物件發生改變時，所有依賴於它的物件都將得到通知。

策略模式，又叫演算法簇cù模式。策略模式指的是定義一些列的演算法，把他們乙個個封裝起來，目的就是將演算法的使用與演算法的實現分離開來。

根據情況進行不一樣的方案。比如想去旅遊，確定自己多少錢才能決定乘坐什麼交通工具

var strategies = ,
poor: function () ,
middle: function () 
}var hosshoulsgo = function (money) 
console.log(hosshoulsgo('rich'));

提供一種按順序訪問的方法。比如foreach，通過順序訪問的模式。

var myforeach = function (arr, callback) 
}myforeach([1, 2, 3], (item, n) => );
function a(callback) 
function b() 
a(b);

前端常用設計模式

炒個冷飯，設計模式前端常用設計模式我們在面試的時候很多情況都需要手寫所以我們寫都時候盡量用es6，且裡面要用設計模式。這樣評分可以達到優秀，如果只是手寫實現出功能那麼我們只能是及格主要面試和別人競爭游泳健身了解一下 github 哈哈哈哈哈?你走到一棟大樓面前哇！鋼筋，水泥，木板。面向過...

前端常用設計模式

前端常見的設計模式主要有以下幾種 1.單例模式 2.工廠模式 3.策略模式 4.模式 5.觀察者模式 6.模組模式 7.建構函式模式 8.混合模式這種設計模式的思想是確保乙個類只有唯一例項，一般用於全域性快取，比如全域性window，唯一登入浮窗等。採用閉包的方式實現如下 var single f...

前端開發設計模式

高階高階前端開發之路之設計模式，衝！記錄一些學的七七八八的程式設計思維，設計模式 vue router物件是放在vue的原型鏈上的只有get沒有set vue.prototype.router router object.defineproperty vue.prototype router 總結...

前端常用設計模式

前端常用設計模式

前端常用設計模式

前端開發設計模式

相關推薦