设计模式

什么是设计模式

• GoF定义
  设计模式是在面向对象软件设计过程中针对特定问题的简洁而优雅的解决方案
• 百度百科
  设计模式是一套被反复使用，多数人知晓的，经过分类编目的，代码设计经验的总结
• 通俗解释
  当封装一个函数时，你是在复用代码；而当使用一个设计模式是，你是在复用他人的经验。

设计模式的分类

• 创建型模式
  单例模式，抽象工厂模式，建造者模式，工厂模式，原型模式
• 结构型模式
  适配器模式，桥接模式，装饰模式，组合模式，外观模式，享元模式，代理模式
• 行为型模式
  模板方法模式，命令模式，迭代器模式，观察者模式，中介者模式，备忘录模式，解释器模式，状态模式，策略模式，职责连模式，访问者模式

设计模式的好处

行之有效的解决方法，易于修改和维护，便于交流和沟通

单例模式

概念：保证一个类仅有一个实例，并提供一个访问它的全局访问点。
原理：在创建对象之前，先判断一下是否已经创建。如果已经创建，那么直接返回这个对象，如果没有创建，那么就创建一个对象。

传统的单例模式

// 代码说明待更新

JS的单例模式

var Alex = {};
// 创建一个我们自己的对象
// 所有的方法都放在这个对象里面，那么就不会和他人冲突了
// jquery的$就是一个很好的例子

// 所有的dom相关处理都放在dom这个子对象里面
Alex.dom = {};
Alex.dom.getById = function () {};
...

// 所有的字符串相关处理都放在string这个子对象里面
Alex.string = {};
Alex.string.trim = function () {};
...

// 所有的正则相关处理都放在reg这个子对象里面
Alex.reg = {};
Alex.reg.email = //;
Alex.tel.email = //;

JS的惰性单例

// 点击登录按钮，弹出登录框
var createLoginLayer = (function () {
    var loginLayer = null;

    return function () {
        if (!loginLayer) {
            loginLayer = document.createElement('div');
            loginLayer.id = 'loginLayer';
            loginLayer.innerHTML = '登录窗口';
            loginLayer.style.display = 'none';
            document.body.appendChild(loginLayer);
        }
        return loginLayer;
    };
})();
var createMaskLayer = (function () {
    var maskLayer = null;

    return function () {
        if (!maskLayer) {
            maskLayer = document.createElement('div');
            maskLayer.id = 'maskLayer';
            maskLayer.innerHTML = '登录窗口';
            maskLayer.style.display = 'none';
            document.body.appendChild(maskLayer);
        }
        return maskLayer;
    };
})();

document.getElementById('loginBtn').onclick = function () {
    // 创建登录框和遮罩层
    // 如果已经创建，那么返回这个DOM元素
    // 如果没有创建，那么创建这个DOM元素
    // 这样做的好处是，不需要频繁的创建和删除元素，提升性能

    var loginLayer = createLoginLayer();
    var maskLayer = createMaskLayer();
    // 设置为可显示
    loginLayer.style.display = 'block';
    maskLayer.style.display = 'block';
};

JS的通用惰性单例

function createLoginLayer() {
    var loginLayer = document.createElement('div');
    loginLayer.id = 'loginLayer';
    loginLayer.innerHTML = '登录窗口';
    loginLayer.style.display = 'none';
    document.body.appendChild(loginLayer);
    return loginLayer;
}
function createMaskLayer() {
    var maskLayer = document.createElement('div');
    maskLayer.id = 'maskLayer';
    maskLayer.style.display = 'none';
    document.body.appendChild(maskLayer);
    return maskLayer;
}

// 这里就用到了闭包
function getSingleton(fn) {
    var instance = null;

    return function () {  // arguments可以取得这里传递进来的参数
        return instance || (instance = fn.apply(null, arguments));
        // 设置为null意思是，不需要改变this指向
        // arguments是为了取得参数，然后再传递给createLoginLayer和createMaskLayer函数
    };
}
var createSingletonLoginLayer = getSingleton(createLoginLayer);
var createSingletonMaskLayer = getSingleton(createMaskLayer);
document.getElementById('loginBtn').onclick = function () {
    var loginLayer = createSingletonLoginLayer();
    var maskLayer = createSingletonMaskLayer();
    loginLayer.style.display = 'block';
    maskLayer.style.display = 'block';
};