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实战( ...
随机推荐
- Vue结合webpack实现路由懒加载和分类打包
https://blog.csdn.net/weixin_39205240/article/details/80742723
- shell练习--PAT题目1007：关于素数对（失败案例）
让我们定义dn为:dn=pn+1−pn,其中pi是第i个素数.显然有d1=1,且对于n>1有dn是偶数.“素数对猜想”认为“存在无穷多对相邻且差为2的素 ...
- Redis实战（十七）Redis各个版本新特性
序言 Redis1.0 Redis2.0 Redis3.0 Redis4.0 Redis5.0 资料
- ZOJ 1610 Count the Colors (线段树成段更新)
题意 : 给出 n 个染色操作,问你到最后区间上能看见的各个颜色所拥有的区间块有多少个 分析 : 使用线段树成段更新然后再暴力查询总区间的颜色信息即可,这里需要注意的是给区间染色,而不是给点染色,所以 ...
- CDOJ 1070 秋实大哥打游戏 带权并查集
链接 F - 秋实大哥打游戏 Time Limit:1000MS Memory Limit:65535KB 64bit IO Format:%lld & %llu Submit ...
- Tire树简介
又称单词查找树,Trie树,是一种树形结构,是一种哈希树的变种. 典型应用:用于统计,排序和保存大量的字符串(但不仅限于字符串),所以经常被搜索引擎系统用于文本词频统计. 它的优点是:利用字符串的公共 ...
- ModelSerializer 使用知识点_serializers.SerializerMethodField()使用场景总结
serializers.SerializerMethodField和钩子方法结合,可以实现对ModelSerializer类的一些字段进行二次加工,返回,如下:1.对以ModelSerializer的 ...
- 更好的构建 Node 服务的工具
更好的构建 Node 服务的工具 无论前端项目在打包后都发送给后台, 有时候自己想看看效果在运行 npm run build 后只是看到一个 build 文件夹,但是直接打开是无法浏览,因此需要开启一 ...
- Jar包方式运行web项目
使用Maven进行打包 在自己的电脑终端中进入到pom.xml文件的目录中执行maven打包.命令为: mvn clean package 1 成功的标志为上面显示BUILD SUCCESS成功打包 ...
- 关于option标签的selected属性
当item的dict_id和custSource一样,那么当前的item的name就被选中并显示在页面 如果直接写selected="selected",就等于直接回显这个集合中最 ...