大前端基础 1

发表于 2023-07-15 更新于 2024-03-24 分类于 AdvancedWeb 本文字数： 1.8k 阅读时长 ≈ 6 分钟

在大前端之前，而又在前端基础之后，这有一个过渡的阶段，就是前端进阶。这就要求我们掌握更多的知识与技术。本文主要介绍大前端的基础知识，包括：Node.js、ES6的部分内容。

准备工作

所谓大前端，就是前端开发人员需要掌握的技术范围更广了。在学习了 HTML、CSS、JavaScript 之后，还需要学习一些其他的技术，比如：Node.js、Vue.js、React.js、TypeScript、Webpack、Git 等。而这些技术都是在前端开发的基础上进行的，所以说，大前端的基础就是前端开发。

在大前端之前，而又在前端基础之后，这有一个过渡的阶段，就是前端进阶。这就要求我们掌握更多的知识与技术。

VSCode
WebStorm
Node.js
Git
Chromium
Firefox

Node.js

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。
Node.js

Httpserver

Node.js 有一个内置的 http 模块，可以用来创建一个 http 服务器。这个模块属于 Node.js 的核心模块，不需要使用 npm 安装。

编写 httpserver.js 文件

// 在 Node.js 中导入 http 模块
// 使用 require 关键字
const http = require('http');

// 1. 创建一个 http 服务器
http.createServer((request, response) => {
    // 2. 处理请求和响应
    // 设置响应头
    response.writeHead(200, {
        'Content-Type': 'text/plain'
    });
    // 设置响应体
    response.write('Hello World!');
    // 结束响应
    response.end();
}).listen(8080, () => {
    // 3. 启动服务器
    console.log('服务器启动成功');
    console.log('服务器地址：http://localhost:8080');
});

运行 node httpserver.js 启动服务器，访问 http://localhost:8080 即可看到 Hello World。

1	node httpserver.js

操作 MySQL 数据库

Node.js 操作 MySQL 数据库需要使用到 mysql 模块。这个模块属于第三方模块，需要使用 npm 安装。

1	npm install mysql

这样安装的 mysql 模块是安装在当前项目中的，如果想要在全局使用，需要使用 -g 参数。

1	npm install mysql -g

通常，全局安装更多的是一些工具，比如：webpack、vue-cli 等。

编写 mysql.js 文件

// 导入 mysql 模块
const mysql = require('mysql');

// 配置数据库连接信息
mysql.createConnection({
    host:"127.0.0.1",
    port:3306,
    user:"root",
    password:"123456",
    datebase:"test"
});

// 连接数据库
connection.connect();
// CURD
connection.query('SELECT * FROM `user`', (error, results, fields) => {
    if (error) throw error;
    console.log('The solution is: ', results);
});
// 关闭数据库连接
connection.end();

js 不仅是一门前端语言，也是一门后端语言。所以说 js 是一门全栈语言。

学习 ES6 上

ES6 是 ECMAScript 的第六个版本，也是 JavaScript 的第六个版本，它在 2015 年 6 月发布。ES6 是一个大版本，它引入了很多新的语法特性，比如：let、const、箭头函数、模板字符串、解构赋值、Promise 等。

let 和 const

早期的 JavaScript 只有两种声明变量的方式：var 和 function。var 声明的变量是全局变量，而 function 声明的变量是局部变量。这样就会导致变量的作用域不明确，var 声明的变量可能会被覆盖，function 声明的变量可能会被提升。

旧的声明变量的方式：

// var 声明的变量是全局变量
var a = 1;
function fn() {
    // function 声明的变量是局部变量
    var a = 2;
    console.log(a); // 2
}
// 定义变量是 var，而常量也是 var
var PI = 3.14;

而 ES6 引入了两种新的声明变量的方式：let 和 const。

let 声明的变量是局部变量，
const 声明的变量是常量。

新的声明变量的方式：

// let 声明的变量是局部变量
let a = 1;
function fn() {
    let a = 2;
    console.log(a); // 2
}
// const 声明的变量是常量
const PI = 3.14;

新定义方式的特点

请看代码：

点击查看代码

