这是原文的地址:why web modules?
这篇文章是摘自requirejs官网里的一篇文章,个人觉的从这里可以找出前端为什么需要引入模块思想
我们先来看看,没引入模块之前,将要面临的问题:
- web 站点向 web app发展
- 代码越来越大
- 构建越来越困难
- 开发者想分离JS文件
- 开发者想优化代码以提高http性能
解决方案
前端开发者可能需要以下的方案:
- 类似于后端里的import/include/require 关键字语法
- 加载依赖的能力
- 一个容易使用的前端优化工具
先看看以有的第三方实现
脚本加载器
先整理出一些可选的第三方加载库
- Dojo: dojo.require('some.module')
- LABjs: $LAB.script('some/module.js')
- CommonJS: require('some/module')
这些方法都可以加载指定的JS文件,理想情况下，我们可以使用commonJS语法来加载JS,因为以后越来越多的库使用它,而且我们想我们的代码可以重用.我们还需要某种语法，将允许装载今天存在纯JavaScript文件 - 开发人员不应该重写他们的JavaScript来获取脚本加载的好处。
但是我们需要一个在浏览器端运行的很好的加载库,commonJS require()是一个同步方法,默认是立即返回的,但是这个在浏览器内是不可能的.
异步与同步
下面的例子表明异步与同步的一个区别
var person = require('module/person');
function Manager(){
this.reports = [];
}
Manager.prototype = new person; // --> browser is error
假如这个在NodeJS里运行是没问题的,模块会同步执行返回,但是在浏览器端,脚本显然会异步返回,这时候调用它的实例就会报错,那么我们怎么处理浏览器端的异步呢?
XHR 加载脚本
我们可以临时使用XMLHttpRequest(XHR)来加载脚本--通过正则获取到上面内容中的的模块,然后利用eval()或者script元素来把XHR返回的内容添充到text属性中或者eval执行它.
使用eval方法是不规范的:
- 开发者从一开始就被教导不能使用eval
- 有些执行环境不允许使用eval
- eval很难调试,目前只有firbug,chrome提供的inspector有选项来指定eval文本的路径
- eval上下文很难跨浏览器,也许只有在ie中使用execScript方法,这些就会导致代码块的差异
使用script标签来包含XHR的内容也是不对的:
- 当调试出现bug的时候，出现的错误代码行号跟原始文件行号不一致
使用XHR来加载文件本身就有跨域的限制,虽然现在的浏览器已经支持跨域请求,但是IE是通过使用XDomainRequest对象,显然不规范导致的代码越多就越容易出问题;而且为了保证跨域访问被对允许,必须发送标准的请求头.
Dojo目前就是以XHR为基础然后使用eval来加载模块的,针对跨域使用xdomain来处理,所以XHR加上eval是可以用来加载模块的,只是这样对开发者来说负担太大了.
如果我们想创建一个模块加载器的话,其实我们可以做的更好的
Web Worker 加载脚本
web worker 有可能是加载JS模块的另一种方法, 但是:
- 不能跨浏览器
- web worker是以消息机制来通讯的,在worker线程内的JS是不能访问DOM的,所以只能通过eval或者script标签来解析内容,这样的话就会出现上面XHR方式带来的问题
Document.write 加载脚本
document.write能够用来加载脚本,因为它支持跨域,而且能够正常的显示脚本,方便调试
不过它不能立即执行,虽然理想情况下能保证依赖全部加载,但是只能在脚本执行完之后才能访问到里面的JS代码
而且document.write在页面加载完成之后就不会再执行,这样就不能实现按需加载,通常只在用户需要某个功能的时候再加载JS是能够有效的提高网站性能
Head.appendChild 加载脚本
先看下面的代码片段:
var script = document.createElement('script');
script.src = 'feenan.js';
document.getElementsByTagName('head')[0].appendChild(script);
head.appendChild相比于上面的方式来说有一点复杂,不过这只是基本的想法,跟document.write相比,它不会阻塞页面渲染而且页面加载完之后还能继续调用
不过也有一个致命的问题,跟同步相比不能立马执行完,理想的情况是,模块加载有保证所有的依赖在执行脚本之前就加载完毕.
函数包装
了解了上面的几种方案,都有几个相同的问题,所以我们需要自己构建模块加载,处理依赖关系,像下面这样的:
defind(
// 模块名称
'feenan',
// 模块依赖
['zepto'],
// 传递依赖参数
function($){
return {
init: function(){
console.log('hello feenan!');
}
}
}
);
上面的是requirejs的语法,假如只是想请求简单的JS文件,可以像下面这样写,不需要define关键字.
require(['zepto'], function($){
// 此处就可以调用zepto的方法了,$只是别名
})
选择这种语法是因为这比较简单，并且允许使用像head.appendChild那样来加载JS
浏览器端的commonJS跟上面不一样的是,需要额外对现有的代码包装一层,这个会影响调试
想了解更多的关于AMD规范的模块机制，可以参考这篇文章,why AMD 有空再来篇中文版的!