类与模块
类
es6 之前，通常使用构造函数来创建对象
// 构造函数 Userfunction 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 方法，默认返回 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 进行访问控制：
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.comuser.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 - 显示页面。如果要使其生效的话，在不使用第三方库的情况下，只能将两个文件同时引入
<!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 加载模块
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.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"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 了
学习 Vue.js 需要掌握的 es6 (2)
原文地址：https://www.cnblogs.com/dxxzst/p/9491945.html