小磊哥er的大前端学习笔记

Appearance

JS设计模式 ​

简单工厂模式： ​

javascript
/*
简单工厂模式：
又叫静态工厂方法，由一个工厂对象决定创建某一种产品对象类的实例。
*/

function createPop(type, content) {
    // 创建一个对象，并对对象拓展属性和方法
    var o = {};
    o.content = content;
    o.show = function() {
        // 显示方法
    };
    if (type == "alert") {
        // 警示框差异部分
    }
    if (type == "prompt") {
        // 提示框差异部分
    }
    if (type == "confirm") {
        // 确认框差异部分
    }
    // 将对象返回
    return o;
}

工厂方法模式： ​

javascript
/*
工厂方法模式：
通过对产品类的抽象使其创建业务主要负责用于创建多类产品的实例。
*/

// 安全模式创建的工厂类
var Factory = function(type, content) {
    if (this instanceof Factory) {
        // 保证是通过new进行创建的
        var s = new this[type](content);
        return s;
    } else {
        return new Factory(type, content);
    }
};

// 工厂原型中设置创建所有类型数据对象的基类
Factory.prototype = {
    Java: function(content) {

    },
    Php: function(content) {

    },
    JavaScript: function(content) {

    }
};

抽象工厂模式： ​

javascript
/*
抽象工厂模式：
通过对类的工厂抽象使其业务用于对产品类族的创建，而不负责创建某一类产品的实例。
*/

var VehicleFactory = function(subType, superType) {
    // 判断抽象工厂中是否有该抽象类
    if (typeof VehicleFactory[superType] === "function") {
        // 缓存类
        var F = function() {};
        // 继承父类属性和方法
        F.prototype = new VehicleFactory[superType]();
        // 将子类 constructor 指向子类
        subType.constructor = subType;
        // 子类原型继承“父类”
        subType.prototype = new F();
    } else {
        // 不存在该抽象类抛出错误
        throw new Error("未创建该抽象类");
    }
};

建造者模式： ​

javascript
/*
建造者模式：
将一个复杂对象的构建层与其表示层相互分离，同样的构建过程可采用不同的表示。
*/

// 创建一位人类
var Human = function(params) {
    // 技能
    this.skill = params && params.skill || "保密";
    // 兴趣爱好
    this.hobby = params && params.hobby || "保密";
};

// 人类原型方法
Human.prototype = {
    getSkill: function() {
        return this.skill;
    },
    getHobby: function() {
        return this.hobby;
    }
};

// 实例化姓名类
var Named = function(name) {
    var that = this;
    // 构造器
    // 构造函数解析姓名的姓与名
    (function(name, that) {
        that.wholeName = name;
        if (name.indexOf(" ") > -1) {
            that.firstName = name.slice(0, name.indexOf(" "));
            this.secondName = name.slice(name.indexOf(" "));
        }
    })(name, that);
};

// 实例化职位类
var Work = function(work) {
    var that = this;
    // 构造器
    // 构造函数中通过传入的职位特征来设置相应的职位以及描述
    (function(work, that) {
        switch (work) {
            case "code":
                that.work = "工程师";
                that.workDescript = "每天沉醉于编程";
                break;
            case "UI":
            case "UE":
                that.work = "设计师";
                that.workDescript = "设计更似一种艺术";
                break;
            case "teach":
                that.work = "教师";
                that.workDescript = "分享也是一种快乐";
                break;
            default:
                that.work = work;
                that.workDescript = "对不起，我们现在还不清楚你所选择的职位的相关描述。";
        }
    })(work, that);
};

// 更换期望的职位
Work.prototype.changeWork = function(work) {
    this.work = work;
};
// 添加对职位的描述
Work.prototype.changeDescript = function(setence) {
    this.workDescript = setence;
};

/**
 * 应聘者建造者
 * 参数 name: 姓名（全名）
 * 参数 work: 期望职位
 **/
var Person = function(name, work) {
    // 创建应聘者缓存对象
    var _person = new Human();
    // 创建应聘者姓名解析对象
    _person.name = new Named(name);
    // 将创建的应聘者期望职位
    _person.work = new Work(work);
    // 将创建的应聘者对象返回
    return _person;
};

原型模式： ​

javascript
/*
原型模式：
用原型实例指向创建对象的类，使用于创建新的对象的类共享原型对象的属性以及方法。
*/

