前端进阶学习笔记

1 Node.js简介

1.1 什么是 Node.js

Node.js 是一个开源和跨平台的 JavaScript 运行时环境。它几乎是任何类型项目的流行工具
Node.js 在浏览器之外运行 V8 JavaScript 引擎（Google Chrome 的内核）,这使得 Node.js 的性能非常好
Node.js 可以让 JavaScript 运行在服务端的开发平台，让 JavaScript 成为与PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言
Node.js 对一些特殊用例进行优化，提供替代的 API，使得 V8 在非浏览器环境下运行得更好
基于 Chrome JavaScript 运行时建立的平台，用于方便地搭建响应速度快、易于扩展的网络应用

1.2 下载和安装

去官网下载 | Node.js 中文网之后，无脑下一步安装即可
在 cmd 中输入 node -v ，显示版本号，则说明安装成功

2 Node.js 基本操作

2.1 Node 实现请求响应

/*
导入模块使用 require，类似于 Java 的 import
1：创建一个 httpserver 服务
2：监听一个端口 8888
3：启动运行服务：node
4：访问 http://localhost:8888
*/

const http = require('http');

http.createServer(function(request, response){
    response.writeHead(200, {'Content-type':'text/plain'});
    response.end("Hello Server!!!");
}).listen(8888);

他就类似于 Servlet，启动浏览器，访问 http://localhost:8888 ，成功输出信息

2.2 Node 操作 Mysql

Node.js 官方的模块里，并没有提供 Mysql 相关的，所以要去安装第三方依赖支持

使用命令 npm install mysql 安装第三方依赖，如下表示安装成功

const mysql = require('mysql');

let conn = mysql.createConnection({
    host: "127.0.0.1",
    port: 3306,
    user: "xxxx",
    password: "xxxx",
    database: "xxxx"
});

conn.connect();
conn.query("select * from user", function (error, results, fields) {
    if (error) throw error;
    console.log("results ==> ", results);
});
conn.end();

3 ES6 基础语法

3.1 什么是 ES6

ECMAScript 6（简称ES6）是于 2015 年 6 月正式发布的 JavaScript 语言的标准
它的目标是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言

3.2 let 和 const

在 ES6 之前，所有的变量、常量均使用一个关键字 var 定义

var name = "荒天帝";
var address = "https://www.xxxxxx.com";
var PI = Math.PI;

从 ES6 开始，所有的变量均使用 let 关键字，所有的常量均使用 const 关键字

let name = "荒天帝";
let address = "https://www.xxxxxx.com";
c PI = Math.PI;

为什么从 var 修改为 let、const?

以前使用 var 会造成变量穿透的问题，而使用 let 则不会有这个问题

for (var i = 0; i < 3; i++){
    console.log(i);	// 0 1 2
}
console.log(i);		//3


for (let i = 0; i < 3; i++){
    console.log(i);	// 0 1 2
}
console.log(i);		//error

以前使用 var 定义的常量可以修改，而使用 const 则不能修改

var PI = Math.PI;
console.log(PI);	//3.1415926
PI = 100;		
console.log(PI);	//100


const PI = Math.PI;
console.log(PI);	//3.1415926
PI = 100;			//error

3.3 模板字符串

模板字符串，类似于 Java 中的 EL 表达式，整个字符串使用 `` 包围，然后使用 ${} 进行取值

let student = {
  name: '荒天帝',
  age: '18',
  sex: '男'
};

let info = `${student.name}是一位${student.age}岁的${student.sex}孩`;
console.log(info);		//荒天帝是一位18岁的男孩

3.4 箭头函数

省略掉 function
括号后面加箭头
如果函数体的逻辑代码只有一个 return,那么就可以直接省略，否则不行
如果参数只有一个，那么括号也可以省去

//初始写法
let sum1 = function (a, b) {
    return a + b;
}

//省略掉 function，括号后面加箭头
let sum2 = (a, b) => {
    return a + b;
}

