回顾:
javascript 可以在浏览器运行 (js代码会JavaScript的解析引擎执行)
chrome ==》V8 (性能最好)
FireFox ==》 奥丁猴
safri ==》JSCore
IE浏览器 ==》查克拉
JavaScript可以在浏览器端操作DOM 和BOM
每一个浏览器都内置了BOM,DOM这样的API函数,所以浏览器中的js才可以调用他们
浏览器中JavaScript的运行环境
V8引擎负责解析和执行js代码
内置API是由运行环境提供的特殊接口,只能在所属的运行环境中调用
总结:浏览器是JavaScript的前端运行环境
JavaScript语法 +浏览器内置的API (DOM+BOM)+ jquery第三方库
node.js:
node是让JavaScript运行在服务端上的环境
Node.js是JavaScript的后端运行环境
Node.js中无法调用BOM,DOM等浏览器内置的API
Node.js它内置的API : fs,path,http...
http://nodejs.cn/api/
Node.js® 是一个基于 Chrome V8 引擎 的 JavaScript 运行时环境。
下载node:
下一步下一步安装就可以
检测是否安装成功:
windows+R 打开运行 --- 输入cmd ---打开命令窗口
node -v
v16.15.0
npm -v
# 8.5.5 (安装node的同时 也安装了npm)
出现版本号,说明安装成功
如何学习node:
javascript基础语法 +Node.js内置API(fs,path,http) +第三方模块(express)
在node环境中运行js代码:
-
新建目录mycode,目录下新建01test.js文件
let name = '张三' console.log(name) var arr = [11, 22, 33, 44, 55] arr.forEach((item) => { console.log(item) })
-
node环境下运行js代码(第一种)
- 打开js文件所在目录
- 在目录地址栏上输入cmd ,回车(确保命令窗口的地址是js文件的目录地址)
- 输入命令 node 01test.js (输入文件名按tab)
-
node环境下运行js代码(第二种)
- 打开js文件所在目录
- 按住shift+右击 在此处打开powershell窗口
- 输入命令 node 01test.js (输入文件名按tab)
-
node环境下运行js代码(第三种)
- 在vscode中 点击文件右击 打开集成终端
- 输入命令 node 01test.js (输入文件名按tab)
终端快捷键:
上键 快速定位到上一次执行命令
tab 快速补全
esc 清空当前输入命令
cls 清空终端
Node三大模块:
内置模块:
安装了node就会有,(Node官方提供 fs,http,path...)
fs:
/**
*fs文件系统模块 fs模块是NodeJS官方提供,用来操作文件的模块,它提供了一些列的方法和属性,满足用户对文件的需求
* */
// 2引入fs模块 来操作文件
var fs = require('fs')
/*
fs.readFile(path[,options],callback)
path 读取文件路径
options 读取文件时采用的编码方式 utf-8
callback 回调函数,可以拿到读取失败和成功的结果 err data
*/
fs.readFile('./aa.txt', 'utf8', function (err, data) {
// console.log(err) //null 读取成功-null 读取失败 err值为错误对象
// console.log(data) //读取失败 值为undefined
if (err) {
return console.log('读取文件失败')
}
console.log(data)
})
// 写入文件
/*
fs.writeFile(file, data[, options], callback)#
file 文件路径
data要写入文件的数据
options 写入文件时采用的编码方式 utf-8
callback 回调函数 err写入成功和失败的信息
*/
let content = '<h3>正在使用fs.writeFile写入文件内容</h3>'
fs.writeFile('./index.html', content, function (err) {
// console.log(err)
if (err) {
return console.log('文件写入失败')
}
console.log('文件写入成功')
})
path:
系统内置的路径模块,用于处理文件和目录的路径
/*
系统内置的路径模块,用于处理文件和目录的路径
*/
const path = require('path')
// path.join() 方法使用平台特定的分隔符把全部给定的 path 片段连接到一起
console.log(path.join('/foo', 'bar', 'baz/asdf', 'quux', '..'))
console.log(__dirname) //当前文件目录名 绝对路径 //C:\丁鹿课堂\17期\08node\day01-node\mycode
console.log(__filename) //C:\丁鹿课堂\17期\08node\day01-node\mycode\03path.js
http:
Node.js提供了http模块,http模块主要用于搭建HTTP服务端,调用HTTP模块
const http = require('http')
const fs = require('fs')
const url = require('url')
/*
url.parse() 方法会解析一个 URL 字符串并返回一个 URL 对象。
*/
// 创建服务
http
.createServer(function (request, response) {
// console.log(123)
// 解析请求 包含文件名
// console.log(request.url)
var pathname = url.parse(request.url).pathname
// console.log(pathname.substr(1))
fs.readFile(pathname.substr(1), function (err, data) {
if (err) {
console.log(err)
response.writeHead(404, { 'Content-Type': 'text/html' })
} else {
response.writeHead(200, { 'Content-Type': 'text/html' })
// 响应文件内容
response.write(data.toString())
}
// 发送响应数据
response.end()
})
})
.listen(8080)
console.log('server running at http://127.0.0.1:8080')
自定义模块:
自定义模块就是自己定义的模块
注意:
自定义模块中定义的方法,变量只能在当前的模块中使用
加载模块:require() 可以引入需要的内置模块,用户自定义模块,第三方模块
向外共享:每个js自定义模块中都有一个module对象,它里面存储了和当前模块有关的信息
定义模块aa.js:
const arr = [11, 22, 33]
// 向外暴露
module.exports.arr = arr
定义模块bb.js:
const arr = [
{ name: '张三', age: 12 },
{ name: '李四', age: 22 },
{ name: '王五', age: 33 },
]
module.exports.arr = arr
index.js中使用两个模块:
const arr1 = require('./aa.js')
const arr2 = require('./bb.js')
console.log(arr1)
console.log(arr2)
其他:
let a = 10
const fn = function () {
console.log(123)
}
console.log(exports === module.exports) //true
// exports.a = a
// exports = {
// a: a,
// }
// module.exports.fn = fn
exports.a = a
module.exports = {
fn: fn,
}
/*
module.exports单词写起来比较复杂,为了简化向外共享成员的代码,node提供了exports对象
exports和module.exports指向的是同一个对象
exports和module.exports指向不同的对象,以module.exports为准
*/
第三方模块:
Node中的第三方模块(别人写好的模块) 又叫做包
包的来源:
不同于Node.JS的内置模块和自定义模块,包是由第三方个人和团队开发出来的,免费使用
为什么要使用包:
NodeJS提供的api开发效率低
基于内置模块封装出来,提供了更高级,更方便的API,极大的提高了工作效率
下载包:
国外的一家IT公司,叫做npm 这家公司的著名的网址https://www.npmjs.com/是全球最大的包共享平台
https://www.npmjs.com/ 网站上搜索自己所需要的包
https://registry.npmjs.org/ 服务器上下载自己需要的包
如何下载:
npm包管理工具
这个包管理工具随着node的安装一起被安装到了用户的电脑上
在终端输入 npm -v 查看自己电脑上安装的npm包管理工具的版本号
项目中如何下载包:
npm install 包的完整名称
简写
npm i 包的完整名称
初次安装包完成,项目文件下多了一个叫做node_modules文件夹 和package-lock.json和package.json
node_modules 存放所有已安装到项目中的包 require导入第三方模块包,就是从node_modules目录中查找并加载包
package-lock.json 配置文件用来记录node_modules目录下每一个包的下载信息,包的名字,版本号,下载地址,不需要手动修改文件, npm包管理工具会自动维护它
包管理配置文件:
npm规定,在项目目录中,必须提供一个叫做package.json的包管理配置文件,用来记录与项目有关的一些配置
-
项目名称,版本号,描述
-
项目中都用到了那些包
-
那些包只在开发期间调用
-
那些包在开发和部署时都需要用到
npm init -y
//该命令只能在英文的目录下成功运行dependencies 专门用来记录你使用npm install 命令安装了那些包
一次性安装所有的包:
npm i
或者
npm install
npm uninstall 包文件名 删除包s
yarn:
全局安装yarn:
npm i yarn -g
使用:
yarn init
yarn ad 包文件名
yarn remove 包文件名
yarn
or
yarn install 根据package.json文件为项目安装所有依赖
安装指定版本的模块:
yarn add 包名@3.0.1
npm i 包名@3.0.1
如何记录项目中安装了那些包:
dependencies:
package.json中有一个dependencies 节点,专门用来记录你使用npm install 命令安装了那些包
devdependencies:
有些包只在项目开发阶段会使用,在项目上线之后不会用到,建议把这些包记录到devdependencies 中(less)
有些包在项目开发阶段和项目上线之后都会用到建议把这些包记录到dependencies
//记录到devdependencies节点中
npm i 包名 -D
完整写法
npm i 包名 --save-dev
包的分类:
npm包管理工具下载的包,分为两大类:
-
项目包
哪些被安装到项目的node_modules目录中的包,都是项目包
- 开发依赖包(记录到devdependencies节点中的包,只在开发阶段会用到)
- 核心依赖包记录到dependencies节点中的包,在开发阶段和项目上线之后都会用到)
-
全局包
指向npm i 命令提供了 -g 参数,安装的就是全局包
全局包被安装在C:\Users\54004\AppData\Roaming\npm\node_modules只有工具性质的包,才有全局安装的必要性
模块化:
什么是模块化:
模块化是指解决一个复杂的问题时,自顶向下逐层把系统划分为若干模块的过程
编程领域的模块化:
(一个js文件就是一个模块)
遵守固定的原则 ,把一个大文件拆成独立的多个模块
- 提高了代码的复用性
- 提高了代码的可维护性
- 可以实现按需加载
模块化的规范:
模块化的规范就是对代码进行模块化的拆分和组合时,需要遵守的规则
- 如何引入模块
- 在模块中使用什么样的语法向外暴露成员
NodeJS中的模块化规范:
Node.js遵循了CommonJS模块化规范,Commonjs规定了模块的特性和各模块之间如何相互依赖
CommonJS规定:
- 每个模块内容,module变量代表当前模块
- module变量是一个对象,它的exports属性(module.exports)是对外的接口
- 加载某个模块,其实就是加载模块的module.exports属性,require方法用于加载模块
ES6模块:
前端模块化分类:
es6模块化诞生之前,js社区尝试提出了AMD,CMD,Commonjs模块化规范
AMD,CMD适用于浏览器端的JavaScript模块化规范
Commonjs适用于服务器端的JavaScript模块化
Es6既适用于浏览器端也适用于服务器端
ES6模块化规范定义:
- 每个js文件都是一个独立的模块
- 导入其它模块成员使用 import
- 向外共享模块成员 适用 export
默认导出:
export default 默认导出的成员
注意:每个模块中,只允许使用唯一的一次export defaut ,否则会报错
var a = 10
function show() {}
const arr = [11, 22, 33]
export default {
a,
show,
}
默认导入:
默认导入的时候接收名称可以是任意名称,只要是合法的成员名称就可以
// 导入export default 向外共享的成员
import aa from './01test.js'
console.log(aa) //{ a: 10, show: [Function: show] }
按需导入:
import aa, { s as ss, say, s1 } from './03test.js'
console.log(ss, say, s1)
console.log(aa)
按需导出:
var a = 12
function show() {}
const arr = [11, 22, 333]
// 按需导出
export let s = 'aaa'
export function say() {}
export let s1 = true
export default {
a,
show,
arr,
}
按需导入和按需导出的注意事项:
- 每个模块中可以使用多次按需导出
- 按需导入的成员必须和按需导出的名称保持一致
- 按需导入时,可以使用as进行重命名
- 按需导入可以和默认导入一起使用
直接导入并 执行模块中的代码:
如果只想单纯的指向某个模块中的代码,并不需要得到模块中向外共享的成员
for (let i = 0; i < 3; i++) {
console.log(i)
}
import './06test.js'
test.js'
console.log(ss, say, s1)
console.log(aa)
#### 按需导出:
var a = 12
function show() {}
const arr = [11, 22, 333]
// 按需导出
export let s = 'aaa'
export function say() {}
export let s1 = true
export default {
a,
show,
arr,
}
#### 按需导入和按需导出的注意事项:
- 每个模块中可以使用多次按需导出
- 按需导入的成员必须和按需导出的名称保持一致
- 按需导入时,可以使用as进行重命名
- 按需导入可以和默认导入一起使用
#### 直接导入并 执行模块中的代码:
> 如果只想单纯的指向某个模块中的代码,并不需要得到模块中向外共享的成员
for (let i = 0; i < 3; i++) {
console.log(i)
}
import './06test.js'