Javascript的设计模式,在平时我们接触的很多代码里已经包含了一些设计模式的实现,在这里做个概念性介绍。

Javascript几种常见设计模式

1、单例模式

单例就是保证一个类只有一个实例，实现的方法一般是先判断实例存在与否，如果存在直接返回，如果不存在就创建了再返回，这就确保了一个类只有一个实例对象。

eg：点击注册按钮，弹出一个填写注册信息的遮罩层。

var createMask = function(){
   return document,body.appendChild(  document.createElement(div)  );
}
$( 'button' ).click( function(){ 
   Var mask  = createMask(); 
   mask.show(); 
})

代码问题：每次调用createMask都会创建一个新的div, 虽然可以在隐藏遮罩层的把它remove掉. 但显然这样做不合理.
如果可以借助一个变量. 来判断是否已经创建过div呢?

var mask;
var createMask = function(){
  if ( mask ) return mask;
	else{
	  mask = document,body.appendChild(  document.createElement(div)  );
	  return mask;	 
  } 
}

代码问题：函数体内改变了外界变量mask的引用，createMask是个不安全的函数。

var createMask = function(){
  var mask;
  return function(){
      return mask || ( mask = document.body.appendChild( document.createElement('div') ) )
  }
}()

解决：用了个简单的闭包把变量mask包起来, 至少对于createMask函数来讲, 它是封闭的.

2、工厂模式

封装一个函数来实现创建类的实例（对象），在函数内部创建一个对象并返回该对象。

function createPerson(name, age) {
    var obj = {};
    obj.name = name;
    obj.age = age;
    obj.writeJs = function () {
        console.log(this.name + 'write js');
    }
    return obj;
}

var p1 = createPerson('mengzhe' , 26);
p1.writeJs();

var p2 = createPerson('iceman' , 25);
p2.writeJs();

3、构造函数模式

直接将属性和方法赋给了this对象，不需要创建对象和返回，缺点：每个方法都在实例上创建一遍。

function CreateJsPerson(name, age) {
    this.name = name;
    this.age = age;
    this.writeJs = function () {
        console.log(this.name + 'write js');
    }
    // 浏览器再把创建的实例默认的进行返回
}
var p1 = new CreateJsPerson('iceman' , 25);
p1.writeJs();
var p2 = new CreateJsPerson('mengzhe' , 26);
p2.writeJs();

构造函数与普通函数的区别

构造函数模式和普通函数的模式的区别：
  • 执行的时候
    • 普通函数执行：CreateJsPerson()
    • 构造函数执行：new CreateJsPerson()，通过new执行后，CreateJsPerson就是一个类了，而函数的返回值就是CreateJsPerson这个类的一个实例。
  • 在函数代码执行的时候
    • 相同：都是形成一个私有的作用域，然后经历：形参赋值 –> 预解释 –> 代码从上到下执行（类和普通的函数一样执行，它也有普通函数的一面）。
    • 不同：① 在构造函数的代码执行之前，不用自己再手动的创建对象，浏览器会默认的创建一个对象数据类型的值（这个对象类型的值其实就是当前类的一个实例）；② 接下来代码从上到下执行，以当前实例为执行的主体（this代表的就是当前的实例），然后分别的把属性名和属性值赋值给当前的实例；③ 最后，浏览器会默认的把创建的实例返回。 ​

构造函数的this指向：指向当前类的实例

4、原型模式

使用原型对象来实现创建，好处是可以让所有对象实例共享它所包含的属性和方法。

原型对象是什么？

js所有的对象都有一个原型属性，指向原型对象。

原型链

实例与原型对象之间存在的一个链接。

下面我们用原型来实例对象

function Person(){
  
}
Person.prototype.name = 'sss';
Person.prototype.age = 26;
Person.prototype.sayName = function(){
  console.log(this.name);
}
var person1 = new Person();
person1.sayName();

5、观察者模式

我们平时接触的dom事件基本都是观察者模式。

div.onclick  =  function click (){
   alert ( ''click' )
}

只要订阅了div的click事件. 当点击div的时候, function click就会被触发.