一个模块是实现特定功能的文件,想实现神秘杨的功能就电泳什么样的模块即可了。
基础模块
1.封装
函数作为模块
function fun1(){.......}
function fun2(){.......}
需要实现什么样的功能直接调用相关的函数即可,至于函数内部具体的细节就不考虑了呢
缺点:污染全局变量,而且文件之间也没有什么关联。
解决:对象的写法,将方法封装在内
2.对象
var myModule = {
name : "lilei" ,
sex : "men" ,
fun1 : function(){........} ,
fun2 : function(){........}
}
需要实现实现什么样的功能就直接调用对象的相应方法就可以了。
优点:避免的变量污染,秩序保证模块名唯一即可。同时模块内的成员也有了关系。
缺点:外部可以随意更改内部的属性、方法。容易产生以外的安全问题。
解决:立即执行函数
3.立即执行函数
var myModule =(function() {
var name = "lilei" ;
var sex = "men" ;
function fun1 (){........} ;
function fun2 (){........};
return{
fun1 : fun1,
fun2 : fun2
}
})()
myModule.fun1();
myModule.fun2();
这样在外边就不能修改没有暴漏出来的属性、方法。
现在流行的两种面模块:commonJS 、AMD
1.commonJS由服务器端javascript带来,由
nodeJS发扬光大。
①定义模块
一个单独的文件就是一个模块,每一个模块就是一个单独作用域。内部封装的内容我们看不到,除非设置成global的。
②输出模块
模块只能设置一个出口,把要输出的内容放到这个出口里。
④加载模块:
加载模块使用
require
方法,该方法读取一个文件并执行,返回文件内部的module.exports
对象
还是偏重于java的用法。这个用法在服务器端实现很简单,但在浏览器会出现各种问题。
2.AMD:异步模块定义。
它是一个在浏览器端模块化开发的规范
AMD不是js原生支持,所以开发时需要用到对应的库函数(requireJS).
实际上AMD是
requireJS在推广过程中对模块定义的规范化的产生。
requireJS主要解决两大问题:
①多个js文件可能有依赖关系,被依赖的文件需现价在到浏览器
②js加载时浏览器停止页面渲染,加载文件过多,页面相应时间越多。