目录
1. 模块化的基本概念
1.1 什么是模块化
1. 现实生活中的模块化
2. 编程领域中的模块化
1.2 模块化规范
2. Node.js 中的模块化
2.1 Node.js 中模块的分类
2.2 加载模块
![](https://i-blog.csdnimg.cn/blog_migrate/80f45175a9a1aa14e491e4a99d169d1f.png)
// 注意:在使用 require 加载用户自定义模块期间,
// 可以省略 .js 的后缀名
const m1 = require('./06.m1.js')
console.log(m1)
2.3 Node.js 中的模块作用域
1. 什么是模块作用域
![](https://i-blog.csdnimg.cn/blog_migrate/8c44ec97999c9b2e243d07d256018e8d.png)
2. 模块作用域的好处
代码:
const username = '张三'
function sayHello() {
console.log('大家好,我是' + username)
}
测试代码:
const custom = require('./08.模块作用域')
console.log(custom)
2.4 向外共享模块作用域中的成员
1. module 对象
![](https://i-blog.csdnimg.cn/blog_migrate/6c6a54134d09689d3dbd34147e3abe58.png)
代码:
console.log(module)
运行截图:
2. module.exports 对象
在自定义模块中,可以使用 module.exports 对象,将模块内的成员共享出去,供外界使用。 外界用 require() 方法导入自定义模块时,得到的就是 module.exports 所指向的对象。
3. 共享成员时的注意点
代码:
自定义模块.js
// 在一个自定义模块中,默认情况下, module.exports = {}
const age = 20
// 向 module.exports 对象上挂载 username 属性
module.exports.username = 'zs'
// 向 module.exports 对象上挂载 sayHello 方法
module.exports.sayHello = function() {
console.log('Hello!')
}
module.exports.age = age
// 让 module.exports 指向一个全新的对象
module.exports = {
nickname: '小黑',
sayHi() {
console.log('Hi!')
}
}
text.js
// 在外界使用 require 导入一个自定义模块的时候,得到的成员,
// 就是 那个模块中,通过 module.exports 指向的那个对象
const m = require('./11.自定义模块')
console.log(m)
运行截图:
4. exports 对象
代码:
// console.log(exports)
// console.log(module.exports)
// console.log(exports === module.exports) 返回True则指向同一对象
const username = 'zs'
module.exports.username = username
exports.age = 20
exports.sayHello = function() {
console.log('大家好!')
}
// 最终,向外共享的结果,永远都是 module.exports 所指向的对象
运行截图:
4. exports 和 module.exports 的使用误区
![](https://i-blog.csdnimg.cn/blog_migrate/5581bac07798a3f6689468e0d2366582.png)
注意:为了防止混乱,建议大家不要在同一个模块中同时使用 exports 和 module.exports
2.5 Node.js 中的模块化规范
3. npm与包
3.1 包
1. 什么是包
2. 包的来源
3. 为什么需要包
![](https://i-blog.csdnimg.cn/blog_migrate/ecc6ef3dda49370fbcd1b0344eb2c140.png)
3.2 npm 初体验
1. 格式化时间的传统做法
dateFormat.js
// 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('./15.dateFormat')
// 调用方法,进行时间的格式化
const dt = new Date()
// console.log(dt)
const newDT = TIME.dateFormat(dt)
console.log(newDT)
2. 格式化时间的高级做法
![](https://i-blog.csdnimg.cn/blog_migrate/4ef35b691070164f15461d1ecbf5bd78.png)
3. 在项目中安装包的命令
![](https://i-blog.csdnimg.cn/blog_migrate/83f8a89c6a2008c853d7dd39307f1163.png)
上述的装包命令,可以简写成如下格式:
代码:
// 1. 导入需要的包
// 注意:导入的名称,就是装包时候的名称
const moment = require('moment')
const dt = moment().format('YYYY-MM-DD HH:mm:ss')
console.log(dt)
运行截图:
4. 初次装包后多了哪些文件
{
"name": "code",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"dependencies": {
"moment": "^2.29.4"
}
},
"node_modules/moment": {
"version": "2.29.4",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
"integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
"engines": {
"node": "*"
}
}
}
}
5. 安装指定版本的包
![](https://i-blog.csdnimg.cn/blog_migrate/bedc83d67437256d15043125763a105d.png)
6. 包的语义化版本规范
3.3 包管理配置文件
1. 多人协作的问题
2. 如何记录项目中安装了哪些包
3. 快速创建 package.json
![](https://i-blog.csdnimg.cn/blog_migrate/d90e38fb42d5c7d2dccea4df86ffdc49.png)
终端:
package.json
{
"dependencies": {
"moment": "^2.29.4"
},
"name": "code",
"version": "1.0.0",
"main": "01.创建基本的web服务器.js",
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": ""
}
4. dependencies 节点
![](https://i-blog.csdnimg.cn/blog_migrate/ffc23686e7505990b29f2f4048db96cd.png)
![](https://i-blog.csdnimg.cn/blog_migrate/53e4c9e7fc6b4e60775ae648cf91accd.png)
5. 一次性安装所有的包
![](https://i-blog.csdnimg.cn/blog_migrate/6fe81eb6b4c74d17bd1c9ae11aa3de0d.png)
可以运行 npm install 命令(或 npm i)一次性安装所有的依赖包:
6. 卸载包
![](https://i-blog.csdnimg.cn/blog_migrate/e134b7062c54186cc6e3286b927870ae.png)
注意:npm uninstall 命令执行成功后,会把卸载的包,自动从 package.json 的 dependencies 中移除掉。
7. devDependencies 节点
![](https://i-blog.csdnimg.cn/blog_migrate/2412f2fe3ea3b7d480a0a40a2c768ae0.png)
3.4 解决下包速度慢的问题
1. 为什么下包速度慢
2. 淘宝 NPM 镜像服务器
3. 切换 npm 的下包镜像源
4. nrm
3.5 包的分类
使用 npm 包管理工具下载的包共分为两大类,分别是:
1. 项目包
![](https://i-blog.csdnimg.cn/blog_migrate/003c74e3c03190a61135373bb7af9a08.png)
2. 全局包
3. i5ting_toc
![](https://i-blog.csdnimg.cn/blog_migrate/9ff791dc64ceb7ec704b16adfb7f98f9.png)
转换成页面
3.6 规范的包结构
3.7 开发属于自己的包
1. 需要实现的功能
![](https://i-blog.csdnimg.cn/blog_migrate/a02111e2c8ea6e6cc71b9282f291cf5c.png)
2. 初始化包的基本结构
![](https://i-blog.csdnimg.cn/blog_migrate/3c05e369fd8af52ff5738f1e29e6a1f8.png)
3. 初始化 package.json (包名不可重复)
关于更多 license 许可协议相关的内容,可参考 https://www.jianshu.com/p/86251523e898
package.json
{
"name": "itheima-tools",
"version": "1.1.0",
"main": "index.js",
"description": "提供了格式化时间、HTMLEscape相关的功能",
"keywords": [
"itheima",
"dateFormat",
"escape"
],
"license": "ISC"
}
4. 在 index.js 中定义格式化时间的方法
index.js
// 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
}
test.js
// index可以省略,查找itheima-tools文件夹下的package.json的配置文件中的main属性,导入index.js
const itheima = require('./itheima-tools/index')
//const itheima = require('./itheima-tools')
// 格式化时间的功能
const dtStr = itheima.dateFormat(new Date())
console.log(dtStr)
5. 在 index.js 中定义转义 HTML 的方法
function htmlEscape(htmlstr) {
//正则表达式匹配到 <, >, ", & 四个字符,全局匹配,即匹配目标字符串中所有满足条件的位置。
return htmlstr.replace(/<|>|"|&/g, match => {
switch (match) {
case '<':
return '<'
case '>':
return '>'
case '"':
return '"'
case '&':
return '&'
}
})
}
module.exports = {
htmlEscape
}
test.js
const htmlStr = '<h1 title="abc">这是h1标签<span>123 </span></h1>'
const str = itheima.htmlEscape(htmlStr)
console.log(str)
6. 在 index.js 中定义还原 HTML 的方法
function htmlUnEscape(str) {
return str.replace(/<|>|"|&/g, match => {
switch (match) {
case '<':
return '<'
case '>':
return '>'
case '"':
return '"'
case '&':
return '&'
}
})
}
module.exports = {
htmlUnEscape
}
test.js
const str2 = itheima.htmlUnEscape(str)
console.log(str2)
7. 将不同的功能进行模块化拆分
// 定义格式化时间的函数
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}:${ss}`
}
// 定义一个补零的函数
function padZero(n) {
return n > 9 ? n : '0' + n
}
module.exports = {
dateFormat
}
htmlEscape.js
// 定义转义 HTML 字符的函数
function htmlEscape(htmlstr) {
return htmlstr.replace(/<|>|"|&/g, match => {
switch (match) {
case '<':
return '<'
case '>':
return '>'
case '"':
return '"'
case '&':
return '&'
}
})
}
// 定义还原 HTML 字符串的函数
function htmlUnEscape(str) {
return str.replace(/<|>|"|&/g, match => {
switch (match) {
case '<':
return '<'
case '>':
return '>'
case '"':
return '"'
case '&':
return '&'
}
})
}
module.exports = {
htmlEscape,
htmlUnEscape
}
index.js
// 这是包的入口文件
const date = require('./src/dateFormat')
const escape = require('./src/htmlEscape')
// 向外暴露需要的成员,ES6展开运算符
module.exports = {
...date,
...escape
}
test.js
const itheima = require('./itheima-tools')
// 格式化时间的功能
const dtStr = itheima.dateFormat(new Date())
console.log(dtStr)
console.log('-----------')
const htmlStr = '<h1 title="abc">这是h1标签<span>123 </span></h1>'
const str = itheima.htmlEscape(htmlStr)
console.log(str)
console.log('-----------')
const str2 = itheima.htmlUnEscape(str)
console.log(str2)
运行结果:
8. 编写包的说明文档
## 安装
```
npm install itheima-tools
```
## 导入
```js
const itheima = require('itheima-tools')
```
## 格式化时间
```js
// 调用 dateFormat 对时间进行格式化
const dtStr = itheima.dateFormat(new Date())
// 结果 2020-04-03 17:20:58
console.log(dtStr)
```
## 转义 HTML 中的特殊字符
```js
// 带转换的 HTML 字符串
const htmlStr = '<h1 title="abc">这是h1标签<span>123 </span></h1>'
// 调用 htmlEscape 方法进行转换
const str = itheima.htmlEscape(htmlStr)
// 转换的结果 <h1 title="abc">这是h1标签<span>123&nbsp;</span></h1>
console.log(str)
```
## 还原 HTML 中的特殊字符
```js
// 待还原的 HTML 字符串
const str2 = itheima.htmlUnEscape(str)
// 输出的结果 <h1 title="abc">这是h1标签<span>123 </span></h1>
console.log(str2)
```
## 开源协议
ISC
3.8 发布包
1. 注册 npm 账号
2. 登录 npm 账号
![](https://i-blog.csdnimg.cn/blog_migrate/f285a83ef089e84af84bf4cf8029c4ec.png)
3. 把包发布到 npm 上
![](https://i-blog.csdnimg.cn/blog_migrate/76548628742ec490f49df7a6674fb213.png)
4. 删除已发布的包
![](https://i-blog.csdnimg.cn/blog_migrate/b933b96c8319cfe1f7564f0650b13567.png)