原文章链接地址:常用的前端设计模式,让你写出更优雅的代码
一、单例模式:一个类只能创建一个实例化对象,并提供一个供全局访问的接口。
function createSingle(){
var div;
return function(){
if(!div){
div = document.createElement('div');
}
return div;
}
}
document.getElementById('login').onclick = function(){
var result = createSingle();
}
点击登录,创建dom节点div,并且只创建一次。
二、策略模式:定义一系列的算法,把他们一个个封装起来,并且使他们可以相互替换。其中包括策略类和环境类,环境类接收用户的参数并将其委托给特定的策略类。
var count = {
"A": function(num){
retrun num+2;
}
"S": function(num){
retrun num-2;
}
"M": function(num){
retrun num*2;
}
"D": function(num){
retrun num/2;
}
}
var context = function(type,num){
return count[type](num);
}
三、代理模式:为一个对象提供一个代用品或占位符,以便控制对他的访问。我们常用的懒加载便是代理的一种使用。
var Seller = function(){
this.talk = function(){
console.log('那打个八折吧!');
}
}
var Buyer = function(){
this.proxy = new Proxy();
this.talk = function(){
console.log('你帮我问问对方还能不能便宜点呢?');
this.proxy.talk();
}
}
var Proxy = function(){
this.seller = new Seller();
this.talk = function(){
console.log('我问过了,人家说:');
this.seller.talk();
}
}
new Buyer().talk(); //你帮我问问对方还能不能便宜点呢? 我问过了,人家说: 那打个八折吧!
上面代码是采用代理模式来进行买方和卖方的对话。
四、装饰者模式:在不改变自身的基础上,在程序运行期间给对象动态地添加方法。
var Wear = function(){}
Wear.prototype.pants = function(){
console.log('穿上裤子啦!');
}
Wear.prototype.Tshirt = function(){
console.log('穿上T恤啦!');
}
function Decorator(wear) {
this.wear = wear;
}
Decorator.prototype.pants = function() {
this.wear.pants();
}
Decorator.prototype.Tshirt = function() {
this.wear.Tshirt();
}
var wear = new Wear();
var decorator = new Decorator(wear);
decorator.Tshirt();
decorator.pants();