原创 一篇帶你用 VuePress + Github Pages 搭建博客

{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"前言","attrs

原创 ES6 完全使用手冊

前言 這裏的 "ES6" 泛指 ES5 之後的新語法 這裏的 "完全" 是指本文會不斷更新 這裏的 "使用" 是指本文會展示很多 ES6 的使用場景 這裏的 "手冊" 是指你可以參照本文將項目更多的重構爲 ES6 語法 此外還要注意這裏

原创 ES6 系列之私有變量的實現

前言 在閱讀 《ECMAScript 6 入門》的時候,零散的看到有私有變量的實現,所以在此總結一篇。 1. 約定 實現 class Example { constructor() { this._private =

原创 ES6 系列之我們來聊聊裝飾器

Decorator 裝飾器主要用於: 裝飾類 裝飾方法或屬性 裝飾類 @annotation class MyClass { } function annotation(target) { target.annotated =

原创 ES6 系列之模塊加載方案

前言 本篇我們重點介紹以下四種模塊加載規範: AMD CMD CommonJS ES6 模塊 最後再延伸講下 Babel 的編譯和 webpack 的打包原理。 require.js 在瞭解 AMD 規範之前,我們先來看看 requir

原创 ES6 系列之 defineProperty 與 proxy

前言 我們或多或少都聽過“數據綁定”這個詞,“數據綁定”的關鍵在於監聽數據的變化,可是對於這樣一個對象:var obj = {value: 1},我們該怎麼知道 obj 發生了改變呢? definePropety ES5 提供了 Objec

原创 ES6 系列之 Babel 是如何編譯 Class 的(下)

前言 在上一篇 《 ES6 系列 Babel 是如何編譯 Class 的(上)》,我們知道了 Babel 是如何編譯 Class 的,這篇我們學習 Babel 是如何用 ES5 實現 Class 的繼承。 ES5 寄生組合式繼承 funct

原创 ES6 系列之 Babel 是如何編譯 Class 的(上)

前言 在瞭解 Babel 是如何編譯 class 前,我們先看看 ES6 的 class 和 ES5 的構造函數是如何對應的。畢竟,ES6 的 class 可以看作一個語法糖,它的絕大部分功能,ES5 都可以做到,新的 class 寫法只是

原创 ES6 系列之 Babel 將 Async 編譯成了什麼樣子

前言 本文就是簡單介紹下 Async 語法編譯後的代碼。 Async const fetchData = (data) => new Promise((resolve) => setTimeout(resolve, 1000, data +

原创 ES6 系列之 Babel 將 Generator 編譯成了什麼樣子

前言 本文就是簡單介紹下 Generator 語法編譯後的代碼。 Generator function* helloWorldGenerator() { yield 'hello'; yield 'world'; return

原创 ES6 系列之異步處理實戰

前言 我們以查找指定目錄下的最大文件爲例,感受從 回調函數 -> Promise -> Generator -> Async 異步處理方式的改變。 API 介紹 爲了實現這個功能,我們需要用到幾個 Nodejs 的 API,所以我們來簡單介

原创 ES6 系列之我們來聊聊 Async

async ES2017 標準引入了 async 函數,使得異步操作變得更加方便。 在異步處理上,async 函數就是 Generator 函數的語法糖。 舉個例子: // 使用 generator var fetch = require(

原创 ES6 系列之 Generator 的自動執行

單個異步任務 var fetch = require('node-fetch'); function* gen(){ var url = 'https://api.github.com/users/github'; var

原创 ES6 系列之我們來聊聊 Promise

前言 Promise 的基本使用可以看阮一峯老師的 《ECMAScript 6 入門》。 我們來聊點其他的。 回調 說起 Promise,我們一般都會從回調或者回調地獄說起,那麼使用回調到底會導致哪些不好的地方呢? 1. 回調嵌套 使用回調

原创 ES6 系列之模擬實現一個 Set 數據結構

基本介紹 ES6 提供了新的數據結構 Set。 它類似於數組,但是成員的值都是唯一的,沒有重複的值。 初始化 Set 本身是一個構造函數,用來生成 Set 數據結構。 let set = new Set(); Set 函數可以接受一個數組(