Vue 2.0 入门系列（15）学习 Vue.js 需要掌握的 es6 (2)
類與模塊
類
es6?之前，通常使用構造函數來創建對象
// 構造函數 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?則可以寫成
class User {// 實例化時，調用 constructor 方法，默認返回 thisconstructor(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?進行訪問控制：
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類可以作為參數進行傳遞:
function log(strategy) {strategy.handle(); }class ConsoleLogger { handle() { console.log("log log log"); } } log(new ConsoleLogger); //=> log log log模塊
在?TaskCollection.js?中定義一個類
class TaskCollection {constructor(tasks = []) {this.tasks = tasks; } dump() { console.log(this.tasks); } }在?main.js?中使用該類
const tc = new TaskCollection(['shop','eat','sleep' ]); tc.dump();index.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?加載模塊
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
由于當前的瀏覽器還不支持 es6 語法，我們可以使用打包工具。這里簡單的舉兩個。
rollup.js
全局安裝
$ cnpm?install?--global rollup使用
$?rollup?main.js?--format?iife?--output?bundle.js?# 針對客戶端指定格式為 iife然后只需要引用生成的?bundle.js
index.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.jsvar 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這里以 webpack 為例，講解如何轉化為兼容的 js，首先安裝相關工具
$ cnpm?install?--save-dev?buble-loader?buble添加
/webpack-demo-2/webpack.config.jsvar webpack = require('webpack');module.exports = { entry: './main.js', output: { filename: './dist/main.js' }, module: { loaders: [ { test: /.js$/, loaders: 'buble-loader' } ] } }執行
$ cnpm?run?build現在，可以發現已經轉化為兼容的 js 了
轉載于:https://www.cnblogs.com/bydzhangxiaowei/p/8158391.html
總結
以上是生活随笔為你收集整理的Vue 2.0 入门系列（15）学习 Vue.js 需要掌握的 es6 (2)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 安卓手机后台刷新从哪里关闭？
- 下一篇： Vue路由开启keep-alive缓存页