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 方法，默认返回 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.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.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);
};Vue 2.0 入门系列（15）学习 Vue.js 需要掌握的 es6 (2)的更多相关文章
- Vue 2.0 入门系列（14）学习 Vue.js 需要掌握的 es6 (1)
针对之前学习 Vue 用到的 es6 特性,以及接下来进一步学习 Vue 要用到的 es6 特性,做下简单总结. var.let 与 const var 与 let es6 之前,JavaScript ...
- vue 快速入门 系列 —— 初步认识 vue
其他章节请看: vue 快速入门 系列 初步认识 vue vue 是什么 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架. 所谓渐进式,就是你可以一步一步.有阶段 ...
- Entity Framework 6.0 入门系列 第一篇
Entity Framework 6.0 入门系列 第一篇 好几年前接触过一些ef感觉不是很好用,废弃.但是 Entity Framework 6.0是经过几个版本优化过的产物,性能和功能不断完善,开 ...
- ABP入门系列目录——学习Abp框架之实操演练
ABP是"ASP.NET Boilerplate Project (ASP.NET样板项目)"的简称. ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WE ...
- 《VC++ 6简明教程》即VC++ 6.0入门精讲 学习进度及笔记
VC++6.0入门→精讲 2013.06.09,目前,每一章的“自测题”和“小结”三个板块还没有看(备注:第一章的“实验”已经看完). 2013.06.16 第三章的“实验”.“自测题”.“小结”和“ ...
- Vue 2.0入门基础知识之全局API
3.全局API 3-1. Vue.directive 自定义指令 Vue.directive用于自定义全局的指令 实例如下: <body> <div id="app&quo ...
- Vue 2.0入门基础知识之内部指令
1.Vue.js介绍 当前前端三大主流框架:Angular.React.Vue.React前段时间由于许可证风波,使得Vue的热度蹭蹭地上升.另外,Vue友好的API文档更是一大特色.Vue.js是一 ...
- webpack3.10.0(入门系列基本概念1)
一.概念 webpack的核心是一个用于现代JavaScript应用程序的静态模块打包程序.当webpack处理您的应用程序时,它会递归地构建一个依赖图,其中包含应用程序所需的每个模块,然后将所有这些 ...
- vue.js2.0实战(1):搭建开发环境及构建项目
Vue.js学习系列: vue.js2.0实战(1):搭建开发环境及构建项目 https://my.oschina.net/brillantzhao/blog/1541638 vue.js2.0实战( ...
随机推荐
- 常用数列总结&性质记录
1.斐波那契数列 P.S.:这里首项下标为 1 递推式:\[F_i=F_{i-1}+F_{i-2},F_1=F_2=1\] 性质: \(1.\sum^{n}_{i=1}F_{i}=F_{n+2}-1\ ...
- SpringCloud微服务面试题
spring data是spring用于简化spring开发中数据访问操作的项目spring Dataspring Data为我们提供了使用统一的API来对数据访问层进行操作,这主要是Spring D ...
- std::string 和 CString问题
std::string stdTemp; CString strTemp; strTemp = stdTemp; ;//这一步直接赋值可不可以 因为CString可以接受const char*的 ...
- 【bzoj1026】[SCOI2009]windy数
*题目描述: windy定义了一种windy数.不含前导零且相邻两个数字之差至少为2的正整数被称为windy数. windy想知道,在A和B之间,包括A和B,总共有多少个windy数? *输入: 包含 ...
- iOS 消息转发以及 NSProxy 实战
最后更新: 2018-01-17 一.消息派发机制-NSObject 在 iOS 开发中, 调用对象的方法就是给对象发送一个消息.了解消息的派发机制对于iOS开发来说是一个很实用且强大的工具, 下面我 ...
- 大哥带我们的mysql注入 基于时间的盲注
?id= and ,,sleep()) ?id= and ,,sleep()) if语句/if()函数 在基于时间型SQL盲注中,我们经常使用条件语句来判断我们的操作是否正确: ?id= and = ...
- 程序员心髓：移动应用API设计10大技巧
移动App与基于Web/云服务发生对话是很常见的事情,最简单的可能仅仅只是检索数据,但也可能包含发送数据.用户授权和管理.而这也就验证了为移动应用建立API的重要性,为此,我们特总结了10大移动API ...
- 高级软件测试技术-任务进度-Day03
任务进度11-15 使用工具 Jira 小组成员 华同学.郭同学.穆同学.沈同学.覃同学.刘同学 任务进度 经过了前两天的学习任务的安排,以下是大家的任务进度: 穆同学(任务1) 1.今天就接着昨天的 ...
- What is 'typeof define === 'function' && define['amd']' used for?
What is 'typeof define === 'function' && define['amd']' used for? This code checks for the p ...
- input绑定事件
<input type="text" oninput="functionName()">