JS中的模块化

同步加载

• 在浏览器端可能造成阻塞

异步加载

• 有依赖的代码无法正常执行

异步加载方案

• 通过XMLHttpRequest 加载脚本

  • 存在跨域问题
  • 用臭名昭著的eval动态执行
  • 或者在body里插入文件对应的script节点，这会干扰调试时控制台输出的错误行

• 通过WebWorkers加载脚本

  • 浏览器兼容性较差
  • 返回的字符串插入dom中的方法和XHR一样

• 通过document.write()加载脚本

  • 页面加载完之后失效，意味着不能按需加载
  • 由于清空文档流的机制，会阻塞页面的渲染

• 通过head.appendChild()加载脚本

  • 没有以上几种方法的缺点

如何解决异步加载导致有依赖的代码无法执行的问题？

• 函数封装

  • AMD中的define()

CommonJs

	var $ = require('jquery');
	exports.myExample = function () {}; 

• 同步加载
• node原生支持
• 对浏览器端的支持较差

AMD

	define(['jquery'] , function ($) {
		return function () {};
	});

• define的参数：模块的依赖和构造函数
• 当所有的依赖被加载好并执行时，这些依赖做为参数调用构造函数
• 允许直接返回函数
• 支持动态加载
• 对浏览器端的支持较好

RequireJS

• AMD
• 异步/同步加载
• 通过head.appendChild()加载脚本

参考资料

Why Web Modules?