// 图片轮播类
var LoopImages = function(imgArr, container) {
    this.imagesArray = imgArr;
    this.container = container;
};

LoopImages.prototype = {
    // 创建轮播图片
    createImage: function() {
        console.log("LoopImages createImage function");
    },
    // 切换下一张图片
    changeImage: function() {
        console.log("LoopImages changeImage function");
    }
};

// 上下滑动切换类
var SliderLoopImg = function(imgArr, container) {
    // 构造函数继承图片轮播类
    LoopImages.call(this, imgArr, container);
};
SliderLoopImg.prototype = new LoopImages();
// 重写继承的“切换下一张图片”方法
SliderLoopImg.prototype.changeImage = function() {
    console.log("SliderLoopImg changeImage function");
};

单例模式： ​

javascript
/*
单例模式：
又称单体模式，是只允许实例化一次的对象类。
*/

// 惰性
var LarySingle = (function() {
    // 单例实例引用
    var _instance = null;
    // 单例
    function Single() {
        // 这里定义私有属性和方法
        return {
            publicMethod: function() {},
            publicProperty: "1.0"
        };
    }
    // 获取单例对象接口
    return function() {
        // 如果未创建单例将创建单例
        if(!_instance){
            _instance = Single();
        }
        // 返回单例
        return _instance;
    };
})();

外观模式： ​

javascript
/*
外观模式：
为一组复杂的子系统接口提供一个更高级的统一接口，通过这个接口使得对子系统接口的访问更容易。
*/

function addEvent(dom, type, fn) {
    // 对于支持DOM2级事件处理程序addEventListener方法的浏览器
    if (dom.addEventListener) {
        dom.addEventListener(type, fn, false);
    } else if (dom.attachEvent) {
        // 对于不支持addEventListener方法但支持attchEvent方法的浏览器
        dom.attachEvent("on" + type, fn);
    } else {
        // 对于不支持addEventListener方法，也不支持attchEvent方法，但支持“on”+事件名的浏览器
        dom["on" + type] = fn;
    }
}

适配器模式： ​

javascript
/*
适配器模式：
将一个类(对象)的接口(方法或属性)转化成另外一个接口，以满足用户需求，使类(对象)之间接口的不兼容问题通过适配器得以解决。
*/

A.g = function(id) {
    // 兼容调用jquery
    // 通过jQuery获取jQuery对象，然后返回第一个成员
    return $(id).get(0);
};

代理模式： ​

javascript
/*
代理模式：
由于一个对象不能直接引用另一个对象，所以需要通过代理对象在这两个对象之间起到中介的作用。
*/

// 统计代理示例
var Count = (function() {
    // 缓存图片
    var img = new Image();
    //返回统计函数
    return function (param) {
        // 统计请求字符串
        var str = 'http://www.***.com/a.gif?';
        // 拼接请求字符串
        for (var i in param) {
            str += i + '=' + param[i];
        }
        // 发送统计请求
        img.src = str;
    }
})();

装饰者模式： ​

javascript
/*
装饰者模式：
在不改变原对象的基础上，通过对其进行包装拓展(添加属性或方法)使原对象可以满足用户更复杂需求。
*/

var decorator = function (input, fn) {
    // 获取事件源
    var input = document.getElementById(input);
    // 若事件源已经绑定事件
    if (typeof input.click === 'function') {
        // 缓存事件源原有回调函数
        var oldClickFn = input.click;
        // 为事件源定义新的事件
        input.click = function () {
            // 事件源原有回调函数
            oldClickFn();
            // 执行事件源新增回调函数
            fn();
        }
    } else {
        // 事件源未绑定事件，直接为事件源添加新增回调函数
        input.onclick = fn;
    }
}

桥接模式： ​

javascript
/*
桥接模式：
在系统沿着多个维度变化的同时，又不增加其复杂度并达到解耦。
*/

// 多维变量类
// 运动单元
function Speed(x, y) {
    this.x = x;
    this.y = y;
}
Speed.prototype.run = function () {
    console.log("运动起来");
}

// 着色单元
function Color(cl) {
    this.color = cl;
}
Color.prototype.draw = function () {
    console.log("绘制颜色");
}

//变形单元
function Shape(sp) {
    this.shape = sp;
}
Shape.prototype.change = function () {
    console.log("改变形状");
}

// 说话单元
function Speek(wd) {
    this.word = wd;
}
Speek.prototype.say = function () {
    console.log('讲话内容');
}

