Node-Day05模块化

最新推荐文章于 2024-06-20 20:20:21 发布

晚安720

最新推荐文章于 2024-06-20 20:20:21 发布

阅读量65

点赞数

文章标签： javascript 前端 json

本文链接：https://blog.csdn.net/qq_59099003/article/details/130131528

版权

1.模块化的基本概念

1.什么是模块化

模块化是指解决一个复杂问题时，自顶向下逐层把系统划分成若干模块的过程，对于整个系统来说，模块是可组合、分解和更换的单元

1.编程领域中的模块化

编程领域中的模块化，就是遵守固定的规则，把一个大文件拆成独立并互相依赖的多个小模块。

把代码进行模块化拆分的好处：

① 提高了代码的复用性

② 提高了代码的可维护性

③ 可以实现按需加载

2.模块化规范

模块化规范就是对代码进行模块化的拆分与组合时，需要遵守的那些规则。

例如：

使用什么样的语法格式来引用模块
在模块中使用什么样的语法格式向外暴露成员

模块化规范的好处：大家都遵守同样的模块化规范写代码，降低了沟通的成本，极大方便了各个模块之间的相互调用，利人利己。

2.Node.js 中的模块化

1.Node.js 中模块的分类

Node.js 中根据模块来源的不同，将模块分为了3大类，分别是：

内置模块（内置横块是由Nodejs官方提供的，例如fs、path、http等）
自定义模块（用户创建的每个Jjs文件，都是自定义模块）
第三方模块（由第三方开发出来的模块，并非官方提供的内置模块，也不是用户创建的自定义模块，使用前需要先下载）

2.加载模块

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

//加载内置的 fs 模块
const fs = require (fs)
//加载用户自定义的模块
const m1 = require('./01m1.js')
//加载第三方模块
const moment = require(moment)

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

3.Node.js 中的模块作用域

1.什么是模块作用域

和函数作用域类似，在自定义模块中定义的变量、方法等成员，只能在当前模块内被访问，这种模块级别的访问限制，叫做模块作用域。

//在模块作用域中定义常量 username
const username = '李斯'

//在模块作用域中定义函数 sayHello
function sayHello(){
    console.log('大家好，我是'+username)
}

const custom = require('./02custom')

//输出为 {} 空对象，在 02test.js 模块中，无法访问到 01custom.js 模块中的私有变量
console.log(custom)

2.模块作用域的好处

防止了全局变量污染的问题

4.向外共享模块作用域中的成员

1.module 对象

在每个 .js 自定义模块中都有一个 module 对象，它里面存储了和当前模块有关的信息，打印如下：

console.log(module)

//打印结果如下
Module {
  id: '.',
  path: 'D:\\learn\\Node\\Code\\Day03',
  exports: {},
  filename: 'D:\\learn\\Node\\Code\\Day03\\03module对象.js',
  loaded: false,
  children: [],
  paths: [
    'D:\\learn\\Node\\Code\\Day03\\node_modules',
    'D:\\learn\\Node\\Code\\node_modules',
    'D:\\learn\\Node\\node_modules',
    'D:\\learn\\node_modules',
    'D:\\node_modules'
  ]
}

2.module.exports 对象

在自定义模块中，可以使用 module.exports 对象，将模块内的成员共享出去，供外界使用。外界用 require() 方法导入自定义模块时，得到的就是 module.exports 所指向的对象。

即：在外界使用 require 导入一个自定义模块的时候，得到的成员，就是那个模块中通过 module.exports 指向的那个对象。

// 在一个自定义模块中，默认情况下，module.exports = {}

//向 module.exports 对象上挂载 sayHello 方法
module.exports.username = 'zsd'

//向 module.exports 对象上挂载 sayHello 方法
module.exports.sayHello = ()=>{
    console.log('Hello')
}

const m = require('./04自定义模块')

console.log(m)

运行结果：

PS D:\learn\Node\Code\Day03> node .\04test.js
{ username: 'zsd', sayHello: [Function (anonymous)] }
PS D:\learn\Node\Code\Day03>

3.共享成员时的注意点

使用 require() 方法导入模块时，导入的结果，永远以 module.exports 指向的对象为准

4.exports 对象

由于 module.exports单词写起来比较复杂，为了简化向外共享成员的代码，Node提供了exports 对象，默认情况下，exports和 module.exports 指向同一个对象。最终共享的结果，还是以 module.exports 指向的对象为准。

console.log(exports)
console.log(module.exports)
console.log(exports === module.exports)

打印结果：

PS D:\learn\Node\Code\Day03> node .\05exports对象.js
{}
{}
true

