Vue 2.0 入門系列（15）學習 Vue.js 須要掌握的 es6 (2)

時間 2019-11-18

標籤 vue 2.0 入門系列學習 vue.js 須要掌握 es6 欄目 JavaScript 简体版

原文原文鏈接

類與模塊

類

es6 以前，一般使用構造函數來建立對象html

// 構造函數 User function User(username, email) { this.username = username; this.email = email; } // 爲了讓實例共享方法，將其添加到原型上 User.prototype.changeEmail = function(newEmail) { this.email = newEmail; } // 使用 let user = new User("zen", "ihuangmx@qq.com") user.changeEmail("change@qq.com"); console.log(user.email); //=> "change@qq.com"

而 es6 則能夠寫成webpack

class User { // 實例化時，調用 constructor 方法，默認返回 this constructor(username, email) { this.username = username; this.email = email; } // 類的全部方法會自動綁定到原型對象上，包括 constructor changeEmail(newEmail) { this.email = newEmail; } } // 使用 let user = new User("zen", "ihuangmx@qq.com") user.changeEmail("change@qq.com"); console.log(user.email); //=> "change@qq.com"

類中能夠定義靜態方法，也可使用 get 與 set 進行訪問控制：es6

class User { constructor(username, email) { this.username = username; this.email = email; } changeEmail(newEmail) { this.email = newEmail; } static register(...args) { return new User(...args); } // 等價 // static register(username, email) { // return new User(username, email); // } get info() { return this.username + " " + this.email; } // 首字符大寫 set name(name) { this.username = name.slice(0,1).toUpperCase().concat(name.slice(1)); } } // 使用 let user = User.register("zen", "ihuangmx@qq.com") console.log(user.info) // zen ihuangmx@qq.com user.name = "jack" console.log(user.info) // Jack ihuangmx@qq.com

類能夠做爲參數進行傳遞:web

function log(strategy) { strategy.handle(); } class ConsoleLogger { handle() { console.log("log log log"); } } log(new ConsoleLogger); //=> log log log

模塊

在 TaskCollection.js 中定義一個類sql

class TaskCollection { constructor(tasks = []) { this.tasks = tasks; } dump() { console.log(this.tasks); } }

在 main.js 中使用該類docker

const tc = new TaskCollection([ 'shop', 'eat', 'sleep' ]); tc.dump();

index.html - 顯示頁面。若是要使其生效的話，在不使用第三方庫的狀況下，只能將兩個文件同時引入npm

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script src="TaskCollection.js"></script> <script src="main.js"></script> </body> </html>

這樣作的話，咱們將沒法看到彼此間的關聯（main.js 加載 TaskCollection.js),所以，es6 提供瞭解決方案，即模塊。經過 export 和 import 來實現json

TaskCollection.js - 使用 export 命令顯式指定輸出的代碼瀏覽器

// 輸出類 export class TaskCollection { constructor(tasks = []) { this.tasks = tasks; } dump() { console.log(this.tasks); } } // 輸出函數 export function foo(){ console.log("foo"); } // 輸出變量 export let bar = 123; // 能夠統一輸出，使其一目瞭然 // export {TaskCollection, foo, bar};

main.js - 使用 import 加載模塊bash

import { TaskCollection, foo, bar as bar1 } from './TaskCollection'; const tc = new TaskCollection([ 'shop', 'eat', 'sleep' ]); tc.dump(); foo(); console.log(bar1);

index.html - 只須要引用 main.js

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script src="main.js"></script> </body> </html>

因爲當前的瀏覽器還不支持 es6 語法，咱們可使用打包工具。這裏簡單的舉兩個。

rollup.js

全局安裝

$ cnpm install --global rollup

使用

$ rollup main.js --format iife --output bundle.js # 針對客戶端指定格式爲 iife

而後只須要引用生成的 bundle.js

index.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script src="bundle.js"></script> </body> </html>

webpack

安裝

$ cnpm install -g webpack

打包

$ webpack main.js bundle.js

或者在當前項目下使用

$ cd webpack-demo-2 $ cnpm install webpack --save-dev

創建配置文件並設置

/webpack-demo-2/webpack.config.js var webpack = require('webpack'); module.exports = { entry: './main.js', output: { filename: './dist/main.js' } }

打包

$ webpack

一般是將其加入到 package.json 中

webpack-demo-2/package.json { "devDependencies": { "webpack": "^2.5.1" }, "scripts": { "build": "webpack" } }

如今，只須要運行

$ cnpm run build

轉換 js

能夠注意到，rollup 和 webpack 都僅僅是將其打包，並無轉化爲兼容的 js。

// 部分打包後的代碼 // dist/main.js "use strict"; /* harmony export (immutable) */ __webpack_exports__["b"] = foo; /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "c", function() { return bar; }); // export 命令顯式指定輸出的代碼 // 輸出類 class TaskCollection { constructor(tasks = []) { this.tasks = tasks; } dump() { console.log(this.tasks); } }

這裏以 webpack 爲例，講解如何轉化爲兼容的 js，首先安裝相關工具

$ cnpm install --save-dev buble-loader buble

添加

/webpack-demo-2/webpack.config.js var webpack = require('webpack'); module.exports = { entry: './main.js', output: { filename: './dist/main.js' }, module: { loaders: [ { test: /.js$/, loaders: 'buble-loader' } ] } }

執行

$ cnpm run build

如今，能夠發現已經轉化爲兼容的 js 了

"use strict"; /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return TaskCollection; }); /* harmony export (immutable) */ __webpack_exports__["b"] = foo; /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "c", function() { return bar; }); // export 命令顯式指定輸出的代碼 // 輸出類 var TaskCollection = function TaskCollection(tasks) { if ( tasks === void 0 ) tasks = []; this.tasks = tasks; }; TaskCollection.prototype.dump = function dump () { console.log(this.tasks); };