提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：这里可以添加本文要记录的大概内容：

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、模块化是什么？

• 1.将一个复杂的程序依据一定的规则拆分成单个文件, 并最终组合在一起。
  2.这些拆分的文件就是模块， 模块内部数据是私有的,只是向外部暴露一-些。

因为一个项目是多个程序员合作的，拆分为了避免命名冲突和代码冲突，拆了一定要合，不然引入的时候顺序很麻烦。

1.1、为什么进行模块化

• 1.降低复杂度,提高解耦性
  2.避免命名冲突
  3.更好的分离、按需加载
  4.更好的复用性，可维护性。

1.2、模块化带来的问题

• 依赖模糊 请求过多 难以维护
  不过这些问题都可以解决。

二、ConmomJS模块化规范

● 官网: http://wiki.commonjs.org/wiki/modules ● 每个文件都是一个模块 ● CommonJS 模块化的代码既可以在服务端运行，也可以在浏览器端运行 ● 服务器端：模块化代码可以直接运行 ● 浏览器端：模块化的代码要经过 Browserify( http://browserify.org) 编译。

2.2、ConmomJS语法规范

当你写的js文件，别人也可以用到的时候，你可以把js文件进行暴露。
1.语法规则：
第一种方式：module.exports = value
第二种方式：module.xxx = value
2.引入规则：
引入第三方模块；require(xxx),xxx为模块名
引入自定义模块：require(xxx) xxx为模块文件路径
3.内置关系

exports和module.exports都是默认指向一个空对象，你暴露的是这个空的对象，所以你想暴露什么，就需要在这个空对象之中加入你的代码。
引入代码

暴露代码

在app.js引入了main.js文件之后，输出data发现取不到值，（浏览器只是运行了一遍main.js但是取不到未经暴露的值）因为main.js只对showData这个函数进行了暴露，即暴露出了这个对象a，他有一个函数:

function showData()
{
 console.log(data)
}
1
2
3
4

所以接受这个对象a的moudel也是一个对象，用a对象的函数可以取到data的值，所以app.js应该改写成：

这样就可以取到data的值了，data的值是athui。

拓展

去掉a这个对象，那么就是在堆里直接加了一个函数，那么如下引入的moudle1接受的就是一个函数，那么他也是一个函数，可以写成

总结：我们也可以用module.exports作为一个对象，函数作为对象的里面属性的值，如下所示：

对象简写之后：

注意：这里指向的不是那个堆中的空对象了，而是一个新的对象。

结论

module1使用module.exports=xxx去暴露，xxx就是暴露的内容。引入的内容是什么取决于暴露的是什么。暴露的是对象，那么引入const module1 = require(“./main”);中的module1就是对象，如果引入的是函数，那么module1就是函数。

2.3 第二种暴露方式

语法：exports.名字=暴露的内容

app.js文件中：

但是这种写法太复杂，所以我们可以简化：

可以删除函数名字，得到如下的代码：


在此刻引入之后，只暴露module.exports暴露的新对象，而不会暴露exports的100，因为暴露的本质是暴露module.exports里的内容。

引入第三方模块，在下载完第三方模块之后，直接用名字引用。

2…4 ConmomJS浏览器端的实现

浏览器不能识别require，所以我们要通过Browserify翻译。需要安装、
【node环境下运行】node app.js
【浏览器环境下运行】执行
index.html
全局安装browserify npm i browserify -g
编译指定文件 browerserify ./app.js -o ./build.js
在html页面种引入build.js

index.html
之后只需要引入新生成的.bulid.js就可以了。