最终，向外共享的结果，永远都是 module.exports 所指的对象。

5.exports 和 module.exports 的使用误区

时刻谨记, require() 模块时，得到的永远是 module.exports 指向的对象。

（1）

exports.username = '哈哈哈'

module.exports = {
    gender : '男',
    age : 22
}

打印结果：

{ gender: '男', age: 22 }

（2）

module.exports.username = '嘎嘎'

exports = {
    gender : '男',
    age : 20
}

打印结果：

{ username: '嘎嘎' }

（3）

exports.username = '尬尴'
module.exports.gender = '男'

打印结果：

{ username: '尬尴', gender: '男' }

（4）

exports = {
    usename : 'ss',
    gender : '男'
}

module.exports = exports

module.exports.age = '33'

打印结果：

{ usename: 'ss', gender: '男', age: '33' }

注意：为了防止混乱，建议不要在同一个模块中同时使用 exports 和 module.exports

5. Node.js 中的模块化规范

Node.js 遵循了 CommonJS 模块化规范，CommonJS 规定了模块的特性和各模块之间如何相互依赖。

CommonJS 规定：

①每个模块内部，module 变量代表当前模块。

② module 变量是一个对象，它的 exports 属性（即 module.exports）是对外的接口。

③加载某个模块，其实是加载该模块的 module.exports 属性，require() 方法用于加载模块。

3.npm与包

1.包

1.什么是包

Node.js 中的第三方模块又叫做包，就像电脑和计算机指的是相同的东西，第三方模块和包指的是同一个概念，只不过叫法不同

2.包的来源

不同于Node.js 中的内置模块与自定义模块，包是由第三方个人或团队开发出来的，免费供所有人使用。

注意：Node.js中的包都是免费且开源的，不需要付费即可免费下载使用。

3.为什么需要包

由于 Node.js的内置模块仅提供了一些底层的API，导致在基于内置模块进行项目开发的时，效率很低。

包是基于内置模块封装出来的，提供了更高级、更方便的API，极大的提高了开发效率。

包和内置模块之间的关系，类似于jQuery和浏览器内置APl之间的关系。

4.从哪里下载包

国外有一家IT公司，叫做 npm, Inc. 这家公司旗下有一个非常著名的网站： https://www.npmjs.com/，它是全球最大的包共享平台，你可以从这个网站上搜索到任何你需要的包，只要你有足够的耐心！

到目前位置，全球约1100多万的开发人员，通过这个包共享平台，开发并共享了超过120多万个包供我们使用。

npm,lnc. 公司提供了一个地址为https://registry.npmjs.org/的服务器，来对外共享所有的包，我们可以从这个服务器上下载自己所需要的包。

注意：从 https://www.npmjs.com/网站上搜索自己所需要的包

从https://registry.npmjs.org/服务器上下载自己需要的包

5.如何下载包

**npm,Inc. **公司提供了一个包管理工具，我们可以使用这个包管理工具，从https://registry.npmjs.org/服务器把需要的包下载到本地使用。

