模块化笔记

1.什么是模块化?

解决一个复杂问题时,把系统划分为若干模块的过程,模块是可组合,分解和更换的单元;
遵守固定的规则,把一个大文件拆分成独立并且相互依赖的多个小模块;
2为什么要用模块化?
可以使代码低耦合,每个模块都是独立的,功能模块不互相影响,便于对其进行改进和维护;
避免了js文件放入html文件中会有变量污染

特点(好处):
提高了代码的 复用性
提高了代码的 可维护性
可以实现 按需加载

为什要学习模块化?

模块化: 一个js文件中可以引入另一个js文件的数据。

这个特点是很基础的要求,只要是编程语言都有。而2015年之前,js没有(痛点:多个js都放在一个html文件,而不能相互引用)!

2015年出了ES6,在语法层面就支持模块化,但是浏览器不支持,所以前面学习传统开发时,还是 多个js都放在一个html文件

当浏览器不支持,可以:

  1. 先用开发工具(webpack)搭建一个支持模块化的环境

  2. 在这个环境中写模块化的代码

  3. 用工具打包代码,然后在浏览器中运行

模块化规范
对代码进行模块化的拆分与组合时,需要遵守的规则
使用什么样的语法格式来引用模块(导入)
在模块中使用什么样的语法格式向外暴露成员(导出)
好处:遵守同样的模块化规范写代码,降低了沟通的成本,方便了各个模块之间的相互调用;

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() 方法用于加载模块

导入:

  • 自定义模块:const xxx = require(模块文件的相对位置)

  • 内置模块:const xxx = require(模块的名字)

  • 第三方模块:const xxx = require(模块的名字)

你可能感兴趣的:(html,html5,javascript)