JavaWeb——前端工程化

一、前端工程化

1.什么是前端工程化:

前端工程化是使用软件工程的方法来单独解决前端的开发流程中模块化、组件化、规范化、自动化的问题，以提高效率和降低成本。

2.前端工程化实现技术栈:

ES6+Nodejs+npm+Vite+VUE3+Router+Pinia+Axios+Element-plus

**ECMAScript6:**VUE3中大量使用ES6语法;

**Nodejs:**前端项目运行环境

**npm:**依赖下载工具

**Vite:**前端项目构建工具

**VUE3:**优秀的渐进式前端框架;

**Router:**通过路由实现页面切换功能;

**Pinia:**通过状态管理实现组件数据传递;

**Axios:**ajax异步请求封装技术实现前后端数据交互;

**Element-plus:**可以提供丰富的快速构建网页的组件仓库;

二、ECMA6Script

1.ES6介绍:

ECMAScript6简称ES6，是JavaScript语言的一次重大更新，是原来的ECMAScript标准的第六个版本。ES6带来了大量的新特性，包括箭头函数、模板字符串、let和const关键字、解构、默认参数值、模块系统等等，大大提升了JavaScript的开发体验。ES6是学习VUE3的门槛之一;

**(1).更加简洁:**ES6引入了一些新的语法，如箭头函数、类和模板字符串等，使代码更加简洁易懂

**(2).更强大的功能:**ES6引入了一些新的AP1、解构语法和迭代器等功能，从而使得JavaScript更加强大;

**(3).更好的适用性:**ES6引入的模块化功能为JavaScript代码的组织和管理提供了更好的方式，不仅提高了程序的可维护性，还让JavaScript更方便地应用于大型的应用程序;

2.es6的变量和模板字符串

ES6 新增了let 和const，用来声明变量，使用的细节上也存在诸多差异

let和var的差别:

**(1).**let不能重复声明;

**(2).**let有块级作用域，非函数的花括号遇见let会有块级作用域，也就是只能在花括号里面访问

**(3).**let不会预解析进行变量提升

(4).let定义的全局变量不会作为window的属性;

**(5).**let在es6中推荐优先使用;

javascript 复制代码

// 1.let只有在当前代码块有效代码块:代码块、函数、全局
{
    let a = 1
    var b = 2
}
console.log(a);// a is not defined 花括号外面无法访问
console.log(b);// 可以正常输出
// 2.不能重复声明
let name = '天真'
let name = '无邪'
// 3.不存在变量提升(先声明,再使用)
console.log(test) //可以 但是值为undefined
var test ='test'
console.log(test1)// 不可以 let命令改变了语法行为,它所声明的变量一定要在声明后使用,否则报错
let test1 = 'test1'
// 4.不会成为window的属性
var a = 100
console.log(window.a) // 100
let b = 200
console.log(window.b) // undefined
//5.循环中推荐使用
for (let i=0;i<10;i++){
}
console.log(i);

const和var的差异:

**(1).**新增const和let类似，只是const定义的变量不能修改;

**(2).**并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动;

javascript 复制代码

//1.声明常量
const PI = 3.1415926;
PI=3.14 // 报错
//2.对应数组和对象元素修改不算常量修改，修改值不修改地址
const TEAM = ['刘德华','张学友','郭富城'];
TEAM.push('黎明');
TEAM = [] // 报错
console.log(TEAM)

模板字符串(template string)是增强版的字符串，用反引号(``) 标识:

**(1).**字符串中可以出现换行符;

**(2).**可以使用${xxx}形式输出变量和拼接变量;

javascript 复制代码

// 1 多行普通字符串
let ulStr =
    '<ul>'+
    '<li>JAVA</li>'+
    '<li>html</li>'+
    '<li>VUE</li>'+
    '</ul>'
console.log(ulStr)
// 多行模板字符串
let ulStr2 = `
    <ul>
        <li>JAVA</li>
        <li>html</li>
        <li>VUE</li>
    </u1>`
console.log(ulStr2)
//3.普通字符串拼接
let name ='张小明'
let infoStr = name+'被评为本年级优秀学员'
console.log(infoStr)
//4.模板字符串拼接
let infoStr2 = `${name}被评为本年级优秀学员`
console.log(infoStr2)

3.es6的解构表达式

ES6 的解构赋值是一种方便的语法，可以快速将数组或对象中的值拆分并赋值给变量。解构赋值的语法使用花括号(} 表示对象，方括号[]表示数组。通过解构赋值，函数更方便进行参数接受;

