前端模塊化(requirejs)

前端模塊化

什麼是前端模塊化

將代碼依據不一樣功能，或者職責進行模塊的劃分，就稱爲前端模塊化

模塊化的好處

1. 結構更輕清晰
2. 有利於代碼的維護
3. 有利於代碼的複用

模塊化的標準

1. CommonJS
   這個標準主要用在Nodejs中 用於服務器端 同步加載
2. AMD
   Async Module Definition 異步模塊定義， 依賴前置， requirejs
3. CMD Common Module Definiton 通用模塊定義， 依賴延遲 sea.js

requirejs

定義以及應用模塊

//1. 定義模塊
//具名模塊
define("模塊名稱", ["依賴項"], function(){
    //模塊內容
})
//匿名模塊
define(["依賴項1", "依賴項2"], function(依賴項1的返回值, 依賴項2的返回值){
    //模塊內容
    //若是模塊須要返回內容給外界使用，那麼須要經過return語句將指定的內容進行返回
    return {};
})

//若是沒有依賴項，能夠將數組參數省略掉如
define(function(){})

//2. 引用模塊
require(["要引用的模塊的路徑(不帶.js後綴)"], function(模塊的返回值){
    //在引用的模塊加載完成以後執行的操做
})
複製代碼

data-main

<script src="require.js" data-main="xx/xx/xx.js"></script>
複製代碼

能夠稱爲入口文件 當requirejs加載完成以後，會直接去請求這個文件，而且執行裏面的內容

模塊路徑

1. 不作任何設置的默認狀況下，模塊的路經查找，是以當前的文件作基礎

2. 若是使用data-main屬性， 模塊路徑查找，是以data-main指定的文件所在的路徑爲基礎的

3. 若是使用config方法配置了baseUrl,那麼路徑的查找將會以baseUrl配置的路徑做爲基礎

config 方法

require.config({
    //配置基礎路徑用的 通常baseUrl都使用絕對路徑
    baseUrl: "/",
    //paths能夠用來給每一個模塊的路徑設置一個別名，方便使用
    //具名模塊的別名必定要和模塊中定義的名字保持一致
    //在path中配置過的模塊，找模塊的時候，使用的是 baseUrl + path中的路徑 來查找的
    paths:　{
        jquery: "./jquery",
        template: "./template",
        anmiate: "./animate"
    }
    //shim 能夠用來幫不支持模塊化的第三方模塊使用到requirejs中來
    shim: {
        //屬性名：要配置的模塊別名
        //屬性值： 對象（能夠包含兩個屬性 exprots， deps）
        animate: {
            //deps用來配置第三方模塊的依賴項
            deps: ["jquery"],
            //exports配置第三方模塊的返回值
            //返回值的內容寫的是一個字符串，對應的模塊文件中的一個全局變量名
            exports: "animate"
        }
    }
})
複製代碼