雨夜带刀

easy.js 核心库升级至 1.0.0，同时发布了组件库。

easy.js的网站：http://easyjs.org

github地址：https://github.com/chenmnkken/easyjs

在easy.js的模块加载器的详解(如果你没有阅读过，最好是先去阅读下，这样才能更好的理解这篇博文)中我详细的介绍过有关 easy.js 的加载器的实现。其加载和执行的顺序都要严格依赖队列一个一个的加载和执行，这种加载和执行方式就是串行。此文将介绍模块加载器并行加载的实现。

在讲解并行加载的实现原理之前，首先有必要对 JavaScript 文件的加载的执行有一个初步的了解。

JavaScript 在页面渲染时可能会对 DOM 元素进行修改，并且多个文件之间还会有依赖的关系，因此必须严格按照顺序依次执行，正是由于此种特性就势必对之后的页面资源的加载造成阻塞。但是请注意，这里说到的是按顺序执行。

由于 JavaScript 阻塞的特性，也影响到浏览器对 JavaScript 文件的加载，在老版本浏览器中，加载完就执行，执行完再加载，这正是上面说到的串行加载。为了提升性能，在现代浏览器中，如新版本的 Firefox 和 Chrome，将加载改成了并行。并行加载允许一次性同时加载多个文件，在 HTTP1.1 中，多个文件并行加载只需要发起一个 TCP 连接数。试想下，一条流水线依次生产十个产品肯定要比十条流水线同时生产一个产品要慢得多。虽然在现代浏览器中可以实现并行加载 JavaScript，但是其执行顺序还是要按照顺序来执行的。

之前的 easy.js 的模块加载器的确是按照老版本浏览器串行加载和执行的思路来实现的，而最新版的模块加载器就是按照现代浏览器的并行加载，串行执行的思路来实现的。

网页的交互越来越复杂，JavaScript 的异步操作也随之越来越多。如常见的 ajax 请求，需要在请求完成时响应操作，请求通常是异步的，请求的过程中用户还能进行其他的操作，不会对页面进行阻塞，这种异步的交互效果对用户来说是挺有友好的。但是对于开发者来说，要大量处理这种操作，就很不友好了。异步请求完成的操作必须预先定义在回调函数中，等到请求完成就必须调用这个函数。这种非线性的异步编程方式会让开发者很不适应，同时也带来了诸多的不便，增加了代码的耦合度和复杂性，代码的组织上也会很不优雅，大大降低了代码的可维护性。情况再复杂点，如果一个操作要等到多个异步 ajax 请求的完成才能进行，就会出现回调函数嵌套的情况，如果需要嵌套好几层，那你就只能自求多福了。

模块加载器的实现方法应该比较多，主要还是看哪种实现起来更简单，更易扩展。对于遵循不同规范的模块加载器，实现原理又千差万别。不管是用哪种实现方法，最终都是要满足模块加载器的那些最基本的功能。那么模块加载器的最基本的功能基本就可以概括成下面这几点。

• 定义模块
• 处理依赖
• 加载模块

定义模块

define( "hello", function(){
 return "hello world";
});

如今模块化的 JavaScript 的开发越来越火热，无论是模块加载器还是优秀的 JavaScript 模块，都是层出不穷。既然这么火，肯定是有存在的理由，肯定是解决了某些实际问题。很多没接触过模块化 JavaScript 开发者不禁要问，我真的需要模块化吗，模块化相比于传统的模式有什么优势？

JavaScript 本身是没有模块化支持的，很多语言多有，就连 CSS 都有这样的加载方式。

@import "fed.css";

虽然因为性能问题不推荐 CSS 这样来进行加载，但这是一种模块化的思想，这种思想对于 JavaScript 来说很有用。幸好 JavaScript 是一门灵活的语言，可以通过下面这段代码来进行动态加载 JavaScript 文件。

var script = document.createElement( 'script' ),
	head = document.head;

script.src = 'http://example.com/test.js';
script.async = 'async';

head.insertBefore( script, head.firstChild );