教你5分鐘學會用requirejs(必看篇)

時間 2019-11-09

原文原文鏈接

requirejs是幹啥的啊？html

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

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

requirejs咋用啊？jquery

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

data-main屬性app

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

1requirejs

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

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

require.config() 配置

經過這個函數能夠對requirejs進行靈活的配置，其參數爲一個配置對象，配置項及含義以下：

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

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

shims——配置在腳本/模塊外面並無使用RequireJS的函數依賴而且初始化函數。假設underscore並無使用 RequireJS定義，可是你仍是想經過RequireJS來使用它，那麼你就須要在配置中把它定義爲一個shim。

deps——加載依賴關係數組

require.config({
  //默認狀況下從這個文件開始拉去取資源
 baseUrl:'scripts/app',
  //若是你的依賴模塊以pb頭，會從scripts/pb加載模塊。
 paths:{
  pb:'../pb'
 },
 // 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();
  }
 }
});

* 第一個是一個字符串數組，表示你定義的模塊依賴的模塊，這裏依賴模塊a;define函數就受兩個參數。

* 第二個參數是一個函數，參數是注入前面依賴的模塊，順序同第一參數順序。在函數中可作邏輯處理，經過return一個對象暴露模塊的屬性和方法，不在return中的能夠認爲是私有方法和私有屬性。

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/libs/require.js" data-main="index.js"></script>
</body>
</html>

index.js

require.config({
//By default load any module IDs from js/
    baseUrl: 'js',
//except, if the module ID starts with "pb"
    paths: {
        "cat":"cat",
        "test_define":"test_define",
    },
    shim: {
        'test_define': {
            deps:['test_nodefine'],
            // use the global 'Backbone' as the module name.
            exports: 'test_define'
        }
    }
});
require(['cat','test_define'], function (cat,test_define) {
    test_define.test();
    cat.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

//這個animal是引用的文件路徑
define(['animal'], function(animal) {
    'use strict';
    return {
        say(){
            animal.say("cat say");
            animal.showName("cat showName");
        }
    }
});

define中能夠調用非define中的內容，要在index.js中shim定義

test_define.js

define(["/libs/jquery"], function() {
    'use strict';
    return {
        test(){
            noDefine();
        }
    }
});

test_nodefine.js

window.noDefine = function() {
    console.log("this no define function!");
}

相關標籤/搜索

每日一句

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