您的位置:首页 > Web前端 > JavaScript

requre.js 用法

2017-04-16 16:50 295 查看
使用require.js的目的:
(1)实现js文件的异步加载,避免网页失去响应;
(2)管理模块之间的依赖性,便于代码的编写和维护。
一、require.js的加载
1.加载require.js(两种方法):
(1)将<script src="js/require.js"></script>放在网页底部加载
(2)<script src="js/require.js"
defer async="true" ></script>实现异步加载
2.加载自己代码(main.js):
<script src="js/require.js"
data-main="js/main"></script>
注:data-main属性的作用是指定网页程序的主模块,它会第一个被require.js加载。
二、主模块写法
// main.js
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
   // some code here
});
require()函数接受两个参数:
第一个参数是一个数组,表示所依赖的模块(['moduleA', 'moduleB', 'moduleC']),即主模块依赖这三个模块;
第二个参数是一个回调函数,当前面指定的模块都加载成功后,它将被调用。加载的模块会以参数形式传入该函数,从而在回调函数内部就可以使用这些模块。
require()异步加载moduleA,moduleB和moduleC,浏览器不会失去响应;它指定的回调函数,只有前面的模块都加载成功后,才会运行,解决了依赖性的问题。
三、模块的加载
require.config()方法可以对模块的加载行为进行自定义。
require.config()就写在主模块(main.js)的头部。参数就是一个对象,这个对象的paths属性指定各个模块的加载路径。
require.config({
    paths: {
      "jquery": "jquery.min",
      "underscore": "underscore.min",
      "backbone": "backbone.min"
    }
  });  
上面的代码给出了三个模块的文件名,路径默认与main.js在同一个目录(js子目录)。如果这些模块在其他目录,比如js/lib目录,则有两种写法。
(1)逐一指定路径

require.config({
    paths: {
      "jquery": "lib/jquery.min",
      "underscore": "lib/underscore.min",
      "backbone": "lib/backbone.min"
    }
  });
(2)直接改变基目录(baseUrl)
require.config({
    baseUrl: "js/lib",
    paths: {
      "jquery": "jquery.min",
      "underscore": "underscore.min",
      "backbone": "backbone.min"
    }
  });
四、AMD模块的写法
require.js加载的模块,采用AMD规范,因此模块必须按照AMD的规定来写,即模块必须采用特定的define()函数来定义。
例如main.js写法如下:
// math.js
  define(function (){
    var add = function (x,y){
      return x+y;
    };
    return {
      add: add
    };
  });
加载方法如下:
// math.js
  define(function (){
    var add = function (x,y){
      return x+y;
    };
    return {
      add: add
    };
  });
如果这个模块还依赖其他模块,那么define()函数的第一个参数,必须是一个数组,指明该模块的依赖性。
define(['myLib'], function(myLib){
    function foo(){
      myLib.doSomething();
    }
    return {
      foo : foo
    };
  });
参考阮一峰网络日志:http://www.ruanyifeng.com/blog/2012/11/require_js.html
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: