require开发:require入门

1、为什么使用require.js

作为命名空间;
作为命名空间使用;
异步加载js,避免阻塞,提高性能;
js通过require加载,不必写很多script

2、require.js的加载

下载后,放在指定目录就可以加载了
[javascript]  view plain  copy
  1. <script src="js/require.js"></script>  
有人可能会想到,加载这个文件,也可能造成网页失去响应。解决办法有两个,一个是把它放在网页底部加载,另一个是写成下面这样:
[javascript]  view plain  copy
  1. <script src="js/require.js" defer async="true" ></script>    
async属性表明这个文件需要异步加载,避免网页失去响应。IE不支持这个属性,只支持defer,所以把defer也写上。

这种写法虽然简单,但其实并不推荐,一般的写法还要再加个属性:

[javascript]  view plain  copy
  1. <script data-main="js/main" src="js/require-jquery.js"></script>    
就像一个c程序总有一个 main 方法作为入口一样,上面这种写法,做了几件事情:
1、加载了 require-jquery.js 文件。注意,官方提供了 require.js和 jquery 的打包版本,推荐。
2、在加载之后,加载入口文件 js/main.js ,注意,main.js 写进去的时候,不需要后缀名。
你的所有其他 js 模块文件,都可以写在 main.js 里面,通过 main.js 加载。

3、require.js的配置

在data-main指定的主文件中,通过require.config来配置,并加载其他js模块
[javascript]  view plain  copy
  1. require.config({  
  2.     baseUrl: 'js/',  
  3.     paths: {  
  4.         "backbone""backbone",  
  5.         "underscore""underscore"  
  6.     },  
  7.     shim: {  
  8.         "backbone": {  
  9.             deps: [ "underscore" ],  
  10.             exports: "Backbone"  
  11.         },  
  12.         "underscore": {  
  13.             exports: "_"  
  14.         }  
  15.     }  
  16. });  
baseUrl:指定基路径
paths:模块加载路径
shim:加载非AMD规范模块      
  1. exports值(输出的变量名),表明这个模块外部调用时的名称;
  2. deps数组,表明该模块的依赖性。
  3. 主模块可以将项目基础模块加载加来并定义全局方法等
  4. [javascript]  view plain  copy
    1. require(['jquery''underscore''backbone'], function ($, _, Backbone){  
    2.      // some code here  
    3.    });  

4、定义模块(符合AMD规范)

require.js加载的模块,采用AMD规范。也就是说,模块必须按照AMD的规定来写。
具体来说,就是模块必须采用特定的define()函数来定义。如果一个模块不依赖其他模块,那么可以直接定义在define()函数之中。
假定现在有一个math.js文件,它定义了一个math模块。那么,math.js就要这样写:
[javascript]  view plain  copy
  1. // math.js  
  2.    define(function (){  
  3.      var add = function (x,y){  
  4.        return x+y;  
  5.      };  
  6.      return {  
  7.        add: add  
  8.      };  
  9.    });  
加载方法如下:
[javascript]  view plain  copy
  1. // main.js  
  2.    require(['math'], function (math){  
  3.      alert(math.add(1,1));  
  4.    });  
如果这个模块还依赖其他模块,那么define()函数的第一个参数,必须是一个数组,指明该模块的依赖性。
[javascript]  view plain  copy
  1. define(['myLib'], function(myLib){  
  2.      function foo(){  
  3.        myLib.doSomething();  
  4.      }  
  5.      return {  
  6.        foo : foo  
  7.      };  
  8.    });  

定义的模块返回函数个数问题

1、define 的return只有一个函数,require的回调函数可以直接用别名代替该函数名。

2、define 的return当有多个函数,require的回调函数必须用别名调用所有的函数。

[javascript]  view plain  copy
  1. require(['selector','book'], function(query,book) {  
  2.     var els = query('.wrapper');  
  3.   
  4.     book.fun1();  
  5.     book.fun2();  
  6. });  
此处query 函数是1的情况,book 函数是2的情况。

5、加载js文件

到此为止,我们遇到了两个关键词,一个是 define ,可以用来定义模块(命名空间),第一部分我们讲了;还有一个是 require,可以直接加载其他 js。它除了简单的用法:
[javascript]  view plain  copy
  1. <script>  
  2. require( ["some" ] );  
  3. </script>  