// 创建一个精灵类
function Spirte(x, y, c, s) {
    this.speed = new Speed(x, y);
    this.color = new Color(c);
    this.shape = new Shape(s)
}
Spirte.prototype.init = function () {
    this.speed.run();
    this.color.draw();
    this.shape.change();
};

组合模式： ​

javascript
/*
组合模式：
又称部分-整体模式，将对象组合成树形结构以表示“部分整体”的层次结构。
*/

// 表单中的应用
var form = new FormItem('FormItem', document.body);
form.add(
    new FieldSetItem('account', '账号').add(
        new Group().add(
            new LabelItem('user_name', '用户名：')
        ).add(
            new InputItem('user_name')
        ).add(
            new SpanItem('4到6位数字或字母')
        )
    ).add(
        new Group().add(
            new LabelItem('user_password', '密码')
        ).add(
            new InputItem('user_password')
        ).add(
            new SpanItem('6到12位数字或者密码')
        )
    )
)

享元模式： ​

javascript
/*
享元模式：
运用共享技术有效地支持大量的细粒度对象，避免对象间拥有相同内容造成多余的开销。
 */

var Flyweight = function () {
    // 已创建的元素
    var created = [];
    // 创建一个新闻包装容器
    function create() {
        var dom = document.createElement('div');
        // 将容器插入新闻列表容器中
        document.getElementById('container').appendChild(dom);
        // 缓存新创建的元素
        created.push(dom);
        // 返回新创建的元素
        return dom;
    }
    return {
        // 获取创建新闻元素的方法
        getDiv: function () {
            // 如果已经创建的元素小于当前页元素总个数，则创建
            if (created.length < 5) {
                return create();
            } else {
                // 获取第一个元素，并插入最后面
                var div = created.shift();
                created.push(div);
                return div;
            }
        }
    }
}

模板方法模式： ​

javascript
/*
模板方法模式：
父类中定义一组操作算法骨架，而将一些实现步骤延迟到子类中，使得子类可以不改变父类的算法结构的同时可重新定义算法中某些实现步骤。
 */

// 模板类
var Alert = function (data) {
    if (!data)
        return;
    this.content = data.content;
    this.panel = document.createElement("div");
    this.contentNode = document.createElement("p");
    this.confirmBtn = document.createElement("span");
    this.closeBtn = document.createElement("b");
    this.panel.className = 'alert';
    this.closeBtn.className = 'a-close';
    this.confirmBtn.className = 'a-confirm';
    this.confirmBtn.innerHTML = data.confirm || "确认";
    this.contentNode.innerHTML = this.content;
    this.success = data.success || function () {};
    this.fail = data.fail || function () {};
};

// 提示框原型方法
Alert.prototype = {
    init: function () {
        this.panel.appendChild(this.closeBtn);
        this.panel.appendChild(this.contentNode);
        this.panel.appendChild(this.confirmBtn);

        document.body.appendChild(this.panel);

        this.bindEvents();

        this.show();
    },
    bindEvents: function () {
        var me = this;
        this.closeBtn.onclick = function () {
            me.fail();
            me.hide();
        }
        this.confirmBtn.onclick = function () {
            me.success();
            me.hide();
        }
    },
    hide: function () {
        this.panel.style.display = 'none';
    },
    show: function () {
        this.panel.style.display = 'block';
    }
};

模板方法模式： ​

javascript
/*
模板方法模式：
父类中定义一组操作算法骨架，而将一些实现步骤延迟到子类中，使得子类可以不改变父类的算法结构的同时可重新定义算法中某些实现步骤。
 */

// 模板类
var Alert = function (data) {
    if (!data)
        return;
    this.content = data.content;
    this.panel = document.createElement("div");
    this.contentNode = document.createElement("p");
    this.confirmBtn = document.createElement("span");
    this.closeBtn = document.createElement("b");
    this.panel.className = 'alert';
    this.closeBtn.className = 'a-close';
    this.confirmBtn.className = 'a-confirm';
    this.confirmBtn.innerHTML = data.confirm || "确认";
    this.contentNode.innerHTML = this.content;
    this.success = data.success || function () {};
    this.fail = data.fail || function () {};
};

