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实战( ...
随机推荐
- ESP8266--WIFI热点扫描
现在,通常,为了让手机连上一个WiFi热点,基本上都是打开手机设置里面的WiFi设置功能,然后会看到里面有个WiFi热点列表,然后选择你要的连接上. 基本上你只要打开手机连接WiFi功能,都会发现附近 ...
- 016：URL命名与反转URL
为什么需要URL命名? 主要解决蛋疼url变化情况,比如:哪天项目经理或领导过来说,把login改成signin,把register改成signup等蛋疼的需求——因为一旦改了url后,相关视图函数里 ...
- DOM操作元素
DOM 操作元素 JavaScript的DOM操作可以改变网页内容.结构和样式.我们可以利用DOM操作元素来改变元素里面的内容.属性等. DOM操作元素: 一.操作元素:(一)innerText .( ...
- win10 搜索框输入没提示
1.点击win, 手动在应用里找到Cortana(小娜) 2. 点右键->更多->应用设置,进入到下面的界面 3. 下拉到最下面,找到“重置”即可
- BZOJ 4423: [AMPPZ2013]Bytehattan 平面图转对偶图 + 并查集
Description 比特哈顿镇有n*n个格点,形成了一个网格图.一开始整张图是完整的.有k次操作,每次会删掉图中的一条边(u,v),你需要回答在删除这条边之后u和v是否仍然连通. Input 第一 ...
- Sparrow 开发板化身电脑音量调节器
前言 原创文章,转载引用务必注明链接,水平有限,如有疏漏,欢迎指正. 之前的新浪不能用啦,这次部分图片用的sm.ms的图床,加载慢,请耐心,准备换图床. 1.开箱简介 来填坑了!这次是 Sparrow ...
- 【转】BYV--有向图强连通分量的Tarjan算法
转自beyond the void 的博客: https://www.byvoid.com/zhs/blog/scc-tarjan 注:红色为标注部分 [有向图强连通分量] 在有向图G中,如果两个顶点 ...
- Oracle-手工生成AWR
运行awrrpt脚本 SQL> @?/rdbms/admin/awrrpt Current Instance ~~~~~~~~~~~~~~~~ DB Id DB Name ...
- 用命令行编译运行java文件的乱码问题
之前在写的时候没有遇到过这个问题,用惯了eclipse之后突然用Notepad++就出现乱码了 我在编写的时候 指定Noepad++的编码是 UTF-8编码,然后进入命令行,编译的时候就出现了乱码 然 ...
- js 扫码枪的输入
关于js 获取扫码枪的输入获取方式,之前在网上搜了好多,都是大同小异的,都是说扫码枪输入的时间间隔不会超过30毫秒.但事实上我拿了几台电脑测试的结果是,有的时间间隔甚至超过了100毫秒,所以用时间间隔 ...