1. 程式人生 > >JS模組化程式設計之AMD模型實現原理(Requirejs瀏覽器模型,nodejs伺服器模型)

JS模組化程式設計之AMD模型實現原理(Requirejs瀏覽器模型,nodejs伺服器模型)

官方引數手冊:https://requirejs.org/docs/api.html

 

 


/**
 * require使用指南!
 * 第一步:建立一個符合Require CMD模組化的標準目錄結構,去官方檢視!
 * 第二步:在html檔案中指定主js檔案:<script data-main="./my_modules/app.js" src="./lib/require.js"></script>
 * 第三步:配置requirejs.config路徑;
 * 第四步:每一個檔案都是一個模組物件,預設物件名就是檔名,要依賴哪個模板就difine(["模組名1","模組名"2...],回撥函式);
 * 
 * 
 */

requirejs.config({
    baseUrl:'./',
    //注:路徑後面不能加.js,因為系統自動加上.js的。
    paths: {
        require001:'my_modules/require001',
        require002:'my_modules/require002',
        jquery:'lib/jquery-3.3.1'
    }
});

// Start the main app logic.
requirejs(['require001',
            'require002',
            'jquery'
        ],  function   (require001,require002,$) {
            require001.test001();
            require002.test002();
            $("body").css("background","red");
        });
/**
 * require001檔案程式碼,傳入模組物件require002,在回撥函式引數也必須指定require002(或別名,一一對應);
 */

define(["require002"
], function(require002) {
    
    function test001() {

        console.log("test");
        require002.test002();
    }
    return {test001};
    
});
/**
 * require002檔案程式碼,不傳入任何模組引數的模組!
 */
define(function() {

    function test002() {

        console.log("test002");
    }
    
    return {test002};
});