Vue.js进阶系列(12)--模块化(上)

  很开心，经过长达一个星期的组件化深造，终于在昨天完美谢幕了。但是呢，那仅仅是取经路上九九八十一难中的第一难，接下来小编给你们来点更刺激的：模块化

一、为什么要用模块化

  对于一个人就能轻松干完的小case项目，会很规范的将一个页面中的html、css、js/jQuery写到一个文件中，按道理来说这是非常完美的做法，但一般场合下都是不讲道理的。当一个项目足够大的时候，可能会多人共同来处理同一件事情，这个时候就会有很多的问题，比如：
第一：造成全局变量同名的情况。

image.png

小红写的hong.js文件声明flag变量并复制为false；
小明写的ming.js文件也声明了flag变量并且赋值为true；
小张希望通过小明的flag为true来输出自己文件的内容【小张并不知道小红也定义了flag变量】然后我们来看看结果:

image.png

  并没有输出“我是小张”的字样。这是因为在两个js文件中定义的全局变量flag同名了，并且js文件执行时是按照顺序执行的。如果将ming.js放在hong.js前面，就不会输出zhang.js的内容；反之就会输出zhang.js文件的内容。
  在多人开发过程中，很难避免变量不重名的情况，并且也很难保障js的执行顺序。这是没有使用模块化带来的问题之一。
第二：造成代码没有办法重复使用
  为了解决全局变量命名冲突的问题，我们可以采用匿名函数来解决，因为函数是有作用域的，就算变量同名了，不在作用域内是无效的。比如：

image.png

  虽然解决了变量命名冲突的问题，但是小张却没有办法使用flag变量【因为变量flag只在hong.js和ming.js起作用】，这就造成了代码没有办法复用。
  为了解决上述的两个问题，特地请来的“模块化”这个大人物，下面我们来听听模块化的故事

二、模块化的故事【以第一人称叙述】

  导入和导出是我的心头肉，我还有很多个兄弟，它们分别是：CommonJS、AMD、CMD、ES的Module。其中呢，AMD、CMD性格比较内向，很少会有人注意到他们的存在，最讨人喜欢的是我的 ES的Module兄弟和CommonJS兄弟，他们为人真诚善良，认真负责......
【① 核心：导入和导出和模块化的核心】
【② 常见的模块化规范：CommonJS、AMD、CMD、ES的Module。AMD、CMD一般很少企业用，CommonJS在Node比较常用，ES的Module较常用】
  我三姑婆的远方亲戚的表妹的七婶的姐姐的表哥有个儿子叫ES5，为人十分单纯，行事仗义，这不，刚刚听说了变量同志的命名冲突问题和代码同志的不能重复利用的问题，决定帮助他们。
【ES5是没有模块化的，所以可以说跟模块化是八竿子打不着，但是可以通过ES5来定义最基本的模块化】

1.ES5仁兄的好人事迹

  为了解决上述变量同志的命名冲突问题和代码同志的不能重复利用的问题，我三姑婆的远方亲戚的表妹的七婶的姐姐的表哥的儿子ES5提出了这样的方案：通过定义对象来获取原来的数据。比如：

var moduleA = (function(){
    var obj = {}
    var flag = true;
    if(flag){
        console.log("我是小明");
    }
    obj.flag=flag
    return obj
})()

  ES5很仁义，给了 obj对象 还不够，还为obj对象找了个叫flag的女朋友，听说obj行动不便，变叫来了return 同志帮忙把obj和它女朋友一起送出去，又怕他们两人走路累着，就叫moduleA同志把他们两个运送出去 ，自此以后，如果别人想叫obj的女朋友flag，人们就习惯的叫moduleA同志把他俩一起送来。
【① ES5模块化的思路：通过定义对象来获取原来的数据】
【②代码分析：定义了obj对象，为ojb对象添加了变量flag并且赋值为原来第三行定义的flag，通过热return返回obj对象，此时的obj对象已经有了原本定义的flag数据，最后定义变量moduleA来接收返回的 obj对象】

2.CommonJS兄弟简单粗暴的待人之道

  一千个读者就有一千个哈姆雷特，面对刚刚的处境，我的CommonJS兄弟就十分简单粗暴的解决了：

// CommonJS导出
var flag = true;
    if(flag){
        console.log("我是小明");
    }
module.export = {
    flag:flag;
    }
// CommonJS导入:required后面填要导入的文件的路径
var {flag} = required(ming.js)

  CommonJS什么都没有给，只是叫了export和required两位先生，当别人想要见flag小姐时，让export送出去，flag小姐想回来，就让required先生送回来。
【在CommonJS中，export 对象负责导入数据，而required负责导出数据】

上面呢是小编灵光一闪瞎编的故事，但是黑体字部分不是瞎编的，是真材实料，希望大家会喜欢(≧∇≦)ﾉ
❤❤记得给小编五星好评唷❤❤