欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

javascript常见设计模式

程序员文章站 2022-08-21 18:03:46
javascript常见设计模式 设计模式(design pattern)是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。 使用设计模式是为了可重用代码、让...

javascript常见设计模式

设计模式(design pattern)是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。

使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性。 毫无疑问,设计模式于己于他人于都是多赢的;设计模式使代码编制真正工程化;设计模式是软件工程的基石脉络,如同大厦的结构一样。

单例模式

单例模式定义了一个对象的创建过程,此对象只有一个单独的实例,并提供一个访问它的全局访问点。也可以说单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象。

var single = (function(){

var unique;

function getinstance(){

// 如果该实例存在,则直接返回,否则就对其实例化

if( unique === undefined ){

unique = new construct();

}

return unique;

}

function construct(){

// ... 生成单例的构造函数的代码

}

return {

getinstance : getinstance

}

})();

上面的代码中,unique便是返回对象的引用,而 getinstance便是静态方法获得实例。construct 便是创建实例的构造函数。

可以通过 single.getinstance() 来获取到单例,并且每次调用均获取到同一个单例。这就是 单例模式 所实现的效果。

使用场景:

单例模式是一种常用的模式,有一些对象我们往往只需要一个,比如全局缓存、的window对象。在js开发中,单例模式的用途同样非常广泛。试想一下,当我们

单击登录按钮的时候,页面中会出现一个登录框,而这个浮窗是唯一的,无论单击多少次登录按钮,这个浮窗只会被创建一次。因此这个登录浮窗就适合用单例模式。

总结一下它的使用场景:

1、可以用它来划分命名空间

2、借助单例模式,可以把代码组织的更为一致,方便与维护

观察者模式(发布订阅模式)

定义对象间的一种一对多的依赖关系,以便当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并自动刷新,也被称为是发布订阅模式。

它需要一种高级的抽象策略,以便订阅者能够彼此独立地发生改变,而发行方能够接受任何有消费意向的订阅者。

var pubsub = {}; // 定义发布者

(function (q) {

var list = [], //回调函数存放的数组,也就是记录有多少人订阅了我们东西

subuid = -1;

// 发布消息,遍历订阅者

q.publish = function (type, content) {

// type 为文章类型,content为文章内容

// 如果没有人订阅,直接返回

if (!list[type]) {

return false;

}

settimeout(function () {

var subscribers = list[type],

len = subscribers subscribers.length : 0;

while (len--) {

// 将内容注入到订阅者那里

subscribers[len].func(type, content);

}

}, 0);

return true;

};

//订阅方法,由订阅者来执行

q.subscribe = function (type, func) {

// 如果之前没有订阅过

if (!list[type]) {

list[type] = [];

}

// token相当于订阅者的id,这样的话如果退订,我们就可以针对它来知道是谁退订了。

var token = (++subuid).tostring();

// 每订阅一个,就把它存入到我们的数组中去

list[type].push({

token: token,

func: func

});

return token;

};

//退订方法

q.unsubscribe = function (token) {

for (var m in list) {

if (list[m]) {

for (var i = 0, j = list[m].length; i < j; i++) {

if (list[m][i].token === token) {

list[m].splice(i, 1);

return token;

}

}

}

}

return false;

};

} (pubsub));

//将订阅赋值给一个变量,以便退订

var girla = pubsub.subscribe('js类的文章', function (type, content) {

console.log('girla订阅的'+type + ": 内容内容为:" + content);

});

var girlb = pubsub.subscribe('js类的文章', function (type, content) {

console.log('girlb订阅的'+type + ": 内容内容为:" + content);

});

var girlc = pubsub.subscribe('js类的文章', function (type, content) {

console.log('girlc订阅的'+type + ": 内容内容为:" + content);

});

//发布通知

pubsub.publish('js类的文章', '关于js的内容');

// 输出:

// girlc订阅的js类的文章: 内容内容为:关于js的内容

// test3.html:78 girlb订阅的js类的文章: 内容内容为:关于js的内容

// test3.html:75 girla订阅的js类的文章: 内容内容为:关于js的内容

//girla退订了关于js类的文章

settimeout(function () {

pubsub.unsubscribe(girla);

}, 0);

//再发布一次,验证一下是否还能够输出信息

pubsub.publish('js类的文章', "关于js的第二篇文章");

// 输出:

// girlb订阅的js类的文章: 内容内容为:关于js的第二篇文章

// girlc订阅的js类的文章: 内容内容为:关于js的第二篇文章

应用场景:

这个模式要先说应用场景,比较好理解。

打一个离我们比较近的一个场景,博客园里面有一个订阅的按钮(貌似有bug),比如小a,小b,小c都订阅了我的博客,当我的博客一有更新时,就会统一发布邮件给他们这三个人,就会通知这些订阅者

发布订阅模式的流程如下:

1. 确定谁是发布者(比如我的博客)。

2.然后给发布者添加一个缓存列表,用于存放回调函数来通知订阅者。

3. 发布消息,发布者需要遍历这个缓存列表,依次触发里面存放的订阅者回调函数。

4、退订(比如不想再接收到这些订阅的信息了,就可以取消掉)

策略模式

策略模式指的是定义一系列的算法,把它们一个个封装起来,目的是将算法的使用和实现分离开。说白了就是以前要很多判断的写法,现在把判断里面的内容抽离开来,变成一个个小的个体。

例子:代码情景为超市促销,vip为5折,老客户3折,普通顾客没折,计算最后需要支付的金额。

没有使用策略模式:

function price(persontype, price) {

//vip 5 折

if (persontype == 'vip') {

return price * 0.5;

}

else if (persontype == 'old'){ //老客户 3 折

return price * 0.3;

} else {

return price; //其他都全价

}

}

使用策略模式:

// 对于vip客户