// 1. let 声明的变量不能重复声明
let a = 1;
let a = 2; // Uncaught SyntaxError: Identifier 'a' has already been declared

// 2. const 声明的变量不能重复声明
const PI = 3.14;
const PI = 3.1415926; // Uncaught SyntaxError: Identifier 'PI' has already been declared

// 3. let 声明的变量不能提升
console.log(a); // Uncaught ReferenceError: Cannot access 'a' before initialization
let a = 1;

// 4. const 声明的变量不能提升
console.log(PI); // Uncaught ReferenceError: Cannot access 'PI' before initialization
const PI = 3.14;

// 5. let 声明的变量不能重复赋值
let a = 1;
a = 2;

// 6. const 声明的变量不能重复赋值
const PI = 3.14;
PI = 3.1415926; // Uncaught TypeError: Assignment to constant variable.

// 7. const 声明的变量必须初始化
const PI; // Uncaught SyntaxError: Missing initializer in const declaration

// 对比 var 声明的变量
for (var i = 0; i < 10; i++) {
    setTimeout(() => {
        console.log(i);
    }, 1000);
}
console.log(i); // 10
这样的结果是因为 var 声明的变量是全局变量，所以在循环结束之后，i 的值就变成了 10。
// 称为变量穿透

var PI2 = 3.14;
PI2 = 3.1415926;
console.log(PI2); // 3.1415926
// 这样的结果是因为 var 声明的变量可以重复赋值，所以 PI2 的值就变成了 3.1415926。

在实际开发和生产环境中，比如：Vue.js、React.js、Node.js，uni-app、小程序等，都是使用 let 和 const 来声明变量和常量的。

但是如果是在老的浏览器中，比如：IE 11，就不支持 let 和 const，这时候就需要使用 babel 来将 ES6 的代码转换成 ES5 的代码。

在 web 开发中，还是大量使用 ES5 的代码，此时还是建议使用 var 来声明变量。

模板字符串

模板字符串是 ES6 中新增的一种字符串的表示方式，它使用反引号（`）来代替单引号（'）和双引号（"）。

例子

const person = {
    name: '张三',
    age: 18
};
// 旧的字符串拼接方式
let str = '我叫' + person.name + '，今年' + person.age + '岁了。';
console.log(str); // 我叫张三，今年18岁了。
// 新的字符串拼接方式
let str2 = `我叫${person.name}，今年${person.age}岁了。`;
console.log(str2); // 我叫张三，今年18岁了。

总之，模板字符串就是一种更加方便的字符串拼接方式。

默认参数

默认参数是 ES6 中新增的一种函数的参数的默认值的表示方式。

例子

// 旧的函数参数默认值的表示方式
function fn(a, b) {
    // 如果 b 为 undefined，就将 b 的值设置为 0
    b = b === undefined ? 0 : b;
    console.log(a + b);
}
fn(1); // 1
fn(1, 2); // 3
// 新的函数参数默认值的表示方式
function fn2(a, b = 0) {
    console.log(a + b);
}
fn2(1); // 1
fn2(1, 2); // 3

箭头函数

箭头函数是 ES6 中新增的一种函数的定义方式，它使用箭头（=>）来代替 function 关键字。

例子

// 旧的函数定义方式
function fn(a, b) {
    return a + b;
}
// 新的函数定义方式
const fn2 = (a, b) => {
    return a + b;
};
// 如果函数体中只有一行代码，可以省略 return 关键字
const fn3 = (a, b) => a + b;

// 使用
var arr = [1, 2, 3, 4, 5];
var newArr = arr.map(function (item) {
    return item * 2;
});
console.log(newArr); // [2, 4, 6, 8, 10]
// 使用箭头函数
var newArr2 = arr.map(item => item * 2);
console.log(newArr2); // [2, 4, 6, 8, 10]

从上面的例子可知看到，箭头函数的语法更加简洁使用箭头函数的规律：

去掉 function 关键字
在参数列表和函数体之间添加箭头（=>）
如果函数体中只有一行代码，可以省略 return 关键字
如果参数列表中只有一个参数，可以省略参数列表的小括号

但是它也有一些缺点，比如：箭头函数没有自己的 this，它的 this 是继承父级作用域的 this。