require.js

http://requirejs.org/

以前页面js文件很多,所以很多js依次写在页面中加载

(1)实现js文件的异步加载,避免网页失去响应;

(2)管理模块之间的依赖性,便于代码的编写和维护

require.js的加载:所有的js都放在js子目录下面

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

data-main属性的作用是指定网页程序的主模块,require一个js文件的时候,默认加载路径就是data-main指定的目录,即js/main.js文件所在的目录,也可以通过配置文件修改

主模块的写法:

require(['jquery', 'underscore', 'backbone'], function($, _, Backbone){

    //some code here

});

require()函数接受两个参数,第一个是数组表示所依赖的模块,第二个参数是一个回调函数

模块的加载:    

 require.config({

    baseUrl: "js/lib", //直接改变及目录,如果在js/lib目录下面

    paths: {

      "jquery": "jquery.min",//如果某个模块在另一台主机上也可以直接指定网址
      "underscore": "underscore.min",
      "backbone": "backbone.min"

    }

  });

AMD模块的写法:

require.js加载的模块采用AMD规范,就是模块必须采用define()函数来定义依赖myLib模块

define(['myLib'], function(myLib){

    function foo(){

      myLib.doSomething();

    }

    return {

      foo : foo

    };

  });

加载非规范的模块:

再用require()加载之前,要先用require.config()方法定义它们的一些特征

exports值表明这个模块外部调用时的名称,deps数组表明该模块的依赖性

require.config({

      shim: {

      'underscore':{exports:'_'},

      'backbone':{deps: ['underscore', 'jquery']}

      'exports': 'Backbone'

      }

  });
posted @ 2013-11-20 10:26  海边菩提  阅读(203)  评论(0编辑  收藏  举报