javascript设计模式

Posted 2020-10-13 45°微笑看世界

一、单例模式：

 单例模式是javascript中最常用的模式，它是将自己的代码放在一个命名空间下，这样的好处是可以减少使用全局变量，在多人协同开发时也能避免命名冲突等问题。这样的好处是维护起来非常方便，如下例：

1 var foo = {
2     name: ‘dog‘,
3     action: function() {
4         console.log(this.name);
5     }
6 };
7 foo.action();//调用

或者

1 var dog = function() {
2     this.name = ‘dog‘;
3     this.action = function() {
4         return console.log(this.name);
5     };
6     action();
7 };
8 dog(); //调用

二、工厂模式：

工厂模式就是将对象的方法创建交给外部对象，这样的好处就是解决了对象之间的相互影响、即耦合，避免了使用new来实例化对象，有助于创建模块化的代码，维护起来也方便。 工厂模式分为简单工厂模式和抽象工厂模式。

简单工厂模式：

1 var m = {};
2 m.action = function() {
3     console.log(‘dog‘);
4 };
5 var demo = function() {
6     m.action();
7 };
8 demo()//调用

抽象工厂模式：

先设计一个抽象类，这个类不能被实例化，只能用来派生子类，最后通过对子类的扩展实现工厂方法。如下：

 1 var f = function() {};
 2 f.prototype = {
 3     c: function() {
 4         throw new Error(‘can\‘t use this method‘);//如果调用此方法会报错，因为它是用来派生子类不能实例化
 5     }
 6 };
 7 var e = function() {
 8     f.call(this);
 9 }
10 e.prototype = new f();
11 e.prototype.constructor = e;
12 e.prototype.c = function() {
13     console.log(‘this method is redefine‘);
14 }
15 // 调用
16 var demo = new e();
17 demo.c();

三、门面模式：

门面模式常常是开发人员最亲密的朋友，他几乎是所有javascript库的核心原则。门面模式有两个作用：一是简化类的接口；二是消除类与使用它的客户代码之间的耦合。示例如下：

 1 function a() {
 2 
 3 }
 4 function b() {
 5 
 6 }
 7 function sum() {
 8     a();
 9     b();
10 }

四、适配器模式：

适配器模式可以用来在现有接口和不兼容的类之间进行适配。从表面上看，适配器模式很像门面模式，都对别的对象进行包装并改变其呈现的接口。二者的区别在与它们如何改变接口，门面元素展现的是一个简化的接口，它并不提供额外的选择，而且有时为了方便完成常见任务它还会做出一些假定。而适配器则要把一个接口转换为另一个接口，它并不会过滤某些能力，也不会简化接口。

 1 var str = {
 2     a: ‘a‘,
 3     b: ‘b‘,
 4     c: ‘c‘
 5 };
 6 function i(s1,s2,s3) {
 7     console.log(s1 + ‘,‘ + s2 + ‘,‘ + s3);
 8 }
 9 function demo(o) {
10     i(o.a,o.b,o.c);
11 }

五、装饰者模式：

装饰者模式可用来透明地把对象包装在具有同样接口的另一个对象之中，装饰者可以用于为对象添加功能，可以用来代替大量子类。装饰者模式和组合模式有很多共同点，它们都与所包装的对象实现统一的接口并且会把任何方法条用传递给这些对象。可是组合模式用于把众多子对象组织为一个整体，而装饰者模式用于在不修改现有对象或从派生子类的前提下为其添加方法。如下：

1 var m = {};
2 m.child = {};
3 m.child.one = function() {};
4 m.child.two = function() {};

六、观察者模式：

观察者模式是一种管理人与其任务之间的关系的得力工具。观察者模式中存在两个角色:观察者和被观察者。这种模式的好处是你可以对程序中某个对象的状态进行观察，并且在其发生改变时能够得到通知。

 1 var f1 =function(){
 2   //code
 3 }
 4 var f2 =function(){
 5 　//code
 6 }
 7 addEvent(element,‘click‘,f1)；
 8 addEvent(element,‘click‘,f2)
 9 
10 element.onclick = f1;
11 element.onclick = f2;

七、桥接模式：

桥接模式是将抽象与实现隔离，一遍二者独立变化。在设计一个javascript API的时候，它可以用来弱化类和对象之间的耦合。它还可以用来把多个类联接在一起。例如：

 1 var class1 = function(a,b,c) {
 2     this.a = a;
 3     this.b = b;
 4     this.c = c;
 5 };
 6 var class2 = function(d) {
 7     this.d = d;
 8 };
 9 var demo = function(a,b,c,d) {
10     this.one = new Class1(a,b,c);
11     this.two = new Class2(d);
12 };