什么是模块化? 网上的 什么是模块化（一） 当我们在多个 JavaScript 文件之间进行通讯时, 所以如何解决命名冲突和文件依赖的问题呢？ 解决方法就是：限制作用域，并且移除全局变量。 而解决以上两个问题的做法就是模块化 这个博客里写conmmonJS的时候,
// lib.js var counter = 3; function incCounter() { counter++; } module.exports = { counter: counter, incCounter: incCounter, };``` // main.js var counter = require(‘./lib’).counter; var incCounter = require(‘./lib’).incCounter;
console.log(counter); // 3 incCounter(); console.log(counter); // 3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
> 据此得出结论:一旦输出一个值，模块内部的变化就影响不到这个值。
> 这个结论是有问题的. 之所以影响不到是因为 counter 是个原始值.
> 如果改成 counter.num++ counter变成引用值,则还是有效果的.
> (吓我一跳,如果影响不到,那各种变量岂不是都用不了?)
> [什么是模块化，模块化开发如何实现？](https://blog.csdn.net/a_one2010/article/details/54563733);
> 模块化就是讲js文件按照功能分离，根据需求引入不同的文件中。源于服务器端。
> [模块化实现（好处，原因）](https://www.jianshu.com/p/376ea8a19a17)
> 什么是模块化呢？《 Java 应用架构设计：模块化模式与 OSGi 》一书中对它的定义是：模块化是一种处理复杂系统分解为更好的可管理模块的方式。
> common.js
#main.js
var m1 = require(“./m1.js”); var m2 = require(“./m2.js”); var m3 = require(“./m3.js”); m1.fn(); m2(); m3.fn();
1
#m1.js
module.exports = { name : “m1”, fn : function () { console.log(this.name); } }
1
#m2.js
module.exports = function () { console.log(“m2”); }
1
#m3.js
exports.fn = function () { console.log(“m3”); }
1
2
3
4
5
6
7
用git 执行 node main.js
我让main.js 依赖 m3, m3 依赖 m2 和 m1
index.html 注意要用 data-main 指定主要的js文件.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script src="https://cdn.bootcss.com/require.js/2.3.6/require.js" data-main= "main.js"></script> ``` main.js ``` (function () { require.config({
paths : {
m3 : "./m3",
m2 : "./m2",
m1 : "./test/m1",
jquery : "http://libs.baidu.com/jquery/2.0.0/jquery.min"
// 这里末尾添加 .js 会报错
// 可以引入cdn
} }) require(["m3"],function (num) {
console.log(num.num); });
require(["jquery"],function ($) {
$("body").css({"background":"red"});
})
})();
1
test/m1.js
define(function () { var num = 1;
1
2
3
return {
num:num
} })
1
m2.js
define(function () { var num = 2;
1
2
3
4
5
6
7
8
return {
num : num
} }) ``` m3.js ``` define(["m1","m2"],function (num1,num2) {
var num = num1.num + num2.num;
return {
num : num
} })
1
2
3
4
cmd
index.html
1
2
3
4
5
6
7
8
<script type="text/javascript">
// 指定主要js
seajs.use("http://127.0.0.1:8020/server/commonjstest/main.js");
// 这里我的sea.js不是跟main.js同目录下的,所以要填绝对路径,,尼玛
// 后面的都要改成绝对路径, 否则默认从 sea.js所在文件夹中去找.
</script> ``` m1.js ``` define(function (require,exports,module) { var num = 1;
exports.num = num; })
1
m2.js
define(function (require,exports,module) { var num = 2;
exports.num = num; })
1
m3.js
define(function (require,exports,module) { var num = 3; // 这是异步加载, 加载完之后执行 回调函数里的语句.模块参数放在回调函数中的参数 // 类似amd规范 require.async(“http://127.0.0.1:8020/server/commonjstest/m2.js”,function (m2) { console.log(m2.num); }) // 这是同步加载, 阻塞进程,控制执行顺序, 类似 cmd规范 var m1 = require(“http://127.0.0.1:8020/server/commonjstest/test/m1”); console.log(m1.num);
module.exports = { num }
})
1
main.js
(function () { define(function (require,exports,module) { var m3 = require(“http://127.0.0.1:8020/server/commonjstest/m3”); console.log(m3.num); require.async(“http://libs.baidu.com/jquery/2.0.0/jquery.min.js”,function ($) { $(“body”).css({“background”:”red”});// 报错, $ is not defined }) })
})();
1
2
3
4
执行顺序就不说了,先执行同步的主线程的,然后再执行事件里的.
这里发现jq无法引入, 表明 jq 是不支持sea.js的. 呵呵,看来用的人是不是不多啊?
jq源码是支持 amd的
1
2
3
4
5
if ( typeof define === "function" && define.amd ) {
define( "jquery", [], function () { return jQuery; } );
} ``` [seajs如何引入jquery?](https://blog.csdn.net/vtegong/article/details/54925824) ``` define(function(){
//jquery源代码
return $.noConflict(); }); ``` 测试有效果. 这表明 return 可以替代exports 这cmd 还真是都支持啊. 
