关于javascript模块化

其实js模块化几年前就有了,但自己一直没有接触过,只是听说。这算一个很大的知识点吧,这两天打算认真学习一下。网上搜集了一些资料,首先阅读的是阮一峰大神的文章http://www.ruanyifeng.com/blog/2012/10/javascript_module.html

阅读的过程中,首先明白了最简单的模块化,两个函数声明就是两个模块了。接着是模块化的对象写法,这种写法的缺点是内部变量会暴露,导致被篡改,于是使用匿名函数的方法。

阅读到这里,对于匿名函数我其实是一知半解的,之前也是有所了解,但并不全面。

那么接下来我继续搜索关于立即调用函数的知识。

首先三个名词:函数表达式,函数声明,匿名函数

函数表达式就是有等号的,一般用var声明一个变量之后把一个匿名函数赋值给这个变量。

函数声明就是以function开头,紧接着是函数名和函数体如function funName(){}。

匿名函数就是没有函数名的函数表达式。

立即调用函数,首先他的作用顾名思义,开发者希望定义完之后不用再调用就可以执行。

函数声明无法立即调用。把函数声明转换为函数表达式就可以。有很多种方法,最简单的是用一对小括号将函数声明括起来,然后在最后面加上一对小括号就可以。(function fnName(){})();

其他的方法是在function前面加!,-,+,void,其余具体的不再展开了,其实我还是不太明白为什么外部无法访问内部变量,好像是因为作用域的关系,具体原理不是很清楚。

那么最简单的用立即调用函数创建的js模块就是如下

var module = function(){

var m1 = function(){};

var m2 = function(){};

return{

m1:m1,

m2:m2,

}

}();

放大模式:

var module = function(mod){

mod.m1 = function(){};

mod.m2 = function(){};

return mod;

}(module);

宽放大模式:

var module1 = ( function (mod){

//…

return mod;

})(window.module1 || {});

就是多了个变量能为空

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注