大前端进阶

怼烎@ 2021-06-10 20:38 498阅读 0赞

我们知道，前端的基础无非就是：HTML+CSS+JS(jquery)+UI框架+…  
从现在开始，我们要学习进阶的前端技术，内容包括VSCode的使用、Node.js、ES6语法、NPM、Babel、模块化和Webpack。

## VSCode的使用 ##

VSCode是一个前端的代码编辑器，非常受前端开发者的青睐。我们先来学习一下它的安装和使用方法。  
1、从官网上下载VSCode，下载地址： [https://code.visualstudio.com/][https_code.visualstudio.com]

2、启动安装程序，一直点下一步即可，安装完成后会发现是英文界面。  
3、安装中文插件，在如下图所示位置搜索第一个插件即可。  
![搜索安装中文插件][format_png]  
4、安装完插件重启软件界面即可显示中文。  
5、还有以下插件需要进行安装：`ESLint`、`Live Server`、`Node.js Modules Intellisense`、`Vetur`、`VueHelper`  
![要下载的插件][format_png 1]

## Node.js ##

> 什么是Node.js？

Node.js是一个让JavaScript运行在服务端的开发平台，它让JavaScript 成为与Php、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。  
也就是说，以前编写JavaScript代码需要从浏览器执行，它是放在HTML中的。Node.js就是可以在服务器端运行的JavaScript代码，它基于Coogle 的V8引擎，可以脱离浏览器执行JavaScript代码，其性能较好。

> 安装Python

安装Node.js之前我们需要先安装以下Python，建议安装Python2版本的，Python3可能会出现一些兼容性问题，这里安装的是Python2.7版本。安装完成后会自动把Python安装目录栏添加到环境变量中，可以在DOS窗口中输入`python -v`命令查看Python版本，有显示Python安装和版本信息表示安装成功。

> 安装Node.js

进入官网，下载安装包，一直点下一步即可。下载地址：[https://nodejs.org/zh-cn/download/][https_nodejs.org_zh-cn_download]

![下载Node.js][Node.js]  
如下图所示，Node.js自动帮我们配置了环境变量。  
![环境变量][format_png 2]  
安装完毕后，可以输入如下来确认Node.js和npm环境是否安装成功了。

#查看Node.js版本
    node -v

#查看npm版本
    npm -v

简单使用一下npm，例如我们可以输入如下命令来下载插件，以Vue为例。

npm install vue

> 简单使用一下Node.js

在VSCode中，主要可以分为文件列表和代码编辑区两个区域。  
![VSCode界面][VSCode]  
1、点击文件列表区域“代码”右侧第二个图标，创建文件夹`nodejs`。  
2、点击文件列表区域“代码”右侧第一个图标，在nodejs文件夹下创建`01-控制台程序.js文件`。简单编写以下代码：

console.log("hello,node.js")

3、点击文件，右键选择`在终端中打开`，底部弹出终端界面。  
4、在终端中输入如下命令运行js程序。

node js文件名

> Node.js服务器端开发（了解）

1、创建`02-server-app.js`，编写如下代码：

const http = require('http') 
    http.createServer(function (request, response) {
      //设置请求头的内容类型
      response.writeHead(200, { 'Content-Type': 'text/plain' })   
      //输出“hello,node server”
      response.end('hello,node server') 
    }).listen(8080) //监听8080端口
    console.log("Server running at http://localhost:8080")

2、在终端中输入命令`node 02-server-app.js`运行程序，打开浏览器访问http://localhost:8080，在网页中输出了"hello,node server"。

## ES6语法详解 ##

> 什么是ES6？

ES6是ECMAScript6的简称，是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。  
在IDEA中默认配置ECMAScript5版本，我们如果要编写ES6的语法，需要进行配置。  
![IDEA配置支持ES6语法][IDEA_ES6]  
接下来我们通过和ES5语法的对比来学习ES6语法。

> let声明变量

ES5使用var声明变量，ES6使用let声明变量。它们的区别请看如下示例代码。

//var 声明的变量没有作用域
    //let声明的变量有作用域
    // {
    //     var a=1
    //     let b=2
    // }
    // console.log(a)//1
    // console.log(b)//b is not defined
    
    //var可以声明多次
    //let只能声明一次
    // var m=1;
    // var m=2;
    // let n=3;
    // let n=4;// Identifier 'n' has already been declared
    // console.log(m)
    // console.log(n)
    
    //var会提升变量的作用域
    //let不会提升变量的作用域
    console.log(x) //undefined
    var x='apple'
    
    console.log(y) // Cannot access 'y' before initialization
    let y='orange'

总结：

*  var声明的变量没有作用域，let声明的变量有作用域。
 *  var可以声明多次，let只能声明一次。
 *  var会提升变量的作用域，let不会提升变量的作用域。

> 常量

ES5常量并不是真正的常量，只是一种约定，实际上开发人员还是能改变常量的值，ES6常量被声明之后就不允许被改变了，一旦声明就必须初始化，否则会报"Missing initializer in const declaration"错误。示例代码如下：

//一旦声明常量就不能被修改
    const PI ='3.1415926'
    PI = 0 //Assignment to constant variable.
    
    //一旦声明就必须初始化，否则就会报错
    const MY_APP // Missing initializer in const declaration

> 解构赋值

ES5将一个对象的属性赋值给其他变量必须一个一个取，ES6可以直接取出对象中的所有值赋值给其他变量。示例代码如下：

//传统的
    // let a=1,b=2, c=3
    // console.log(a,b,c)
    
    // //es6
    // let [x,y,z]=[1,2,3]
    // console.log(x,y,z)
    
    //对象定义
    let user={name:'wunian',age:10}
    //传统的
    let name1=user.name
    let age1=user.age
    console.log(name1,age1)
    //es6 取出对象中所有的值
    let {name,age}=user //解构的变量名必须和对象属性同名
    console.log(name,age)

> 模板字符串

ES6支持在字符串中引号需要改为\`\`，可以直接在字符串中使用变量，不需要像ES5那样拼接字符串。示例代码如下：

let name='hello'
    let age=3
    //传统的
    let info='name:'+name+" age:"+age//拼接字符串
    
    //字符串引号要改为``
    let infoes6=`name:${name} age:${age}` //模板字符串，真正的前端开发
    
    console.log(info)
    console.log(infoes6)

> 对象声明简写

一个对象中的属性如果和值的参数名相同，可以省略属性，直接传入参数名。示例代码如下：

const age=3
    const name='wunian'
    
    //传统的
    const person1={age:age,name:name}
    console.log(person1)
    
    //es6
    const person2={name,age}
    console.log(person2)

> 定义方法简写

ES5我们在对象中定义方法的格式为：方法名:function()，ES6可以把function省略。示例代码如下：

const p={
        //方法
        sayHi:function(){
            console.log('hello')
        }
    }
    p.sayHi();
    
    //es6
    const p2={
        sayHi(){
            console.log("hello es6")
        }
    }
    p2.sayHi()

> 对象扩展运算符

ES5将一个对象赋值给另一个变量，实际上是引用赋值，引用指向的地址和原对象是相同的，因此现对象的值一旦发生改变，会影响原对象的值，类似于Java中的引用传递。ES6可以实现对象的完全拷贝，一旦拷贝现对象就和原对象没任何关系了，因此它是一种深拷贝。示例代码如下：

let person={name:'wunian',age:20}
    let someoneOld=person //引用赋值
    
    //对象拷贝 ... 深度拷贝
    let someone={...person}
    someoneOld.name='jishiyu'
    someone.name='jishiyu neo'
    
    console.log(person) //jishiyu
    console.log(someoneOld)//'jishiyu'
    console.log(someone) //jishiyu neo

> 函数的默认参数

ES6可以对函数中的形参设置默认值。示例代码如下：

function showInfo(name,age=18){
        console.log(name+','+age)
    }
    
    showInfo('wunian',20) //wunian,20
    showInfo('wunian') //wunian,18
    showInfo('wunian',undefined) //wunian,18
    showInfo('wunian',null)  //wunian,null

> 箭头函数

ES6箭头函数类似于Java中的lambda表达式，是函数的一种简化形式，一般格式为：`参数=>函数体`。示例代码如下：

let arr=['100','534','37','412','3000']
    let arr1=arr.sort();
    console.log(arr1)
    //需要使用排序的函数
    let arr2=arr.sort((a,b) => a-b)
    console.log(arr2)
    // let arr2=arr.sort(function(a,b){
    //     return a-b
    // })
    
    //()=>{}
    var f1=function (a,b){
        let result =a+b
        return result
    }
    
    var f2= (a,b) =>{
        let result =a+b
        return result
    }
    //最终简化版本
    var f3= (a,b) => a+b
    
    console.log(f1(2,3))
    console.log(f2(2,3))
    console.log(f3(2,3))

在许多前端框架的底层代码中，可以看到大量这种ES6语法的代码，尤其是对接后端接口的API。

## NPM包管理 ##

只要安装了Node.js，系统就会自动安装npm环境。

C:\Users\Administrator>npm -v 
    6.13.4

> 什么是npm？

npm的全称是Node Package Manager，是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准。好比Java中的maven，所有东西只要导入依赖即可，npm也是如此，`npm install`命令类似于Linux的yum安装。

> 测试使用

1、创建一个npm目录。  
2、测试初始化项目，理解npm是如何管理前端依赖的。package.json文件和pom文件一样，用来管理我们的项目版本依赖。  
项目初始化：

npm init  #初始化，需要设置一些参数
    npm init -y # 快速初始化，自动设置默认参数，

![package.json][]

> 修改npm镜像

npm默认镜像地址在国外，下载缓慢，我们可以把它修改成淘宝的镜像，那样下载速度会比较快。

#查看npm的配置信息
    npm config list
    #配置所有依赖通过淘宝镜像下载，速度较快
    npm config set registry https://registry.npm.taobao.org/

> 下载依赖包

1、`npm install xxx` 安装指定依赖，默认安装最新版本。  
2、`npm install xxx@x.x.x` 安装指定依赖并指定版本。  
3、package.json管理了所有的依赖版本控制。  
4、`npm install --save-dev(或者 -D) xxx` 安装指定依赖并且只在开发的时候使用。  
![devDependencies][]

5、`npm install -g xxx` 全局环境下安装指定依赖，依赖安装位置一般在`C:\User\Administrator\AppData\Roaming\npm\node_modules`目录下，在VSCode终端中可能会因为权限问题安装失败，可以去DOS窗口下运行该命令进行安装。  
![全局安装][format_png 3]  
![全局安装路径][format_png 4]  
6、更新和卸载指定依赖包：

npm update xxx# 更新包
    npm uninstall xxx# 卸载包

## Babel ##

> 什么是Babel？

很多ES6高级语法浏览器是不支持的，Node.js也不一定能够运行，这时就需要使用转码器了。Babel是一个使用非常广泛的转码器，它可以将ES6语法代码转换为ES5语法代码，实现了语法的自动转换。

> 安装Babel

1、使用npm安装babel-cli工具。

npm install -g babel-cli #安装babel-cli

2、安装完毕后查看babel版本进行测试。

babel --version # 查看babel版本
    6.26.0 (babel-core 6.26.3)

> 测试使用

1、创建babel目录，再在该目录下创建src目录（以后我们的js代码都应该放在src目录下），在src目录下编写js源代码。  
2、编写.babelrc配置文件，注意这里的"es2015"指的就是ES6语法。

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

3、安装babel依赖。

npm install -D babel-preset-es2015

4、转码输出测试。将src目录下的example.js转码输出到dist1目录下的dist.js中。

babel .\src\example.js --out-file .\dist1\dist.js

![babel转码前后代码对比][babel]

> 自定义脚本

我们可以在package.json文件中配置一些自定义脚本，以后只需要在终端中执行`npm run xxx`命令即可执行指定的脚本。例如将我们的babel转码命令配置成自定义脚本，配置代码如下：

"scripts": {
       "build": "babel .\\src\\example.js --out-file .\\dist\\dist.js"
     }

使用`npm run build`可以执行该脚本。  
这里可以编写多个脚本，这样以后执行一些操作就不需要每次都输入那么长的命令了。  
诸如`npm run test`、`npm run start`这种命令本质上就是一段自定义脚本，以后看到类似的启动方式，只要去找它的scripts脚本就好了。

## 模块化 ##

随着互联网的发展，许多网站也一步步的互联网化了，这使得项目中的js代码也越来越多了，变得十分复杂。  
我们都知道Java中可以在一个类中使用import关键字导入其他类进行调用，这样很好的实现了模块化开发。那么js是否也可以进行模块化开发呢？于是js也开始慢慢向模块化开发方向发展，后来产生了两种模块化规范：**CommonJS规范**和**ES6模块化规范**

> CommonJS规范

CommonJS模块的特点如下：

*  所有代码都运行在模块作用域，不会污染全局作用域。
 *  模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。
 *  模块加载的顺序和其在代码中出现的顺序一致。

如下代码,在`导出四则运算.js`文件中定义了一些四则运算的函数，我们使用CommonJS规范来将其导出。

const sum=function (a,b){
        return a+b
    }
    
    const sub=function (a,b){
        return a-b
    }
    
    const mul=function (a,b){
        return a*b
    }
    
    const div=function (a,b){
        return a/b
    }
    
    //导出这些方法供他人使用
    // module.exports={
    //     sum:sum,
    //     sub:sub,
    //     mul:mul,
    //     div:div
    // }
    
    //如果导出名称和方法名相同，可以简写
    module.exports={
        sum,
        sub,
        mul,
        div
    }

在同一目录下创建`引入测试.js`文件，编写导入测试代码如下：

const m=require('./导出四则运算')
    console.log(m)
    //测试方法，正常输出
    const r1=m.sum(1,1)
    const r2=m.sub(1,2)
    
    console.log(r1)
    console.log(r2)

> ES6模块化规范

ES6在语言标准上实现了模块功能，设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系（CommonJS只能在运行时确定），以及输入输出变量。ES6的模块并不是对象，而是通过export显示指定输出的代码，再通过import命令导入。  
**第一种写法**  
如下代码，在`userApi.js`文件中使用ES6模块化规范导出两个方法。

export function getList(){
        console.log('获取用户列表')
    }
    
    export function save(){
        console.log('保存用户信息')
    }

在`userComponent.js`文件中编写导入测试代码如下：

//import node不支持，需要使用babel进行转码后运行
    import {getList,save} from './userApi'
    
    getList();
    save();

**第二种写法**  
如下代码，在`userApi2.js`文件中使用ES6模块化规范导出两个方法。

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

在`userComponent2.js`文件中编写导入测试代码如下：

import user from './userApi2'
    
    user.getList()
    user.save()

注意：Node.js不支持ES6模块化语法，因此需要使用babel进行转码再运行，上述两种写法都是如此。

## webpack ##

> 什么是webpack？

webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)。当webpack处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。  
简单来说就是一个前端资源打包工具，它可以把js、less、css、png等文件通通打成一个或多个js文件。这样做的好处是可以让我们的代码不那么繁琐，实现代码的复用。

> webpack安装

1、使用npm安装webpack-cli工具。

npm install -g webpack webpack-cli

2、安装完毕后查看webpack版本进行测试。

webpack -v

> 测试使用

1、创建webpack目录并初始化项目`npm init`  
2、在webpack目录下创建src目录，编写js代码。  
3、webpack打包。

webpack --mode=development

![webpack打包][webpack]  
4、如果要打包css文件，需要先安装css-loader。除js以外的其他类型文件都需要安装相应的loader，并且需要配置对应的打包规则，详细配置规则可以查阅官网。

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

然后在webpack.config.js文件中配置css打包映射规则。

const path=require('path')  //Node.js的内置模块
    
    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']
                }
            ]
        }
    }

> 什么是loader？

loader用于对模块的源代码进行转换。loader可以使你在import或"加载"模块时预处理文件。loader可以将文件从不同的语言（如TypeScript）转换为JavaScript，或将内联图像转换为data URL。loader甚至允许你直接在JavaScript模块中import CSS文件。

[https_code.visualstudio.com]: https://code.visualstudio.com/
[format_png]: /images/20210607/b7a0364360ae4d088246be8c060aef5d.png
[format_png 1]: /images/20210607/2ba8b8d4273d427aaba1513deba7dc5d.png
[https_nodejs.org_zh-cn_download]: https://nodejs.org/zh-cn/download/
[Node.js]: /images/20210607/aaca9870520848b687b4726085db33c1.png
[format_png 2]: /images/20210607/31ce8c03782a42a282aefede26799d58.png
[VSCode]: /images/20210607/b76f25c89b1c4275bbf025f88424ab1e.png
[IDEA_ES6]: /images/20210607/f5e4d9214b6f40bcb9a2567afa402cde.png
[package.json]: /images/20210607/2a9422825a564a2cb4e8604d46563b5d.png
[devDependencies]: /images/20210607/5416763a053b424188a9dac5d4cf8b01.png
[format_png 3]: /images/20210607/03df1351920142e8a1d640d962b959de.png
[format_png 4]: /images/20210607/a77d34b54881462487d67aa65ed30e28.png
[babel]: /images/20210607/49cedd805cd94217befb792878b726ec.png
[webpack]: /images/20210607/686fe5d6c9ab40aeb6cc43698b9ede47.png