mvc-6依賴管理

時間 2019-11-18

原文原文鏈接

CommonJS

CommonJS規範，主要解決命名空間管理模塊和用一套標準的編程模式來加載模塊；
很快成爲了JavaScript模塊寫法的事實標準；
它包含IO接口，底層的套接字流，以及單元測試等標準；

模塊的聲明

模塊被分隔爲不一樣文件，經過給exports對象添加內容來對外暴露模塊的變量的方法，exports變量是在解析器中定義好的；
要想使用在模塊中定義的函數，只需require()這個文件，同時將運行結果保存在本地變量中；
模塊就是命名空間，目前CommonJS規範在js服務器端運用，如node.js

//math.js
exports.per = function(value, total) {
  return ( (value / total) * 100 );
}
//application.js
var Maths = require("/maths");
assertEqual(Math.per(50, 100), 50);

模塊和瀏覽器

在瀏覽器中不容易實現CommonJS,由於它須要阻塞UI並適時地執行剛加載地script腳本（在客戶端則要避免這種狀況出現)；
CommonJS團隊提出一個規範：模塊轉換格式，將CommonJS地模塊包裝在一個回調函數中，以便更好地處理客戶端地異步加載；

//math.js
require.define("maths", function(require, exports) {
  exports.per = function(value, total) {
    return ((value / total) * 100);
  };
});
//application.js
require.define("application", function() {
  var per = require("./maths").per;
 assertEqual(per(500, 100), 50);
}, ["./maths"]); //給出它地依賴

模塊加載器

RequireJS

對模塊加載地見解略不一樣，它遵循「異步模塊定義」（AMD）格式，主要不一樣在於AMD的API是即時計算依賴關係，而不是延遲計算；
具體能夠去了解AMD, CMD;

例子html

*require-example/index.htmlnode

data-main屬性快捷引入初始化腳本jquery

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script data-main="app" src="lib/require.js"></script>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

*require-example/app.jsgit

requirejs.config, baseUrl定義第三方庫的路徑， paths定義第三方庫引入到的文件夾；requirejs(['app/main'])，定義了引入文件夾中最早執行的腳本;github

requirejs.config({
    baseUrl: 'lib',
    paths: {
        app: '../app'
    }
});
requirejs(['app/main'], function(){});

require-example/lib/print.js

引入的第三方庫中也能夠本身定義通用的腳本編程

define(function() {
  return function print(msg) {
    console.log(msg);
  }
})

require-example/app/message.js

定義一個普通腳本json

define(function () {
    return {
        getHello: function () {
            return 'Hello World';
        }
    };
});

require-example/app/main.js

主程序執行的腳本, 注意引入第三方庫腳本和通常腳本的區別api

define(function (require) {

    var messages = require('./messages');

    var print = require('print');

    print(messages.getHello());
});

包裝模塊

手動將模塊合併壓縮打包瀏覽器

隨着應用體積愈來愈大，考慮到可維護性，須要將模塊很細地顆粒化；新的文件會拆分紅不少個；
而考慮到性能，不得不將文件合併載入；
二者是一對矛盾，因此模塊依賴管理既要考慮到代碼結構地整潔、清晰，又要兼顧性能地最優化；

LAB.js

簡單地腳本加載器服務器

<script>
  $LAB
  .script(''/js/json2.js')
  .script("/js/jquery.js").wait()
  .script("/js/juqery-ui.js")
  .script("/js/vaport.js")
</script>

全部地腳本加載都是並行的；
LABjs會確保jquery.js在juqery-ui.js和vaport.js以前加載；

相關標籤/搜索

每日一句

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