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实战( ...
随机推荐
- 在UIScrollView、UICollectionView和UITableView中添加UIRefreshControl实现下拉刷新
Apple在iOS 6中添加了UIRefreshControl,但只能在UITableViewController中使用,不能在UIScrollView和UICollectionView中使用. 从i ...
- 对vue的solt的理解
//父 <children> <span>12345</span>//这边不会显示 </children> //子 components: { chil ...
- app自动化的执行
appium --address 127.0.0.1 --port 10000 --bootstrap-port 10100 --webdriveragent-port 10110 在指定的目录下执行 ...
- C++ - 操作运算符
一.操作运算符 操作运算符:在C++中,编译器有能力将数据.对象和操作符共同组成表达式,解释为对全局或成员函数的调用 该全局或成员函数被称为操作符函数,程序员可以通过重定义函数操作符函数,来达到自己想 ...
- Elastic-Job介绍
1 什么是分布式任务调度 什么是分布式?当前软件的架构正在逐步转变为分布式架构,将单体结构分为若干服务,服务之间通过网络交互来完成用户的业务处理,如下图,电商系统为分布式架构,由订单服务.商品服务.用 ...
- TCP连接的11种状态，三次握手四次挥手原因
1).LISTEN:首先服务端需要打开一个socket进行监听,状态为LISTEN. /* The socket is listening for incoming connections. 侦听来自 ...
- go语言系列--golang在windows上的安装和开发环境goland的配置
在windows上安装golang软件 golang中国网址为:https://studygolang.com/dl 我的学习选择版本:1.12.5 golang 1.12.5版本更新的内容:gola ...
- 管理es索引-使用 Xput创建索引
curl是利用URL语法在命令行方式下工作的开源文件传输工具,使用curl可以简单实现常见的get/post请求.简单的认为是可以在命令行下面访问url的一个工具.在centos的默认库里面是有cur ...
- java 强弱软虚 四种引用，以及用到的场景
1.利用软引用和弱引用解决OOM问题:用一个HashMap来保存图片的路径和相应图片对象关联的软引用之间的映射关系,在内存不足时,JVM会自动回收这些缓存图片对象所占用的空间,从而有效地避免了OOM的 ...
- Oracle数据库备份还原
导出备份的命令: 开始->运行->cmd->exp username/password@tns_name file=d:\backup.dmp 导入备份的命令: 开始->运行- ...