Node.js零基础入门教程(第2章)-模块化

在这里插入图片描述

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包完成时间的格式化为例):

  1. 在官网搜索栏搜索“moment”
    在这里插入图片描述
  2. 了解使用信息
    在这里插入图片描述
  3. 安装moment包
    在这里插入图片描述
  4. 根据文档记载的使用方法进行使用
    在这里插入图片描述

在这里插入图片描述

演示:
在这里插入图片描述

在这里插入图片描述
注意:程序员不要手动修改 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 '&lt;'
            case '>':
                return '&gt;'
            case '"':
                return '&quot;'
            case '&':
                return '&amp;'
        }
    })
}

// 定义还原 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,
    // 向外面暴露转义 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&nbsp;</span></h1>'
const str = rookie.htmlEscape(htmlstr)
console.log(str)

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

在这里插入图片描述

演示:(将不同的功能进行模块化拆分)
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

演示:
在这里插入图片描述

3.8 发布包

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
包名不能雷同,意为我们发布的包不能和别人已经发布的包重名。保险起见,发布前最好去npm官方首页搜索查重一下。

演示:

  1. 发布包
    在这里插入图片描述
    OTP(one-time password):一次性密码,在手机APP的Authenticator中可查看
    启用2FA参考官方说明:link
    2.点击头像—Packages查看已发布的包
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

在这里插入图片描述

演示:
在这里插入图片描述
现在我们已经把包rookie-tools删除了,想再次发布这个包需要等24h之后


4. 模块的加载机制

4.1 优先从缓存中加载

在这里插入图片描述

4.2 内置模块的加载机制

在这里插入图片描述

4.3 自定义模块的加载机制

在这里插入图片描述

4.4 第三方模块的加载机制

在这里插入图片描述

4.5 目录作为模块

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值