自定义模块化的简单说明+npm工具的使用以及作用

377 阅读4分钟

自定义模块

概念:

什么是模块化?

其实和框架差不多,都是对代码进行封装,然后再进行调用。

每个js文件都可以看作是一个模块,并且通过固定的方式向外暴露指定的内容,每个模块再通过固定的方式引入。

自定义模块就是自己写一个js文件,把需要进行模块化的内容使用module.exports代码进行模块化导出;这样我们就可以到另一个js文件里通过代码require导入此模块化内容再进行使用。

模块化的作用:

1、能够对一类功能做很好的分类管理;

2、能够保护成员不被污染;

3、不用考虑导入顺序;

4、按需导入,可以随时更换模块,维护方便。

特点:

require之后返回的对象用一变量接收,那么此变量只能在此js文件中使用,也就是局部变量。

语法:

module.exports={xx : xxx}----把自己写的js内容模块化导出,xx为属性名或方法名,xxx为属性值或方法。

其它模块化写法:image-20220510131646414

require("文件地址")-----在js文件里导入另一js模块化文件,整体返回对象,也只能对对象进行操作。

用法:

image-20220510120141222

自定义模块化的重点:

module.exports代码是实现模块化的重点。

注意点:

image-20220510120219131

npm

概念:

npm是node的包管理工具;

npm这个工具在安装node时,就会自动安装上---在小黑窗口输入命令:npm -v检查是否安装。

作用:

解决了第三方包共享的问题,最主要功能是下包;也就是npm包管理工具,可以帮助我们去npm网站上下载,上传第三方包

引入第三方包:

下载国外包:

1、在小黑窗口输入命令:npm init---用来初始化文件夹的;

image-20220510132618169

2、给初始化的包起名---需要使用英文;

3、之后一直回车,最后在vsc根目录里面生成一个package.json文件;

package.json文件里包含一下内容:

image-20220510132535656

4、在再小黑窗口输入命令下载express包:npm install express,最后也在vsc根目录下生成一个node_modules文件和package-lock.json文件即表示下载成功。注意:express为第三方包,可以更改。

node_modules文件夹:

image-20220510132906472

5、之后再按原来require声明一个express对象就可使用。

----快捷下包的方式:npm i express直接不用初始化,直接下载express包。

下载中文包:

我们只需要把文件下载地址指向国内的包地址,例如下面的taobao,就可以下载到中文包了。 然后其他步骤还是和上面的一样。

image-20220510114831782

0步骤:主要改文件下载地址,设置一次就行,属于电脑设置。

拓展:

image-20220510133006493

express包的简单应用

创建一个简单服务器

// 声明express模块
const express = require('express')

//创建服务器
const server = express()

//配置服务器
//################业务代码 开始####################

//配置服务器请求方式和url参数,并接收请求数据并配置响应的数据
server.get('/a', (req, res) => {
    // 请求成功输出
    console.log('请求成功')
    //响应数据
    res.send('我是用express创建的get请求')
})

//配置服务器请求方式和url参数,并接收请求数据并配置响应的数据
server.post('/b', (req, res) => {
    console.log('请求成功')
    res.send('我是用express创建的post请求')
})

//################业务代码 结束####################

//监听server服务器状态,以及设置服务器端口。
server.listen(8005, () => {
    console.log('服务器开启成功')
})

注意:

想要获取请求体数据需要在服务器创建之后主动设置以下代码,不开启功能req.body的值就为undefined;

server.use(express.urlencoded())

补充

toString、join、JSON.stringify比较

toString()只会把对象转成[obj,obj]字符串,丢失了对象存储的数据。他会把数组转成字符串,并且去除了中括号。

join()也会把对象转成[obj,obj]字符串,丢失了对象存储的数据。他会把数组转成字符串,并且去除了中括号。不过,比toString好的地方是,它可以把数组里的逗号用任意字符替换。

JSON.stringify(数据),会把数据原样转成字符串。

image-20220510085914070

image-20220511014248948

image-20220510085608030