Web开发-前端开发基础

Web开发-前端开发基础

回炉再造！2021 Vue3.0 前端全家桶学习笔记

web前端职业发展路线

技术范围广，发展速度快，兼容浏览器众多：

• 核心技术：html css JavaScript（BOM、DOM）
• 新的技术：html5 css3 ES6
• 旧框架：jQuery直接操作DOM、BootStrap
• 新框架：虚拟DOM，Vue、React、AngularJS、微信小程序、WebAPP；
• 还需要了解一定的Nodejs

通用工具：

• NPM：包管理器
• WebPack：打包工具
• ES6：更高效的语法，相较于ES5变化较大；
• axios：异步请求，结合了promise等ES6语法；

ECMAScript 6 语法和应用

ECMA是标准，JavaScript是实现；

2015年开始应用，目前已经到了es11，es6对es5的语法有较大变化；

• 认识ES6
• ES6兼容性解决
• let和const
• 箭头函数
• 数组的新增方法
• Map数据结构
• 字符串和新增方法和模板字符串
• 函数的参数
• 解构赋值
• Class的用法
• JSON的新应用
• Module模块
• ES7~ES11的一些新特性

let关键字

var的缺点：

• var可以重复声明、支持变量提升；
• var无法限制修改
• var没有块状作用域（只有在function/闭包中才支持）

一个经典问题：

// 错误
for (var i=0; i < btns.length; i++){
  btns[i].addEventListener('click', function(){
    console.log(i);
  })
}
// 正确
for (var i=0; i < btns.length; i++){
  (function(i){
    btns[i].addEventListener('click', function(){
      console.log(i);
    });
  })(i);
}

// 正确
for (let i=0; i < btns.length; i++){
  btns[i].addEventListener('click', function(){
    console.log(i);
  });
}

let的作用：

• 用于声明变量，且只在let所在代码块内有效
• let不存在变量提升，也不允许在相同作用域内重复声明；

const关键字

解决var无法限制修改的问题；

const作用：

• 声明一个只读的常量，一旦声明，常量值不能修改，这也要求，声明时，必须初始化值；
• const声明的常量，只在声明所在的块级作用域内有效；
• const命令声明的常量不提升，只能在声明的位置后使用；
• const也不允许重复声明；
• 如果const声明的是复合型数据，变量指向的是内存地址；

箭头函数和this指向

x => x * x;

(a,b)=>{
  return a + b;
}

let arr = [1,2,3,4];
arr.sort((a,b)=>a-b);

箭头函数在返回对象时，必须在对象外加上小括号；

箭头函数中的this指向：

• 普通函数的this：指向它的调用者，如果没有调用者则默认指向window
• 箭头函数的this：指向箭头函数定义时所处的对象，而不是箭头函数使用时所在的对象，默认使用父级this；
• 即，箭头函数没有自己的this，它的this是继承而来的，默认指向在定义它时所处的对象（宿主对象）；

box_ele.onclick = function(){
  const obj = this;
  setTimeout(function(){
    obj.className = 'bg-red-color';
  },3000);

  setTimeout(function(){
    this.className = 'bg-red-color';
  },3000);
}

箭头函数可以简化表达，简化回调函数的使用；

数组新增的高级方法

• filter：过滤器
• map：映射
• reduce：汇总
• some()
• every()

arr.filter(n=>n>10);

arr.map(n=>n*2);

arr.reduce((sum,n)=>{
  return sum + n;
}, 0)

Set 和 Map数据结构

Set指集合；

Map数据结构类似于对象，是键值对的集合，传统的键只能用字符串，Map的键则更丰富，各类型的值（包括对象）都能当做键；

二者属性和方法基本一致：

• size属性：返回成员数
• set(key,value)方法：设置键值对，返回Map；
• get(key)方法：读取键对应的值，找不到返回undefined；
• has(key)方法：判断Map中是否存在键；
• delete(key)方法：删除某个键，删除成功返回true，失败返回false；
• clear(key)方法：清除所有成员，无返回值；
• keys()：键的遍历器
• values()：值的遍历器
• entries()：成员的遍历器
• forEach()：遍历所有成员

const obj = new Set();
obj.add(1);
// add(n)  has(n)  delete(n)  forEach((n)=>{...}) size 

字符串新增方法和模板字符串

