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

時間 2019-11-06

標籤 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 中定義一個類npm

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

    dump() {
        console.log(this.tasks);
    }
}

在 main.js 中使用該類json

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

tc.dump();

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

<!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 來實現函數

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 加載模塊ui

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);
};