mvc-6依赖管理

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;

例子

*require-example/index.html

data-main属性快捷引入初始化脚本

<!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.js

requirejs.config, baseUrl定义第三方库的路径， paths定义第三方库引入到的文件夹；requirejs(['app/main'])，定义了引入文件夹中最先执行的脚本;

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

定义一个普通脚本

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

require-example/app/main.js

主程序执行的脚本, 注意引入第三方库脚本和一般脚本的区别

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之前加载；