js經常使用的設計模式 (本身整理筆記)

 

①： 簡單的工廠模式（SportsFactory就是基類）
//工廠不僅是能夠返回一個對象
var SportsFactory=function (name) {
　　switch (name){
　　　　case 'NBA':
　　　　return new Basketball()
　　case 'wordCup':
　　　　return new Football()
　　　　case 'FrenchOpen':
　　return new Tennis()
 }
}

function Basketball() {}
function Football() {}
function Tennis() {}

 

 

②：建造者模式 （將創造出來的三個實例就聯繫起來了）

function Person(name, work) {
　　var _person = new Human();
　　_person.name = new Named(name);
　　_person.work = new Work(work);
　　return _person
}

而後再去寫構造函數，函數裏有什麼需求再本身去添加。
function Human(param) {}
function Named(param) {}
function Work (param) {}

 

 

③：原型模式（經常使用）

//定義基類
function baseClass(imgArr,container) {
　　this.imgArr = imgArr;
　　this.container = container;
}
baseClass.prototype={
createImage:function () {}
}

//組合繼承基類
function SlideLoopImg(imgArr,container) {
　　baseClass.call(this,imgArr,container)
}
SlideLoopImg.prototype = new baseClass()
SlideLoopImg.prototype.changeImage=function () {}

//再組合繼承基類
function ......

 

④：單例模式（只容許實例化一次的對象類。單例模式經常使用來定義命名空間）
對象裏面有不少對象
var A = {
UTIL: {
　　util_methond1: function () {},
　　util_methond2: function () {}
},
Tool: {
　　tool_method1: function () {},
　　tool_method2: function () {}
},
Ajax: {
　　get: function () {},
　　post: function () {}
}
}

//調用 A.UTIL.util_methond1()

 

⑧：狀態類方法 不用寫好多if else 很差維護 if(action=='state1')..
var ResultState = function () {
　　var states = {
　　　　state0: function () {
　　　　console.log('第一種對象');
　　},
　　state1: function () {
　　　　console.log('第二種對象');
　　},
　　state2: function () {
　　　　console.log('第三種對象');
　　},
　　state3: function () {
　　　　console.log('第四種對象');
　　}
}

function show(result) {
　　//獲取某一種狀態並執行其對應的方法
　　states[result] && states[result]()
}
return {
　　showKey:show
}
}();

ResultState.showKey('state1')

 

⑨：策略模式：！！ 將一組算法封裝起來，封裝的算法就有獨立性。

var InputStrategy = function () {
var strategy = {
　　//是不是數字
　　number: function (value) {
　　return /^[0-9]+(\.[0-9]+)?$/.test(value) ? '' : '請輸入數字'
},
phone: function (value) {
　　return /^\d{3}\-\{8}$|^\d{4}\-\d{7}$/.test(value) ? '' : '請輸入正確格式'
}
}

return {
　　check: function (type, value) {
　　//去除首尾空白符
　　value = value.replace(/^\s+|\s+$/g, '');
　　return strategy[type] ? strategy[type](value) : '沒有該類型請添加'
},
addStrategy: function (type, fn) {
　　strategy[type] = fn;
}
}
}();

$('button').click(function () {
$('div').html(InputStrategy.check('number',$('input').val()))
})

 

⑩ 命令模式：

//命令模式用於解耦，使用canvas的時候輝導演內置方法，這在多人開發過程當中的耦合度比較高，一我的把內置方法改了，誰也別用了
//命令模式是講執行的命令封裝，解決命令的發起者與命令的執行者之間的耦合

var CanvasCommand = (function () {
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d');
var Action = {
　　fillStyle: function (c) {
　　ctx.fillStyle = c;
},
fillRect: function (x, y, width, height) {
　　ctx.fillRect(x, y, width, height)
}
//...等等方法
}

return {
　　excute: function (msg) {
　　　　if (!msg) {
　　　　return;
　　};
　　if (msg.length) {
　　　　//遍歷多個命令
　　 for (var i = 0, len = msg.length; i < len; i++) {
　　　　arguments.callee(msg[i])
　　}
　　} else {
　　　　msg.param=Object.prototype.toString.call(msg.param)==='[object Array]'?msg.param:[msg.param];
　　　　//Action內部調用的方法可能引用this,爲保證做用域中this指向正確，因此傳入Action
　　　　Action[msg.command].apply(Action,msg.param)
　　}
　}
}
})()

 

十一： 委託模式

// 完整的事件流是從事件捕獲開始，到觸發該事件，再到事件冒泡三個階段。因此子元素有多個的時候能夠將事件委託給更高層面的父元素去綁定執行。
父元素再冒泡到子元素，就不用捕獲了。

//委託能夠對將來元素添加事件，是由於在將來此元素是存在的，當將來發生冒泡的時候次元素的存在的，因此事件可以觸發
$('ul').on('click','li',function (e) {
console.log(e.target);
})

 

十三：節流模式
/*
* 函數節流方法
* @param Function fn 延時調用函數
* @param Number delay 延遲多長時間
* @param Number atleast 至少多長時間觸發一次
* @return Function 延遲執行的方法
*/
var throttle = function (fn, delay, atleast) {
var timer = null;
var previous = null;
return function () {
// new Date().valueOf()和 +new Date()是同樣的
var now = new Date().valueOf();
//第一次賦值
if ( !previous ) previous = now;

//過了atleast這個時間再點擊固然從新計算 if ( now - previous > atleast ) { fn(); // 重置上一次開始時間爲本次結束時間 previous = now; // 屢次點擊清除計時器 } else { clearTimeout(timer); timer = setTimeout(function() { fn(); }, delay); } } }; function testFn() { console.log(3); } $('div').on('click',throttle(testFn, 600,1000))