之外,还有和 define 类似的复杂用法:
[javascript]  view plain  copy
  1. <script>   
  2. require(["aModule""bModule"], function() {   
  3.     myFunctionA(); // 使用 aModule.js 中的函数 myFunctionA  
  4.     myFunctionB(); // 使用 bModule.js 中的函数 myFunctionB  
  5. });   
  6. </script>   
总结一下,define 是你定义自己的模块的时候使用,可以顺便加载其他js;require 直截了当,供你加载用的,它就是一个加载方法,加载的时候,可以定义别名。

6、requ.js插件

require.js还提供一系列插件,实现一些特定的功能。

domready插件,可以让回调函数在页面DOM结构加载完成后再运行。

[javascript]  view plain  copy
  1. require(['domready!'], function (doc){  
  2.   // called once the DOM is ready  
  3. });  
text和image插件,则是允许require.js加载文本和图片文件。
[javascript]  view plain  copy
  1. define([  
  2.      'text!review.txt',  
  3.      'image!cat.jpg'  
  4.      ],  
  5.      function(review,cat){  
  6.        console.log(review);  
  7.        document.body.appendChild(cat);  
  8.      }  
  9.    );  
类似的插件还有json和mdown,用于加载json文件和markdown文件。

7、其他问题

1、路径与后缀名
在 require 一个 js 文件的时候,一般不需要加上后缀名。如果加上后缀名,会按照绝对路径加载。没有后缀名,是按照下面的路径加载:
[javascript]  view plain  copy
  1. <script data-main="js/main" src="js/require-jquery.js"></script>  
也就是默认加载 data-main 指定的目录,即 js/main.js 文件所在的目录。当然,你可以通过配置文件修改。
2、define 定义模块方法只能用在独立的js文件中,不能在页面中直接使用。
否则会报 Mismatched anonymous define() module 错误。

3、在代码中require一个文件多次,不会导致浏览器反复加载

不会,这是 RequrieJS 的优点,即使你反复 require 它,它只加载一次。

8、require深入

1、cdn回退
其支持当CDN加载不正确时,回退加载本地相应的库。我们可以通过require.config达到这个目的:
[javascript]  view plain  copy
  1. requirejs.config({  
  2.     paths: {  
  3.         jquery: [  
  4.             '//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js',  
  5.             'lib/jquery'  
  6.         ]  
  7.     }  
  8. });  
2、没有依赖?对象字面量?没问题!
当你写一个没有任何依赖的模块,并且只是返回一个对象包含一些功能函数,那么我们可以使用一种简单的语法:
[javascript]  view plain  copy
  1. define({  
  2.     forceChoke: function() {  
  3.   
  4.     },  
  5.     forceLighting: function() {  
  6.   
  7.     },  
  8.     forceRun: function() {  
  9.   
  10.     }      
  11. });  
很简单,也很有用,如果该模块仅仅是功能的集合,或者只是一个数据包。
3、循环依赖
在一些情况中,我们可能需要模块moduleA和moduleA中的函数需要依赖一些应用。这就是循环依赖。
[javascript]  view plain  copy
  1. // js/app/moduleA.js  
  2. define( [ "require""app/app"],  
  3.     function( require, app ) {  
  4.         return {  
  5.             foo: function( title ) {  
  6.                 var app = require( "app/app" );  
  7.                 return app.something();  
  8.             }  
  9.         }  
  10.     }  
  11. );  
4、得到模块的地址
如果你需要得到模块的地址,你可以这么做……
[javascript]  view plain  copy
  1. var path = require.toUrl("./style.css");  
5、JSONP
我们可以这样处理JSONP终端:
[javascript]  view plain  copy
  1. require( [   
  2.     "http://someapi.com/foo?callback=define"  
  3. ], function (data) {  
  4.     console.log(data);  
  5. });  

9、r.js压缩

Require.js 提供一个脚本 r.js ,可以将所有使用到的模块压缩成一个脚本文件,r.js 可以使用 Node.js 来执行。

在压缩模块前,需要写一个配置文件,说明主模块名,压缩后的文件名,哪些模块不要压缩

没有使用 define 定义的模块都不要压缩,包括 jQuery,backbone 等库及其插件


[javascript]  view plain  copy
  1. //build.js  
  2. ({  
  3.     baseUrl: '.',  
  4.     paths: {  
  5.     'jquery''empty:',  
  6.     'underscore''empty:',  
  7.     'backbone''empty:',  
  8.   },  
  9.     name: 'main',  
  10.     out: 'main.min.js'  
  11. })  
压缩命令:
[javascript]  view plain  copy
  1. node r.js -o build.js  
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值