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

参考：http://blog.youkuaiyun.com/lxp1021/article/details/7395461

 

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

１.模块化编程的原因：

先上代码：

 

[javascript]  view plain copy

1. var age="34";  
2. var name="alex";  
3. var state="single";  
4. function CreatMember(){  
5.     //[...]  
6. }  
7. function getMemberText(){  
8.     //[...]  
9. }  

 

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

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

 

[javascript]  view plain copy

1. var newFun =function(){  
2. var age="34";  
3. var name="alex";  
4. var state="single";  
5. function CreatMember(){  
6.     //[...]  
7. }  
8. function getMemberText(){  
9.     //[...]  
10. }  
11. }();  

简化写法：

[javascript]  view plain copy

1. (function(){  
2. var age="34";  
3. var name="alex";  
4. var state="single";  
5. function CreatMember(){  
6.     //[...]  
7. }  
8. function getMemberText(){  
9.     //[...]  
10. }  
11. CreatMember();  
12. getMemberText();  
13. })();  

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

[javascript]  view plain copy

1. var newFun =function(){  
2. var age="34"  
3. var name="alex"  
4. var state="single"  
5. return{  
6. CreatMember:function (){  
7.     //[...]  
8. },  
9. getMemberText:function(){  
10.  //[...]}  
11. }();  
12. newFun.CreatMember();  
13. newFun.getMemberTextr();  

 

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

 

 

[javascript]  view plain copy

1. (function($){  
2. //[...]  
3. })(jQuery);  

5.如果嫌比较麻烦可以使用一下简写方法：

[javascript]  view plain copy

1. var newFun=function(){  
2. var age="34";  
3. var name="alex";  
4. var state="single";  
5. function CreatMember(){  
6.   //[...]  
7. };  
8. function getMemberText(){  
9. //[...]  
10. }  
11. return{  
12. creat: CreatMember,  
13. get:getMemberText  
14. }  
15. }();  
16. newFun.creat();newFun.get();