这个包管理工具的名字叫做Node Package Manager(简称npm包管理工具），这个包管理工具随着 Node.js的安装包一起被安装到了用户的电脑上。

大家可以在终端中执行 npm -v 命令，来查看自己电脑上所安装的npm包管理工具的版本号：

2.npm初体验

1.格式化时间的传统做法

① 创建格式化时间的自定义模块

② 定义格式化时间的方法

③ 创建补零函数

④ 从自定义模块中导出格式化时间的函数

//1.定义格式化时间的方法
function dateFormat(dtStr){
    const dt = new Date(dtStr)

    const y = dt.getFullYear()
    const m = padZero(dt.getMonth()+1)
    const d = padZero(dt.getDate())

    const hh = padZero(dt.getHours())
    const mm = padZero(dt.getMinutes())
    const ss = padZero(dt.getSeconds())

    return `${y}-${m}-${d}  ${hh}-${mm}-${ss}`
}

//定义补零函数

function padZero(n){
    return n>9?n:'0'+n
}

module.exports = {
    dateFormat
}

⑤ 导入格式化时间的自定义模块

⑥ 调用格式化时间的函数

//导入自定义的格式化时间的模块
const TIME = require('./10dateFormat')

//调用方法，进行时间的格式化
const dt = new Date()
// console.log(dt)

const newdt = TIME.dateFormat(dt)
console.log(newdt)

2.格式化时间的高级做法

① 使用 npm 包管理工具，在项目中安装格式化时间的包 moment

② 使用 require0导入格式化时间的包

③ 参考moment 的官方APl文档对时间进行格式化

// 导入 moment 包
const moment = require('moment')
// 参考moment官方API文档，
//调用 moment() 方法，得到当前的时间
//针对当前的时间，调用 format() 方法，按照指定的格式进行时间的格式化
const dt = moment().format('YYYY-MM-DD HH-mm-ss')

console.log(dt)

3.在项目中安装包的命令

如果想在项目中安装指定名称的包，需要运行如下的命令:

npm install 包的完整名称

上述的装包命令，可以简写成如下格式：

npm i 包的完整名称

4.初次装包后多了哪些文件

初次装包完成后，在项目文件夹下多一个叫做 node_modules 的文件夹和 pack****age-lock.json 的配置文件。

其中：

node_modules 文件夹用来存放所有已安装到项目中的包。require() 导入第三方包时，就是从这个目录中查找并加载包。

package-lock.json 配置文件用来记录 node_modules 目录下的每一个包的下载信息，例如包的名字、版本号、下载地址等。

注意：程序员不要手动修改 node_modules 或 package-lock.json 文件中的任何代码，npm包管理工具会自动维护它们

5.安装指定版本的包

默认情况下，使用 npm install 命令安装包的时候，会自动安装最新版本的包，如果需要安装指定版本的包，可以在包名之后，通过 @ 符号指定具体的版本，例如 :

npm i moment@2.22.2

6.包的语义化版本规范

包的版本号是以“点分十进制”形式进行定义的，总共有三位数字，例如 2.24.0

其中每一位数字所代表的的含义如下：

第1位数字：大版本
第2位数字：功能版本
第3位数字：Bug修复版本
版本号提升的规则：只要前面的版本号增长了，则后面的版本号归零。

npm 规定，在项目根目录中，必须提供一个叫做package.json 的包管理配置文件，用来记录与项目有关的一些配置信息。

例如：

项目的名称、版本号、描述等
项目中都用到了哪些包
哪些包只在开发期间会用到
哪些包在开发和部署时都需要用到

3.包管理配置文件

1.多人协作的问题

例：整个项目的体积是30.4M，第三方包的体积是28.8M，项目源代码的体积1.6M

遇到的问题：第三方包的体积过大，不方便团队成员之间共享项目源代码。

解决方案：共享时剔除node_modules

2.如何记录项目中安装了哪些包

在项目根目录中，创建一个叫做package.json的配置文件，即可用来记录项目中安装了哪些包。从而方便剔除node_modules 目录之后，在团队成员之间共享项目的源代码。

注意：今后在项目开发中，一定要把 node_modules 文件夹，添加到 .gitignore 忽略文件中。

3.快速创建 package.json

npm包管理工具提供了一个快捷命令，可以在执行命令时所处的目录中，快速创建 package.json 这个包管理配置文件：

//作用：在执行命令所处的目录中，快速新建 package.json 文件
npm init -y

注意：

① 上述命令只能在英文的目录下成功运行！所以，项目文件夹的名称一定要使用英文命名，不要使用中文，不能出现空格。② 运行 npm install 命令安装包的时候，npm包管理工具会自动把包的名称和版本号，记录到 package.json中。

4.dependencies 节点

package.json 文件中，有一个dependencies 节点，专门用来记录使用npm install命令安装了哪些包。

5.一次性安装所有的包

当我们拿到一个剔除了node_modules的项目之后，需要先把所有的包下载到项目中，才能将项目运行起来。否则会报类似于下面的错误 :

//由于项目运行依赖于 moment 这个包，如果没有提前安装好这个包，就会报如下的错误：
Error:Cannot find module 'moment'

可以运行 npm install 命令（或 npm i )一次性安装所有的依赖包：

//执行 npm install 命令时，npm 包管理工具会先读取 package.json 中的 dependencies 节点
//读取到记录的所有依赖包名称和版本号之后，npm 包管理工具会把这些包一次性下载到项目中
npm install

6.卸载包

可以运行 npm uninstall 命令，来卸载指定的包：

//使用 npm uninstall 具体的包名来卸载包
npm uninstall moment

注意：npm uninstall 命令执行成功后，会把卸载的包，自动从 package.json 的dependencies中移除掉。

7. devDependencies 节点

如果某些包只在项目开发阶段会用到，在项目上线之后不会用到，则建议把这些包记录到devDependencies节点中。与之对应的，如果某些包在开发和项目上线之后都需要用到，则建议把这些包记录到dependencies 节点中。

可以使用如下的命令，将包记录到devDependencies 节点中：

//安装指定的包，并记录到 devDependencies 节点中
npm i 包名 -D
//注意：上述命令是简写形式，等价于下面完整的写法
npm install 包名 --save-dev

4.解决下包速度慢的问题

1.为什么下包速度慢

在使用 npm 下包的时候，默认从国外的https://registry.npmjs.org/服务器进行下载，此时，网络数据的传输需要经过漫长的海底光缆，因此下包速度会很慢。

扩展阅读-海底光缆：

https://baike.baidu.com/item/%E6%B5%B7%E5%BA%95%E5%85%89%E7%BC%86/4107830
https://baike.baidu.com/item/%E4%B8%AD%E7%BE%8E%E6%B5%B7%E5%BA%95%E5%85%89%E7%BC%86/10520363
https://baike.baidu.com/item/APG/23647721?fr=aladdin

2.淘宝NPM镜像服务器

淘宝在国内搭建了一个服务器，专门把国外官方服务器上的包同步到国内的服务器，然后在国内提供下包的服务。从而极大的提高了下包的速度。

扩展：

镜像（Mirroring）是一种文件存储形式，一个磁盘上的数据在另一个磁盘上存在一个完全相同的副本即为镜像。

3.切换npm的下包镜像源

下包的镜像源，指的就是下包的服务器地址。

//查看当前的下包镜像源
npm config get registry
//将下包的镜像源切换为淘宝镜像源
npm config set registry=https://registry.npm.taobao.org/
//检查镜像源是否下载成功
npm config get registry

4.nrm

为了更方便的切换下包的镜像源，我们可以安装 nrm 这个小工具，利用 nrm 提供的终端命令，可以快速查看和切换下包的镜像源。

//通过 npm 包管理器，将 nrm 安装为全局可用的工具
npm i nrm -g 
//查看所有可用的镜像源
nrm ls
//将下包的镜像源切换为 taobao 镜像
nrm use taobao

（1）若在安装时出现如下错误：

Run `npm audit` for details.

则将下载命令更改为：

npm i nrm -g --no-fund

（2）若在进行查看所有可用的镜像源时出现如下错误：

D:\QMDownload\SoftMgr\Node\node_global\node_modules\nrm\cli.js:9
const open = require('open');
             

Error [ERR_REQUIRE_ESM]: require() of ES Module D:\QMDownload\SoftMgr\Node\node_global\node_modules\nrm\node_modules\open\index.js from D:\QMDownload\SoftMgr\Node\node_global\node_modules\nrm\cli.js not supported.
Instead change the require of index.js in D:\QMDownload\SoftMgr\Node\node_global\node_modules\nrm\cli.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (D:\QMDownload\SoftMgr\Node\node_global\node_modules\nrm\cli.js:9:14) {
  code: 'ERR_REQUIRE_ESM'
}

则可将该目录下的第九行中的 require 改为 import

D:\QMDownload\SoftMgr\Node\node_global\node_modules\nrm\cli.js

5.包的分类

使用npm包管理工具下载的包，共分为两大类，分别是：

项目包
全局包

1.项目包

那些被安装到项目的 node_modules 目录中的包，都是项目包。

项目包又分为两类，分别是：

开发依赖包（被记录到devDependencies节点中的包，只在开发期间会用到）
核心依赖包（被记录到dependencies节点中的包，在开发期间和项目上线之后都会用到）

//开发依赖包
npm i 包名 -D
//核心依赖包
npm i 包名

2.全局包

在执行 npm install 命令时，如果提供了 -g 参数，则会把包安装为全局包，全局包会被安装到 node_modules 目录下。

//全局安装指定的包
npm i 包名 -g
//卸载全局安装的包
npm uninstall 包名 -g

注意：

① 只有工具性质的包，才有全局安装的必要性，因为它们提供了好用的终端命令。

② 判断某个包是否需要全局安装后才能使用，可以参考官方提供的使用说明即可。

3. i5ting_toc

i5ting_toc 是一个可以把 md 文档转为 html 页面的小工具，使用步骤如下：

//将 i5ting_toc 安装为全局包
npm install -g i5ting_toc
//调用 i5ting_toc ,实现 md 转 html 的功能
i5ting_toc -f 要转换的 md 文件路径 -o

6规范的包结构

在清楚了包的概念、以及如何下载和使用包之后，接下来，深入了解一下包的内部结构。

一个规范的包，它的组成结构，必须符合以下3点要求：

① 包必须以单独的目录而存在

② 包的顶级目录下要必须包含 package.json 这个包管理配置文件

③ packagejson 中必须包含 name,version,main 这三个属性，分别代表包的名字、版本号、包的入口。

