使用 RequireJS 来优化你的 JavaScript 代码 已翻译 100%

oschina 投递于 2013/02/12 16:21 (共 5 段, 翻译完成于 02-13)
阅读 5018
收藏 59
6
加载中

RequireJS是一个提高你的javascript代码速度和质量的有效方法,同时它还让你的代码更容易阅读和维护。

在本文中,我会为你介绍RequireJS和应该如何使用它。我们讨论引入文件和定义模块,甚至还会接触优化方面的知识。

简单的说,require.js是一个脚本载入程序,允许你把你的javascript代码独立成文件和模块,同时管理每个模块间的依赖关系。

enixyu
enixyu
翻译于 2013/02/13 16:50
2

引入文件

在开始使用RequireJS前,我们需要先下载它的库和Asynchronous Module Definition(AMD)文件。然后在文档头部链接到require.js文件,就如:

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

你可能会问data-main属性是什么,使用RequireJS意味着当你在文档的头部调用require的时候,你同时也会链接到你的javascript应用的主文件,在这个例子里面就是main.js(请注意,RequireJS自动添加.js后缀到文件名的后面)

在main.js文件里面,需要为RequireJS做配置,载入模块和定义一个base路径,以便在引入文件时使用。



enixyu
enixyu
翻译于 2013/02/13 16:59
2

Require函数

RequireJS使用一个简单的require函数去导入脚本,在这个例子里面,RequireJS导入的是JQuery:

require(["jquery"], function($) {
  $(‘#mydiv”).html(‘Hello this is RequireJS talking”);
});

RequireJS的一个优点就是,它非常容易阅读。在上面的代码中,我们可以看到,首先require函数抓取名字为jquery.js的文件,然后给一个匿名函数传入$作为参数,当这个动作完成后,你就可以任意使用JQuery的代码了。

现在,你的代码中一般不会包含jquery.js文件的jQuery库,就如大多数的插件和框架,我们通常选择从他们的GitHub或者Google CDN中导入进来,这样我们就需要配置他们的真正路径:

require.config({
 paths: {
   "jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"
 }
});
这就是说你可以通过Google导入jquery(请注意我在这个例子里面使用的是"jquery"名称,你可以使用任何你喜欢的名称)
enixyu
enixyu
翻译于 2013/02/13 17:08
2

定义模块

使用AMD模式,意味着我们的代码可以结构化成为模块;这些模块实现应用中的某些功能。你可以在一个模块中只放两行代码或者100行代码,这完全决定于你想通过模块实现什么功能。

定义模块,我们可以这样写:

define(function () { 
 function add (x,y) {
   return x + y;
 }
});
这个里面里面,我定义了一个add函数,并且没有任何依赖,但是如果这个函数需要jquery才能正常工作,定义代码可能就是这样:
define([‘jquery’], function () { 
 function place(mydiv) {
$(mydiv).html(‘My Sample Text’);
 }
});
使用这种语法,我们告诉JavaScript首先导入jquery,然后运行代码,这样任何时候都能使用jquery。我们也可以使用在Javascript文件中定义的模块,不仅限于框架或者插件。
enixyu
enixyu
翻译于 2013/02/13 17:14
2

优化

就像你看到的一样,RequireJS是一个强大的工具,去把你的文件组织成模块,并且在你需要的时候才导入。其中的缺点就是大量的javascript文件的时候,也需要大量的导入时间,所以RequireJS包含了一个optimizer优化器去收集所有文件的数据并把它放到一个压缩文件里面。

总的来说,RequireJS是一个很好的工具去组织和优化你web应用中的Javascript。

你在你的项目中用到RequireJS了吗?它改善了你的工作流程了吗?让我们在回复讨论一下。

enixyu
enixyu
翻译于 2013/02/13 17:20
2
本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接。
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。
加载中

评论(11)

史莱姆
现在大公司的框架 都这么用了.
可以提升加载和调用效率.微博上也是用的这个?
囧囧有神的兔纸
洒家感脚.. 完全没有用处啊.. 看完介绍, 根本没觉得有什么必要, 也没看到使用这个有什么开发或者运行效率上的提高... 好吧, 也许我没理解上去吧, 谁懂的来讲讲
s
sally19891121
感觉一般用的话没啥意义
小报童
小报童
问题是,能用好吗?
marrysail
marrysail

引用来自“清水先生”的评论

对于大部分企业来说,没有用处,反而是累赘

这个我想是架构的问题吧。用得好的话在小项目中也是可以一显身手的。
marrysail
marrysail
会使代码清晰、易读一些。和seajs 等oo框架类似吧。
小报童
小报童
对于大部分企业来说,没有用处,反而是累赘
W
Winson
感觉这个确实是个好东西,如果要写复杂的JS系统,用这个来搭建模块式开发非常方便
王道中强流
王道中强流
我感觉没什么用
swekaFruX8
swekaFruX8
看起来挺方便得
返回顶部
顶部