开源中国

我们不支持 IE 10 及以下版本浏览器

It appears you’re using an unsupported browser

为了获得更好的浏览体验,我们强烈建议您使用较新版本的 Chrome、 Firefox、 Safari 等,或者升级到最新版本的IE浏览器。 如果您使用的是 IE 11 或以上版本,请关闭“兼容性视图”。
RequireJS 入门指南 - 技术翻译 - 开源中国社区

RequireJS 入门指南 【已翻译100%】

oschina 推荐于 4年前 (共 8 段, 翻译完成于 08-19) 评论 37
收藏  
174
推荐标签: RequireJS 待读

简介

如今最常用的JavaScript库之一是RequireJS。最近我参与的每个项目,都用到了RequireJS,或者是我向它们推荐了增加RequireJS。在这篇文章中,我将描述RequireJS是什么,以及它的一些基础场景。

异步模块定义(AMD)

谈起RequireJS,你无法绕过提及JavaScript模块是什么,以及AMD是什么。

JavaScript模块只是遵循SRP(Single Responsibility Principle单一职责原则)的代码段,它暴露了一个公开的API。在现今JavaScript开发中,你可以在模块中封装许多功能,而且在大多数项目中,每个模块都有其自己的文件。这使得JavaScript开发者日子有点难过,因为它们需要持续不断的关注模块之间的依赖性,按照一个特定的顺序加载这些模块,否则运行时将会放生错误。

super0555
 翻译得不错哦!

当你要加载JavaScript模块时,就会使用script标签。为了加载依赖的模块,你就要先加载被依赖的,之后再加载依赖的。使用script标签时,你需要按照此特定顺序安排它们的加载,而且脚本的加载是同步的。可以使用async和defer关键字使得加载异步,但可能因此在加载过程中丢失加载的顺序。另一个选择是将所有的脚本捆绑打包在一起,但在捆绑的时候你仍然需要把它们按照正确的顺序排序。

AMD就是这样一种对模块的定义,使模块和它的依赖可以被异步的加载,但又按照正确的顺序。

Getting Started with RequireJS Library

CommonJS, 是对通用的JavaScript模式的标准化尝试,它包含有 AMD 定义 ,我建议你在继续本文之前先读一下。在ECMAScript 6这个下一版本JavaScript 规范中,有关于输出,输入以及模块的规范定义,这些将成为JavaScript语言的一部分,而且这不会太久。这也是关于RequireJS我们想说的东西。

super0555
 翻译得不错哦!

RequireJS?

RequireJS是一个Javascript 文件和模块框架,可以从 http://requirejs.org/下载,如果你使用Visual Studio也可以通过Nuget获取。它支持浏览器和像node.js之类的服务器环境。使用RequireJS,你可以顺序读取仅需要相关依赖模块。

RequireJS所做的是,在你使用script标签加载你所定义的依赖时,将这些依赖通过head.appendChild()函数来加载他们。当依赖加载以后,RequireJS计算出模块定义的顺序,并按正确的顺序进行调用。这意味着你需要做的仅仅是使用一个“根”来读取你需要的所有功能,然后剩下的事情只需要交给RequireJS就行了。为了正确的使用这些功能,你定义的所有模块都需要使用RequireJS的API,否者它不会像期望的那样工作。

姜鹏飞
 翻译得不错哦!

RequireJS API 存在于RequireJS载入时创建的命名空间requirejs下。其主要API主要是下面三个函数:

  • define– 该函数用户创建模块。每个模块拥有一个唯一的模块ID,它被用于RequireJS的运行时函数,define函数是一个全局函数,不需要使用requirejs命名空间.
  • require– 该函数用于读取依赖。同样它是一个全局函数,不需要使用requirejs命名空间.
  • config– 该函数用于配置RequireJS.

在后面,我们将教你如果使用这些函数,但首先让我们先了解下RequireJS的加载流程。

姜鹏飞
 翻译得不错哦!

data-main属性

当你下载RequireJS之后,你要做的第一件事情就是理解RequireJS是怎么开始工作的。当RequireJS被加载的时候,它会使用data-main属性去搜寻一个脚本文件(它应该是与使用src加载RequireJS是相同的脚本)。data-main需要给所有的脚本文件设置一个根路径。根据这个根路径,RequireJS将会去加载所有相关的模块。下面的脚本是一个使用data-main例子:

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

另外一种方式定义根路劲是使用配置函数,后面我们将会看到。requireJs假设所有的依赖都是脚本,那么当你声明一个脚本依赖的时候你不需要使用.js后缀。

NCThinker
 翻译得不错哦!

配置函数

如果你想改变RequireJS的默认配置来使用自己的配置,你可以使用require.configh函数。config函数需要传入一个可选参数对象,这个可选参数对象包括了许多的配置参数选项。下面是一些你可以使用的配置:

  • baseUrl——用于加载模块的根路径。
  • paths——用于映射不存在根路径下面的模块路径。
  • shims——配置在脚本/模块外面并没有使用RequireJS的函数依赖并且初始化函数。假设underscore并没有使用  RequireJS定义,但是你还是想通过RequireJS来使用它,那么你就需要在配置中把它定义为一个shim。
  • deps——加载依赖关系数组