// 提示框原型方法
Alert.prototype = {
    init: function () {
        this.panel.appendChild(this.closeBtn);
        this.panel.appendChild(this.contentNode);
        this.panel.appendChild(this.confirmBtn);

        document.body.appendChild(this.panel);

        this.bindEvents();

        this.show();
    },
    bindEvents: function () {
        var me = this;
        this.closeBtn.onclick = function () {
            me.fail();
            me.hide();
        }
        this.confirmBtn.onclick = function () {
            me.success();
            me.hide();
        }
    },
    hide: function () {
        this.panel.style.display = 'none';
    },
    show: function () {
        this.panel.style.display = 'block';
    }
};

观察者模式： ​

javascript
/*
观察者模式：
又称发布-订阅者模式或消息机制，定义一种依赖关系，解决了主体对象与观察者之间功能的耦合。
 */

var Observer = (function () {
    var __messages = {};
    return {
        // 注册消息
        register: function (type, fn) {
            if (typeof __messages[type] === 'undefined') {
                __messages[type] = [fn];
            } else {
                __messages[type].push(fn);
            }
        },
        // 发布消息
        fire: function (type, args) {
            if (!__messages[type])
                return;
            var events = {
                type: type,
                args: args || {}
            };
            var i = 0;
            var len = __messages[type].length;
            for (; i < len; i++) {
                __messages[type][i].call(this, events);
            }
        },
        // 移除消息
        remove: function (type, fn) {
            if (__messages[type] instanceof Array) {
                var i = __messages[type].length - 1;
                for (; i >= 0; i--) {
                    __messages[type][i] == fn && __messages[type].splice(i, 1);
                }
            }
        }
    }
})();

状态模式： ​

javascript
/*
状态模式：
当一个对象的内部状态发生改变时，会导致其行为的改变，这看起来像是改变了对象。
 */

// 状态对象
var ResultState = function () {
    var States = {
        state0: function () {
            console.log("第一种情况");
        },
        state1: function () {
            console.log("第二种情况");
        },
        state2: function () {
            console.log("第三种情况");
        },
        state3: function () {
            console.log("第四种情况");
        }
    };

    function show(result) {
        States['state' + result] && States['state' + result]();
    }

    return {
        show: show
    }
}();

策略模式： ​

javascript
/*
策略模式：
将定义的一组算法封装起来，使其相互之间可以替换。封装的算法具有一定独立性，不会随客户端变化而变化。
 */

// 电商中价格策略对象
var PriceStrategy = function () {
    var strategy = {
        return30: function (price) {
            return +price + parseInt(price / 100) * 30;
        },
        return50: function (price) {
            return +price + parseInt(price / 100) * 50;
        },
        percent90: function (price) {
            return price * 100 * 90 / 10000;
        },
        percent50: function (price) {
            return price * 100 * 50 / 10000;
        }
    };

    return function (algorithm, price) {
        return strategy[algorithm] && strategy[algorithm](price);
    }
};

职责链模式： ​

javascript
/*
职责链模式：
解决请求的发送者与请求的接受者之间的耦合，通过职责链上的多个对象对分解请求流程，实现请求在多个对象之间的传递，直到最后一个对象完成请求的处理。
 */

// 第一站 请求模块
var sendData = function (data, dealType, dom) {
    var xhr = new XMLHttpRequest();
    var url = 'getData.php?mod=userInfo';
    xhr.onload = function (event) {
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
            dealData(xhr.responseText, dealType, dom);
        } else {
            // 请求失败
        }
    }
    for (var i in data) {
        url += '&' + i + '=' + data[i];
    }
    xhr.open("get", url, true);
    xhr.send(null);
};

// 第二站 处理数据
var dealData = function (data, dealType, dom) {
    var dataType = Object.prototype.toString.call(data);
    switch (dealType) {
        case 'sug':
            if (dataType === "[object Array]") {
                return createSug(data, dom);
            }
            if (dealType === "[object Object]") {
                var newData = [];
                for (var i in data) {
                    newData.push(data[i]);
                    return createSug(newData, dom);
                }
            }
            return createSug([data], dom);
            break;
        case 'validate':
            return createValidataResult(data, dom);
            break;
    }
};

// 第三站 创建组件模块
var createSug = function (data, dom) {
    var i = 0;
    len = data.length;
    html = '';
    for (; i < len; i++) {
        html += '<li>' + data[i] + '</li>';
    }
    dom.parentNode.getElementsByTagName('ul')[0].innerHTML = html;
};
var createValidataResult = function (data, dom) {
    dom.parentNode.getElementsByTagName('span')[0].innerHTML = data;
};