数组解构赋值:

javascript 复制代码

let[a,b,c,d = 4] = [1, 2, 3];
console.log(a,b,c,d);

该语句将数组 [1,2,3]中的第一个值赋值给a变量，第二个值赋值给b变量，第三个值赋值给c变量。可以使用默认值为变量提供备选值，在数组中缺失对应位置的值时使用该默认值。

对象解构赋值:

javascript 复制代码

let {a, b} = {a:1, b:2};
//新增变量名必须和属性名相同,本质是初始化变量的值为对象中同名属性的值
//等价于let a = 对象.a     let b = 对象.b
console.log(a,b);

该语句将对象{a: 1,b:2}中的a属性值赋值给a变量，b属性值赋值给b变量。可以为标识符分配不同的变量名称，使用:操作符指定新的变量名。

javascript 复制代码

let {a:x, b:y} = {a:1, b:2};
console.log(x, y);

**函数参数解构赋值:**解构赋值也可以用于函数参数

javascript 复制代码

function add([x,y]){
    return x+y;
}
add([1,2]);

该函数接受一个数组作为参数，将其中的第一个值赋给x，第二个值赋给y，然后返回它们的和;ES6 解构赋值让变量的初始化更加简单和便捷。通过解构赋值，可以访问到对象中的属性，并将其赋值给对应的变量，从而提高代码的可读性和可维护性;

4. es6的箭头函数

ES6允许使用"箭头"定义函数，语法类似Java中的Lambda表达式

javascript 复制代码

//ES6允许使用"箭头"(=>)定义函数
//1.函数声明
let fn1 = function(){}
let fn2 = ()=>{} //箭头函数,此处不需要书写function关键字
let fn3 = x=>{} //单参数可以省略(),多参数无参数不可以
let fn4 = x=>console.log(x)//只有一行方法体可以省略{};
let fun5 = x=>x+1 //当函数体只有一句返回值时可以省略花括号和return语句
//2.使用特点:箭头函数this关键字
//在JavaScript中this关键字通常用来引用函数所在的对象;或者在函数本身作为构造函数时来引用新对象的实例
//但是在箭头函数中this的含义与常规函数定义中的含义不同,并且是由箭头函数定义时的上下文来决定的,而不是由函数调用时的上下文来决定的;箭头函数没有自己的this,this指向的是外层上下文环境的this
let person = {
    name :"张三",
    showName:function(){
        console.log(this)//这里的this是person
        console.log(this.name)
    },
    viewName:()=>{
        console.log(this) //这里的this是window
        console.log(this.name)
    }
}
person.showName()
person.viewName()
function Counter(){
    this.count = 0;
    setInterval(()=>{
        // 这里的this是上一层作用域中的this,即Counter实例化对象
        this.count++;
        console.log(this.count);
        },1000);
}
let counter =new Counter();

**rest和spread:**rest参数在形参上使用，和JAVA中的可变参数几乎一样

javascript 复制代码

//1参数列表中多个普通参数 普通函数和箭头函数中都支持
let fun1 = function(a,b,c,d=10){
    console.log(a,b,c,d)
}
let fun2 = (a,b,c,d=10)=>{console.log(a,b,c,d)}
fun1(1,2,3)
fun2(1,2,3,4)
//2...作为参数列表,称之为rest参数;普通函数和箭头函数中都支持
//因为箭头函数中无法使用arguments, rest是一种解决方案
let fun3 = function(...args){console.log(args)}
let fun4 = (...args)=>{console.log(args)}
fun3(1,2,3)
fun4(1,2,3,4)
//rest参数在一个参数列表中的最后一个,这也就无形之中要求一个参数列表中只能有一个rest参数

spread参数，在实参上使用:

javascript 复制代码

let arr = [1,2,3]
//let arrSpread = ...arr;// 这样不可以,...arr必须在调用方法时作为实参使用
let fun1 = (a,b,c)=>{console.log(a,b,c)}
// 调用方法时对arr进行转换,转换为1,2,3
fun1(...arr)
//应用场景1:合并数组
let arr2 = [4,5,6]
let arr3 = [...arr,...arr2]
console.log(arr3)
//应用场景2:合并对象属性
let p1 = {name:"张三"}
let p2 = {age:10}
let p3 = {gender:"boy" }
let person = {..p1,...p2,...p3}
console.log(person)