模块化开发

模块化开发

先举个栗子来了解一下模块化开发吧：

• 不知道大家有没有上过数字电路实验课，老师总是建议大家按照模块在面包板上搭建电路，在连接好模块的线路之后他会提醒大家用电压表大约测一下估计一下这块连的线路是否符合之前计算好的值，依次连接测试好每个模块，然后整合一下连接全局的电路。这样坐的好处呢显而易见：

• 在连接的时候按照模块可以排查出元器件的问题（比如说电阻，电容是否是正常的）

• 按照模块完成电路，如果最后整体结果出现问题很容易排查问题，要么就是电路设计的不合理，要么就是模块连接错了，至少不用考虑别的原因（哪个元器件坏掉了），大家不要小看这个问题，如果是比较复杂的电路用到的元器件比较多，那排查起来真的很痛苦很痛苦。。。。。。

  对于前端人员来说，一个比较大的模块往往是大家共同开发的，虽然每个人都有自己的编程风格，但是不可避免的会出现函数同名（代码规范不是说要见名知意嘛，如果大家都用谷歌翻译，那肯定有重复的了，哈哈哈哈~~），最后将这些文件汇总到一起，很难保证你调用的那个函数就是你想的那个函数，排查问题的话全局搜索好多同名函数，而js又没有函数重载，想想头都大，采用模块化开发就可以很好的避免以上问题。

• Node中既可以使用Common JS模块化，也可以使用ES6的模块化，下面简单看一下两种写法：

• 首先呢，我们先新建三个JS文件，a.js,b.js,以及要使用他们的index.js

• a的代码如下：

function testMoudle() {
  init()
  console.log('aa')
}
function init() {
  console.log('init')
}
//对外部暴露的变量和函数
module.exports = {
  testMoudle,
  init
}

• b的代码如下：

function testMoudle(){
  moudleA.init()
  console.log('bb')
}
const moudleA = require('./a')
module.exports = testMoudle

index.js的代码如下：

const  varA = require('./a') //导入A文件
const  varB = require('./b') //导入B文件
console.log(varA.testMoudle())
console.log(varB())

执行以上代码结果：

• 这样就能按需导入啦，即使两个文件中存在同名的函数依然可以正常运行，并且你能够自定义对外暴露的方法，而且排查错误可以很快定位到是那个文件，是不是很方便？
  以上采用的是Common JS的写法，我们也来试一下ES6的模块化：

• 写个C文件吧（此C非彼C）:

const modleC = {
  name:'梅子黄时雨',
  age:'18'
}
export default modleC

index文件修改一下：

import modleC from './c.js'
// console.log(varA.testMoudle())
// console.log(varB())
console.log(modleC)

执行结果：

【注】：使用ES6模块化的时候千万别忘了在package.json里增加：“type”:"moudle"属性昂

• 今天就到这里啦~~下会见