命令模式： ​

javascript
/*
命令模式：
将请求与实现解耦并封装成独立对象，从而使不同的请求对客户端的实现参数化。
 */

// 绘图命令
var CanvasCommand = (function () {
   var canvas = document.getElementById('canvas');
   var ctx = canvas.getContext('2d');
   var Action = {
       fillStyle: function (c) {
           ctx.fillStyle = c;
       },
       fillRect: function (x, y, w, h) {
           ctx.fillRect(x, y, w, h);
       },
       strokeStyle: function (c) {
           ctx.strokeStyle = c;
       },
       strokeRect: function (x, y, w, h) {
           ctx.strokeRect(x, y, w, h);
       },
       fillText: function (text, x, y) {
           ctx.fillText(text, x, y);
       },
       beginPath: function () {
           ctx.beginPath();
       },
       moveTo: function (x, y) {
           ctx.moveTo(x, y);
       },
       lineTo: function (x, y) {
           ctx.lineTo(x, y);
       },
       arc: function (x, y, r, begin, end, dir) {
           ctx.arc(x, y ,r, begin, end, dir);
       },
       fill: function () {
           ctx.fill();
       },
       stroke: function () {
           ctx.stroke();
       }
   };
   return {
       excute: function (msg) {
           if (!msg)
               return;
           if (msg.length) {
               for (var i = 0, len = msg.length; i < len; i++) {
                   arguments.callee(msg[i]);
               }
           } else {
               msg.param = Object.prototype.toString.call(msg.param) === "[object Array]" ? msg.param : [msg.param];
               Action[msg.command].apply(Action, msg.param);
           }
       }
   }
})();

访问者模式： ​

javascript
/*
访问者模式：
针对于对象结构中的元素，定义在不改变该对象的前提下访问结构中元素的新方法。
 */

// 访问器
var Visitor = (function () {
    return {
        splice: function () {
            var args = Array.prototype.splice.call(arguments, l);
            return Array.prototype.splice.apply(arguments[0], args);
        },
        push: function () {
            var len = arguments[0].length || 0;
            var args = this.splice(arguments, l);
            arguments[0].length = len + arguments.length - 1;
            return Array.prototype.push.apply(arguments[0], args);
        },
        pop: function () {
            return Array.prototype.pop.apply(arguments[0]);
        }
    }
})();

中介者模式： ​

javascript
/*
中介者模式：
通过中介者对象封装一系列对象之间的交互，使对象之间不再相互引用，降低他们之间的耦合。
 */

// 中介者对象
var Mediator = function () {
    var _msg = {};
    return {
        register: function (type, action) {
            if (_msg[type])
                _msg[type].push(action);
            else {
                _msg[type] = [];
                _msg[type].push(action);
            }
        },
        send: function (type) {
            if (_msg[type]) {
                for (var i = 0, len = _msg[type].length; i < len; i++) {
                    _msg[type][i] && _msg[type][i]();
                }
            }
        }
    }
}();

备忘录模式： ​

javascript
/*
备忘录模式：
在不破坏对象的封装性的前提下，在对象之外捕获并保存该对象内部的状态以便日后对象使用或者对象恢复到以前的某个状态。
 */

// 新闻缓存器
var Page = function () {
    var cache = {};
    return function (page, fn) {
        if (cache[page]) {
            showPage(page, cache[page]);
            fn && fn();
        } else {
            $.post('./data/getNewsData.php', {
                page: page
            }, function (res) {
                if (res.errno == 0) {
                    showPage(page, res.data);
                    cache[page] = res.data;
                    fn && fn();
                }
            });
        }
    }
};

迭代器模式： ​

javascript
/*
迭代器模式：
在不暴露对象内部结构的同时，可以顺序的访问聚合对象内部的元素。
 */

// 迭代器
var Iterator = function (items, container) {
    var container = container && document.getElementById(container) || document;
    var items = container.getElementsByTagName(items);
    var len = items.length;
    var idx = 0;
    var splice = [].splice();

    return {
        first: function () {},
        second: function () {},
        pre: function () {},
        next: function () {},
        get: function () {},
        dealEach: function () {},
        dealItem: function () {},
        exclusive: function () {}
    }
};

迭代器模式： ​

javascript
/*
迭代器模式：
在不暴露对象内部结构的同时，可以顺序的访问聚合对象内部的元素。
 */

