據(jù)說公司的項(xiàng)目較多的用到requirejs管理依賴，所以大熊同學(xué)擠出了5分鐘休息時(shí)間學(xué)習(xí)了一下，現(xiàn)在分享一下。如果你想了解requirejs的實(shí)現(xiàn)原理，請(qǐng)繞道！如果你想了解requirejs的高級(jí)用法，請(qǐng)繞道！那么問題來了，這篇小文還有人看嗎？??

requirejs是干啥的?。?/h2>

曾經(jīng)，我們將一些js組件放到不同的文件，然后通過script標(biāo)簽引入，如果幾個(gè)組件有依賴，那么要小心了，你必須將被依賴的放到前面，否則的話會(huì)出現(xiàn)啥啥啥is undefined或者啥啥啥is not a function之類的錯(cuò)誤。比如一個(gè)jquery的插件顯然是依賴jquery核心庫的，所以jquery核心庫文件必須先引入。項(xiàng)目小組件少依賴簡(jiǎn)單還好，要是項(xiàng)目大組件多依賴復(fù)雜就糟糕了。咋辦？用requirejs啊??！

只要按照requirejs規(guī)范寫，他會(huì)從一個(gè)根開始檢查依賴，根據(jù)這些依賴關(guān)系自動(dòng)的幫助我們插入script標(biāo)簽，很棒，對(duì)不對(duì)？這樣依賴我們不就再也不用糾結(jié)哪個(gè)標(biāo)簽應(yīng)該放在前，哪個(gè)該放在后了嗎？??????

requirejs咋用啊？

請(qǐng)記住使用requirejs的口訣，兩函數(shù)一配置一屬性

  • data-main屬性
    requirejs需要一個(gè)根來作為搜索依賴的開始，data-main用來指定這個(gè)根。
    <script src="scripts/require.js" data-main="scripts/app.js"></script>
    這里就指定了根是app.js,只有直接或者間接與app.js有依賴關(guān)系的模塊才會(huì)被插入到html中。

  • require.config() 配置
    通過這個(gè)函數(shù)可以對(duì)requirejs進(jìn)行靈活的配置，其參數(shù)為一個(gè)配置對(duì)象，配置項(xiàng)及含義如下：

  • baseUrl——用于加載模塊的根路徑。

  • paths——用于映射不存在根路徑下面的模塊路徑。

  • shims——配置在腳本/模塊外面并沒有使用RequireJS的函數(shù)依賴并且初始化函數(shù)。假設(shè)underscore并沒有使用 RequireJS定義，但是你還是想通過RequireJS來使用它，那么你就需要在配置中把它定義為一個(gè)shim。

  • deps——加載依賴關(guān)系數(shù)組

require.config({   //默認(rèn)情況下從這個(gè)文件開始拉去取資源
  baseUrl:'scripts/app',   //如果你的依賴模塊以lib頭，會(huì)從scripts/lib加載模塊。
  paths:{
    lib:'../lib'
  },  // load backbone as a shim，所謂就是將沒有采用requirejs方式定義
  //模塊的東西轉(zhuǎn)變?yōu)閞equirejs模塊
  shim:{    'backbone':{
      deps:['underscore'],
      exports:'Backbone'
    }
  }
});

  • define()函數(shù)
    該函數(shù)用于定義模塊。形式如下。

 //logger.js
 define(["a"], function(a) {  'use strict';  function info() {    console.log("我是私有函數(shù)");
  }  return {
    name:"一個(gè)屬性",
    test:function(a){      console.log(a+"你好！");
      a.f();
      info();
    }
  }
});

define函數(shù)就受兩個(gè)參數(shù)。
* 第一個(gè)是一個(gè)字符串?dāng)?shù)組，表示你定義的模塊依賴的模塊，這里依賴模塊a;
* 第二個(gè)參數(shù)是一個(gè)函數(shù)，參數(shù)是注入前面依賴的模塊，順序同第一參數(shù)順序。在函數(shù)中可做邏輯處理，通過return一個(gè)對(duì)象暴露模塊的屬性和方法，不在return中的可以認(rèn)為是私有方法和私有屬性。

  • require()函數(shù)
    該函數(shù)用于調(diào)用定義好的模塊，可以是用define函數(shù)定義的，也可以是一個(gè)shim。形式如下：

    //app.jsrequire(['logger'], function (logger) {
logger.test("大熊");console.log(logger.name);
});//輸出結(jié)果：//大熊你好！//不確定（取決于a模塊的f方法）//我是私有函數(shù)//一個(gè)屬性

實(shí)戰(zhàn)練習(xí)一下

  • 結(jié)構(gòu)

  • index.html

    <!DOCTYPE html><html lang="en"><head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title></head><body>
   <script src="js/require.js" data-main="app.js"></script> </body></html>

  • app.js

    require.config({//By default load any module IDs from js/baseUrl: 'js',//except, if the module ID starts with "lib"
 paths: {    lib: '../lib'},shim: {    'world': {        deps:['animalWorld'],        // use the global 'Backbone' as the module name.
        exports: 'world'
    }
}
});require(['cat','dog','world'], function (cat,dog,world) {
world.world();
cat.say();
dog.say();  
});

  • animal.js

    define([], function() {  'use strict';  function _showName(name){console.log(name);
  }  return {
say(words){  console.log(words);
},
showName(name){ //練習(xí)私有方法
  _showName(name);
}
  }
});

  • cat.js

    define([  'lib/animal'], function(animal) {  'use strict';  return {
say(){
  animal.say("喵喵");
  animal.showName("貓");
}
  }
});

  • dog.js

    define([  'lib/animal'], function(animal) {  'use strict';  return {
say(){
  animal.say("汪汪");
  animal.showName("狗");
}
  }
});

  • animalWorld.js

    window.animal = function() {  console.log("這里是動(dòng)物世界！");
}

  • world.js

    define([], function() {  'use strict';  return {
world(){
  animal();
}
  }
});

  • 輸出結(jié)果

  • 解釋一下
    需要解釋嗎？自行體會(huì)吧！這里再貼個(gè)加載順序的圖，你想想看是不是應(yīng)該是這樣的。

    這里的標(biāo)簽順序正好是我想象中的反過來。為什么會(huì)這樣呢？我猜測(cè)是，加載順序依然時(shí)被依賴的要先加載的，我們知道只要指定了script的src屬性就會(huì)加載對(duì)應(yīng)的js，跟標(biāo)簽順序無必然關(guān)系。這里不知道是不是對(duì)的，誰知道請(qǐng)賜教。

小結(jié)一下

requirejs的基本用法比較簡(jiǎn)單，但是功能強(qiáng)大，讓我們能夠非常輕松的處理各種依賴問題。有人云requirejs是遵循的一個(gè)叫AMD的規(guī)范，也有遵循CMD規(guī)范的seajs模塊管理庫，還有用于服務(wù)端的commonjs模塊管理工具，現(xiàn)在es6已經(jīng)原生支持模塊管理了，關(guān)于這些內(nèi)容，大熊不做介紹了，為啥呢？因?yàn)榇笮芤膊恢腊　Ｒ悄阌X得大熊寫的東西對(duì)你有所幫助，不妨點(diǎn)個(gè)關(guān)注或者推薦！

文章來源：http://www.cnblogs.com/floor/p/7231960.html,轉(zhuǎn)載請(qǐng)務(wù)必注明！

http://www.cnblogs.com/floor/p/7231960.html