前端模塊化

什么是前端模塊化

將代碼依據(jù)不同功能，或者職責進行模塊的劃分，就稱為前端模塊化

模塊化的好處

1. 結(jié)構(gòu)更輕清晰
2. 有利于代碼的維護
3. 有利于代碼的復用

模塊化的標準

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

requirejs

定義以及應用模塊

//1. 定義模塊
//具名模塊
define("模塊名稱", ["依賴項"], function(){
    //模塊內(nèi)容
})
//匿名模塊
define(["依賴項1", "依賴項2"], function(依賴項1的返回值, 依賴項2的返回值){
    //模塊內(nèi)容
    //如果模塊需要返回內(nèi)容給外界使用，那么需要通過return語句將指定的內(nèi)容進行返回
    return {};
})

//如果沒有依賴項，可以將數(shù)組參數(shù)省略掉如
define(function(){})

//2. 引用模塊
require(["要引用的模塊的路徑(不帶.js后綴)"], function(模塊的返回值){
    //在引用的模塊加載完成之后執(zhí)行的操作
})

data-main

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

可以稱為入口文件
當requirejs加載完成之后，會直接去請求這個文件，并且執(zhí)行里面的內(nèi)容

模塊路徑

1. 不做任何設置的默認情況下，模塊的路經(jīng)查找，是以當前的文件做基礎

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配置第三方模塊的返回值
            //返回值的內(nèi)容寫的是一個字符串，對應的模塊文件中的一個全局變量名
            exports: "animate"
        }
    }
})