最近想边学边整一下模块化编程，那么先从为何要使用模块化编程说起吧，可能你刚听说模块化编程，也没有关系，本篇讲的是很基础的东西。
一开始写代码的时候，我们可能只需要一个js文件，去实现一个很小的功能，比如下面这样：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> javascript模块化 </title>
<style type="text/css">
</style>
</head>
<body>
<script>
function add(a, b) {
return a + b;
}
var ans = [];
for(var i = 0; i < 5; i++) {
var a = Math.random();
var b = Math.random();
var c = add(a, b);
console.log(c);
ans.push(c);
}
</script>
</body>
</html>
这段代码初始化了5个-2~2之间的数据，并存放在ans数组里。随着代码量的增加，你会渐渐发现把代码写在一个js文件中会很繁琐，于是我们写了好几个js文件，如上代码把函数写在一个script标签内，同时把初始化写在另一个script标签内，如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> javascript模块化 </title>
<style type="text/css">
</style>
</head>
<body>
<script>
function add(a, b) {
return a + b;
}
</script>
<script>
var ans = [];
for(var i = 0; i < 5; i++) {
var a = Math.random();
var b = Math.random();
var c = add(a, b);
console.log(c);
ans.push(c);
}
</script>
</body>
</html>
我们把两个js片段写在了一个html文件中，但是通常我们不会这么做，我们会把它们写在两个js文件中然后在html中引用，这里就不提了。
如上代码有什么问题吗？通常情况下，代码中的全局变量对我们来说是越少越好，但是如上代码暴露了a、b、c以及i四个我们不需要的全局变量，我们需要的只是一个初始化成功的ans数组以供后面的代码使用，也就是说第二个script的片段我们只需要一个ans变量的值，如何？一个很简单的方法便是写一个自动执行函数，因为只有函数里的变量才是局部变量：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> javascript模块化 </title>
<style type="text/css">
</style>
</head>
<body>
<script>
function add(a, b) {
return a + b;
}
</script>
<script>
(function() {
window.ans = [];
for(var i = 0; i < 5; i++) {
var a = Math.random();
var b = Math.random();
var c = add(a, b);
ans.push(c);
}
}());
</script>
<script>
console.log(a); // 报错
console.log(b); // 报错
console.log(c); // 报错
console.log(i); // undefined
for(var i = 0; i < 5; i++)
console.log(ans[i])
</script>
</body>
</html>
第二个script标签内的代码便是一种简单的模块化机制，不同的是实际生产中通常将所需要的值直接返回或是暴露在接口下，而非采用全局变量的方式。我们看到用了模块化的写法，世界仿佛干净了许多，我们只需提供需要的变量，而不用去管其他的东西。
简单了解了为何要使用模块化的原因，那么第二篇接着会来学习下模块化的几种经典写法~
时间： 2024-10-29 19:09:56