// 迭代器
var Iterator = function (items, container) {
    var container = container && document.getElementById(container) || document;
    var items = container.getElementsByTagName(items);
    var len = items.length;
    var idx = 0;
    var splice = [].splice();

    return {
        first: function () {},
        second: function () {},
        pre: function () {},
        next: function () {},
        get: function () {},
        dealEach: function () {},
        dealItem: function () {},
        exclusive: function () {}
    }
};

解释器模式： ​

javascript
/*
解释器模式：
对于一种语言，给出其文法表示形式，并定义一种解释器，通过使用解释器来解释语言中定义的句子。
 */

//XPath解释器
var Interpreter = (function () {
    function getSublingName() {
        // 获取兄弟元素名称
    }
    return function (node, wrap) {
        var path = [];
        wrap = wrap || document;
        if (node === wrap) {
            if (wrap.nodeType == 1) {
                path.push(wrap.nodeName.toUpperCase());
            }
            return path;
        }
        if (node.parentNode !== wrap) {
            path = arguments.callee(node.parentNode, wrap);
        } else {
            if (wrap.nodeType == 1) {
                path.push(wrap.nodeName.toUpperCase());
            }
        }
        var siblingsNames = getSublingName(node);
        if (node.nodeType == 1) {
            path.push(node.nodeName.toUpperCase() + siblingsNames)
        }
        return path;
    }
})();

链模式： ​

javascript
/*
链模式：
通过在对象方法中将当前对象返回，实现对同一个对象多个方法的链式调用。
 */

var A = function (selector) {
    return new A.fn.init(selector);
};
A.fn = A.prototype = {
    constructor: A,
    init: function (selector) {
        console.log(this.constructor);
    }
};
A.fn.init.prototype = A.fn;

委托模式： ​

javascript
/*
委托模式：
多个对象接收并处理同一请求，他们将请求委托给另一个对象统一处理请求。
 */

ul.onclick = function (e) {
    var e = e || window.event;
    var tar = e.target || e.srcElement;
    if (target.nodeName.toLocaleLowerCase() === 'li') {
        tar.style.backgroundColor = 'grey';
    }
};

数据访问对象模式： ​

javascript
/*
数据访问对象模式：
抽象和封装对数据源的访问与存储，DAO通过对数据源链接的管理方便对数据的访问与存储。
 */

// 本地存储类
var BaseLocalStorage = function (preId, timeSign) {
    this.preId = preId;
    this.timeSign = timeSign;
};
// 本地存储类原型方法
BaseLocalStorage.prototype = {
    status: {
        SUCCESS: 0,
        FAILURE: 1,
        OVERFLOW: 2,
        TIMEOUT: 3
    },
    storage: localStorage || window.localStorage,
    getKey: function (key) {
        return this.preId + key;
    },
    set: function (key, value, callback, time) {

    },
    get: function (key, callback) {

    },
    remove: function (key, callback) {

    }
};

节流模式： ​

javascript
/*
节流模式：
对重复的业务逻辑进行节流控制，执行最后一次操作并取消其他操作，以提高性能。
 */

var throttle = function () {
    var isClear = arguments[0];
    var fn;
    if (typeof isClear === 'boolean') {
        fn = arguments[1];
        fn.__throttleID && clearTimeout(fn.__throttleID);
    } else {
        fn = isClear;
        param = arguments[1];
        var p = extend({
            context: null,
            args: [],
            time: 30
        }, param);
        arguments.callee(true, fn);
        fn.__throttleID = setTimeout(function () {
            fn.apply(p.context, p.args);
        }, p.time);
    }
}

简单模板模式： ​

javascript
/*
简单模板模式：
通过格式化字符串拼凑出视图避免创建视图时大量节点操作，优化内存开销。
 */

// 模板渲染方法
A.formatString = function (str, data) {
    return str.replace(/\{#(\w)#\}/g, function (match, key) {
        return typeof data[key] === 'undefined' ? '' : data[key];
    })
}

// 模板生成器
A.view = function (name) {
    var v = {
        code: '<pre><code>{#code#}</code></pre>',
        img: '<img src="{#src#}" alt="{#alt#}" title="{#title#}" />',
        part: '<div id="{#id#}" class="{#class#}">{#part#}</div>',
        theme: [
            '<div>',
                '<h1>{#title#}</h1>',
                '{#content#}',
            '</div>'
        ].join('')
    }
    if (Object.prototype.toString.call(name) === "[object Array]") {
        var tpl = '';
        for (var i = 0, len = name.length; i < len; i++) {
            tpl += arguments.callee(name[i]);
        }
        return tpl;
    } else {
        return v[name] ? v[name] : ('<' + name + '>{#' + name +  '#}</' + name + '>');
    }
}

