admin管理员组文章数量:1655688
课程介绍
- HTML + CSS (做网页)
- JS基础 (JS基础语法、变量、数据类型、函数、流程控制、运算符…)
- WebAPIs(使得JavaScript有能力操作页面元素)
- JS高级(了解原型、各种内置方法、箭头函数、解构赋值…)
- Ajax(能够发送请求,和服务器有交互、Promise异步处理、事件循环)
- Git(难学,首次使用终端窗口,代码版本记录、多人协作工具)
- 数据可视化(对Ajax知识的综合应用,echarts图表,增强编程能力)
- 项目前置课(查漏补缺的课,散乱的知识点比较多,对项目做准备)
- 第1天:初识Node(了解Node是什么?能够干什么?简单的用一下;)
- 第2天:包管理器(npm 、yarn)
- 第3天:ES6模块化、webpack
终端软件
介绍
可以执行命令的窗口,叫做终端软件
作为程序员,开发时,都会大量使用命令(计算机系统相关命令,Git相关命令、Node命令等等)
所以,就必须了解终端软件的使用。而且,系统不同,终端软件也不同
已经用过的终端软件
安装Git之后,鼠标右键,打开 “Git Bash Here”,打开的这个黑窗口就是一个终端软件。
在里面可以执行Git命令,(建议大家在这个窗口中,只写Git命令)
系统内置终端软件
- Windows
- cmd
- 在文件夹地址栏的位置,输入cmd,回车即可打开
- powershell
- 在文件夹空白处,按住Shift,鼠标右键,选择“在此处打开powershell窗口”
- cmd
- Mac
- 终端(建议安装 超级右键Lite)+ oh my zsh(终端美化工具)
- 也可以选择安装 hyper 或者 iterm2 这样的终端软件。
这些终端软件中,也可以执行我们学习过的Git命令。
vscode中的终端(可选)
vscode中的终端,使用的也是系统内置的终端。没什么新鲜的,只不过把界面集成到了vscode中而已。
- 点击vscode菜单栏(最上面一栏)中的“终端”,即可新建一个终端窗口。(不建议)
- 或者在侧边栏的文件上,鼠标右键,新建终端(建议)
- 或者按快捷键
Ctrl + ~
打开关闭终端(建议)
喜欢就用,不喜欢就算了。
cd命令
作为前端开发者,最常用的系统命令就是 cd
命令
- c 是 change 的意思,切换的意思
- d 是 directory 的意思,目录的意思
所以 cd
命令的作用是切换终端中的路径
cd /
切换到根目录cd ..
切换到上层目录 (重点)cd xxx
切换到 xxx 目录 (重点)
终端使用技巧
- 按 ↑ 找到曾经执行过的命令。按 ↓ 相反。
- 按 ESC 清除当前一行
- 按 tab 键,可以自动补全命令。
- clear命令用于清屏。(cmd中使用cls命令清屏)
回看浏览器中的JS
浏览器中的JavaScript的组成部分
为什么JavaScript 可以在浏览器中被执行
浏览器内核
- 浏览器内核 包括 CSS解析引擎,包括 JS解析引擎
- 目前,JS解析引擎基本上从内核中独立出来了
- 所以,平时所说的浏览器内核一般和CSS有关系
- 浏览器内置js解析引擎
不同的浏览器使用不同的 JavaScript 解析引擎:
- Chrome 浏览器 => V8
- Firefox 浏览器=> OdinMonkey(奥丁猴)
- Safri 浏览器=> JSCore
- IE 浏览器=> Chakra(查克拉)
- etc…
其中,Chrome 浏览器的 V8 解析引擎性能最好!
浏览器中的 JavaScript 运行环境
运行环境
指的是代码正常运行所需的必要条件。- V8 引擎负责解析和执行 JavaScript 代码。
- 内置 API 是由运行环境提供的特殊接口,只能在所属的运行环境中被调用。
目前为止,浏览器是我们已知的唯一一个JS的运行环境。
思考:假设有一个软件,它的运行环境中,有API方法提供,也包括 JS 解析引擎,是否也可以执行JS代码呢?
Node.js简介
什么是 Node.js
Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine.Node.js
是
一个基于 Chrome V8 引擎的 JavaScript
运行环境
。
通俗的理解:Node.js 为 JavaScript 代码的正常运行,提供的必要的环境。
Node.js 的官网地址: https://nodejs/zh-cn/
Node.js中的JavaScript运行环境
注意:
- 浏览器是 JavaScript 的
前端
运行环境。(浏览器是客户端安装的软件) - Node.js 是 JavaScript 的
后端
运行环境。(正常情况下,Nodejs要安装到服务器上) - Node.js 中无法调用 DOM 和 BOM 等 浏览器内置 API。
总结起来:
- Node是JS的另一个运行环境。
- 在Node环境中,可以运行ECMAScript语法,但不能运行 WebAPI的语法。
Node.js可以做什么
Node.js 是一门后端语言,它的出现,使得JavaScript有了做后端开发的能力。
Node.js 作为一个 JavaScript 的运行环境,仅仅提供了基础的功能和 API。
然而,基于 Node.js 提供的这些基础功能,很多强大 的工具和框架如雨后春笋,层出不穷
所以学会了 Node.js ,可以让前端程序员胜任更多的工作和岗位!
具体来说:
- 基于 Express/Koa 框架(http://www.expressjs/),可以快速构建 Web 应用
- 基于 Electron 框架(https://electronjs/),可以构建跨平台的桌面应用(vscode就是用node开发的)
- 基于 restify 框架(http://restify/),可以快速构建 API 接口项目
- 读写和操作数据库、创建实用的命令行工具辅助前端开发
- etc…
总之,Node.js 是大前端时代的“大宝剑”,有了 Node.js 这个超级 buff 的加持,前端程序员的行业竞争力会越来越强!
Node.js环境安装
下载安装
如果希望通过 Node.js 来运行 Javascript 代码,则必须在计算机上安装 Node.js 环境才行。
安装包可以从 Node.js 的官网首页直接下载,进入到 Node.js 的官网首页,点 击绿色的按钮,下载所需的版本后,双击直接安装即可。
进入官网(中文),可以看到如下两个版本:
- LTS 为长期稳定版,对于追求稳定性的企业级项目来说,推荐安装 LTS 版本。
- Current 为新特性尝鲜版,对于热衷于尝试新特性的用户来说,推荐安装 Current 版本的 Node.js。但是,Current 版本 中可能存在隐藏的 Bug 或安全性漏洞,因此不推荐在企业级项目中使用 Current 版本的 Node.js。
建议使用 长期支持版
查看已安装的Node.js的版本号
打开终端(黑窗口,或者蓝窗口),在终端输入命令 node –v
后,按下回车键,即可查看已安装的 Node.js 的版本号。
如果你能够看到版本号,说明你已经安装成功了。
Node环境中运行JS代码
终端窗口运行(了解)
此种方式,类似于浏览器调试工具的“Console”面板,只适合运行少量的测试代码,所以了解即可。
操作步骤:
- 打开任意终端,直接输入 node 命令并回车
- 执行你的JS代码,按回车表示执行
- 按两次“Ctrl+C”退出。
使用node命令执行JS文件(掌握)
此种方式,比较常用。可以运行写到 “xx.js
” 里面的JS代码,可以运行JS文件中的代码。
操作步骤:
- 打开终端
- 注意终端的路径,注意在此路径中,是否能找到你的js文件。
- 输入 “
node 要执行的js文件
”回车表示运行 - 执行文件的时候,需要保证
node xxx.js
这种格式 - node只能运行JS代码(也就是不要 node xxx.html)
可能的问题:
- 如果终端中出现
>
,按两次“Ctrl+C”退出 - 不能使用node运行html、css等等代码,因为node只是JS的运行环境。
- 不能在node环境中运行WebAPI的代码,比如 document,因为 document是浏览器环境的API。
- JS文件名,不能叫做
node.js
,特殊记忆。
模块化介绍
什么是模块化
模块化,就是把一个大的文件拆分成若干小文件,而且还能把小文件通过特定的语法组合到一起的实现过程。
比如手机、电脑…等等几乎所有,都是模块化的设计,拿电脑来说,可以把电脑拆分成显示器、键盘、硬盘、内存等一个一个的小模块,当然也能够组装到一起。
优点
模块化的优势:
- 更利于维护(比如电脑屏幕坏了,只换屏幕就可以了;比如想升级显卡,只换显卡就行了);
- 更好的复用性(比如有一块移动硬盘或U盘,大家都能用)
Node中,规定每个JS文件都是一个小模块。一个项目由许许多多的小模块(JS文件)组合而成。
Node中模块化的优势:
- 更利于维护(比如,项目需要对登录模块升级,则不会影响其他模块)
- 更好的复用性(比如有一个公共的函数,封装起来。其他所有JS文件都能使用这个函数)
自定义模块
我们创建的每个JS文件都是一个自定义模块,并且具有模块作用域,也就是在一个模块中创建的变量、常量、函数等等一切,都只能在当前模块中使用。
- 共享(导出/暴露)内容给其他模块用,需要使用
module.exports
导出内容。 - 其他模块,如果需要使用上述模块导出的内容,可以使用
require()
加载
示例:
functions.js – 导出内容
// 这是我的函数库
function aa() {
console.log(111)
}
function bb() {
console.log(222)
}
// aa、bb,默认只能在functions.js中使用
// aa、bb,属于当前这个模块
// 如果想把aa、bb给其他模块使用,则需要先”分享”
// 【分享】,也叫做【导出】、或者【暴露】
// 语法:module.exports = 导出的内容
// module.exports = {} // 每个模块,默认导出空对象
module.exports = { aa, bb }
index.js – 导入内容
// 怎么在这里调用 functions.js 中的函数???
// 想使用其他js文件中的函数,需要导入
// 导入的语法,也是一行代码
// 导入的语法:1. 必须带路径,即使是 ./ 也不能省略; 2. 可以省略后缀
let obj = require('./functions')
// console.log(obj)
obj.aa()
obj.bb()
一个模块导出什么,另一个模块加载后,就会得到什么。
就比如,我给你三个苹果,你只能得到三个苹果,不可能得到其他的。
内置模块
内置模块是Node.js 平台自带的一套基本的 API(功能模块)。也叫做核心模块。
下面介绍几个内置模块。
注意,加载内置模块,不能写路径,这是和加载自定义模块不一样的。
path模块
path
是 Node 本身提供的 API,专门用来处理路径。- http://nodejs/api/path.html
- 使用
- 加载模块
// 使用核心模块之前,首先加载核心模块
let path = require('path');
// 或者
const path = require('path');
- 调用path模块中的方法,来处理相应的问题,下面列举path模块中的几个方法
| 方法 | 作用 |
| — | — |
| path.basename(path[, ext]) | 返回 path 的最后一部分(文件名) |
| path.dirname(path) | 返回目录名 |
| path.extname(path) | 返回路径中文件的扩展名(包含.) |
| path.format(pathObject) | 将一个对象格式化为一个路径字符串 |
| path.join([…paths]) | 拼接路径 |
| path.parse(path) | 把路径字符串解析成对象的格式 |
| path.resolve([…paths]) | 基于当前工作目录拼接路径 |
// 我现在要使用官方提供的 path 模块
// 用法一:先加载模块,得到对象; 然后再 ”对象.方法()”
// let path = require('path') // 导入内置模块,直接写模块名
// // console.log(path) // { resolve: ..., join: ...., basename: ...., extname: ....., ..... }
// console.log(path.join('a', 'b', 'c', 'index.js')) // a/b/c/index.js
// 用法二:先加载模块,得到对象; 直接把需要的方法解构出来;最后直接使用方法即可
let { join } = require('path')
// node官方提供的join方法,作用是拼接几部分路径
// console.log(join('a', 'b', 'c')) // a/b/c
// console.log(join('a', 'b', '../c', 'index.js')) // a/c/index.js
// console.log(__dirname) // node中的一个全局变量,表示当前js文件的绝对路径(不包括文件名部分)
// 拼接一下,得到db.js的绝对路径
console.log(join(__dirname, 'index.js'))
// D:/147-148-金燕龙/项目前置课-01/课堂代码/index.js
这里有用的代码,就一行:join(__dirname, 'xxx')
fs模块
- fs,即 file system,文件系统,该模块可以实现对 文件、文件夹的操作
- http://nodejs/api/fs.html
- 使用
- 加载模块
// 引入模块,引入模块的时候,可以使用var、let,但是建议使用const,因为我们不希望它改变
const fs = require('fs');
- 调用fs模块的方法,下面列举fs模块中的常用方法
| API | 作用 | 备注 |
| — | — | — |
| fs.access(path, callback) | 判断路径是否存在 | |
| fs.appendFile(file, data, callback) | 向文件中追加内容 | |
| fs.copyFile(src, callback) | 复制文件 | |
| fs.mkdir(path, callback) | 创建目录 | |
| fs.readDir(path, callback) | 读取目录列表 | |
| fs.rename(oldPath, newPath, callback) | 重命名文件/目录 | |
| fs.rmdir(path, callback) | 删除目录 | 只能删除空目录 |
| fs.stat(path, callback) | 获取文件/目录信息 | |
| fs.unlink(path, callback) | 删除文件 | |
| fs.watch(filename[, options][, listener]) | 监视文件/目录 | |
| fs.watchFile(filename[, options], listener) | 监视文件 | |
| … 一大堆 | | |
// fs -- file system 文件系统
// fs 模块处理的问题,都和文件、文件夹相关
// 比如:获取某个文件里面的内容
// 比如:把一些内容放到某个文件中
// 比如:创建文件
// 比如:创建文件夹
// 比如:读取文件夹里面的全部文件
// 比如:删除文件、文件夹
// 比如:监视文件的变化
// .......
// 我们学习两个方法:
// 1. readFile() ---- 异步读取文件(获取文件里面的内容)
// 2. writeFile() --- 异步写入文件(把内容添加到文件里面)
// 首先,加载fs模块,并把我们需要的 两个方法解构出来
let { readFile, writeFile } = require('fs')
// ------------------------------ readFile -----------------------------
// 作用:读取文件(获取文件里面的内容)
// 语法:
/**
* readFile('文件路径', '可选的utf-8', (err, data) => {
* err表示错误信息(如果读取发生了错误【err=错误对象】;如果没有错误【err=null】)
* data表示读取的结果
* })
*/
// readFile('05.txt', 'utf-8', (err, data) => {
// // throw专门用于抛出错误,可以理解为输出错误;遇到throw语句还会终止代码的执行,有return的特点
// if (err) throw err
// console.log(data)
// })
// --------------------------- writeFile ------------------------------
// 作用:写入文件(向文件中,添加内容)
// 语法:
/**
* writeFile('文件', '字符串内容', err => {
* 有错误发生【err=错误对象】; 没有错误【err=null】
* })
*/
// 特点:
// 1. 如果文件不存在,会自动创建文件(但是不会递归创建)
// 2. 如果文件存在,并且里面有内容;写入的新内容会把原来的内容覆盖
writeFile('06.txt', '1234567890', err => {
if (err) throw err
console.log('写入成功')
})
第三方模块
非node自带的模块。也不是自定义的模块。
是别人写的模块,然后发布到npm网站,我们可以使用npm工具来下载安装别人写的模块。
第三方模块,都是在node核心模块的基础之上,封装了一下,实现了很多非常方便快速简洁的方法。
目前,npm网站收录了超过 195 万个第三方模块。
如果你想实现一个功能。那么请搜索第三方模块,没有做不到的事情,只有你搜不到。
不用担心学不完的问题,常用的包不超过100个。
npm介绍
npm(node package manage)node 包 管理器。管理node包的工具。
包是什么?包就是模块。(包约等于模块,一个包可以包括一个或多个模块)
- 包可以理解为模块
- 管理node包的工具,就是 管理模块的工具。所以npm是管理模块的工具
- 内置、自定义模块无需管理,这里的模块指的是第三方模块
- 结论:npm 是 管理(下载、卸载、发布…)第三方模块的工具
npm这个工具,在安装 node 的时候,就已经安装到你的计算机中了。
命令行中执行: npm -v
,如果看到版本号,说明安装成功了。
npm初始化
安装本地模块,需要使用npm工具初始化。
npm init -y
# 或
npm init
# 然后一路回车
初始化之后,会在项目目录中生成 package.json 的文件,这个文件会自动记录下载了哪些第三方模块。
注意事项:
- package name 默认使用当前文件夹 当做 包的名字
- package name 不能有中文
- package name 不能有特殊符号
- package name 不能和需要安装的第三方模块同名
总结:
- **代码文件夹没有中文、没有特殊符号,那么 **
**npm init -y**
- 代码文件夹有中文或特殊符号,那么
**npm init**
,回车后,修改 package name,然后再一路回车
安装卸载第三方模块的命令
初始化之后,就可以在当前文件夹中安装第三方模块了
建议在安装第三方模块之前,先执行如下命令。
下面的命令只需要执行一次即可(不管以后重启vscode还是重启电脑,都不需要执行第二次)
此命令会将下载地址修改为国内下载,加载下载速度
npm config set registry https://registry.npm.taobao
下载安装第三方模块
# 正常的下载安装
npm install 模块名
# 简写install为i
npm i 模块名
# 一次性安装多个模块
npm i 模块名 模块名 模块名
卸载模块
npm uninstall 模块名
npm un 模块名
npm un 模块名 模块名 模块名
上课可以用这些包来练习: jquery、dayjs、echarts、axios、form-value
关于本地模块的说明
- 下载安装的模块,存放在当前文件夹的
node_modules
文件夹中 - 同时还会生成一个记录下载的文件
package-lock.json
(不重要、知道有它即可) - 并且,我们**下载的包名、版本会记录到 **
**package.json**
中 - 下载的模块,在哪里可以使用
- 在当前文件夹
- 在当前文件夹的子文件夹
- 在当前文件夹的子文件夹的子文件夹
- …
- 翻过来讲,当查找一个模块的时候,会在当前文件夹的 node_modules 文件夹查找,如果找不到,则去上层文件夹的node_modules文件夹中查找,…依次类推。
重要:代码文件夹不能有中文;代码文件夹不能和模块名同名。
总结:
- **下载的包有哪些,可以查看 package.json **
- 下载的包,只能在当前代码文件夹,及其后代文件夹中使用
怎样使用第三方模块
- 和使用内置模块一样,需要使用
require
加载模块 - 调用模块提供的方法完成工作
- 不用担心不会用,好的第三方模块都会用使用文档或者官方网站的。
- 有些模块没有官网,去 github 查找模块的使用文档,或者百度。
演示 dayjs 模块 的使用
- dayjs 和 moment 都是时间日期处理模块,功能相似
- dayjs 体积更小
https://dayjs.fenxianglu/
// dayjs 是一个专门处理时间日期的模块
// 使用模块之前,必须加载
const dayjs = require('dayjs');
// 将当前时间,转成 “年-月-日 时:分:秒” 的格式
dayjs().format("YYYY-MM-DD HH:mm:ss")
// 将一个其他时间格式,转成 “年-月-日 时:分:秒” 的格式
dayjs(1318781876406).format('YYYY-MM-DD HH:mm:ss'); // 2011-10-17 00:17:56
总结:
- npm init (如果已经初始化过,则不需要重复初始化)
- npm i dayjs (安装模块)
- 代码中导入模块
const dayjs = require('dayjs')
- 使用
console.log(dayjs().format('YYYY-MM-DD HH:mm:ss'))
总结模块的分类
- 自定义模块
- NodeJS中,创建的JS文件都是自定义模块。(也就是处处皆模块)
- 需要自己通过
module.exports = 内容
导出 - 需要自己通过
let 变量 = require('**./**文件名')
导入 (注意路径不能丢)
- 内置模块(核心模块)
- 安装Node之后,自带了很多内置模块。我们可以直接加载使用他们 。
- 官方已经导出,我们只需要导入即可:
let 变量 = require('**模块名**')
(直接写模块名)
- 第三方模块
- 其他人编写的模块,发布到 npm 网站 上,我们可以下载使用。
- 别人已经导出,我们只需要导入即可:
let 变量 = require('**模块名**')
(直接写模块名)
本文标签: node
版权声明:本文标题:初识Node和模块化 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dongtai/1729706715a1210811.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论