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);
}
}
}
模块
命名空间
一个对象即这个对象的所有属性的命名空间,因为这些属性可以与其他对象的属性重名,而又是不同的变量。例如 $ 是 $.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);
}
}
}
相关文章推荐
- 函数的基本知识,解析顺序,效率,作用域
- jsp——el表达式
- javascript的cookie使用方法介绍——和派孔明
- js闭包引用以及垃圾回收探索
- javascript笔记
- JS基本语法
- js——正则表达式 验证邮箱、手机号、密码、用户名是否合法
- JS实现表格排序
- JSP学习总结
- js设计模式之状态模式
- JavaScript-二进制与二进制数组
- js设计模式至观察者模式--不同模块间解耦
- 深入理解JavaScript的Promise
- jsp统测
- 局部刷新
- jsp异常
- json数据格式原生解析器
- 使用JavaScript写的剪刀石头布的游戏!
- 【JSP】自定义标签开发入门
- 快速构造json字符串