RequireJS:一款优秀的AMD模块加载器

时间 2021-06-18

标签 html node jquery git github segmentfault api 浏览器模块化函数栏目 JavaScript 繁體版

原文原文链接

RequireJS概述

RequireJS是一款遵循AMD规范协议的JavaScript模块加载器，
不但能在浏览器端充分利用，一样能在其余的JavaScript运行时环境，
好比Rhino和NodeJS。使用像RequireJS这样的模块加载器能提升代码的质量和开发速度。html

RequireJS的兼容性

IE 6+ .......... compatible ✔
    Firefox 2+ ..... compatible ✔
    Safari 3.2+ .... compatible ✔
    Chrome 3+ ...... compatible ✔
    Opera 10+ ...... compatible ✔

模块化核心之定义模块

在RequireJS中，经过向全局变量注册define函数来声明一个模块。在定义模块时，咱们要遵循一下的规范：node

一个JavaScrip文件即为一个模块，即一个JavaScrip文件只能定义一个define函数。
RequireJS最佳实践推荐，定义模块时不要指定模块标识。这样方便后期压缩。
RequireJS最佳实践推荐推行尽可能将代码封装到define函数里面。尽可能不要使用shim配置项。

如下代码为定义一个模块的简单示例：jquery

define(['jquery'],function($){

    //你的封装的代码

 });

上面的代码应该封装到一个JavaScrip文件中，其做用是定义一个模块，并且这个模块依赖于其余的模块，这里是指依赖jquery模块，这个模块在配置里已经被定义，若是没被定义，则有一套默认的查找机制，（ps:后期会专门写一篇相关文章），第二个参数为依赖模块执行后注入的参数，这样在你的代码中就能够肆无忌惮的使用美圆($)啦。git

模块化核心之加载模块

同定义模块同样，RequireJS提供require这个函数用来加载模块，一样有些规范须要咱们遵照，github

一个JavaScrip文件最好只定义一个require模块入口。
require通常放在页面的入口出，用来加载其余的模块。

如下代码是require的简单利用：segmentfault

require(['jquery'],function($){

    // todo

});

这个示例代码的做用是加载指定jquery模块，而且在回调函数中注入$。（题外话，我通常把一个业务模块为一个入口模块。）api

模块化核心之配置文件

RequireJS强大的灵活性是经过配置文件来实现的，经过配置文件你能够简化模块的完整路径，能够切换同一个脚本的多个版本，统一管理脚本，也能够为非模块化的脚本指定shim操做等等。（详细请见http://www.requirejs.org/docs/api.html#config）浏览器

RequireJS简单示例

下面咱们经过一个简短的例子来窥探一下RequireJS的基本运行流程，并同时加深一下前面理论基础的理解。项目示例的目录结构以下图所示：
模块化

每一个文件的代码分别以下所示：函数

project.html

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>RequireJS简单示例</title>
    </head>
    <body>
        <script src="scripts/require.js" data-main="scripts/main"></script>
    </body>
</html>

main.js

require(["helper/util"], function(util) {
    // todo
});

util.js

define(function(){
    alert("Hello RequireJS!!");
});

在project.html中，在script标签中指定了一个data-main属性，那么这个属性是干什么用的呢？它用来指定页面脚本的入口，简单来讲就是告诉页面，你在找脚本嘛，沿着这个入口进去就知道了。

经过data-main咱们就知道入口脚本的位置，经过这个位置咱们就知道了示例中的入口脚本文件所处位置为scripts/main.js,在这个页面中require只调用了一次，和上面说的同样，这个函数的做用是加载指定的依赖模块。

在main.js中，指定了页面加载的模块为helper/util，而后RequireJS就会得出具体的模块路径地址，示例中该模块的地址为：scripts/helper/util.js。而后咱们进入到这个页面，发现内部的代码都是经过define函数来包裹的，这也符合上面说的，模块的定义最好是经过define函数包裹起来。

找到这个模块后，加载并调用，而后在页面就会弹出一个Hello RequireJS!!警告框。

帮助文档

RequireJS官网：http://requirejs.org/
RequireJS中文站：http://www.requirejs.cn/ （不太稳定）

拓展阅读

连接：http://justineo.github.io/singles/writing-modular-js/
连接：http://efe.baidu.com/blog/dissecting-amd-what/
连接：http://www.udpwork.com/item/3978.html
连接：http://justineo.github.io/singles/writing-modular-js/
连接：http://cyj.me/why-seajs/requirejs/