//如果函数体的逻辑代码只有一个 return,那么就可以直接省略，否则不行
let sum3 = (a, b) => a + b;

//如果参数只有一个，那么括号也可以省去
let sum4 = obj => obj * 2;


console.log(sum1(1, 2));		// 3
console.log(sum2(1, 2));		// 3
console.log(sum3(1, 2));		// 3
console.log(sum4(3));			// 6

3.5 对象初始化简写

因为对象的定义方式是 key:value，所以有以下简写：

如果 key 与变量的名字一致，那么可以只定义一次
如果 value 是一个函数=，那么可以省略 :function ，只剩下括号即可

let name = "荒天帝";
let address = "https://www.xxxx.com";
let user = {
    name: name,
    address: address,
    walk: function(){
        console.log("正在走路...");
    }
};

//对象简写
let user = {
    name,
    address,
    walk(){
        console.log("正在走路...");
    }
};

3.6 对象解构

let user = {
    name: name,
    address: address,
    walk: function(){
        console.log("正在走路...");
    }
};


//调用方式一：通过 .
let name = user.name;
let address = user.address;
user.walk();

//调用方式二：通过 []
let name = user["name"];
let address = user["address"];
user["walk"]();

//调用方式三：对象快速解构
let {name, address, walk} = user;
console.log(name, address);
walk();

3.7 对象传播操作符

对象传播操作符：将一个对象中的属性传播到另外一个对象中
当使用对象解构，将一个对象解构出来后，没有解构的部分就是另外一个新对象的属性

let user = {
    name: '荒天帝',
    age: 18,
    sex: '男',
    phone: "15641654",
    go(){
        console.log("走路...");
    }
};

let {name, sex, ...user2} = user;
console.log(name);		//荒天帝
console.log(sex);		//男
console.log(user2);		//{ age: 18, phone: '15641654', go: [Function: go] }

3.8 数组的 map 方法

将一个数组中的元素全部乘以二

let arr = [1,2,3,4,5];

//传统方式
let res1 = [];
for (let i = 0; i < arr.length; i++) {
    res1.push(arr[i] * 2);
}
console.log(res1);			//[ 2, 4, 6, 8, 10 ]

//使用 map：自带循环，并且会把结果值回填回到对应位置
let res2 = arr.map(ele => ele * 2);
console.log(res2);			//[ 2, 4, 6, 8, 10 ]

将数组中全部学生的年龄加一，并且增加一个都为男性的属性

let arr = [
    {age: 10, name: '荒天帝'},
    {age: 45, name: '叶凡'},
    {age: 24, name: '凌风'}
];

let res = arr.map(user => {
    user.age += 1;
    user.sex = '男';
    return user;
});
console.log(res);
/*
[
  { age: 11, name: '荒天帝', sex: '男' },
  { age: 46, name: '叶凡', sex: '男' },
  { age: 25, name: '凌风', sex: '男' }
]
*/

3.9 数组的 reduce 方法

计算一个数组中所有数的结果

let arr = [1,2,3,4,5,6,7];

/*
* a = 1, b = 2 ===> 3
* a = 3, b = 3 ===> 6
* a = 6, b = 4 ===> 10
* a 和 b 不断替换位置，直到算出所有结果...
* */
let res = arr.reduce((a, b) => a + b);
console.log(res);			// 28

4 NPM 包管理器

4.1 什么是 NPM

[NPM](npm (npmjs.com)) 全称为 Node Package Manager，是 Node.js 的包管理器(类似于 Python 的 pip、Java 的 Maven)
它是全球最大的模块生态系统，所有的模块都是免费开源的

4.2 快速构建 npm 工程

在命令终端，输入 npm init，然后根据自己的需要，输入项目相关的信息，最后输入 yes，回车，就会创建一个 npm 工程

创建的工程中，会有一个 package.json 文件（类似于 Maven 的 pom.xml 文件），里面就是刚才输入的相关信息

{
  "name": "npm-test",		//工程名
  "version": "1.0.0",		//版本号
  "description": "这是一个npm测试工程",		//描述信息
  "main": "index.js",		//入口 Js
  "scripts": {		//运行脚本
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],		//关键词
  "author": "悟道九霄",		//作者
  "license": "ISC"		//授权协议
}

4.3 管理和安装模块

注意：

如果使用系统终端运行 npm install -g XXX 被拒绝而报错，是因为权限不够导致

系统的 cmd 终端使用管理员身份运行！

WebStorm 一类的编译器的 Terminal 终端使用该命令时，需要将整个 WebStorm 编译器以管理员身份启动运行！

怎么安装第三方模块

下载到本项目：npm install xxxx
下载到 node.js 安装目录：npm install xxxx -g

模块下载很慢怎么办

方式一：
    设置全局淘宝下载镜像：npm config set registry https://registry.npmmirror.com
	下载模块依旧使用 npm install xxxx
方式二：
    下载淘宝的 cnpm 工具：npm install -g cnpm --registry=https://registry.npmmirror.com
    以后用 cnpm 代替 npm 进行模块的下载：cnpm install xxxx

安装的模块在什么地方

若使用 npm install xxxx 命令，默认会将模块下载到本项目的 node_modules 文件夹中，只在本项目中可以使用
若使用 npm install xxxx -g	命令，就会下载到 node.js 安装目录下的 node_modules 文件夹中，在在任意位置的命令行可使用

怎么导入模块

let xxxx = require("xxxxx");

如何运行

终端使用命令：node xxx.js

模块和 package.json 有何关系

我们在控制台随便按安装一个模块，发现 package.json 中也添加了对应的模块信息

{
  "name": "npm-test",
  "version": "1.0.0",
  "description": "这是一个npm测试工程",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "悟道九霄",
  "license": "ISC",
  "dependencies": {
    "mysql": "^2.18.1",
    "vue": "^3.2.33"
  }
}

在一个项目中，我们要使用很多模块，比如 mysql、vue、redis...

假如在另外一个项目中，我们也要使用这些模块，难道重新去下载一次吗？这显然不现实，那怎么才可以实现复模块用呢？

只需要将原来项目的 package.json 文件粘贴复制到新的项目中，然后在终端使用命令 npm install ，npm 就会自动下载 package.json 中所有的第三方模块

一次性安装多个模块

npm install xxx1 xxx2 xxx3 xxx4 ...

指定版本号下载

npm install xxxx@版本号
比如要下载 3.0.2 的 redis 就要执行：npm install redis@3.0.2
如果不指定版本号，默认下载最新版

卸载第三方模块

npm uninstall xxxx

5 Babel

5.1 什么是 Bebal

Babel 是编写下一代 JavaScript 的编译器
Babel 默认使用一组 ES2015 语法转换器，允许你使用新的语法，无需等待浏览器支持
Babel 支持用户插件

5.2 安装 Babel

在终端使用命令一键安装 npm install babel

5.3 使用 Babel

首先，在项目中使用命令安装 babel 模块
项目根目录新建一个测试文件 test.js ，在里面使用 ES6 语法写测试代码

let name = "Jack";
const address = "Shanghai";
let arr = [1,2,3,4,5,6];
let res = arr.map(lel => lel * 2);
console.log("name => " + name + "\naddress => " + address + "\nres => " + res);

然后再项目根目录下新建一个 babel 配置文件 .babelrc

{
  "presets": ["es2015"],
  "plugins": []
}

然后在终端输入下方命令

npm install --save-dev babel-cli

//命令意思为：将 test.js 文件转化为 es5 语法之后，保存在 ./dist 目录下
npx babel test.js --out-dir dist

打开转换后的文件，发现已经转换为 es5 语法

6 模块化开发

