关闭

javascript编程技巧_模块化编程(匿名函数)

2767人阅读 评论(0) 收藏 举报

自己接触和学习javascript也有3~4年了,看过几本dom编程的数据,在实际的项目开发中针对js的使用还是非常普遍的,而牵扯到项目大部分都是对框架的使用,jquery ,jquery ui,jquery easyui ,真正牵扯到前后台数据的交互,数据算法等高级编程知之甚少,甚至很少用,如果你问我你知道js什么知识呢?我可能智能说知道点jquery的技巧,知道点dom原理,说编程都谈不上,所以为了对的起自己的职业对得起自己的老板,需要把某一些技巧作为编程习惯固定下来,免于以后有人问我你知道什么?我可以喷点模块化编程云云,听起来很高端,其实很简单,废话少说,让我们思考一下模块化编程怎么实现的:

1.模块化编程的原因:

先上代码:

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

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

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

var newFun =function(){
var age="34";
var name="alex";
var state="single";
function CreatMember(){
    //[...]
}
function getMemberText(){
    //[...]
}
}();
简化写法:
(function(){
var age="34";
var name="alex";
var state="single";
function CreatMember(){
    //[...]
}
function getMemberText(){
    //[...]
}
CreatMember();
getMemberText();
})();
3.那么我们想调用匿名函数里的变量和方法怎么办?我们需要把我们的匿名函数稍微改动一下:
var newFun =function(){
var age="34"
var name="alex"
var state="single"
return{
CreatMember:function (){
    //[...]
},
getMemberText:function(){
 //[...]}
}();
newFun.CreatMember();
newFun.getMemberTextr();

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

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

5.如果嫌比较麻烦可以使用一下简写方法:
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();



0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:225332次
    • 积分:2683
    • 等级:
    • 排名:第13529名
    • 原创:57篇
    • 转载:25篇
    • 译文:2篇
    • 评论:11条
    最新评论