ES6模塊化如何使用，開發環境如何打包？
1.模塊化的基本語法
/* export 語法 */
// 默認導出
export default {
a: '我是默認導出的',
}
// 單獨導出
export function fn1() {
console.log('我是函數1')
}
export function fn2() {
console.log('我是函數2')
}
/* import 語法 */
// 導入
// 默認導入
import util1 from './demo'
// 單獨導入
import { fn1, fn2 } from './demo'
console.log(util1)
fn1()
fn2()
2.開發環境配置
BabelES6新語法需要進行編譯，即轉換為ES5或者更早版本的語法，這個時候就需要Babel來進行轉換Babel是什麼？Babel是一個 JavaScript 編譯器，主要用於將 ECMAScript 2015+ 版本的代碼轉換為向後兼容的 JavaScript 語法，以便能夠運行在當前和舊版本的瀏覽器或其他環境中。Babel中文網Webpack模塊化工具3.關於JS眾多模塊化標準
class和普通構造函數有何區別？
1.JS構造函數
function MathHandle(x, y) {
this.x = x
this.y = y
}
MathHandle.prototype.add = function () {
return this.x + this.y
}
var m = new MathHandle(1, 2)
console.log(m.add()) // 3
2.class基本語法
class MathHandle {
constructor(x, y) {
this.x = x
this.y = y
}
add() {
return this.x + this.y
}
}
const m = new MathHandle(1, 2)
console.log(m.add()) // 3
3.語法糖
/* 本質只是一個語法糖 */
console.log(typeof MathHandle) // 'function'
console.log(MathHandle === MathHandle.prototype.constructor) // true
console.log(m.__proto__ === MathHandle.prototype) // true
4.繼承
// class 的繼承
class Father {
constructor(name, age) {
this.name = name
this.age = age
}
money() {
console.log('我有100元錢')
}
sum() {
console.log(this.name + '有' + this.age + '歲')
}
}
// extends 繼承父類
class Son extends Father {
constructor(name, age) {
super(name, age) // super 調用了父類中的構造函數
}
}
var son = new Son('小鑫', 22)
//可以使用父類的方法
son.money() // 我有100元錢
son.sum() // 小鑫有22歲
5.總結
class更加貼合面向對象的寫法；更加易讀、理解；本質還是語法糖，還是使用 prototype 實現的
Promise的基本使用和原理
為了解決「回調地獄」（鏈式發送ajax請求）而出現的一種解決方案，比如下面這種情況
$.ajax({
url: 'http:/localhost:3000/data',
success: function (response) {
console.log(response);
$.ajax({
url: 'http:/localhost:3000/data2',
success: function (response) {
console.log(response);
$.ajax({
url: 'http:/localhost:3000/data3',
success: function (response) {
console.log(response);
}
})
}
})
}
})
這個時候就需要使用
promise來處理ajax請求，主要分為以下四個步驟：
new Promist實例，而且要return；new Promist時要傳入函數，函數有resolvereject兩個參數；成功時執行resolve()，失敗時執行reject().then.catch監聽結果/**
* @description 基於Promise發送Ajax請求
* @param {String} url 請求地址
*/
function queryDate(url) {
const promise = new Promise(function (resolve, reject) {
const xhr = new XMLHttpRequest()
xhr.open('get', url)
xhr.send()
if (xhr.onload) {
// onload 只有狀態碼為4時才能回調一次函數
xhr.onload = function () {
if (xhr.status === 200) {
// 處理正常情況
resolve(xhr.responseText)
} else {
// 處理異常的情況
reject('伺服器錯誤')
}
}
} else {
// 支持低版本ie
// onreadystatechange是只要返回的狀態碼只要變化時就回調一次函數
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
// 處理正常情況
resolve(xhr.responseText)
} else {
// 處理異常情況
reject('伺服器錯誤')
}
}
}
})
return promise
}
// 發送多個ajax請求並且保證順序 鏈式調用
// 第一次ajax請求
queryData('http://localhost:3000/data')
.then(function (data) {
console.log(data)
// 第二次ajax請求
return queryData('http://localhost:3000/data2')
})
.then(function (data) {
console.log(data)
// 第三次ajax請求
return queryData('http://localhost:3000/data3')
})
.then(function (data) {
console.log(data)
})
ES6其他常用的功能
let/const多行字符串/模板變量結構賦值塊級作用域函數默認參數箭頭函數(注意：是普通js函數的補充，修正this的指向)附帶上一張學習ES6基礎時的思維導圖
最後，咱給小編：
1. 點讚+評論
2. 點頭像關注，轉發給有需要的朋友。
謝謝！！