js模块化开发——require.js学习总结

一、为何使用require.js

做为命名空间； 做为命名空间使用；
异步加载js，避免阻塞，提升性能； js经过require加载，没必要写不少script

二、require.js的加载

require.js下载 下载后，放在指定目录就能够加载了

?

1	<script src= "js/require.js" ></script>

有人可能会想到，加载这个文件，也可能形成网页失去响应。解决办法有两个，一个是把它放在网页底部加载，另外一个是写成下面这样：

?

1	<script src= "js/require.js" defer async= "true" ></script>

async属性代表这个文件须要异步加载，避免网页失去响应。IE不支持这个属性，只支持defer，因此把defer也写上。

 

 

 

 

这种写法虽然简单，但其实并不推荐，通常的写法还要再加个属性：

?

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

就像一个c程序总有一个 main 方法做为入口同样，上面这种写法，作了几件事情：
一、加载了 require-jquery.js 文件。注意，官方提供了 require.js和 jquery 的打包版本，推荐。
二、在加载以后，加载入口文件 js/main.js ，注意，main.js 写进去的时候，不须要后缀名。
你的全部其余 js 模块文件，均可以写在 main.js 里面，经过 main.js 加载。

三、require.js的配置

在data-main指定的主文件中，经过require.config来配置，并加载其余js模块

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

require.config({      baseUrl: 'js/' ，      paths: {          "backbone" : "backbone" ,          "underscore" : "underscore"      },      shim: {          "backbone" : {              deps: [ "underscore" ],              exports: "Backbone"          },          "underscore" : {              exports: "_"          }      } });

baseUrl：指定基路径 paths：模块加载路径 shim：加载非AMD规范模块

1. exports值（输出的变量名），代表这个模块外部调用时的名称；
2. deps数组，代表该模块的依赖性。
3. 主模块能够将项目基础模块加载加来并定义全局方法等
4. ?

   1 2 3

   require([ 'jquery' , 'underscore' , 'backbone' ], function ($, _, Backbone){   　　　　 // some code here   　　});

   四、定义模块（符合AMD规范）

   require.js加载的模块，采用AMD规范。也就是说，模块必须按照AMD的规定来写。
   具体来讲，就是模块必须采用特定的define()函数来定义。若是一个模块不依赖其余模块，那么能够直接定义在define()函数之中。
   假定如今有一个math.js文件，它定义了一个math模块。那么，math.js就要这样写：
   ?

   1 2 3 4 5 6 7 8 9

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

   加载方法以下：
   ?

   1 2 3 4

   // main.js   　　require([ 'math' ], function (math){   　　　　alert(math.add( 1 , 1 ));   　　});

   若是这个模块还依赖其余模块，那么define()函数的第一个参数，必须是一个数组，指明该模块的依赖性。
   
   ?

   1 2 3 4 5 6 7 8

   define([ 'myLib' ], function(myLib){   　　　　function foo(){   　　　　　　myLib.doSomething();   　　　　}   　　　　 return {   　　　　　　foo : foo   　　　　};   　　});

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

   一、define 的return只有一个函数，require的回调函数能够直接用别名代替该函数名。

   二、define 的return当有多个函数，require的回调函数必须用别名调用全部的函数。

   ?

   1 2 3 4 5 6

   require([ 'selector' , 'book' ], function(query,book) {      var els = query( '.wrapper' );        book.fun1();      book.fun2(); });

   此处query 函数是1的状况，book 函数是2的状况。
   

   五、加载js文件

   到此为止，咱们遇到了两个关键词，一个是 define ，能够用来定义模块(命名空间)，第一部分咱们讲了；还有一个是 require，能够直接加载其余 js。它除了简单的用法：
   ?

   1 2 3

   <script> require( [ "some" ] ); </script>

   以外，还有和 define 相似的复杂用法：
   
   ?

   1 2 3 4 5 6

   <script> require([ "aModule" , "bModule" ], function() {      myFunctionA(); // 使用 aModule.js 中的函数 myFunctionA      myFunctionB(); // 使用 bModule.js 中的函数 myFunctionB }); </script>

   总结一下，define 是你定义本身的模块的时候使用，能够顺便加载其余js；require 直截了当，供你加载用的，它就是一个加载方法，加载的时候，能够定义别名。
   

   六、requ.js插件

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

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

   ?

   1 2 3

   require([ 'domready!' ], function (doc){ 　　 // called once the DOM is ready });

   text和image插件，则是容许require.js加载文本和图片文件。
   
   ?

   1 2 3 4 5 6 7 8 9

   define([   　　　　 'text!review.txt' ,   　　　　 'image!cat.jpg'   　　　　],   　　　　function(review,cat){   　　　　　　console.log(review);   　　　　　　document.body.appendChild(cat);   　　　　}   　　);

   相似的插件还有json和mdown，用于加载json文件和markdown文件。

   七、其余问题

   一、路径与后缀名 在 require 一个 js 文件的时候，通常不须要加上后缀名。若是加上后缀名，会按照绝对路径加载。没有后缀名，是按照下面的路径加载：
   
   ?

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

   也就是默认加载 data-main 指定的目录，即 js/main.js 文件所在的目录。固然，你能够经过配置文件修改。
   二、define 定义模块方法只能用在独立的js文件中，不能在页面中直接使用。
   不然会报 Mismatched anonymous define() module 错误。

   三、在代码中require一个文件屡次，不会致使浏览器反复加载

   不会，这是 RequrieJS 的优势，即便你反复 require 它，它只加载一次。

   八、require深刻

   一、cdn回退 其支持当CDN加载不正确时，回退加载本地相应的库。咱们能够经过require.config达到这个目的：
   ?

   1 2 3 4 5 6 7 8

   requirejs.config({      paths: {          jquery: [              '//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js' ,              'lib/jquery'          ]      } });

   二、没有依赖？对象字面量？没问题！
   当你写一个没有任何依赖的模块，而且只是返回一个对象包含一些功能函数，那么咱们可使用一种简单的语法：
   
   ?

   1 2 3 4 5 6 7 8 9 10 11

   define({      forceChoke: function() {        },      forceLighting: function() {        },      forceRun: function() {        }    });

   很简单，也颇有用，若是该模块仅仅是功能的集合，或者只是一个数据包。
   三、循环依赖 在一些状况中，咱们可能须要模块moduleA和moduleA中的函数须要依赖一些应用。这就是循环依赖。
   
   ?

   1 2 3 4 5 6 7 8 9 10 11

   // js/app/moduleA.js define( [ "require" , "app/app" ],      function( require, app ) {          return {              foo: function( title ) {                  var app = require( "app/app" );                  return app.something();              }          }      } );

   四、获得模块的地址 若是你须要获得模块的地址，你能够这么作……
   
   ?

   1	var path = require.toUrl( "./style.css" );

   五、JSONP
   咱们能够这样处理JSONP终端：
   
   ?

   1 2 3 4 5

   require( [      "http://someapi.com/foo?callback=define" ], function (data) {      console.log(data); });

   九、r.js压缩

   Require.js 提供一个脚本 r.js ，能够将全部使用到的模块压缩成一个脚本文件，r.js 可使用 node.js 来执行。

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

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

   
   
   ?

   1 2 3 4 5 6 7 8 9 10 11

   //build.js ({      baseUrl: '.' ,      paths: {      'jquery' : 'empty:' ,      'underscore' : 'empty:' ,      'backbone' : 'empty:' ,    },      name: 'main' ,      out: 'main.min.js' })

   压缩命令:
   
   ?

   1	node r.js -o build.js

   更多require.js学习连接