下面是使用配置的一个例子:

require.config({
    //By default load any module IDs from scripts/app
    baseUrl: 'scripts/app',
    //except, if the module ID starts with "lib"
     paths: {
        lib: '../lib'
    }, 
    // load backbone as a shim
    shim: {
        'backbone': {
            //The underscore script dependency should be loaded before loading backbone.js
            deps: ['underscore'],
            // use the global 'Backbone' as the module name.
            exports: 'Backbone'
        }
    }
});

在这个例子中把根路径设置为了scripts/app,由lib开始的每个模块都被配置在scripts/lib文件夹下面,backbone 加载的是一个shim依赖。

NCThinker
 翻译得不错哦!

用RequireJS定义模块

模块是进行了内部实现封装、暴露接口和合理限制范围的对象。ReuqireJS提供了define函数用于定义模块。按章惯例每个Javascript文件只应该定义一个模块。define函数接受一个依赖数组和一个包含模块定义的函数。通常模块定义函数会把前面的数组中的依赖模块按顺序做为参数接收。例如,下面是一个简单的模块定义:

define(["logger"], function(logger) {        
        return {
             firstName: “John",
             lastName: “Black“,
             sayHello: function () {
                logger.log(‘hello’);
             }
        }
    }
);

我们看,一个包含了logger的模块依赖数组被传给了define函数,该模块后面会被调用。同样我们看所定义的模块中有一个名为logger的参数,它会被设置为logger模块。每一个模块都应该返回它的API.这个示例中我们有两个属性(firstName和lastName)和一个函数(sayHello)。然后,只要你后面定义的模块通过ID来引用这个模块,你就可以使用其暴露的API。

姜鹏飞
 翻译得不错哦!

使用require函数

在RequireJS中另外一个非常有用的函数是require函数。require函数用于加载模块依赖但并不会创建一个模块。例如:下面就是使用require定义了能够使用jQuery的一个函数。

require(['jquery'], function ($) {
    //jQuery was loaded and can be used now
});

小结

在这篇文章中我介绍了RequireJS库,它是我创建每个Javascript项目都会用到的库函数之一。它不仅仅用于加载模块依赖和相关的命令,RequireJS帮助我们写出模块化的JavaScript代码,这非常有利于代码的可扩展性和重用性。

NCThinker
 翻译得不错哦!
本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们
评论(37)
Ctrl/CMD+Enter

data-main属性这段里最后一句: 另外一种方式定义根路'劲'是使用配置函数, 错别字...
有沒有應用示例啊,看不出它的優勢哦

引用来自“張凡”的评论

有沒有應用示例啊,看不出它的優勢哦

服务器用比较合适, 前端用会增加请求次数降低性能

引用来自“jQer”的评论

引用来自“張凡”的评论

有沒有應用示例啊,看不出它的優勢哦

服务器用比较合适, 前端用会增加请求次数降低性能

你JS跟谁学的?不是这样的哦,传统的<script>存在几个问题:1.严格的读取顺序,多个文件互相依赖,依赖性最小的文件必须放在最前面,否则代码会报错;2.性能问题,浏览器采用"同步模式"加载<script>标签,也就是说,页面会"堵塞"。
##为了解决这些问题,可以使用DOM方法,动态加载Javascript文件。##,注意哦,动态加载JS,并不会造成性能问题,而是更好的解决JS性能问题

引用来自“jQer”的评论

引用来自“張凡”的评论

有沒有應用示例啊,看不出它的優勢哦

服务器用比较合适, 前端用会增加请求次数降低性能

关于增加请求次数的问题,在生产环境下也是有解决方案的,http://requirejs.org/docs/optimization.html#download
补充几点,这些是楼主没有提到的。
1.原生的require()不支持按次序加载,所以加载的JS文件到底先加载哪个,无法事前知道,而之后的回调参数也是在请求的所有JS完毕之后才开始回调;
2.动态加载的Js文件,不在原始的DOM结构之中,因此在DOM-ready(DOMContentLoaded)事件和window.onload事件中指定的回调函数对它无效。

引用来自“Not”的评论

引用来自“jQer”的评论

引用来自“張凡”的评论

有沒有應用示例啊,看不出它的優勢哦

服务器用比较合适, 前端用会增加请求次数降低性能

关于增加请求次数的问题,在生产环境下也是有解决方案的,http://requirejs.org/docs/optimization.html#download

可以打包为一个大的JS。当然,首次加载会比较慢。
这种写法让我想起来DOJO
1、"否者它不会像期望的那样工作。 "
应该是:否则不会像期望的那样工作。
2、“你可以使用require.configh函数”
应该是config函数
3、“按章惯例每个Javascript文件只应该定义一个模块。”
应该是按照惯例吧

