【RequireJS】requireJS的基礎知識

時間 2019-12-18

標籤 RequireJS requirejs 基礎知識欄目 JavaScript 简体版

原文原文鏈接

1. requirejs的優勢html

　　1）異步加載依賴的文件git

　　2）管理文件加載順序github

　　3）管理文件加載的包路徑異步

2. requirejs下載地點async

　　https://github.com/jrburke/requirejs函數

3. requirejs demorequirejs

依賴文件以下：ui

　　1）index.html 主頁面，引入requirejs ，指定整個頁面js執行入口spa

　　2）main.js　　頁面執行入口，定義js的baseUrl 及公共包code

　　3）lib.js　　main.js依賴的module

index.html


<!DOCTYPE html> 
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>報表平臺</title>
</head>
<body>

</body>
<script src="/resources/um_report/js/require.js"  defer async="true"  data-main='/resources/um_report/js/main.js'></script>


</html>

main.js

requirejs.config({
  baseUrl: '/resources/js/'
});

require(['lib'],function(Lib){
    console.log('Lib');
    Lib.say('hello');
    console.log(Lib.color);
});

lib.js

define(function(){
    var say1 = function(msg){
            console.log(msg);
        }
    return {
        say: say1,
        color:'red'
    };
});

流程以下：

1）index.html加載require.js 獲取入口data-main定義的main函數

2）main.js定義了全部js的基路徑，後面引入的js都在基路徑的相對路徑,

還引入了基路徑下的一個叫lib的module，並執行了lib的say方法，並打印了lib.color

3）lib.js定義了一個對象，返回了say方法和color對象