html|模块化笔记 javascript|html5

1.什么是模块化?
解决一个复杂问题时,把系统划分为若干模块的过程,模块是可组合,分解和更换的单元; 遵守固定的规则,把一个大文件拆分成独立并且相互依赖的多个小模块; 2为什么要用模块化? 可以使代码低耦合,每个模块都是独立的,功能模块不互相影响,便于对其进行改进和维护; 避免了js文件放入html文件中会有变量污染
特点(好处): ①提高了代码的复用性②提高了代码的可维护性③可以实现按需加载为什要学习模块化？模块化：一个js文件中可以引入另一个js文件的数据。
这个特点是很基础的要求，只要是编程语言都有。而2015年之前，js没有（痛点：多个js都放在一个html文件，而不能相互引用）！
2015年出了ES6，在语法层面就支持模块化，但是浏览器不支持，所以前面学习传统开发时，还是多个js都放在一个html文件。
当浏览器不支持，可以：

先用开发工具（webpack）搭建一个支持模块化的环境
在这个环境中写模块化的代码
用工具打包代码，然后在浏览器中运行

模块化规范对代码进行模块化的拆分与组合时,需要遵守的规则使用什么样的语法格式来引用模块(导入) 在模块中使用什么样的语法格式向外暴露成员(导出) 好处:遵守同样的模块化规范写代码,降低了沟通的成本,方便了各个模块之间的相互调用;
node.js中的模块化 node.js中的模块分为3大类
1.内置模块(由node.js官方提供,例如:fs,path,http等)
2.自定义模块(用户自己创建的js文件)
3.第三方模块(由第三方开发出来的模块,使用前需要先下载)

加载模块
使用 require() 方法，可以加载需要的内置模块、用户自定义模块、第三方模块进行使用

// 1.加载内置的 fs 模块 const fs = require('fs'); // 2.加载用户的自定义模块 const custom = require('./custom.js'); // 3.加载第三方模块（需要下载~） const moment = require('momoent');

注意：使用 require() 方法加载其它模块时，会执行被加载模块中的代码。

什么是模块作用域
和函数作用域类似，在自定义模块中定义的变量、方法等成员，只能在当前模块内被访问，这种模块级别的访问限制，叫做模块作用域;
好处:防止了全局变量污染的问题

导出：module.exports , exports
module 对象每个 .js 自定义模块中都有一个 module 对象，它里面存储了和当前模块有关的信息 module.exports 对象在自定义模块中，可以使用 module.exports 对象，将模块内的成员共享出去，供外界使用。外界用 require() 方法导入自定义模块时，得到的就是 module.exports 所指向的对象。注意:使用 require() 方法导入模块时，导入的结果，永远以 module.exports 指向的对象为准。 exports 对象由于 module.exports 单词写起来比较复杂，为了简化向外共享成员的代码，Node 提供了 exports 对象。默认情况下， exports 和 module.exports 指向同一个对象。最终共享的结果，还是以 module.exports 指向的对象为准。
exports 和 module.exports 的使用误区require() 模块时，得到的永远是 module.exports 指向的对象注意：为了防止混乱，建议大家不要在同一个模块中同时使用 exports 和 module.exports 模块规范

CommonJS 规范：nodejs中遵守的就是commonjs规范。
ES6 模块化规范：（前后端通用的模块化规范；Node.js、Vue、React 中都能使用！）
CMD 和 AMD 模块化规范（较少使用）: CMD--sea.js, AMD-require.js
UMD 叫做通用模块定义规范（Universal Module Definition），它可以通过运行时或者编译时让同一个代码模块在使用 CommonJs、CMD 甚至是 AMD 的项目中运行。它没有自己专有的规范，是集结了 CommonJs、CMD、AMD 的规范于一身

CommonJS 模块化规范 CommonJS 规定：①每个模块内部， module 变量代表当前模块。②module 变量是一个对象，它的 exports 属性（即 module.exports ）是对外的接口。③加载某个模块，其实是加载该模块的 module.exports 属性。 require() 方法用于加载模块。导入：