类与模块

类

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 - 显示页面。如果要使其生效的话，在不使用第三方库的情况下，只能将两个文件同时引入

<!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.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 了

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

转载于:https://www.cnblogs.com/bydzhangxiaowei/p/8158391.html

Vue 2.0 入门系列（15）学习 Vue.js 需要掌握的 es6 (2)相关推荐

C# 3.0入门系列
目录导航 1 C# 3.0 入门系列(一) 从linq开始引C# 3.0. 2 C# 3.0入门系列(二) 数据库的准备,引入Linq To Sql的准备. 3 C# 3.0入门系列(三) 第一个Li ...
SAP PM 入门系列15 - IW41 维护订单确认
SAP PM 入门系列15 - IW41 维护订单确认 1,如下的维护工单 100316384, 有一道维护工序, 2,输入事务代码IW41,用于为维护工单做确认. 输入工单号,回车, 输入perso ...
C#3.0入门系列（五）-之Where操作
从本节开始,本文正式更名为C#3.0入门系列.先发布一则消息,VS2007 Beta版本已经发布咯,下载地址: http://www.microsoft.com/downloads/details.a ...
WF4.0入门系列1——创建一个简单的工作流
WF4.0入门系列1--创建一个简单的工作流打开VS2010,选择文件-新建-项目,选择Workflow项工作流台应用程序,在名称处输入chapter01,选择合适的位置,这里默认,单击确定. V ...
【转】C#3.0入门系列（九）-之GroupBy操作
原文:http://www.cnblogs.com/126/archive/2007/07/10/812621.html 有朋友反馈说我提供的sample不能编译.大概是版本的问题,可以到http:/ ...
视频教程-零基础JS入门系列课程(2)之JS语法基础精讲-JavaScript
零基础JS入门系列课程(2)之JS语法基础精讲螺钉课堂讲师,擅长Vue.React.ReactNative.NodeJS等前端框架及技术邓老师 ¥59.00 立即订阅扫码下载「CSDN程序员学院 ...
vue x2.0入门基础知识
文章目录 1. vue的介绍 1.1 概念 1.2 设计模式MVVM 1.3 数据双向绑定内在原理 1.4.插值表达式{{}} 2.指令 2.1 v-model 2.2 v-text 与 v-html ...
Vue.js2.0 入门实例（二）（小试牛刀）
前面一篇博客介绍了从零开始准备Vue.js所需的一些环境和工具.这片博客就来跟大家探讨一下Vue.js 2.0中的一些特性,以及一个小实例,通过实例来跟大家分享,想必更容易理解. 先来看一下,看完这篇 ...
vue 回车查询按钮_从零开始学习vue
在github搜小程序我们可以看到许多用许多用vue开发的实例. 到底什么是vue,我们不妨浪费一天时间来了解一下. 一.什么是vue Vue是一个JavaScript框架.作者是国内常年混迹知乎的一 ...

Vue 2.0 入门系列（15）学习 Vue.js 需要掌握的 es6 (2)

类与模块

类

模块

rollup.js

webpack

转换 js

Vue 2.0 入门系列（15）学习 Vue.js 需要掌握的 es6 (2)相关推荐

最新文章

热门文章