RequireJS的目标是鼓励代码的模块化,它使用了不同于传统<script>标签的脚本加载步骤。可以用它来加速、优化代码,但其主要目的还是为了代码的模块化
requireJS 加载代码的时候,其相对路径为baseUrl,baseUrl通常被设置为data-main指定文件的目录
em:
<script src="js/libs/require.js" defer async="true" data-main="js/main.js"></script>
data-main:起始的js
src:依赖的require库js
举一个简单的例子:
Index.html:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" data-main="js/main.js" src="js/require.js"></script> </head> <body> </body> </html>
mian.js
require.config({ baseUrl:"js/lib",//设置基本路径 paths:{ "user":'user', //----- js/lib/user "jquery":"jquery-1.11.3" //-----js/lib/jquery-1.11.3 } /*方式二: paths:{ "user":'lib/user', "jquery":"lib/jquery-1.11.3" } */ }); require(["jquery","user"],function($,user){//依赖的模块 $(function(){ alert("juery加载完毕"); });
对于每一个分开的js: 采用AMD模式来编写模块,模块必须采用特定的define()函数来定义
User.js(此时user.js是没有依赖模块的)
define([],function(){ function fun1(){ alert("it works"); } fun1(); })
注:若是模块有依赖,第一个参数是一个数组,第二个参数是匿名函数
前面的依赖项将以参数的形式传递给函数,顺序与之前一致
Demo:
define([“../cart”,”../inventory”],function(cart,inventory){ return { color:”blue”, addToCart:function(){ inventory.decrement(this); cart.add(this); } } });
模块也可以不返回对象,任何有效的返回都是可以的。
对于没有采用AMD规范编写。如果要加载它们的话,必须先定义它们的特征。
注:require.config()接受一个配置对象,这个对象除了有前面说过的paths属性之外,还有一个shim属性,专门用来配置不兼容的模块。具体来说,每个模块要定义
(1)exports值(输出的变量名),表明这个模块外部调用时的名称;
(2)deps数组,表明该模块的依赖性。
em:
require.config({ baseUrl:"", paths:{ "angular":"../ipi_view/eaf/common/lib/angualr" } shim:{ 'angular':{ exports:'angular', deps:['angular'] }, ‘jquery-slide’:{ deps: [‘jquery’] }, 'jquery.scroll': { deps: ['jquery'],// 该模块的依赖性。 exports: 'jQuery.fn.scroll'//这个模块外部调用时的名称 } } }); require([‘jquery-slide’],function(jQ){ ......../...... });//保证了先加载jquery,在加载其插件
进一步解释一下:
1)require.config的作用(主要用于解决有些第三法方非AMD库文件的问题),如果你的文件都是AMD,那么你就可以完全删除require.config这个东西了.
2)require.config的另一个作用就是解决过度臃肿的文件路径问题(直接说我们一般在require.config里面可以简化,将长的路径问题一次性解决).
require.config({ paths:{ “mycheck“:'../ipi_view/common/mycheck',//自定义的一个公共指令 } }) require(['mycheck'],function(){..................})
例如:
在paths中配置的文件可以直接在require(['mycheck'],function(){......})中引用,这样你的项目中所有的js文件中都会引入mycheck,这样意味着你可以直接在页面上使用。
当然也可以
require([''../ipi_view/common/mycheck',‘’],function(){..................})
参考:http://www.ruanyifeng.com/blog/2012/11/require_js.html