RequireJS
来源:互联网 发布:win的网络扫描仪 编辑:程序博客网 时间:2024/05/01 23:35
简介
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
- RequireJS
- RequireJS
- RequireJS
- requireJs
- requireJS
- requirejs
- requireJS
- requireJS
- RequireJS
- requirejs
- RequireJS
- RequireJS
- RequireJS
- requireJs
- RequireJs
- requireJS
- RequireJS
- RequireJS
- abap报表中(ALV或者普通屏幕的定制控制中)如何让列可以使用求和按钮
- QT环境下出现undefined refence to symbol...
- Redis Cluster 3.0搭建与使用
- try throw catch
- 钉钉的功能介绍
- RequireJS
- Android ImageView的scaleType属性与adjustViewBounds属性
- Redis应用
- EasyUI常用控件禁用方法 (转)
- netty4 如何建立心跳机制
- decimal(9,2)
- [leetcode] 326. Power of Three 解题报告
- 到底什么是上下文无关文法(CFG)?
- Anrdoid-Fragment