requireJS初学

requireJS初学

requireJS的由来

　　前端技术虽然在不断发展之中，却一直没有质的飞跃。这些框架的使用效率以及开发质量在很大程度上都取决于开发者对其的熟悉程度，以及对JavaScript的熟悉程度。从一个框架迁移到一个新的框架，开发者很有可能还会按照原有框架的思维去思考和解决问题。这其中的一个重要原因就是JavaScript本身的灵活性。庆幸的是，一直有人在去不断的尝试和改进，CommonJS就是其中的一个重要组织。他们提出了许多新的JavaScript架构方案和标准，希望能为前端开发提供引导，提供统一的指引。

　　AMD规范就是其中比较著名一个，全称是Asynchronous Module Definition，即异步模块加载机制。从它的规范描述页面看，AMD很短也很简单，但它却完整描述了模块的定义，依赖关系，引用关系以及加载机制。

　　AMD规范是JavaScript开发的一次重要尝试，它以简单而优雅的方式统一了JavaScript的模块定义和加载机制，并迅速得到很多框架的认可和采纳。这对开发人员来说是一个好消息，通过AMD我们降低了学习和使用各种框架的门槛，能够以一种统一的方式去定义和使用模块，提高开发效率，降低了应用维护成本。

requireJS是什么？

　　既然AMD是一种模块化的规范，那么requireJS是什么呢，通过我这几天的学习，我学到的requireJS就是一个采用了AMD规范的模块加载器，它可以根据不同页面对不同模块的需求，按照你的设置依次加载并执行所有的 JavaScript 文件。

为什么要使用requireJS？

　　之前学习了模块化，以及正常编写javascript会遇到的一些问题：单文件变量命名冲突问题（全局污染）、前端多人协作问题、文件依赖问题（循环依赖）、按需加载等等，而使用requireJS这样一个模块加载器，这些问题都可以迎刃而解了。

　　可以看出，我们使用 Require JS 主要有两个目的：1、解耦代码，方便代码重用和管理；2、加速页面加载，内置优化引擎（需服务器支持），自动异步加载依赖项，将所有需要加载的文件自动合并为一个文件，减少 HTTP 请求。

requireJS如何去定义一个模块？

　　当我们根据模块化的基础概念设计模块时，那么requireJS是如何把我们的设想变为实际的模块的呢？关键字：define。

　　define( [module-name?], [array-of-dependencies?], [module-factory-or-object] );

　　nmodule-name: 模块标识，可以省略（官方最佳实践推荐不写）

　　narray-of-dependencies: 所依赖的模块，可以省略。

　　nmodule-factory-or-object: 模块的实现，或者一个JavaScript对象。

requireJS如何去使用一个模块？

　　当我们定义了一个模块后如何去使用呢？关键字：require。

　　require( [array-of-module], [callback-or-object] );

　　narray-of-module: 使用到的模块。

　　callback-or-object: 加载完使用模块执行的回调，或者一个JavaScript对象。

　　备注：另外requireJS还支持许多使用方式，例如直接引用JS文件、引用非AMD规范文件等等，详情见官网。

requireJS如何去配置模块？

　　require.config( [object] );

　　object：配置的模块对象，属性包含baseUrl（根路径）、paths（配置加载模块路径，格式{ "file": "path+filename" }）、shim、waitSeconds等等。

　　还可以将配置写在自定义JS文件中，只需在引用requireJS文件的script标记中添加属性data-main即可，例如：　

<script data-main="main" src="require.js"></script>

　　main.js文件内容：

require.config({
    baseUrl: "",
    paths : { },
    shim: { }
});

　　如果主页中有入口的require，那么建议放到main.js文件中。

 

是不是对requireJS有一个认识了呢，^_^