在进行模块化编程的时候,好多项目采用模块模式,因为其提供了结构化的思想并且有助于组织日益增长的代码。javascript和C++、java等面向对象的语言不同,它没有可以进行导入包的语法,,但是模块模块模式则提供了一种创建自包含非耦合的代码片段的有力工具。这也是现在好多项目采用此模式的原因。
好了,不废话了,现在开始深入,细解模块模式,其实是以下几种模式的组合:
一、命名空间模式
二、即时函数
三、声明依赖
四、私有和特权成员
一、建立一个命名空间函数
/**
* namespace(str)
* @param {string} 字符串
* @returns {object} 对象
*/
var zj={};
zj.namespace=function(str){
var o=zj;
var arr=str.split(".");
for(var i=(arr[0]=='zj'?1:0),len=arr.length;i<len;i++){
o=o[arr[i]]=o[arr[i]]||{};
}
return o;
}
zj.namespace("zj.util.dom");
二、下面使用即时函数,其可以提供私有作用域,该即时函数返回一个对象,即具有公共接口的实际模块,因此可以通过此接口来使用这些模块。
zj.util.dom=(function(){
return {
getId:function(id){
return document.getElementById(id);
},
getClass:function(className){
var arr=document.getElementsByTagName('*');
for(var i=0,len=arr.length;i<len;i++){
if(arr[i].getAttribute('class')==className){
return arr[i];
}else{
return '无此对象';
}
}
}
}
})();
三、添加一些私有属性、特权方法:
zj.util.dom=(function(){
//私有属性
var _name='zhansan',
_id='lisi';
//私有方法
function _xxx(){
}
//定义一些var 变量
return {
getId:function(id){
return document.getElementById(id);
},
getClass:function(className){
var arr=document.getElementsByTagName('*');
for(var i=0,len=arr.length;i<len;i++){
if(arr[i].getAttribute('class')==className){
return arr[i];
}else{
return '无此对象';
}
}
}
};
})();
四、增加声明依赖
zj.namespace("zj.util.array");
var module=zj.namespace("zj.util.dom");
module=(function(){
//声明依赖
var arr=zj.util.array;
//私有属性
var _name='zhansan',
_id='lisi';
//私有方法
function _xxx(){
}
//定义一些var 变量
return {
getId:function(id){
return document.getElementById(id);
},
getClass:function(className){
var arr=document.getElementsByTagName('*');
for(var i=0,len=arr.length;i<len;i++){
if(arr[i].getAttribute('class')==className){
return arr[i];
}else{
return '无此对象';
}
}
}
};
})();
五、将全局变量导入到模块中
zj.namespace("zj.util.array");
var module=zj.namespace("zj.util.dom");
module=(function($,app){
//声明依赖
var arr=zj.util.array;
//私有属性
var name='zhansan',
id='lisi';
//私有方法
function xxx(){
}
//定义一些var 变量
return {
getId:function(id){
return document.getElementById(id);
},
getClass:function(className){
var arr=document.getElementsByTagName('*');
for(var i=0,len=arr.length;i<len;i++){
if(arr[i].getAttribute('class')==className){
return arr[i];
}else{
return '无此对象';
}
}
}
};
})(jQuery,MYAPP);
此文是自己几日来,看书所做总结,遇到同行看到此文,如果不同看法,欢迎留言。
转载请注明出处:始终坚信分享能提高自己、成就他人,I‘m Ben, 一直在路上,从未敢怠慢。