您的位置:首页 > Web前端 > JavaScript

JavaScript 模式

2016-07-03 20:17 225 查看
参考《JavaScript模式》

模块
命名空间

一个对象即这个对象的所有属性的命名空间,因为这些属性可以与其他对象的属性重名,而又是不同的变量。例如 $ 是 $.trim 的命名空间。

构造函数

构造函数返回的是对象,那么它构造的就是这个对象。如果没返回或者返回非对象,那么相当于返回的是this

构造函数的成员相当于它的静态成员

即时(自调用、自执行)函数

//利用匿名函数实现

(function(global){

    console.log();

})(this);   // 传入全局对象

模块模式:

命名空间模式

(function(global){

    global.module = {

        name:'d',
   getName:function(){
       return this.name;
   },

        init: function(){
       console.log('do some init');
   }

    };

    global.module.setName = function(){

    }

    global.module.init();

})(this);

构造器模式 (常用于UI组件定义,构造函数参数为包裹元素

(function(global){

    var module = function(initParam){
   console.log('do some init');
}
module.prototype = {
   name:'d'
}
global.module = module;

})(this);

闭包揭示模式 (常用于工具组件定义

//揭示模块的核心;闭包(外部函数声明私有属性,内部函数访问私有属性)、调用(外部函数自调用或者作为构造函数被调用)、揭示(内部函数被返回或者被赋予,可以被单独揭示或者作为对象的成员被揭示)

(function(global){  // 闭包

    var name = 'd';  // 私有属性
var getName = function(){
   return name;   // 访问私有属性
}
var setName = function(){
   
}
return {   // 揭示
   getName:getName,
setName:setName
}      

)(this);  //调用

命名空间结合闭包揭示:命名空间的成员是揭示模块

命名空间结合构造器:命名空间的成员是构造器模块

构造器结合命名空间:原型或构造器this的成员是命名空间模块

构造器结合闭包揭示:原型或构造器this的成员是揭示模块

闭包揭示结合命名空间:揭示模块揭示的是一个命名空间

闭包揭示结合构造器:揭示模块揭示的是一个构造器

//构造器this的成员是揭示模块

function man(){    //构造函数作为外部函数

    var name = 'a'; //私有属性
this.getName = function(){   // 内部函数单独被赋予
   return name;
}

}

//原型的成员是揭示模块

man.prototype = (function(){ //自调用函数作为外部函数

    var name = 'a';          // 私有属性
return {
   getName:function(){    // 内部函数作为对象的成员被返回
       return name;
   }
}

})();

设计模式

单例模式

function Singleton(){

    if(typeof Singleton.instance === 'Object'){
   return Singleton.instance;
}
Singleton.instance = this;
return this;

}

var o1 = new Singleton();

var 02 = new Singleton();

01 === 02; // true

工厂模式

function Maker(){}

Maker.factory = function(){

    return new Maker();

}

观察者模式(订阅发布模式,自定义事件,广播)

var observer = {

    events:{
   'success':[]
},
on: function(fn,type){
   type = type || 'any';
if(!this.events[type]){
   this.events[type] = [];
}
this.events[type].push(fn);
},
off: function(fn,type){
},
trigger: function(type,arg){
   type = type || 'any';
var fns = this.events[type];
for(var i=0;i<fns.length;i++){
   fns[i](arg);
}
}

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: