JS高級之ES6+模塊化

時間 2020-03-18

標籤高級 es6 模塊化欄目 JavaScript 简体版

原文原文鏈接

文章目錄

十4、es6內容

14.4 函數的擴展

14.10 module

十5、模塊化

十4、es6內容

可參考阮一峯的ECMAScript 6 入門html

14.1 數組API、正則API、字符串API

14.2 模板字符串

模板字符串的基本用法

var s1 = `abc`

模板字符串的優點：

var obj={ name:"",age:5 };
var s1 ="我叫："+obj.name+"，今年："+obj.age+"歲。"

14.3 解構賦值

14.3.1 對象的解構賦值

var obj={name:"張三",age:18}

var {name,age}=obj; 
//生成2個變量，
// name值來自於obj.name、
// age值來自於obj.age

var {name:title}=obj;
//生成一個變量：title，值來自於obj.name

14.3.2 函數參數的解構賦值

function f1(obj){
    console.log(obj.age);
    console.log(obj.height)
}
//等價於
function f1({ age,height }){
    console.log(age);
    console.log(height)
}
f1({age:5,height:180})

14.3.3 補充：屬性的簡寫

var a = 3 ; 
var c = 10;
var b = { a,c } ;   
//b對象有一個a屬性，a屬性的值，來自於a變量 ，
//還有一個c屬性，c屬性的值來自於c變量
console.log(b)

14.4 函數的擴展

14.4.1 rest參數

使用背景：es6的
優勢：arguments是僞數組，而rest參數是真數組前端

function fn(...args){
    console.log(args);  //數組：[1,2,3,4,5]
}
fn(1,2,3,4,5)

14.4.2 箭頭函數

場景：用於替換匿名函數
基本用法：vue

//匿名函數
div.onclick=function(){
    console.log("你好")
}
//箭頭函數
div.onclick=()=>{
    console.log("你好")
}

有一個參數的箭頭函數node

var fn=(a)=>{
    console.log("abc");
}
//等價於：
var fn=a=>{
    console.log("abc");
}

有2個及更多參數的箭頭函數react

var f=(a,b,c)=>{
    console.log("abc")
}

箭頭函數和普通匿名函數有哪些不一樣？jquery

函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象。
不能夠看成構造函數，也就是說，不可使用new命令，不然會拋出一個錯誤。
不可使用arguments對象，該對象在函數體內不存在。若是要用，能夠用 rest 參數代替。
（不經常使用）不可使用yield命令，所以箭頭函數不能用做 Generator 函數。
- generator函數如今常常用async替代

14.5 對象的擴展

Object.assign：實現拷貝繼承
對象擴展運算符

var obj1={ age:5,gender:"男" }
var obj2={ ...obj1 }
var obj3={ ...obj1 , age:10 }

14.6 Promise

爲何要有promise：解決回調地獄的問題webpack

14.6.1 回調地獄：

//跟之前的if條件地獄很像
// if(){
// if(){
// if(){
// }
// }
// }

$.get("/getUser",function(res){
    $.get("/getUserDetail",function(){
        $.get("/getCart",function(){
            $.get("/getBooks",function(){
                //...
            })
        })
    })
})
//node開發：讀取文件；開個服務器、接收一個請求、請求路徑、訪問數據庫

14.6.2 Promise函數基本用法

var promise=new Promise((resolve,reject)=>{
    //b 把須要執行的異步操做放在這裏
    $.get("/getUser",res=>{
        //獲取數據的異步操做已經執行完畢了，等待下一步的執行，經過執行resolve函數，告訴外界你能夠執行下一步操做了
        //c、
        resolve(res)
        //而執行的下一步操做，其實就是寫在then的回調函數中的
    })
})
//a、
promise.then(res=>{
    //d、執行後續的操做
    console.log(res);
})

14.6.3 Promise函數實現多層回調

new Promise((resolve,reject)=>{
    $.get("/getUser",res=>{
        resolve(res)
    })
}).then(res=>{
    //用戶基本信息
    return new Promise(resolve=>{
        $.get("/getUserDetail",res=>{
            resolve(res)
        })
    })
}).then(res=>{
    //用戶詳情
    return new Promise(resolve=>{
        $.get("/getCart",res=>{
            resolve(res)
        })
    })
}).then(res=>{
    //購物車信息
})

14.6.4 Promise函數錯誤處理

方式一git

new Promise((resolve,reject)=>{
    $.ajax({
        url:"/getUser",
        type:"GET",
        success:res=>{
            resolve(res);
        },
        error:res=>{
            reject(res)
        }
    })
}).then(resSuccess=>{
    //成功的返回值
},resError=>{
    //失敗的返回值
})

方式二：es6

new Promise((resolve,reject)=>{
    $.ajax({
        url:"/getUser",
        type:"GET",
        success:res=>{
            resolve(res);
        },
        error:res=>{
            reject(res)
        }
    })
}).then(resSuccess=>{
    //成功的返回值
}).catch(resError=>{
    //失敗的返回值
})

14.7 async

async實際上是一個promise的語法糖github

async function get(){
    console.log('開始執行');
    var res = await timer()
    console.log('執行結束：',res);
}
function timer(){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve("你好");
        },1000)
    })
}
get();

await能夠執行異步操做，可是await必須在async函數內執行
await操做能夠有返回值，這個返回值表示promise操做成功的返回值
若是await裏面執行的異步操做發生了reject，或者發生了錯誤，那麼只能使用try…catch語法來進行錯誤處理

14.8 generator

Generator是ES6的新特性，經過yield關鍵字，可讓函數的執行流掛起,那麼便爲改變執行流程提供了可能。

14.9 class

14.9.1 定義一個類

class Person {
    constructor(name) {
        this.name=name;
    }
}
//至關於：
function Person(name){
    this.name=name;
}

14.9.2 添加實例方法

class Person {
    constructor(name,age) {
        this.name=name;
        this.age=age;
    }
    //定義方法
    say() {
        console.log("你們好，我叫："+this.name+"，今年："+this.age+"歲");
    }
    travel(){
        console.log("坐着飛機去巴厘島");
    }
}

14.9.3 添加靜態方法

靜態成員：靜態屬性、靜態方法
靜態屬性：經過類自己來訪問：Person.maxAge
靜態方法：經過類自己來訪問的一個方法：Person.born();

class Animal {
    constructor(){

    }
    static born(){
        console.log("小呆萌出生了")
    }
}
//訪問靜態方法
Animal.born();

14.9.4 類的繼承

//父類
class Person {
    constructor(name){
        this.name=name;
    }
}
//Student類繼承自Person類
class Student extends Person {
    //構造方法
    constructor(name,grade){
        //規定：必須調用父類構造方法，若是不調用就會報錯
        super(name);    
        //調用父類構造方法，從而給子類的實例添加了name屬性

        this.grade=grade;
    }
}

[1,3,5].map(function(value,index){})
[1,3,5].map((value,index)=>{})
//之前變量和字符串拼接，如今用模板字符串

14.10 module

14.10.1 瀏覽器調試

本地調試，會受瀏覽器同源策略的影響，須要開啓web服務才能打開

<script type="module">
    //導入模塊
</script>

14.10.2 基本用法

導出模塊：

//common.js
export default { name:"abc" }

導入模塊：（

//b.js
import common from "common.js"
console.log( common.name ) //"abc"

14.10.3 模塊有多個導出

//person.js
export const jim = { country :"France" }
export const tony = { color:"gray" }
//默認的導出
export default { name:"abc" }

//index.js
import person , { jim , tony } from "person.js"

//person：{ name:"abc" }
//jim：{ country :"France" }
//tony：{ color:"gray" }

14.10.4 模塊導入導出取別名

//person.js
export const tony = { color:"gray" }
export { tony as Tony }

//index.js
import { Tony } from "person.js"
import { Tony as man} from "person.js"

console.log(man)    //{ color:"gray" }

十5、模塊化

15.1 非模塊化的弊端

代碼雜亂無章，沒有條理性，不便於維護，不便於複用
不少代碼重複、邏輯重複
全局變量污染
不方便保護私有數據(閉包)

15.2 基本實現：閉包的自調用函數

//日期控件
var DatePicker = (function(){
    return {
        init(){}
    }
})();

//Header
// tabbar
// login

//Content
// sidebar
// table

//Footer
var KTV=(function(){
    return {
        pay(){},
        xiaofei(){}
    }
})()

15.3 AMD模塊化 -->requireJS

AMD：async module define：異步模塊定義
AMD其實就是requireJS實現的模塊化解決方案

15.4 其餘模塊化解決方案：

CommonJS：Node中使用的模塊化解決方案
CMD（common module define）：seajs中提出來的模塊化解決方案
- 其實CMD能夠認爲是CommonJS的前端實現
- seajs由阿里的（玉帛）編寫
- seajs在2，3年前比較火，從去年開始已經中止更新
  - vue 、angular、react已經集成了各自的模塊化
  - es6模塊化
  - webpack也有模塊化的解決方案

15.5 AMD和CMD的不一樣之處

amd須要依賴前置，cmd須要依賴就近
導入導出方式不一樣：
- amd經過define定義，return導出；
- cmd經過不須要定義，只須要最後經過module.exports、exports導出

15.6 requireJS —— AMD規範

requireJS中文網

15.6.1 基本用法

//一、經過script標籤導入requirejs源文件
//二、編寫模塊文件，基本格式以下：
//home.js
define([],function(){
    console.log('home模塊');
})
//user.js
define([],function(){
    console.log('user模塊');
})
//三、首頁調用模塊：
require(["home","product.js"],function(){ })

15.6.2 入口文件

15.6.3 配置

require.config({
    baseUrl:'js',
    paths:{
    	'jquery':'jquery.min.js',
    }
    
})

15.6.4 定義模塊的返回值（返回值至關於模塊的入口）

//user.js：
define([],function(){
    return {
        init(){},
        addUser(){}
    }
})
//首頁：運行時加載
require(["cart"],function(cart){
    cart.init();
    cart.addUser();
})

注意：通常在導入模塊的時候，須要將有返回值的模塊在[前面]導入，無返回值的模塊在[後面]導入

15.6.5 案例——模塊依賴子模塊

//userAdd.js
define([],function(){
    return {
        init(){
            console.log("添加用戶");
        }
    }
})

//userEdit.js
define([],function(){
    return {
        init(){
            console.log("編輯用戶");
        }
    }
})
    
//user.js define(["userAdd","userEdit"],function(userAdd,userEdit){
    return {
        init(){
            console.log("用戶初始化");
        },
        add(){
            userAdd.init();
        },
        edit(){
            userEdit.init();
        }
    }
})

//首頁：
require(["user"],function(user){
    user.init();
    user.add();
    user.edit();
})

15.6.7 檢測第三方庫是否支持AMD規範

if ( typeof define === "function" && define.amd ) {
    define([], function() {
        return jQuery;
    } );
}

相似的還有：echarts

15.6.8 經常使用的模塊、文件夾路徑的配置

通常用於配置第三方模塊，好比jquery、bootstrap、zepto等等

require.config(
    paths:{
        jquery:"js/lib/jquery-1.11.min",
        zepto:"js/lib/zepto.min",
        bootstrap:"assets/bootstrap/js/bootstrap.min"
    }
)
define(["jquery","zepto"],function($,$$){})
require(["jquery","bootstrap"],function($){})