惰性模式： ​

javascript
/*
惰性模式：
减少每次代码执行时的重复性分支判断，通过对对象重定义来屏蔽原对象中的分支判断。
 */

// 加载即执行
A.on = function (dom, type, fn) {
    if (dom.addEventListener) {
        return function (dom, type, fn) {
            dom.addEventListener(type, fn, false);
        }
    } else if (dom.attachEvent) {
        return function (dom, type, fn) {
            dom.attachEvent("on" + type, fn);
        }
    } else {
        return function (dom, type, fn) {
            dom["on" + type] = fn;
        }
    }
}();

// 惰性执行
A.on = function (dom, type, fn) {
    if (dom.addEventListener) {
        A.on =  function (dom, type, fn) {
            dom.addEventListener(type, fn, false);
        }
    } else if (dom.attachEvent) {
        A.on =  function (dom, type, fn) {
            dom.attachEvent("on" + type, fn);
        }
    } else {
        A.on =  function (dom, type, fn) {
            dom["on" + type] = fn;
        }
    }
    // 执行重定义方法
    A.on(dom, type, fn);
};

参与者模式： ​

javascript
/*
参与者模式：
在特定的作用域中执行给定的函数，并将参数原封不动的传递。
 */

// 函数绑定
function bind(fn, context) {
    return function () {
        return fn.apply(context, arguments);
    }
}

// 函数柯里化
function curry(fn) {
    var Slice = [].slice;
    var args = Slice.call(arguments, l);
    return function () {
        var addArgs = Slice.call(arguments);
        var allArgs = args.concat(addArgs);
        return fn.apply(null, allArgs);
    }
}

等待者模式： ​

javascript
/*
等待者模式：
通过对多个异步进程进行监听，来触发未来发生的动作。
 */

// 等待对象
var Waiter = function () {
    var dfd = [];
    var doneArr = [];
    var failArr = [];
    var slice = Array.prototype.slice;
    var that = this;

    var Primise = function () {
        this.resolved = false;
        this.rejected = false;
    }

    Primise.prototype = {
        resolve: function () {

        },
        reject: function () {

        }
    }

    that.Deferred = function () {
        return new Primise();
    }

    function _exec(arr) {

    }

    that.when = function () {

    }

    that.done = function () {

    }

    that.fail = function () {

    }
}

同步模块模式： ​

javascript
/*
同步模块模式：
SMD，请求发出后，无论模块是否存在，立即执行后续的逻辑，实现模块开发中对模块的立即引用。
 */

// 定义模块方法
F.define = function (str, fn) {
    var parts = str.split('.');
    var old = parent = this;
    var i = 0;
    var len = 0;

    if (parts[0] === 'F') {
        parts = parts.slice(1);
    }

    if (parts[0] === 'define' || parts[0] === 'module') {
        return;
    }

    for (len = parts.length; i < len; i++) {
        if (typeof parent[parts[i]] === 'undefined') {
            parent[parts[i]] = {};
        }
        old = parent;
        parent = parent[parts[i]];
    }

    if (fn) {
        old[parts[--i]] = fn();
    }

    return this;
}

// 模块调用方法
F.module = function () {
    var args = [].slice.call(arguments);
    var fn = args.pop();
    var parts = args[0] && args[0] instanceof Array ? args[0] : args;
    var modules = [];
    var modIDs = '';
    var i = 0;
    var ilen = parts.length;
    var parent;
    var j;
    var jlen;

    while(i < ilen) {
        if (typeof parts[i] === 'string') {
            parent = this;
            modIDs = parts[i].replace(/^F\./, '').split('.');
            for (j = 0, jlen = modIDs.length; j < jlen; j++) {
                parent = parent[modIDs[j]] || false;
            }
            modules.push(parent);
        } else {
            modules.push(parts[i]);
        }
        i++;
    }
    fn.apply(null, modules);
}

异步模块模式： ​

javascript
/*
异步模块模式：
请求发出后，继续其他业务逻辑，知道模块加载完成执行后续的逻辑，实现模块开发中对模块加载完成后的引用。
 */