新方法：

• startsWith
• endsWith

模板字符串：

• 是增强版的字符串，用反引号`标识，可以当做普通字符串、定义多行字符串、嵌入变量；

`
<p>
my name is ${name}
</p>
`

解构赋值 和 扩展运算符

解构赋值：

• 声明和赋值不能分开；
• 左右两边必须有匹配的结构和值；

扩展运算符：

• …三点运算符，用于展开数组，或表示函数参数；

// 按顺序解构，个数可以不一致
let [a,b,c] = [1,2,3];

// 对象结构 名称需一致，个数可以不一致
let {name,age} = {name:'a',age:30};

let [{a,b},[x,y,z],three,four] = [{a:10,b:20},[1,2,3],8,'hello'];


let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr = [...arr1,...arr2];


function show(a,b,c){
  a,b,c
}
// 解构传参
show(...arr_para);


// 可变参数
function demo(...args){
  args[0],args[1],args[2],
}
demo(1,2,3)

function demo(a,b...args){
  a,b,args[0],args[1],args[2],
}
demo(1,2,3,4,5)

Class类的概念 和 JSON对象新用法

ES6的Class：

• constructor 是构造方法
• this关键字代表实例对象
• 通过extends关键字实现继承
• super关键字表示父类的构造函数，用来表示父类的this对象；

JSON对象：

• JSON.stringify() 串行化
• JSON.parse() 反串行化
• key赋值时，与变量名相同可简写；

class Person extends object{
  constructor(name){
    //调用超类的构造方法
    super();

    this.name = name;
  }

  show(){
    this.name;
  }
}

new Person('hello')

Module模块化编程 export和import的使用

模块化的优点：

• 减少命名冲突
• 避免引入时的层层依赖
• 提高执行效率

export命令：

• 用于规定模块的对外接口
• 一个模块就是一个独立的文件；该文件内部的所有变量，外部无法获取；
• 如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量；

import命令：

• 用于输入其他模块提供的功能；
• import命令接收一对大括号，里面指定要从其他模块导入的变量名；
• 大括号里的变量名，必须与被导入模块对外接口的名称相同；

// 可以有多个
export function add(){

}
// 导出为对象
export {add}
// 引入
import {add as add1} from './one.js'


// 默认导出 不命名(只能有一个)
export default function(){

}
// 引入
import add from './one.js'

// 全部导出的引入
import * as one from './one.js'

使用webpack插件 处理ES6语法的兼容性

babel相关插件的使用

axios异步网络请求

• 认识axios
• 为axios应用准备接口案例
• Postman安装和使用
• ES6中Promise的原理和应用
• axios的入门应用
• axios的post和get请求
• axios处理并发请求
• axios的全局配置方案
• axios的实例封装
• axios的跨域解决方案
• axios的拦截器应用
• 重新封装axios的应用

认识axios

• Axios可以简单理解为对ajax的封装；
• Axios是一个基于promise的HTTP库；
• 支持node端和浏览器端
• 使用Promise管理异步，告别传统的callback方式
• 丰富的配置项，支持拦截器等高级配置
• 转换请求数据和响应数据

为axios应用准备接口案例

RestFul API规范：

• URL、HTTP、版本、状态码、返回值、请求条件等；
• GET（SELECT）：从服务器取资源
• POST（CREATE）：在服务器新建资源
• PUT（UPDATE）：在服务器更新资源，客户端提供完整资源
• PATCH（UPDATE）：在服务器更新资源，客户端提供改变的属性
• DELETE（DELETE）：从服务器删除资源

注：并没有按照课程，准备项目接口；

Postman安装和使用

Postman是一款非常流行的API调试工具，最早是作为chrome浏览器插件存在的；
现在提供了独立的安装包，支持多系统；

ES6中Promise的原理和应用

主要用于异步计算，可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果；可以在对象之间传递和操作Promise，帮助我们处理队列；

之前的异步回调问题：

• 之前处理异步是通过纯粹的回调函数的形式进行处理
• 很容易进入回调地狱，剥夺函数return的能力
• 问题可以解决，但是不易读；嵌套层次深，不好维护；

Promise：

• promise是一个对象，对象和函数的区别就是对象可以保存状态，函数不可以（闭包除外）；
• 无需层层传递callback；
• 代码简约；
• 多个异步等待合并便于解决；

Axios是基于Promise的；

// 串行
new Promise((resole, reject)=>{
  // 1
  let res = "2"
  resole(res)
  // or resolve和reject是互斥的
  reject('err')
}).then(res=>{
  // 2
  return new Promise((resole, reject)=>{
    resole('3')
  })
  // or
  return Promise.resolve('3')
  // or
  return {msg:'3'}
},err=>{
  // err
}).then(res=>{
  // 3
}).catch(total_err=>{
  // 
})

// 并行
Promise.all([
  new Promise((resolve, reject)={
      // 1
  }),
  new Promise((resolve, reject)={
      // 2
  }),
]).then(res=>{
  // res 是一个数组
  let res1 = res[0];
  let res2 = res[1];
})

Axios入门应用

• 演示：CDN方式引入；
• 正式：结合框架 以包的形式引入；

// 演示
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>

...

axios('url');
axios({
  method: 'get',//默认的就是get
  url:'url',
  params:{
    a:'a'
  }
}).then(res={}).catch(err=>{})

axios({
  method: 'post',
  headers:{
    'content-type':'applocation/x-www-form-urlencoded' // 表单提交
  }
  url:'url',
  data:{
    a:'a'
  }
}).then(res={}).catch(err=>{})

// 正式
axios.get('url', config:{
  params:{
    a:'a'
  }
})

axios.post('url', config:{
  data:{
    a:'a'
  }
})

// 这里的Axios是已完成配置的axios创建的实例对象
obj => {
  return Axios.post('mgt/List', qs.stringify(obj));
};

obj => {
  return Axios({
    method: 'post',
    url: baseURL + 'base/upload',
    data: obj
  });
};

obj => {
  return Axios({
    method: 'post',
    url: baseURL + 'mgt/list',
    data: qs.stringify(obj)
  });
};

axios的并发请求处理

axios的并发请求axios.all()

• axios.all() 和 promise.all()方法是一个道理；

axios.all(values:[
  axios.get('url'),
  axios.get('url'),
  axios.post('url'),
]).then(res=>{
  res[0],res[1],res[2]
}).catch(err=>{

})

axios.all(values:[
  axios.get('url'),
  axios.get('url'),
  axios.post('url'),
]).then(axios.spread(callback:(res1,res2,res3))=>{
  res1,res2,res3
}).catch(err=>{

})

axios的全局配置

axios.default.baseURL = "http://127.0.0.1";
axios.default.timeout = 5000;
axios.default.headers.post['content-type'] = 'application/x-www-form-urlencoded';
...

// 整理数据
axios.defaults.transformRequest = function(data){
  data = JSON.stringify(data);
  return data;
}


axios.get('sub_url')

axios的实例封装

有的时候后台接口地址有多个并且超时时长不一样，为了避免繁琐的代码，可以用axios石磊的方式配置；

在实例中可以配置两种参数：

• 如果新建的实例没有参数，取得就是全局配置值，实例中有则优先使用实例中的值；
• axios实例相关参数（config参数）：
  • baseURL：域名基地址，如http://localhost:8080
  • timeout：超时时间，默认1000ms
  • url：请求路径，如/data.json
  • method：get、post
  • headers
  • params：url拼接参数
  • data：request body中参数

// 每一种服务器可以配置一个实例
let Axios1 = axios.create({
  baseURL:'',
  timeout:5000,
})

Axios1({
  url:'url'
}).then(res=>{

})

axios拦截器的应用

• 公参配置：为每个请求都带上参数，如uid、token等；
• 响应状态统一处理：对返回状态进行判断，比如token是否过期；

// 请求拦截
axios.interceptors.request.use(
  config=>{
    const token = window.localStorage.getItem("token");
    // 配置公参
    token && (config.headers.Authorization = token);
    return config;
  },
  error=>{
    return Promise.error(error);
  }
)

// 响应拦截
axios.interceptors.response.use(
  // config=>{
  //   return config;// config.data
  // },
  response=>{
    if(response.status===200){
      // 接口请求正常
      return Promise.resolve(response.data);
    }else{
      // 接口请求异常
      return Promise.reject(response.data);
    }
  },
  error=>{
    // 统一错误码处理 400 500等
    if(error.response.status){
      return Promise.reject(error.response);
    }
  }
)