远古时期

time 3m41s
IE6之前 是没有JS引擎
渲染引擎

js引入

time 5m

  1. <script·type="text/javascript">
  3. </script>

代码多了，引入js文件

  1. <script src="js/index.js"></script>

分js与html

time 7m21s
因为如果把逻辑都写在一个html、js中就太多了
所以分为多个html1、html2，index1js，index2.js

common.js

time 9m26s
如果相同的逻辑，不想写两遍，所以抽出来
抽出来放在common.js中
image.png

有问题了，可以common中有许多方法，html2用不到，可能html2只想用到里面几个方法
我不能光通过以页面为基础来分程序块分JS文件

js模块

time 15m12s

image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <script src="js/module_a.js"></script>
  9. <script src="js/module_b.js"></script>
  10. <script src="js/module_c.js"></script>
  11. <script src="js/index.js"></script>
  12. </body>
  13. </html>

index

  1. console. log(a);
  2. console.log(b);
  3. console.log(c);
  1. // module_a
  2. var a = [1, 2, 3, 4, 5].reverse();
  4. // module_b
  5. var b = a.concat([1, 2, 3, 4]);
  7. // module_c
  8. var c = b.join('-');

问题

time 16m26s
代码块顺序不能颠倒

  1. <script src="js/index.js"></script>
  2. <script src="js/module_a.js"></script>
  3. <script src="js/module_b.js"></script>
  4. <script src="js/module_c.js"></script>

time 17m50s
这4个脚本共用了一个全局作用域

JS作用域-全局作用域

  1. // module_a
  2. var a = [1, 2, 3, 4, 5].reverse();
  4. // module_b
  5. var b = a.concat([1, 2, 3, 4]);
  7. // module_c
  8. var c = b.join('-');
  9. //module_a中的a被覆盖了
  10. var a =1;

变量覆盖->变量重名->污染全局

模块化解决的问题是：
1、加载顺序
2、污染全局

模块化要解决以上的问题，但问题是一点一点解决的

03闭包