javascript编程技艺＿模块化编程（匿名函数）

2012-09-23

javascript编程技巧＿模块化编程（匿名函数）参考：http://blog.csdn.net/lxp1021/article/details/7395461?自

javascript编程技巧＿模块化编程（匿名函数）

参考：http://blog.csdn.net/lxp1021/article/details/7395461

自己接触和学习ｊａｖａｓｃｒｉｐｔ也有３～４年了，看过几本ｄｏｍ编程的数据，在实际的项目开发中针对ｊｓ的使用还是非常普遍的，而牵扯到项目大部分都是对框架的使用，ｊｑｕｅｒｙ　，ｊｑｕｅｒｙ　ｕｉ，ｊｑｕｅｒｙ　ｅａｓｙｕｉ　，真正牵扯到前后台数据的交互，数据算法等高级编程知之甚少，甚至很少用，如果你问我你知道ｊｓ什么知识呢？我可能智能说知道点ｊｑｕｅｒｙ的技巧，知道点ｄｏｍ原理，说编程都谈不上，所以为了对的起自己的职业对得起自己的老板，需要把某一些技巧作为编程习惯固定下来，免于以后有人问我你知道什么？我可以喷点模块化编程云云，听起来很高端，其实很简单，废话少说，让我们思考一下模块化编程怎么实现的：

１.模块化编程的原因：

先上代码：

[javascript]?view plaincopy

var?age="34";??
var?name="alex";??
var?state="single";??
function?CreatMember(){??
????//[...]??
}??
function?getMemberText(){??
????//[...]??
}??

以上内容定义了三个全局变量和两个全局方法，在以后的编程中不能出现相同的变量和方法，

2.在实际的项目开发中，那我们怎么来规避这种问题办法呢？我们可以把这些变量和方法写在一个匿名函数里，使用匿名函数的特性来执行这些变量和方法,匿名函数的写法：

[javascript]?view plaincopy

var?newFun?=function(){??
var?age="34";??
var?name="alex";??
var?state="single";??
function?CreatMember(){??
????//[...]??
}??
function?getMemberText(){??
????//[...]??
}??
}();??

简化写法：[javascript]?view plaincopy

(function(){??
var?age="34";??
var?name="alex";??
var?state="single";??
function?CreatMember(){??
????//[...]??
}??
function?getMemberText(){??
????//[...]??
}??
CreatMember();??
getMemberText();??
})();??

3.那么我们想调用匿名函数里的变量和方法怎么办？我们需要把我们的匿名函数稍微改动一下：[javascript]?view plaincopy

var?newFun?=function(){??
var?age="34"??
var?name="alex"??
var?state="single"??
return{??
CreatMember:function?(){??
????//[...]??
},??
getMemberText:function(){??
?//[...]}??
}();??
newFun.CreatMember();??
newFun.getMemberTextr();??

4.结合自己对jquery的理解，在开发组件的时候使用这个闭包模块化编程的编程思想，来实现自定义插件与 jquery的插件不发生冲突：

[javascript]?view plaincopy

(function($){??
//[...]??
})(jQuery);??

5.如果嫌比较麻烦可以使用一下简写方法：[javascript]?view plaincopy

var?newFun=function(){??
var?age="34";??
var?name="alex";??
var?state="single";??
function?CreatMember(){??
??//[...]??
};??
function?getMemberText(){??
//[...]??
}??
return{??
creat:?CreatMember,??
get:getMemberText??
}??
}();??
newFun.creat();newFun.get();??

热点排行