js 常用设计模式

单例模式

单例模式解决了分组的问题，让每个对象有了自己独立的命名空间，但是不能批量生产，每一个新的对象都要重新写一份一模一样的代码。

var person = {
    name:'zhang san',
    age:25,
    sayName :function () {
        console.log(this.name);
    }
};
person.sayName();

工厂模式

把实现同一事情的相同代码，放到一个函数中，以后如果再想实现这个功能，就不需要重新编写这些代码了，只要执行当前的函数即可，
这就是函数的封装，体现了高内聚、低耦合的思想：减少页面的中的冗余代码，提高代码的重复利用率：

function xxx(name, age) {
    var obj = {};
    obj.name = name;
    obj.age = age;
    obj.sayName = function () {
        console.log(this.name);
    }
    return obj;
}

var p1 = xxx('zhang san' , 26);
p1.sayName ();

var p2 = xxx('li si' , 25);
p2.sayName ();

然而，工厂模式虽然解决了创建多个相似对象的问题，但是没有解决对象的识别问题，即无法知道一个对象的类型。

随着 JavaScript 的发展，又出现了一种新的模式。

构造函数模式

Script 中的构造函数可以用来创建特定类型的对象。像 Object 和 Array 这样的原生构造函数，在运行时会自动在执行环境中调用。

创建一个新对象；
将构造函数的作用域赋值给新对象（指向 this）；
执行构造函数中的代码；
返回新对象。

function xxx(name, age) {
    this.name = name;
    this.age = age;
    this.sayName = function() {
        console.log(this.name);
    }
}

const p1 = new xxx('Zhang san', 18);
const p2 = new xxx('Li si', 18);

任何函数，只要通过 new 操作符来调用，那么就可以作为构造函数；而任何函数，如果不通过 new 操作符来调用，那它跟普通的函数也没有什么两样。

构造函数的问题

构造函数虽然好用但也有缺点。使用构造函数的主要问题，就是每个方法都要在每个实例上重新创建一遍。

function xxx(name, age) {
    this.name = name;
    this.age = age;
    this.sayName = new Function(console.log(this.name));
}

const p1 = new xxx('Zhang san', 18);
const p2 = new xxx('Li si', 18);

用这个函数创建 p1 和 p2 都有一个名为 sayName() 的方法，但这两个方法不是同一个 Function 实例。

以这种方式创建函数，会导出现不同的作用域链和标识符解析，虽然它们做的事情是一样的，但不同的实例没有得到共享。

原型模式

我们创建的每一个函数其实都有一个 prototype 属性，这个属性是一个指针，指向一个对象，这个对象的属性和方法被由这个函数创建的所有实例共享。prototype 对象被称为这些实例的原型对象。

function xxx(name, age) {
    this.name = name;
    this.age = age;
};

xxx.prototype.sayName = function() {
    console.log(this.name);
}

我们将 sayName() 方法和所有属性直接添加到 xxx 的 prototype 属性中，xxx 的所有实例就共用了同一个方法，同时又保证该方法只在 xxx 作用域内上生效。

 vue.prototype.showAlert = function (title, content, leftOption = {
      title: '取消', onPress: () => {}
    }, rightOption =   {
      title: '确定', onPress: () => {}
    },showCancel) {
      GlobalConstant.store.commit('ALERT_MUTATION', {
        showAlert: true,
        title: title,
        content: content,
        leftText: leftOption.title,
        rightText: rightOption.title,
        showCancel:showCancel,
        leftCallback: () => {
          leftOption.onPress()
          GlobalConstant.store.commit('ALERT_MUTATION', {
            showAlert: false,
            showCancel:false
          })
        },
        rightCallback: () => {
          rightOption.onPress()
          GlobalConstant.store.commit('ALERT_MUTATION', {
            showAlert: false,
            showCancel:false
          })
        },

      })
    }





  this.showAlert('提示',  '您已有一笔未支付订单，继续下单将取消原订单',
            { title: '支付原订单', onPress: () => {this.$router.push({ name: 'MineOrder' })} },
            { title: '继续下单', onPress: () => {this.fetchLockSeat()} },
    true)