码迷,mamicode.com
首页 > Web开发 > 详细

RequireJs整理入门

时间:2015-08-09 16:58:34      阅读:116      评论:0      收藏:0      [点我收藏+]

标签:

首先,Requirejs是一个库,利用它我们能做什么,解决什么问题呢?(根据阮一峰老师的文章,自己总结写了一遍加深影响。)

原文链接:http://www.ruanyifeng.com/blog/2012/11/require_js.html

原先写Js文件都是集中在一个main.js的文件中,当代码量逐渐增大,以及拆分加载的时候就出现里不足。

  1. 加载时需要停止网页的渲染,文件越多,浏览器失去响应的时间也越长,一直转圈圈。
  2. 如果js之间存在依赖关系,需要严格指明加载顺序的,那么当依赖关系复杂时,代码的编写和维护都会变得很困难。

技术分享

使用方法快速入门:

  • HTML文件中引入
1  <script src="js/require.js" data-main="js/main"></script>  //data-main表示需要载入的入口Js文件,会被第一个加载
  • require()函数

主模块依赖于其他模块,使用AMD规范定义的require函数。

1 // main.js
2 require([‘moduleA‘, ‘moduleB‘, ‘moduleC‘], function (moduleA, moduleB, moduleC){
3 // some code here
4 });

 

require()函数接受两个参数,第一个参数是一个数组,表示要依赖的模块,第二个参数是一个回调函数。当前面指定的模块都加载成功后,它将被调用。加载的模块会以参数形式传入该函数,从而在回调函数内部就可以使用这些模块。

  • require.config()方法

使用require.config()方法,我们可以对模块的加载行为进行自定义。require.config()就写在主模块(main.js)的头部。参数就是一个对象,这个对象的paths属性指定各个模块的加载路径。

1 require.config({
2     paths: {
3       "jquery": "jquery.min",
4       "underscore": "underscore.min",
5       "backbone": "backbone.min"
6     }
7   });
1 //直接修改路径
2 require.config({
3     paths: {
4       "jquery": "lib/jquery.min",
5       "underscore": "lib/underscore.min",
6       "backbone": "lib/backbone.min"
7     }
8   });
9 //修改基目录
1 require.config({
2     baseUrl: "js/lib",
3     paths: {
4       "jquery": "jquery.min",
5       "underscore": "underscore.min",
6       "backbone": "backbone.min"
7     }
8   });
  • 模块(AMD模块的编写)

require.js加载的模块,采用AMD规范。也就是说,模块必须按照AMD的规定来写。

// math.js
  define(function (){
    var add = function (x,y){
      return x+y;
    };
    return {
      add: add
    };
  });

加载该模块

1 // main.js
2   require([‘math‘], function (math){
3     alert(math.add(1,1));
4   });

RequireJs整理入门

标签:

原文地址:http://www.cnblogs.com/tabyouto/p/4715281.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!