學會用requirejs，5分鐘足矣

時間 2019-11-18

原文原文鏈接

聽說公司的項目較多的用到requirejs管理依賴，因此大熊同窗擠出了5分鐘休息時間學習了一下，如今分享一下。若是你想了解requirejs的實現原理，請繞道！若是你想了解requirejs的高級用法，請繞道！那麼問題來了，這篇小文還有人看嗎？😄html

requirejs是幹啥的啊？

曾經，咱們將一些js組件放到不一樣的文件，而後經過script標籤引入，若是幾個組件有依賴，那麼要當心了，你必須將被依賴的放到前面，不然的話會出現啥啥啥is undefined或者啥啥啥is not a function之類的錯誤。好比一個jquery的插件顯然是依賴jquery核心庫的，因此jquery核心庫文件必須先引入。項目小組件少依賴簡單還好，要是項目大組件多依賴複雜就糟糕了。咋辦？用requirejs啊😜！jquery

只要按照requirejs規範寫，他會從一個根開始檢查依賴，根據這些依賴關係自動的幫助咱們插入script標籤，很棒，對不對？這樣依賴咱們不就不再用糾結哪一個標籤應該放在前，哪一個該放在後了嗎？👏👏👏es6

requirejs咋用啊？

請記住使用requirejs的口訣，兩函數一配置一屬性

data-main屬性
requirejs須要一個根來做爲搜索依賴的開始，data-main用來指定這個根。

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

這裏就指定了根是app.js,只有直接或者間接與app.js有依賴關係的模塊纔會被插入到html中。數組

require.config() 配置
經過這個函數能夠對requirejs進行靈活的配置，其參數爲一個配置對象，配置項及含義以下：
baseUrl——用於加載模塊的根路徑。
paths——用於映射不存在根路徑下面的模塊路徑。
shims——配置在腳本/模塊外面並無使用RequireJS的函數依賴而且初始化函數。假設underscore並無使用 RequireJS定義，可是你仍是想經過RequireJS來使用它，那麼你就須要在配置中把它定義爲一個shim。
deps——加載依賴關係數組

require.config({
   //默認狀況下從這個文件開始拉去取資源
  baseUrl:'scripts/app',
   //若是你的依賴模塊以lib頭，會從scripts/lib加載模塊。
  paths:{
    lib:'../lib'
  },
  // load backbone as a shim，所謂就是將沒有采用requirejs方式定義
  //模塊的東西轉變爲requirejs模塊
  shim:{
    'backbone':{
      deps:['underscore'],
      exports:'Backbone'
    }
  }
});

define()函數
該函數用於定義模塊。形式以下。

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

define函數就受兩個參數。
* 第一個是一個字符串數組，表示你定義的模塊依賴的模塊，這裏依賴模塊a;
* 第二個參數是一個函數，參數是注入前面依賴的模塊，順序同第一參數順序。在函數中可作邏輯處理，經過return一個對象暴露模塊的屬性和方法，不在return中的能夠認爲是私有方法和私有屬性。app

require()函數
該函數用於調用定義好的模塊，能夠是用define函數定義的，也能夠是一個shim。形式以下：

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

實戰練習一下

結構
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){ //練習私有方法
      _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("這裏是動物世界！");
}

world.js

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

輸出結果
函數
解釋一下
須要解釋嗎？自行體會吧！這裏再貼個加載順序的圖，你想一想看是否是應該是這樣的。

這裏的標籤順序正好是我想象中的反過來。爲何會這樣呢？我猜想是，加載順序依然時被依賴的要先加載的，咱們知道只要指定了script的src屬性就會加載對應的js，跟標籤順序無必然關係。這裏不知道是否是對的，誰知道請賜教。工具

小結一下

requirejs的基本用法比較簡單，可是功能強大，讓咱們可以很是輕鬆的處理各類依賴問題。有人云requirejs是遵循的一個叫AMD的規範，也有遵循CMD規範的seajs模塊管理庫，還有用於服務端的commonjs模塊管理工具，如今es6已經原生支持模塊管理了，關於這些內容，大熊不作介紹了，爲啥呢？由於大熊也不知道啊。要是你以爲大熊寫的東西對你有所幫助，不妨點個關注或者推薦！requirejs

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。