RequireJS

简介

RequireJS 能够让javascript更好的处理依赖问题，很快我们将会在Studio代码使用RequireJS 来加载我们需要的JavaScript。本页面是为了给开发者提供RequireJS 开发需要什么以及如何有效地使用它的入门教程。

 

核心问题

使用<script>类标签来加载JavaScript存在三个重大的问题。

1依赖管理

2缺乏隔离

3部署捆绑

依赖管理

       Edx所有的javascript脚本语言都是基于Jquery。但是，edx的一些脚本也依赖于特定的jQuery插件。一些脚本可能依赖于像Backbone、MathJax、CodeMirro、tinymce、其他的一些库。如果你想用的两个库有一个命名空间冲突话，问题就出现了。比如说Dojo vs jQuery 就会冲突$。唯一解决办法使用<script>标签加载页面需要的所有的依赖库，这意味着他们可能会被获得取多次，臃肿，缓慢，重复。

缺乏隔离

       JavaScript是一件有趣的事：一个脚本，可以很容易地影响到另一个。如果脚本重新定义了其他脚本使用一个变量，会发生什么？例如，undefined= true或$ = alert。（不要忘了，我们的一些网页运行用户生成的JavaScript！）如果一个脚本依赖于早期的脚本设置或修改特定的变量，或者页面上的元素，会发生什么？更改一个脚本需要改变其他 - 这也可以追溯到我们的依赖问题。

部署捆绑

       当我们部署我们的项目，我们在网页上连接和缩小javasript文件;这使客户能够检索到更少的JS文件以更少的HTTP往返，这意味着更少的开销。

这里的问题。比方说，有人修改内容的网页上，意图使该脚本只能在一个特定的页面（或少数特定的页面）加载的脚本。当我们网页上连接和缩小javasript文件，突然该网页的修改代码将载入我们的网站的每一页上。除了从我们的Javascript的包中删除bundle之外，再也没有办法把它取出来，或将其关闭。无论选择是好的：要么我们把它作为一个单独的文件，并失去了捆绑过程的利益;或者我们把它放在包，并让它影响我们不希望它影响页面。

解决办法

       RequireJS 处理了这三个问题。其基本思想是通过加载一个标准的<script>标记，并手动安装你的网站所需的每一个脚本。

Dependencymanagement

每一个脚本都使用require函数定义她的依赖关系，例如：

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

 console.log("We have jQuery: ", $);

});

Isolation

此外,需要将依赖值项作为参数传递给函数运行,这样你的函数依赖保证引用。例如：

The old,broken way:

<scriptsrc="jquery.js"></script>

<script>

  $ ="Oops, I'm clobbering $"

  jQuery ="Oops, I'm clobbering jQuery"

</script>

<script>

  console.log("I no longer have a reference to jQuery: ", $)

</script>

 

Butrequire saves the day!

<scriptsrc="require.js"></script>

<script>

// load jQuery, and then try to destroy it!

require(["jquery"], function() {

  $ ="Oops, I'm clobbering $"

  jQuery ="Oops, I'm clobbering jQuery"

});

</script>

<script>

// but it wasn't destroyed at all!

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

  console.log("require gave me a reference to jQuery, even though the global $ variable has been clobbered: ", $);

});

</script>

Deploymentbundles

 

js/base.js

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

  console.log("I run on the base template");

})

js/basic.js

require(["jquery", "backbone", "tinymce", "jquery.qtip"], function($, Backbone, tinymce) {

  console.log("I run on a fancy page, and I have several dependencies");

});

Then r.js willrewrite it to something like:

require("js/base", ["jquery"], function($){console.log("I run on the base template");});

require("js/basic", [], function(){console.log("I run on a simple page, and have no dependencies");});

require("js/fancy", ["jquery", "backbone", "tinymce", "jquery.qtip"], function($, Backbone