vue进阶知识点（1）——模块化开发

为什么要有模块化 ？

• 三大框架都用到了模块化的思想，由此可知，模块化变得越来越常见

• 发明JS语言的目的操作html和css，让页面更酷炫一点，是一种脚本语言

• 199几年的时候，js使用非常简单，直接写script标签，稍微操作页面元素就可以了

• 随着ajxs和前后端分离的思想，前端的代码越来越复杂，

• 客户端做的事情越来越多，代码量越来越多，开始创建js文件，

• 不再在页面中直接写script标签，js文件多了之后需要维护

多个js文件会造成哪些问题 ？

• 项目中有三个角色，A和B和C

• 分别开发自己的模块

• B和C创建的js文件都要引入到一个main.js文件中

• B创建的文件里有一个flag变量为true

• C创建的文件里有一个flag变量为false

• B在另一个文件中引入自己刚刚创建的变量flag，可是显示的是false

• 找了一宿bug，发现不是自己的错，就去找C的文件，发现是他也创建了这个变量

• 这就是全局变量命名冲突的问题，

• 除了变量名以外，在main.js文件中引入其他js文件的顺序也会有影响

• 以前的解决方案是匿名闭包，就是为每一个js文件创建立即执行函数，把代码放到函数里

• 虽然解决了命名冲突，因为在自己的作用域内创建自己的变量，但是匿名闭包也会有问题

• 但是在后续创建的文件内想使用之前B里的flag变量，

• 不能再使用了，也就是说代码的复用性降低了，只能重新定义

• 说白了就是aaa.js文件的东西，bbb.js用不了

使用ES5模仿模块化可以解决代码复用的问题

• 在每一个立即执行函数内搞一个空对象obj，然后把需要的变量和函数写成obj.name或者obj.age

• 在最后return出去