文章目录
1. 模块化的基本概念
1.1 什么是模块化
1.2 模块化规范
2. Node.js中模块化
2.1 Node.js中模块的分类
2.2 加载模块
加载用户的自定义模块时,需要给一个路径才行
2.3 Node.js中的模块作用域
解读:
在html文件中引入reg.js文件和login.js文件,他们都声明了username,但是最后console.log打印的值是ls,因为js当时的username是全局变量,login.js文件的username起到覆盖效果,所以最后username=ls
但是:
当有模块作用域以后,可保证变量只在自己所属的js文件里被访问到,不会造成变量污染。
演示如下:
打印custom只打印了一个空对象
证明了默认情况下,node里是有模块作用域的,在模块内定义的成员无法被外界访问。
2.4 向外共享模块作用域中的成员
演示:
演示:
必须使用module.exports才能将age共享出去,否则log打印(m),是不会有age属性的
注意:为了防止混乱,建议不要在同一个模块中同时使用 exports 和 module.exports
(四个案例的)解析:
2.5 Node.js中的模块化规范
3. npm与包
3.1 包
https://www.npmjs.com/ ——link
3.2 npm初体验
npm包管理工具
演示:(
传统做法还是比较麻烦的
)
官网链接(查询使用文档):link
演示(以使用moment包完成时间的格式化为例):
- 在官网搜索栏搜索“moment”
- 了解使用信息
- 安装moment包
- 根据文档记载的使用方法进行使用
演示:
注意:
程序员不要手动修改 node_modules 或 package-lock.json 文件中的任何代码, npm包管理工具会自动维护它们。
3.3 包管理配置文件
以后进行团队协作,上传文件到Github时,在package.json配置文件中记录使用的包,同时剔除node_modules目录。
在开始一个项目的时候,最先应该做的就是执行命令创建 package.json文件,并且npm init -y
这个命令只需要执行一次
npm i
:执行时会读取package.json中的 dependencies 节点,读取里面记录的包的名称和版本号后,一次性安装所有的依赖包
并且将这些依赖包放进一个新生成的node_modules文件夹。
npm i 包名 -D
演示:
不知道要把包记录到哪个节点时,可以查阅对应包的官方文档,在里面有记录这些关键信息
如下图所示的这个包,根据安装指令来看,就是需要把它放到 devDependencies 节点中
3.4 解决下包速度慢的问题
演示:
3.5 包的分类
演示:
首先切换到md文件所在的文件夹,然后执行指令进行转换
转换成功后,指令生效所在文件件产生一个preview文件夹来存放转换的html文件
3.6 规范的包结构
3.7 开发属于自己的包
这里的itheima-tools我们命名为
rookie-tools
作为包的根目录
注意:
包的名称具有唯一性,不能重复。
name: 包的名称
version: 版本号
main: 指明包的入口文件
description: 包的简短描述信息
keywords: 搜索关键词
license: 包所遵循的开源许可协议(ISC为默认的许可协议)
提示: replace里面的/<|>|"|&/g
中的 |
表示或
,g
表示全局匹配,/ /
起包裹作用,match就是我们匹配成功的那个字符,匹配成功后会替换对应的那个字符。
演示:
// 这是包的入口文件 index.js
// 格式化时间的方法
function dateFormat(dateStr) {
const dt = new Date(dateStr)
const y = padZero(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
}
// 定义转义 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 = {
dateFormat,
// 向外面暴露转义 HTML 的方法
htmlEscape,
// 向外面暴露还原 HTML 的方法
htmlUnEscape
}
// 这是测试文件 test.js
// 外界通过require方法导入文件夹时,会根据main属性导入js文件
const rookie = require('./rookie-tools/index')
// 格式化时间的功能
const dtStr = rookie.dateFormat(new Date())
console.log(dtStr)
const htmlstr = '<h1 title="abc">这是一个h1标签<span>123 </span></h1>'
const str = rookie.htmlEscape(htmlstr)
console.log(str)
const str2 = rookie.htmlUnEscape(str)
console.log(str2)
演示:
(将不同的功能进行模块化拆分)
演示:
3.8 发布包
包名不能雷同
,意为我们发布的包不能和别人已经发布的包重名。保险起见,发布前最好去npm官方首页搜索查重一下。
演示:
- 发布包
OTP(one-time password):一次性密码,在手机APP的Authenticator中可查看
启用2FA参考官方说明:link
2.点击头像—Packages查看已发布的包
演示:
现在我们已经把包rookie-tools删除了,想再次发布这个包需要等24h之后
。