ES6 之前，JavaScript 一直没有模块（module）体系，无法把大文件有组织地划分成小块，并管理之间地依赖
久而久之，用 Javascript 写的代码越来越庞大，而网页也越来越像桌面 APP
如此庞杂的代码，如果不进行模块化，就可能引发命名冲突，造成不易复用、维护性高

6.1 CommonJS 规范

CommonJS 核心思想就是：一个文件对应一个模块

在 test01.js 中写入四则运算的简单方法，然后使用 CommonJS 规范进行导出（这个导出的规范就相当于 Java 中的工具类）

let add = (a, b) => a + b;
let sub = (a, b) => a - b;
let mul = (a, b) => a * b;
let div = (a, b) => a / b;

module.exports = {
    add,
    sub,
    mul,
    div
};

然后在另一个文件 test02.js 中进行导入并使用

const info = require('./test01');

console.log(info.add(1, 2));
console.log(info.sub(1, 2));
console.log(info.mul(1, 2));
console.log(info.div(1, 2));

6.2 ES6 模块化规范（主流）

因为 JavaScript 默认使用的 CommonJS 规范（默认不支持 ES6 语法），全局默认使用 require 关键字进行模块化导入

所以，在使用 ES6 规范进行模块化导入的时候，会报一个 SyntaxError: Cannot use import statement outside a module 的错误

此时需要去 package.json 中配置一下类型 "type":"module"

在 test03.js 中写入并导出一个方法

export default {
    getList() {
    console.log("获取数据列表");
    },
    saveList() {
    console.log("保存数据列表");
    }
}

在 test04.js 中导入并使用

import user from "./test03.js";

user.getList();		//获取数据列表
user.saveList();	//保存数据列表

7 Webpack

7.1 什么是 Webpack

webpack 是代码编译工具，有入口、出口、loader 和插件
webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具
它是一个前端资源加载/打包的工具，他会根据各个模块内的依赖关系，将其按照指定的规则生成对应的静态资源，从而减少页面的请求

7.2 Webapck 安装

在终端使用命令 npm install webpack webpack-cli 进行安装
然后使用 webpack -v ，如果有版本号输出，说明安装成功

7.3 合并 js 文件

使用 npm init -y 初始化项目
在项目根目录下新建 src 文件件，在该 src 文件下新建 common.js 、utils.js 、main.js

//utils.js
exports.add = (a, b) => a + b;

//common.js
exports.info = function (str) {
    console.log(str);
    document.write(str);
}

//main.js
const util = require("./utils.js");
const common = require("./common.js");
common.info("结果为 => " + util.add(100, 5));

然后在项目根目录建立配置文件 webpack.config.js

const path = require("path");

module.exports = {
    entry: "/src/main.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js"
    }
}

在命令行执行命令 webpack 进行合并。合并好之后项目根目录会多出一个文件夹 dist，里面的 bundle 就是合并好的文件

7.4 合并 css 文件

webapck 本身只能处理 JS 模块，若要处理其他类型的文件，就需要安装 loader 进行转换

依然使用上边的项目

安装 loader 相关的插件

npm install --save-dev style-loader css-loader

重新配置 webpack.config.js 文件

const path = require("path");

module.exports = {
    entry: "/src/main.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js"
    },
    module: {
        rules: [{
            test: /\.css$/,   //将项目中所有的 css 文件打包
            use: ["style-loader", "css-loader"]
        }]
    }
}

在 dist 目录下新建 index.html，引入 bundle.js 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>

在 src 下新建 style.css

body {
    background: red;
}

然后在 main.js 中引入该样式

const util = require("./utils");
const common = require("./common");
require("./style.css");

common.info("结果为 => " + util.add(100, 5));

然后执行 webpack 命令进行打包
打开 index.html 页面，发现已经成功

posted @ 2022-05-15 13:57 悟道九霄阅读(43) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· JavaWeb学习笔记

· JavaScript学习笔记

· 大前端进阶

· [03] Node.js