function vipprice() {

this.discount = 0.5;

}

vipprice.prototype.getprice = function(price) {

return price * this.discount;

}

// 对于老客户

function oldprice() {

this.discount = 0.3;

}

oldprice.prototype.getprice = function(price) {

return price * this.discount;

}

// 对于普通客户

function price() {

this.discount = 1;

}

price.prototype.getprice = function(price) {

return price ;

}

// 上下文,对于客户端的使用

function context() {

this.name = '';

this.strategy = null;

this.price = 0;

}

context.prototype.set = function(name, strategy, price) {

this.name = name;

this.strategy = strategy;

this.price = price;

}

context.prototype.getresult = function() {

console.log(this.name + ' 的结账价为: ' + this.strategy.getprice(this.price));

}

var context = new context();

var vip = new vipprice();

context.set ('vip客户', vip, 200);

context.getresult(); // vip客户 的结账价为: 100

var old = new oldprice();

context.set ('老客户', old, 200);

context.getresult(); // 老客户 的结账价为: 60

var price = new price();

context.set ('普通客户', price, 200);

context.getresult(); // 普通客户 的结账价为: 200

通过策略模式,使得客户的折扣与算法解藕,又使得修改跟扩展能独立的进行,不影到客户端或其他算法的使用;

应用场景:

策略模式最实用的场合就是某个“类”中包含有大量的条件性语句,比如if...else 或者 switch。每一个条件分支都会引起该“类”的特定行为以不同的方式作出改变。以其维

护一段庞大的条件性语句,不如将每一个行为划分为多个独立的对象。每一个对象被称为一个策略。设置多个这种策略对象,可以改进我们的代码质量,也更好的进行单元测试。

代理模式

代理模式的中文含义就是帮别人做事,javascript的解释为:把对一个对象的访问, 交给另一个代理对象来操作

比如我们公司的补打卡是最后是要交给大boss来审批的,但是公司那么多人,每天都那么多补打卡,那大boss岂不是被这些琐事累死。所以大boss下会有一个助理,来帮

忙做这个审批,最后再将每个月的补打卡统一交给大boss看看就行。

// 补打卡事件

var fillout = function (latedate) {

this.latedate = latedate;

};

// 这是bigboss

var bigboss = function (fillout) {

this.state = function (issuccess) {

console.log("忘记打卡的日期为:" + fillout.latedate + ", 补打卡状态:" + issuccess);

}

};

// 助理代理大boss 完成补打卡审批

var proxyassis = function (fillout) {

this.state = function (issuccess) {

(new bigboss(fillout)).state(issuccess); // 替bigboss审批

}

};

// 调用方法:

var proxyassis = new proxyassis(new fillout("2016-9-11"));

proxyassis.state("补打卡成功");

// 忘记打卡的日期为:2016-9-11, 补打卡状态:补打卡成功

应用场景:

比如图片的懒加载,我们就可以运用这种技术。在图片未加载完成之前,给个loading图片,加载完成后再替换成实体路径。

var myimage = (function(){

var imgnode = document.createelement("img");

document.body.appendchild(imgnode);

return function(src){

imgnode.src = src;

}

})();

// 代理模式

var proxyimage = (function(){

var img = new image();

img.onload = function(){

myimage(this.src);

};

return function(src) {

// 占位图片loading

myimage("http://img.lanrentuku.com/img/allimg/1212/5-121204193q9-50.gif");

img.src = src;

}

})();

// 调用方式

proxyimage("https://img.alicdn.com/tps/i4/tb1b_nelxxxxxcoxfxxc8pz9xxx-130-200.png"); // 真实要展示的图片

当然,这种懒加载方法不用代理模式也是可以实现的,只是用代理模式。我们可以让myimage 只做一件事,只负责将实际图片加入到页面中,而loading图片交给proxyimage去做。从而降低代码的耦合度。因为当我不想用loading的时候,可以直接调用myimage 方法。也即是说假如我门不需要代理对象的话,直接可以换成本体对象调用该方法即可。

外观模式

外观模式是很常见。其实它就是通过编写一个单独的函数,来简化对一个或多个更大型的,可能更为复杂的函数的访问。也就是说可以视外观模式为一种简化某些内容的手段。

说白了,外观模式就是一个函数,封装了复杂的操作。

比如一个跨浏览器的ajax调用

function ajaxcall(type,url,callback,data){

// 根据当前浏览器获取对ajax连接对象的引用

var xhr=(function(){

try {

// 所有现代浏览器所使用的标准方法

return new xmlhttprequest();

}catch(e){}

// 较老版本的internet explorer兼容

try{

return new activexobject("msxml2.xmlhttp.6.0");

}catch(e){}

try{

return new activexobject("msxml2.xmlhttp.3.0");

}catch(e){}

try{

return new activexobject("microsoft.xmlhttp");

}catch(e){}

// 如果没能找到相关的ajax连接对象,则跑出一个错误。

throw new error("ajax not support in this browser.")

}()),

state_loaded=4,

status_ok=200;

// 一但从服务器收到表示成功的相应消息,则执行所给定的回调方法

xhr.onreadystatechange=function{

if(xhr.readystate !==state_loaded){

return;

}

if(xhr.state==status_ok){

callback(xhr.responsetext);

}

}

// 使用浏览器的ajax连接对象来向所给定的url发出相关的调用

xhr.open(type.touppercase(),url);

xhr.send(data);

}

// 使用方法

ajaxcall("get","/user/12345",function(rs){

alert('收到的数据为:'+rs);

})

应用场景:

当需要通过一个单独的函数或方法来访问一系列的函数或方法调用,以简化代码库的其余内容,使得代码更容易跟踪管理或者更好的维护时,可以使用外观模式。其实我们平时代码中这种模式应该是用的比较多的。