加油~辛苦哇
SEAJS
感觉 阮一峰 http://www.ruanyifeng.com/blog/2012/11/require_js.html 这个写得清晰易懂
个人觉得还是sea.js好用
用过一段时间,下次准备换sea。js对比一下

引用来自“jQer”的评论

引用来自“張凡”的评论

有沒有應用示例啊,看不出它的優勢哦

服务器用比较合适, 前端用会增加请求次数降低性能

不懂装懂
跟sea.js / kissy 在模块依赖基础上的异步加载功能没有太大差别,都适合在客户端或者node端使用,只是requireJS文件小一点,功能单一一点。
如果只是用这个功能没差别, 如果要使用相关类库开发,requireJS就木有了,kissy还是比较丰富的。

比较郁闷的是: requireJS强制给加载文件url后面加了.js后缀的判断,不是.js的都给改了,这让我引用.coffee后缀的js代码模块时候很郁闷,最后只好去改了源代码。


引用来自“李惟”的评论

引用来自“jQer”的评论

引用来自“張凡”的评论

有沒有應用示例啊,看不出它的優勢哦

服务器用比较合适, 前端用会增加请求次数降低性能

你JS跟谁学的?不是这样的哦,传统的<script>存在几个问题:1.严格的读取顺序,多个文件互相依赖,依赖性最小的文件必须放在最前面,否则代码会报错;2.性能问题,浏览器采用"同步模式"加载<script>标签,也就是说,页面会"堵塞"。
##为了解决这些问题,可以使用DOM方法,动态加载Javascript文件。##,注意哦,动态加载JS,并不会造成性能问题,而是更好的解决JS性能问题

+1

引用来自“李惟”的评论

引用来自“jQer”的评论

引用来自“張凡”的评论

有沒有應用示例啊,看不出它的優勢哦

服务器用比较合适, 前端用会增加请求次数降低性能

你JS跟谁学的?不是这样的哦,传统的<script>存在几个问题:1.严格的读取顺序,多个文件互相依赖,依赖性最小的文件必须放在最前面,否则代码会报错;2.性能问题,浏览器采用"同步模式"加载<script>标签,也就是说,页面会"堵塞"。
##为了解决这些问题,可以使用DOM方法,动态加载Javascript文件。##,注意哦,动态加载JS,并不会造成性能问题,而是更好的解决JS性能问题

小孩子, 没有实战经验就别在这bb。 你去打听下谁家的商业站在浏览器端用require js的

引用来自“jQer”的评论

引用来自“李惟”的评论

引用来自“jQer”的评论

引用来自“張凡”的评论

有沒有應用示例啊,看不出它的優勢哦

服务器用比较合适, 前端用会增加请求次数降低性能

你JS跟谁学的?不是这样的哦,传统的<script>存在几个问题:1.严格的读取顺序,多个文件互相依赖,依赖性最小的文件必须放在最前面,否则代码会报错;2.性能问题,浏览器采用"同步模式"加载<script>标签,也就是说,页面会"堵塞"。
##为了解决这些问题,可以使用DOM方法,动态加载Javascript文件。##,注意哦,动态加载JS,并不会造成性能问题,而是更好的解决JS性能问题

小孩子, 没有实战经验就别在这bb。 你去打听下谁家的商业站在浏览器端用require js的

多了去了,至少我知道,bat就有很多团队钻研这种,商业化场景也很多,举1,2个吧,百度统计,支付宝(支付宝用的是seajs,思想和这个差不多),commonjs,requirejs,seajs都是趋势啊

引用来自“我是一名新人”的评论

引用来自“jQer”的评论

引用来自“李惟”的评论

引用来自“jQer”的评论

引用来自“張凡”的评论

有沒有應用示例啊,看不出它的優勢哦

服务器用比较合适, 前端用会增加请求次数降低性能

你JS跟谁学的?不是这样的哦,传统的<script>存在几个问题:1.严格的读取顺序,多个文件互相依赖,依赖性最小的文件必须放在最前面,否则代码会报错;2.性能问题,浏览器采用"同步模式"加载<script>标签,也就是说,页面会"堵塞"。
##为了解决这些问题,可以使用DOM方法,动态加载Javascript文件。##,注意哦,动态加载JS,并不会造成性能问题,而是更好的解决JS性能问题

小孩子, 没有实战经验就别在这bb。 你去打听下谁家的商业站在浏览器端用require js的

多了去了,至少我知道,bat就有很多团队钻研这种,商业化场景也很多,举1,2个吧,百度统计,支付宝(支付宝用的是seajs,思想和这个差不多),commonjs,requirejs,seajs都是趋势啊

对于前端需要的是命名空间, 而不是文件路径。
require js 的目标就是一个文件一个类(对象), 调用某个对象时,直接通过对方的路径进行引用。
而对于前端, js文件最快速或者隐藏式的下载缓存到用户浏览器中, 以后不再要求用户对服务器请求js。 所有的js在合理的命名空间下管理。 一个懂请求的人怎么会用require js。
你难道让用户下载完js后, 每次调用某个对象, 都要重新去服务器询问一次js的路径?
顶部