// 创建或调用模块
F.module = function (url, modDeps, modCallback) {
    var args = [].slice.call(arguments);
    var callback = arg.pop();
    var deps = (args.length && args[args.length - 1] instanceof Array ? args.pop() : [];
    var url = args.length ? args.pop() : null;
    var params = [];
    var depsCount = 0;
    var i = 0;
    var len ;

    if (len = deps.length) {
        while(i < len) {
            (function (i) {
                depsCount++;
                loadModule(deps[i], function (mod) {
                    params[i] = mod;
                    depsCount--;
                    if (depsCount === 0) {
                        setModule(url, params, callback);
                    }
                })
            })(i);
            i++;
        }
    } else {
        setModule(url, [], callback);
    }
}

Widget模式： ​

javascript
/*
Widget模式：
借用Web Widget思想将页面分解成部件，针对部件开发，最终组合成完整的页面。
 */

// 模板引擎
F.module('lib/template', function () {
    var _TplEngine = function (str, data) {
        if (data instanceof Array) {
            var html = '';
            var i = 0;
            var len = data.length;
            for (; i < len; i++) {
                html += _getTpl(str)(data[i]);
            }
            return html;
        } else {
            return _getTpl(str)(data);
        }
    };
    var _getTpl = function (str) {
        var ele = document.getElementById(str);
        if (ele) {
            var html = /^(textarea|input)/i.test(ele.nodeName) ? ele.value : ele.innerHtml;
            return _compileTpl(html);
        } else {
            return _compileTpl(str);
        }
    };
    var _dealTpl = function () {
        var _left = '{%';
        var _right = '%}';
        return String(str)
            .replace(/&lt;/g, '<')
            .replace(/&gt;/g, '>')
            .replace(/[\r\t\n]/g, '')
            .replace(new RegExp(_left + '=(.*?)' + _right, 'g'), "', typeof($1) === 'undefined' ? '' : $1, ")
            .replace(new RegExp(_left, 'g'), "');")
            .replace(new RegExp(_right, 'g'), "template_array.push('"));
    };
    var _compileTpl = function () {

    };

    return _TplEngine;
});

MVC模式： ​

javascript
/*
MVC模式：
模型model-视图view-控制器controller，用一种将业务逻辑、数据、视图分离的方式组织架构代码。
 */

// 创建MVC对象
$(function() {
   var MVC = MVC || {};
   MVC.model = function () {
        var M = {};
        M.data = {};
        M.conf = {};
        return {
            getData: function (m) {
                return M.data[m];
            },
            getConf: function (c) {
                return M.conf[c];
            },
            setData: function (m, v) {
                M.data[m] = v;
                return this;
            },
            setConf = function (c, v) {
                M.conf[c] = v;
                return this;
            }
        }
   }();
   MVC.view = function () {
        var M = MVC.model;
        var V = {};
        return function (v) {
            V[v]();
        }
   }();
   MVC.ctrl = function () {
        var M = MVC.model;
        var V = MVC.view;
        var C = {};
   }();
});

MVP模型： ​

javascript
/*
MVP模型：
模型Model-视图View-管理器Presenter，View层不直接引用Model层内的数据，而是通过Presenter层实现对Model层内的数据访问。
 */

// MVP单体对象
(function (window) {
    var MVP = function () {

    };
    MVP.model = function () {
        var M = {};
        M.data = {};
        M.conf = {};
        return {
            getData: function (m) {
                return M.data[m];
            },
            getConf: function (c) {
                return M.conf[c];
            },
            setData: function (m, v) {
                M.data[m] = v;
                return this;
            },
            setConf = function (c, v) {
                M.conf[c] = v;
                return this;
            }
        }
    }();
    MVP.view = function () {
        return function (str) {
            // 将str转换成html
            return html;
        }
    }();
    MVP.presenter = function () {
        var V = MVP.view;
        var M = MVP.model;
        var C = {};
        return {
            init: function () {
                for (var i in C) {
                    C[i] && C[i](M, V, i);
                }
            }
        }
    }();
    MVP.init = function () {

    };
    Window.MVP = MVP;
})(window);

MVVM模式： ​

javascript
/*
MVVM模式：
模型Model-视图View-视图模型ViewModel，为视图层量身定制一套视图模型，并在视图模型中创建属性和方法，为视图层绑定数据并实现交互。
 */