这一篇首要描述构造器(Constructor)形式和模块(Module)格局以及相关的变体情势,例子是JavaScript代码。

构造器(Constructor)模式

对象构造器用于成立特定类型的靶子——准备好对象以备使用,同时接受构造器能够应用的参数,以在率先次创设对象时,设置成员属性和艺术的值。概念并没什么好说的,那种形式最是不难,即使名字是那么吊炸天,但故事情节没什么,看上面例子就可见晓。

基本构造器

function Car( model, year, miles ) {
  this.model = model;
  this.year = year;
  this.miles = miles;
  this.toString = function () {
    return this.model + " has done " + this.miles + " miles";
  };
}
// Usage:
// We can create new instances of the car
var civic = new Car( "Honda Civic", 2009, 20000 );
var mondeo = new Car( "Ford Mondeo", 2010, 5000 );
// and then open our browser console to view the
// output of the toString() method being called on
// these objects
console.log( civic.toString() );
console.log( mondeo.toString() );

jQuery 1jQuery 2

PS:类与对象实例效果图。

带原型的构造器

function Car( model, year, miles ) {
  this.model = model;
  this.year = year;
  this.miles = miles;
}
// Note here that we are using Object.prototype.newMethod rather than
// Object.prototype so as to avoid redefining the prototype object
Car.prototype.toString = function () {
  return this.model + " has done " + this.miles + " miles";
};
// Usage:
var civic = new Car( "Honda Civic", 2009, 20000 );
var mondeo = new Car( "Ford Mondeo", 2010, 5000 );
console.log( civic.toString() );
console.log( mondeo.toString() );

jQuery 3jQuery 4

PS:类与目的实例效果图。

两者分别

那多少个示范分歧就在于toString方法的定义。前一个例子每个实例都各自重复定义那种形式;后一个事例使用原型定义格局,使得那种方法在装有的Car实例之间共享,好处在于,共享函数可以裁减内存消耗(小编认为),优化代码。

这里要求注意几件事:

  1. 函数才有prototype属性,指向的是一个实例对象(不是函数)。

2.
每种实例对象都有__proto__的属性,那个天性指向原函数所指的原型对象(原型继承的功底)。

模块(Module)模式

模块形式是为类提供个人变量和特权方法(有权访问私有变量和个人函数的国有方法)的艺术。在JavaScript,就可由此闭包的不二法门,模拟已毕模块格局。

jQuery,目的字面量:

var myModule = {
    variableKey: variableValue,
    getKey: function () {
      // ...
    }
};

狂暴上讲,对象字面量达成的只是不完全的模块情势,因为无法达到变量、方法私有效果。然则实在有分别和公司代码的力量,也即使一种简单的模块情势的贯彻方式。

差不离例子:

var myModule = (function(){
    var privateVar = 10;
    return {
        getPrivateVar : function(){
             return privateVar;
        }
    }
})();

引入全局变量例子:

// Global module
var myModule = (function ( jQ, _ ) {
    function privateMethod1(){
        jQ(".container").html("test");
    }
    function privateMethod2(){
      console.log( _.min([10, 5, 100, 2, 1000]) );
    }
    return{
        publicMethod: function(){
            privateMethod1();
        }
    };
// Pull in jQuery and Underscore
})( jQuery, _ );

PS:书中还有照应结合Dojo、ExtJS、YUI、jQuery等框架的模块形式的落实格局,但是小编觉着借使了然模块格局的就行了,也不一一列例子。

颁发(Revealling)模块形式

那种是模块情势的改正版本,它是在模块代码尾部,定义所有对外发表的函数(仅是指针)和变量。

var myRevealingModule = (function () {
        var privateVar = "Ben Cherry",
            publicVar = "Hey there!";
        function privateFunction() {
            console.log( "Name:" + privateVar );
        }
        function publicSetName( strName ) {
            privateVar = strName;
        }
        function publicGetName() {
            privateFunction();
        }
        // Reveal public pointers to
        // private functions and properties
        return {
            setName: publicSetName,
            greeting: publicVar,
            getName: publicGetName
        };
  })();

那种形式作者不时采纳,它很简单提出什么函数和变量可以被公开访问,增强了可读性。

 

总结

突发性我们在不注意间就使用了某种格局(例如地点三种形式),但并不知道写的事物已经是前任总括很好的事物了。所以在细细阅读进度中,书中内容使得自身要好对格局的认识进一步系统周详,也能校订本人使用上的误区。

 

参考文献

  1. 《Learning JavaScript Design Patterns》 by Addy
    Osmani

https://addyosmani.com/resources/essentialjsdesignpatterns/book/

  1. 《JavaScript设计方式》by 徐涛【译】

 

正文为原创作品,转发请保留原出处,方便溯源,如有错误地方,多谢指正。

正文地址 :http://www.cnblogs.com/lovesong/p/5572568.html

相关文章

网站地图xml地图