注意：以上3点要求是一个规范的包结构必须遵守的格式，关于更多的约束，可以参考如下网址：https://yarnpkg.com/zh-Hans/docs/package-json

7开发属于自己的包

1.需要实现的功能

① 格式化日期

② 转义 HTML中的特殊字符

③ 还原HTML中的特殊字符

//导入自己的包
const exo = require ('./exo/index')

//功能1：格式化日期
const dtStr = exo.dateFormat(new Date())
console.log(dtStr)

//功能2：转义html
const htmlStr = '<h1 title = "aaa">这是h1标签<span>123&nbs;</span></h1>'
const str = exo.htmlEscape(htmlStr)
console.log(str)

//功能3：还原html

const str2 = exo.htmlUnEscape(str)
console.log(str2)

2.初始化包的基本结构

① 新建 itheima-tools文件夹，作为包的根目录

② 在itheima-tools 文件夹中，新建如下三个文件：

package.json (包管理配置文件）
index.js（包的入口文件）
README.md（包的说明文档）

3.初始化 package.json

{
    "name": "exo",
    "version": "1.0.0",
    "main": "index.js",
    "description": "提供了格式化时间，HTMLEscape 的相关功能",
    "keywords": [
        "EXO",
        "dateFormat",
        "escape"
    ],
    "license": "ISC"
}

关于更多 license许可协议相关的内容，可参考 https://www.jianshu.com/p/86251523e898

4.在 index.js 中定义格式化时间的方法

//格式化日期时间
function dateFormat(dateStr){
    const dt = new Date(dateStr)

    const y = dt.getFullYear()
    const m = padZero(dt.getMonth()+1)
    const d = padZero(dt.getDate())

    const hh = padZero(dt.getHours())
    const mm = padZero (dt.getMinutes())
    const ss = padZero(dt.getSeconds())

    return `${y}-${m}-${d} ${hh}:${mm}:${nn}`
}

//补零函数
function padZero(n){
  return  n > 9 ? n : '0' + n

}

//暴露出去
module.exports = {
    dateFormat
}

5.在 index.js 中定义转义 HTML的方法

//转义HTML
function htmlEscape(htmlstr){
    return htmlstr.replace(/<|>|"|&/g,(match)=>{
        switch(match){
            case '<':
                return '&lt;'
            case '>':
                return '&gt;'
            case '"' :
                return '&quot;'
            case '&':
                return '&amp;'
        }
    })
}


//暴露出去
module.exports = {
    dateFormat,
    htmlEscape
}

/<|>|"|&/g 正则表达式

g ：表示全局匹配

| : 或者

回调函数 match为匹配成功的那个字符

6.在 index.js 中定义还原 HTML的方法

//还原 HTML
function htmlUnEscape(str){
    return str.replace(/&lt;|&gt;|&quot;|&amp;/g,(match)=>{
        switch(match){
            case '&lt;':
                return '<'
            case '&gt;' :
                return '>'
            case '&quot;' :
                return '"'
            case '&amp;' :
                return '&'
        }
    })
}


//暴露出去
module.exports = {
    dateFormat,
    htmlEscape,
    htmlUnEscape
}

7.将不同的功能进行模块化拆分

① 将格式化时间的功能，拆分到src->dateFormat.js中

② 将处理HTML字符串的功能，拆分到src->htmlEscape.js 中

③ 在index.js中，导入两个模块，得到需要向外共享的方法

④ 在index.js 中，使用module.exports 把对应的方法共享出去

展开运算符（…）将这个对象的所有属性展开

8.编写包的说明文档

包根目录中的 README.md 文件，是包的使用说明文档。通过它，我们可以事先把包的使用说明，以markdown的格式写出来，方便用户参考。

README 文件中具体写什么内容，没有强制性的要求；只要能够清晰地把包的作用、用法、注意事项等描述清楚即可。我们所创建的这个包的 README.md 文档中，会包含以下6项内容：

安装方式、导入方式、格式化时间、转义HTML中的特殊字符、还原HTML中的特殊字符、开源协议

## 安装

```
npm install exo

```

## 导入

```js
const exo = require('exo')

```

## 格式化时间

```js
//调用 dateFormat 方法对事件进行格式化
const daStr = exo.dateFormate(new Date())
console.log(daStr)

```

## 转义HTML特殊字符

```js
const htmlStr = '<h1 title = "aaa">这是h1标签<span>123&nbs;</span></h1>'
const str = exo.htmlEscape(htmlStr)
console.log(str)

```
## 还原HTML特殊字符
```js
const str2 = exo.htmlUnEscape(str)
console.log(str2)

```

## 开源协议
ISC