JavaScript 几种简单的设计模式

序言

     大家都知道JavaScript设计模式在整个前端占有很重要的地位，它让我们站在巨人的肩膀上，保证我们以优雅的方式组织我们的代码，满足我们解决问题所需要的条件。

什么是设计模式

     一个模式就是一个可重用的方案，可应用于在软件设计中的常见问题，它有如下优点：

     1. 模式是行之有效的解决方法：他们提供固定的解决方法来解决在软件开发中出现的问题，这些都是久经考验的反应了开发者的经验和见解的使用模式来定义的技术。
     2. 模式可以很容易地重用：一个模式通常反映了一个可以适应自己需要的开箱即用的解决方案。这个特性让它们很健壮。
     3. 模式善于表达：当我们看到一个提供某种解决方案的模式时，一般有一组结构和词汇可以非常优雅地帮助表达相当大的解决方案。

几种JavaScript的设计模式

JavaScript 构造器模式

     在面向对象编程中，构造器是一个当新建对象的内存被分配后，用来初始化该对象的一个特殊函数，在JavaScript中几乎所有的东西都是对象。

    /**
    * 构造一个车的函数 
    */
    function car(name, color) {
        this.name = name;
        this.color = color;
        this.getName = function () {
            return '名称：' + this.name + '\n颜色：' + this.color;
        }
    }
    // 实例一个对象
    var cat = new car('凯迪拉克', '白色');
    console.log(cat.getName());

JavaScript 暴露模块模式

    var myRevealingModule = function () {

        var privateVar = "Ben Cherry",
            publicVar = "Hey there!";

        function privateFunction() {
            console.log("Name:" + privateVar);
        }

        function publicSetName(strName) {
            privateVar = strName;
            privateFunction();
        }

        function publicGetName() {
            privateFunction();
        }

        return {
            setName: publicSetName,
            getName: publicGetName
        };

    }();

    myRevealingModule.getName("Paul Kinlan");

JavaScript 工厂模式

     工厂模式是另外一种关注对象创建概念的创建模式。它的领域中同其它模式的不同之处在于它并没有明确要求我们使用一个构造器。取而代之，一个工厂能提供一个创建对象的公共接口，我们可以在其中指定我们希望被创建的工厂对象的类型。

function car(opts) {
    var obj = new Object();
    obj.name = opts.name;
    obj.color = opts.color;
    obj.getInfo = function () {
        return '名称：' + obj.name + '， 颜色：' + obj.color;
    }
    return obj;
}
var cat = car({ name: '凯迪拉克', color: '白色' });
console.log(cat.getInfo());

JavaScript 单例模式

     单例就是保证一个类只有一个实例，实现方法一般是先判断实例存在与否，如果存在直接返回，如果不存在就创建了再返回，这就确保了一个类只有一个实例对象。在JavaScript里，单例作为一个命名空间提供者，从全局命名空间里提供一个唯一的访问点来访问该对象。

var Single = (function () {
    var instance;
    function init() {
        //define private methods and properties
        //do something
        return {
            //define public methods and properties
        };
    }

    return {
        // 获取实例
        getInstance: function () {
            if (!instance) {
                instance = init();
            }
            return instance;
        }
    }
})();

var obj1 = Single.getInstance();
var obj2 = Single.getInstance();

console.log(obj1 === obj2);

JavaScript 原型模式

     原型模式，就是创建一个共享的原型，通过拷贝这个原型来创建新的类，用于创建重复的对象，带来性能上的提升。

var vehiclePrototype = {
    init: function (carModel) {
        this.model = carModel;
    },
    getModel: function () {
        console.log('车辆模具是：' + this.model);
    }

};

function vehicle(model) {
    function F() { };
    F.prototype = vehiclePrototype;    
    var f = new F();
    f.init(model);
    return f;
}
var car = vehicle('法拉利');
car.getModel();

JavaScript 混合模式

      混合模式是由构造函数模式和原型模式构成，构造函数模式用于定义实例属性，而原型模式用于定义方法和共享属性。每个实例都会有自己的一份实例属性，但同时又共享着方法，最大限度的节省了内存。另外这种模式还支持传递初始参数。这种模式在ECMAScript中是使用最广泛、认同度最高的一种创建自定义对象的方法。

// 为父类型创建构造函数
function SuperType(name) {
    this.name = name;
    this.color = ['pink', 'yellow'];
    this.property = true;

    this.testFun = function () {
        console.log('http://tools.jb51.net/');
    }
}

// 为父类型添加方法
SuperType.prototype.getSuerperValue = function () {
    return this.property;
}

// 为子类型创建构造函数
function SubType(name) {
    SuperType.call(this, name);
    this.test = ['h1', 'h2', 'h3', 'h4'];
    this.subproperty = false;
}

SubType.prototype = new SuperType();

// 在此处给子类型添加方法，一定要在实现继承之后，否则会在将指针指向父类型的实例，则方法为空
SubType.prototype.getSubValue = function () {
    return this.subproperty;
}


/* 以下为测试代码示例 */
var instance1 = new SubType(['wuyuchang', 'Jack', 'Nick']);
instance1.name.push('hello');
instance1.test.push('h5');
instance1.color.push('blue');
instance1.testFun();            // http://tools.jb51.net/
console.log(instance1.name);            // wuyuchang,Jack,Nick,hello
console.log(instance1.getSuerperValue());      // true
console.log(instance1.test);            // h1,h2,h3,h4,h5    
console.log(instance1.getSubValue());        // false    
console.log(instance1.color);            // pink,yellow,blue

var instance2 = new SubType('wyc');
instance2.testFun();            // http://tools.jb51.net/
console.log(instance2.name);            // wyc    
console.log(instance2.getSuerperValue());      // true
console.log(instance2.test);            // h1,h2,h3,h4
console.log(instance2.getSubValue());        // false
console.log(instance2.color);            // pink,yellow

结束语

      看了上面的一些示例，应该对JavaScript设计模式有了一些了解，设计模式有很多种类，我这边只是写了简单常用的几种模式，希望对你有所帮助。