一,JS模块化演变过程
1.普通函数封装
1 function fn1(){ 2 3 } 4 5 function fn2(){ 6 7 }
最初的这种普通函数封装的缺点很明显:污染了全局变量,无法避免的会与其他模块发生变量名冲突,而且自身模块成员之间没有任何联系,,说白了就是没有做到“高内聚,低耦合”原则
2.对象
1 var myModule = { 2 var1: 1, 3 var2: 2, 4 fn1: function(){ 5 6 }, 7 fn2: function(){ 8 9 } 10 }
技术一直在进步,这种做法的避免了变量污染,只要保证模块名唯一即可,自身模块内的成员也有了联系;
但是新的问题出现了,看似不错的解决方案,也有缺陷,外部可以随意修改内部成员;
如:myModel.val = 100; 说白了就是产生了安全问题
3.立即执行函数
1 var myModule = (function(){ 2 var var1 = 1; 3 var var2 = 2; 4 function fn1(){ 5 6 } 7 function fn2(){ 8 9 } 10 return { 11 fn1: fn1, fn2: fn2 12 }; 13 })();
这种做法就是我们JS模块化的基础,技术永无止境,随着JS模块化技术提高,产生了不同流派,分支;其中主要有两种:CommonJS和AMD
二,CommonJS
1.定义模块:
根据CommonJS规范,一个单独的文件为一个模块,每个模块是一个单独的作用域,即在自身模块内部定义的变量,其他模块无法读取,除非是定义为global对象的属性
2.模块输出:
每个模块只有一个出口,即module.exports对象,我们需要把模块希望输出的内容放入该对象
3.加载模块:
加载模块使用require方法,该方法读取一个文件并执行,返回文件内部的module.exports对象
1 //模块定义 2 myModel.js 3 var name = ‘Byron‘; 4 function printName(){ 5 console.log(name); 6 } 7 function printFullName(firstName){ 8 console.log(firstName + name); 9 } 10 module.exports = { 11 printName: printName, 12 printFullName: printFullName 13 } 14 //加载模块 15 var nameModule = require(‘./myModel.js‘); 16 nameModule.printName();
不同的实现对require时的路径有不同要求,一般情况可以省略js拓展名,可以使用相对路径,也可以使用绝对路径,甚至可以省略路径直接使用模块名(前提是该模块是系统内置模块)
问题:
仔细看上面的代码,会发现require是同步的。模块系统需要同步读取模块文件内容,并编译执行以得到模块接口。
这在服务器端实现很简单,也很自然,然而, 想在浏览器端实现问题却很多。
浏览器端,加载JavaScript最佳、最容易的方式是在document中插入script 标签。但脚本标签天生异步,传统CommonJS模块在浏览器环境中无法正常加载。
解决思路之一是,开发一个服务器端组件,对模块代码作静态分析,将模块与它的依赖列表一起返回给浏览器端。 这很好使,但需要服务器安装额外的组件,并因此要调整一系列底层架构。
另一种解决思路是,用一套标准模板来封装模块定义,但是对于模块应该怎么定义和怎么加载,又产生的分
三,AMD
AMD 即Asynchronous Module Definition,中文名是异步模块定义的意思。它是一个在浏览器端模块化开发的规范。
由于不是JavaScript原生支持,使用AMD规范进行页面开发需要用到对应的库函数,也就是大名鼎鼎RequireJS,实际上AMD 是 RequireJS 在推广过程中对模块定义的规范化的产出。
requireJS主要解决两个问题
1.多个js文件可能有依赖关系,被依赖的文件需要早于依赖它的文件加载到浏览器
2.js加载的时候浏览器会停止页面渲染,加载文件越多,页面失去响应时间越长
语法
requireJS定义了一个函数 define,它是全局变量,用来定义模块。
define(id?, dependencies?, factory);
id:可选参数,用来定义模块的标识,如果没有提供该参数,脚本文件名(去掉拓展名);
dependencies:是一个当前模块依赖的模块名称数组
factory:工厂方法,模块初始化要执行的函数或对象。如果为函数,它应该只被执行一次。如果是对象,此对象应该为模块的输出值;
1 // 定义模块 2 myModule.js 3 define([‘dependency‘], function(){ 4 var name = ‘xlw‘; 5 function printName(){ 6 console.log(name); 7 } 8 return { 9 printName: printName 10 }; 11 }); 12 // 加载模块 13 require([‘myModule‘], function (my){ 14 my.printName(); 15 });
在页面上使用require函数加载模块
1 require([dependencies], function(){ 2 3 });
require()函数接受两个参数
第一个参数是一个数组,表示所依赖的模块
第二个参数是一个回调函数,当前面指定的模块都加载成功后,它将被调用。加载的模块会以参数形式传入该函数,从而在回调函数内部就可以使用这些模块
require()函数在加载依赖的函数的时候是异步加载的,这样浏览器不会失去响应,它指定的回调函数,只有前面的模块都加载成功后,才会运行,解决了依赖性的问题。
敬请留言指正补充
(完~~)