1.什么是第三方模块?
写好的、具有特定功能的、我们能直接使用的模块即第三方模块,由于第三方模块通常都是由多个文件组成并且被放置在一个文件夹中,所以又名包。
1.1 第三方模块有两种存在形式:
以js文件的形式存在,提供实现项目具体功能的API接口。
以命令行工具形式存在,辅助项目开发。
2.获取第三方模块
www.npmjs.com:第三方模块的存储和分发仓库。
npm (node package manager): node的第三方模块管理 工具
2.1 下载: npm install + 模块名称(可以简写为 npm i + 模块名)
执行以上命令后,会在当前命令行所在的目录下多一个node_moduls文件夹,下载好的第三方模块就存放在这个文件夹下面。
2.2 卸载: npm unintall + 模块名称
2.3 使用npm命令行下载第三方模块
只要安装了node,就可以使用npm。
3.npm的作用:
1.允许用户从npm服务器下载别人写好的第三方模块到本地使用。
2.允许用户从npm服务器下载别人写好的命令行程序到本地使用。
3.允许用户上传自己写好的第三方模块和命令行程序到npm服务器上。
4.第三方模块nodemon
nodemon是一个命令行工具, 用以辅助项目开发。 在Node.js中,每次修改文件都要在命令行中重新执行该文件,非常繁琐。而安装nodemon过后每次修改文件都会自动重新执行该文件,不需要再手动执行。
使用步骤:
1. 使用npm install nodemon -g下载它 -g代表全局安装
2.在命令行工具中用nodemon命令替代node命令执行文件
4.1全局安装与本地安装
命令行工具:全局安装
安装完成后,在命令行中任意目录都可以使用。
全局安装: 在安装模块时,在后面添加 -g
npm i 模块名 -g
命令行工具安装在全局,以便随时随地调用。
库文件:本地安装
把模块和命令行按照到当前文件夹下,只能在当前目录下使用。
第三方包/模块 是安装在本地的
5.第三方模块nrm下载地址切换工具
nrm( npm registry manager): npm下载地址切换工具 npm默认的下载地址在国外,国内下载速度慢
使用步骤:
使用npm install nrm -g下载它
查询可用下载地址列表nrm ls
切换npm下载地址 nrm use 下载地址名称
6.下载nrm第三方模块时会出现以下错误
错误情况:
执行命令npm install nrm -g下载完nrm模块后查询下载地址列表会报错,无法加载文件,因为在此系统上禁止运行脚本。
1.解决方法:
window+r 输入powershell命令行窗口
执行:set-ExecutionPolicy RemoteSigned
按提示输入 Y 回车就可以了。
7.cli.js错误解决方法:
1.根据错误提示,找到cli.js,一般是
C:\Users\Administrator\AppData\Roaming\npm\node_modules\nrm\cli.js
2.将第17行的数据修改为以下代码:
const NRMRC = path.join(process.env[(process.platform == 'win32') ? 'USERPROFILE' : 'HOME'], '.nrmrc');
案例!!
// 引入http模块,用来搭建服务器
const http = require("http");
http.createServer(function (req, res) {
res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader("content-type", "text/html;charset=utf8");
res.end("45678");
}).listen(3000);
console.log("服务器成功启动");
2.node_modules的问题?
如果我们在项目中下载了很多第三方模块,那么别人拷贝你的项目时就会特别的慢。
2.1 package.json
每个项目的根目录下,一般都会有一个package.json文件,定义了这个项目需要哪些模块,以及该项目 的配置信息(项目名,作者,版本,许可证等)
2.2 创建package.json文件
npm init 需要填写配置信息。如果不想填写,直接一路回车。
npm init -y 快速生成
2.3 package-lock.json 用于锁定版本,防止多人开发时,使用不同的第三方包的版本。
2.4 package.json重要字段
dependencies 生产环境依赖模块
devDependencies 开发环境依赖模块
scripts:脚本
2.5 一些第三方类库只需要在开发时使用,不需要在生产环境上部署,则可以将它安装在开发环境依赖模块下。
npm install 模块名 -D 开发环境
npm install 模块名 -S 生成环境
2.6 脚本样式!
{
"name": "demo", //项目名称
"version": "1.0.0", //项目版本
"description": "", //简介
"main": "index.js", //入口文件
//脚本
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "", //作者
"license": "ISC" //开源许可证
}
{
"name": "03package",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"jquery": "^3.6.0"
},
"devDependencies": {
"bootstrap": "^5.0.1"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
3.yarn也是一个包资源管理器,与npm的功能是一样的。 不过yarn的下载速度更快。
目标:干掉npm。
3.1 下载使用:
用npm去下载
npm i yarn -g
3.2 初始化项目:创建package.json
yarn init
yarn init -y 快速生成
3.3 安装单个依赖
yarn add 模块名
3.4 安装项目中所有的依赖
yarn install
3.5 卸载依赖
yarn remove 模块名
3.6 package.json文件样式!!
{
"name": "04yarn",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"nodemon": "^2.0.7"
}
}
4.script 脚本设置
4.1 script 脚本设置:
"scripts": {
"key":"value"}
key 启动的命令名
value 指定的命令
运行:
npm run key
4.2 package-lock.json的样式
{
"name": "05demo",
"version": "1.0.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"jquery": {
"version": "3.6.0",
"resolved": "https://registry.npm.taobao.org/jquery/download/jquery-3.6.0.tgz?cache=0&sync_timestamp=1614705838607&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjquery%2Fdownload%2Fjquery-3.6.0.tgz",
"integrity": "sha1-xyoJ8Vwb3OFC9J2/EXC9+K2sJHA="
}
}
}
4.3 package.json文件样式!!
{
"name": "05demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start":"node index.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"jquery": "^3.6.0"
}
}
5.模块加载机制
5.1 模块加载机制
1.模块名有路径,并且有后缀
通过路径,引入相关的模块。
2.当模块有路径,但是没有后缀的时候
2.1 会先找路径下同名的js文件。
2.2 再找路径下同名的文件夹,找文件夹下的index.js
2.3 如果文件夹下有package.json 会找文件中的main字段 入口文件。
2.4 如果找不到,就报错。
3.模块没有路径也没有后缀。
3.1 node会判断它是否为内置模块,是内置就加载
3.2 不为内置,则去第三方模块中查找,去node_modules中查找。
实例!!
let dataList = [
{
"bookName": "夜的命名术",
"NO": "1",
"author": "会说话的肘子",
"classify": "都市",
"intro": " 蓝与紫的霓虹中,浓密的钢铁苍穹下,数据洪流的前端,是科技革命之后的世界,也是现实与虚幻的分界。钢铁与身体,过去与未来。这里,表世界与里世界并存,面前的一切,像是时间之墙近在眼前。黑",
"update": "最新更新 159、苍穹为被,席地而眠(为蓝天白云爱睡觉白银盟加更)",
"updateDate": "2021-06-01 14:40",
"imgSrc": "https://bookcover.yuewen.com/qdbimg/349573/1021617576/150"
}
];
module.exports = {
dataList
}
6. 同步与异步
6.1 同步与异步:
同步:一次执行一个任务,该任务执行完成后,再执行下一个任务。
异步:一次可以执行多个任务,当前的任务不会阻塞下一个任务的执行。
在js中,异步任务(API)会在所有的同步任务完成后才会执行。
6.2 异步函数的返回值问题
同步函数中可以获取返回值。
let i = 1;
let i2 = 2;
setTimeout(function() {
console.log(i);
},0);
console.log(i2);
function fn(){
return "123"
}
console.log(fn());
function fnSync(){
setTimeout(function(){
console.log("456");
return "456";
},0)
}
log是一个同步代码,执行fnSync函数时,遇到setTimeout时,setTimeout不会立即执行, fnSync就没有返回值,默认返回undefined。所以,打印的结果是undefined,打印完成后,js中的所有同步代码都执行完了,才会执行setTimeout函数。
console.log(fnSync());
6.3 利用callback函数(回调函数)来获取异步函数的返回值。
回调函数:将函数作为参数传入执行的函数中,在合适的时候调用。 (执行完)回(来)调(用)
//getMsg的定义
function getMsg(callbank){
setTimeout(function(){
callbank("hello world")//调用
let str = "hello world";
},1000)
}
1.先执行15行的代码
2.进入getMsg函数中
3.执行setTimeout定时器
4.等待1秒后
5.执行12行的代码进行调用。
6.callback就是我们在第15行传入的匿名函数。
getMsg((data)=>{
// 在这里对函数的结果进行处理
console.log(data);
});