JavaScript学习笔记之常见设计模式

一、单例模式

单例模式（Singleton）:又被称为单体模式，只允许实例化一次的对象类。有时也会用一个对象来规划一个命名空间，有条理的去管理对象上的属性和方法。

比如，有一个需求，需要在活动页面实现新闻列表中的鼠标滑动特效。

    function g(id){
        return document.getElementById(id);
    }
    function css(id,key,value) {
        g(id).style[key] = value;
    }

使用上述方法给页面定义了许多变量，存在可能引起代码冲突的隐患。而单例模式则是将所有的功能方法定义在一个对象里面。比如jQuery库就是典型使用单例模式的代表。我们可以使用单例模式来实现上述需求。

var Ming = {
        g: function () {
            return document.getElementById(id);
        },
        css: function (id,key,value) {
            this.g(id).style[key] = value;
        }
    }

模块分明 ：单例模式还可以用来管理代码库的各个模块。比如早起百度的tangram中，当设置元素class方法，添加一个元素方法时，会放到dom模块中；当添加事件阻止事件的冒泡方法时，会放到event模块里；当添加去除字符串首位空白字符方法，会放到string模块中。

    baidu.dom.addClass
    baidu.event.stopPropagation
    baidu.string.encodeHTML

创建一个小型代码库：

比如有一个A库，包含公共模块、工具模块、ajax模块和其他模块。

  var A = {
        Util: {
            util_method1: function () {},
            util_method2: function () {}
        },
        Tool: {
            tool_method1: function () {},
            tool_method2: function () {}
        },
        Ajax: {
            get: function () {},
            post: function () {}
        },
        others: {}
    }
    
    A.Util.util_method1();
    A.Ajax.get();
    A.Tool.tool_method1();

二、 原型模式

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

需求：创建一个焦点图，焦点图类：LoopImages。

// 图片轮播类
    var LoopImages = function (imgArr, container) {
        this.imagesArray = imgArr;    // 轮播图片数组
        this.container = container;   // 轮播图片容器
        this.createIamge = function () {}   // 创建轮播图片
        this.changeImage = function () {}   // 切换下一张图片
    }
    
    
    // 上下滑动切换类
    var SlideLoopImg = function (imgArr, container) {
        // 构造函数继承轮播图片类
        LoopImages.call(this,imgArr,container);
        // 重写继承的切换下一张图片方法
        this.changeImage = function () {
            console.log('SlideLoopImg');
        }
    }
    // 渐隐切换类
    var FadeLoopImg = function (imgArr,container,arrow) {
        LoopImages.call(this,imgArr,container);
        this.arrow = arrow;
        this.changeImage = function () {
            console.log('FadeLoopImg');
        }
    }

但是，上述代码并不是最优解。在基类loopImages中，作为基类是要被子类继承的，那么此时属性和方法全写在基类的构造函数中会出现问题，比如子类每继承一次都要创建一次父类。我们可以将较大的方法放在基类的原型中。

// 图片轮播类
    var LoopImages = function (imgArr, container) {
        this.imagesArray = imgArr;    // 轮播图片数组
        this.container = container;   // 轮播图片容器
    }
    LoopImages.prototype = {
        // 创建轮播图片
        createImage: function () {},
        // 切换下一张图片
        changeImage: function () {}
    }
    
    // 上下滑动切换类
    var SlideLoopImg = function (imgArr, container) {
        // 构造函数继承轮播图片类
        LoopImages.call(this,imgArr,container);
    }
    // 重写继承的切换下一张图片方法
    SlideLoopImg.prototype = new LoopImages();
    SlideLoopImg.prototype.changeImage =function () {}
    // 渐隐切换类
    var FadeLoopImg = function (imgArr,container,arrow) {
        LoopImages.call(this,imgArr,container);
        this.arrow =arrow;
    }
    FadeLoopImg.prototype = new LoopImages();
    FadeLoopImg.prototype.changeImage = function () {
        console.log('FadeLoopImg');
    }

三、建造者模式 

建造者模式（Builder）：将一个复杂对象的构建层与其表示层相互分离，同样的构建方式可采用不同的表示。

建造者模式更关心的是创建这个对象的整个过程。我们来创建简历。

// 创建一个人类
    var Human = function (param) {
        // 技能
        this.skill = param && param.skill || '保密';
        // 兴趣
        this.hobby = param && param.hobby || '保密';
    }
    // 类人原型方法
    Human.prototype = {
        getSkill: function () {
            return this.skill;
        },
        getHobby: function () {
            return this.hobby;
        }
    }
    // 实例化姓名类
    var Named = function (name) {
        vat that = this;
        // 构造器
        // 构造函数解析姓名的姓与名
        (function (name,that) {
            that.wholeName = name;
            // ....
        })
    }
    // 实例化职位类
    var Work = function (work) {
        vat that = this;
        // 构造器
        // 构造函数中通过传入的职位特征来设置相应职位以及描述
        (function (work,that) {
            switch (work){
                case 'code':
                    that.work = '';
                    break;
                case 'UI':
            }
        })(work,that);
    }

未完待续