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实战( ...
随机推荐
- 【Spring】Spring-Session-Data-Redis实现session共享
前言 在开发中遇到一个关于用户体验的问题,每次当运维进行更新重启服务器时,都会导致会员平台中已登录的用户掉线.这是因为每个用户的会话信息及状态都是由session来保存的,而session对象是由服务 ...
- 【NOIP2016提高A组模拟9.17】序列
题目 分析 首先用\(a_i\)表示达到目标的步数\(B_i-A_i(mod 4)\) 根据粉刷栅栏,先不管mod 4的情况,答案就是\(\sum\max(a_i-a_{i+1},0)\) 那我们刚才 ...
- 【leetcode】1105. Filling Bookcase Shelves
题目如下: We have a sequence of books: the i-th book has thickness books[i][0] and height books[i][1]. W ...
- jQery Datatables回调函数中文
Datatables——回调函数 ------------------------------------------------- fnCookieCallback:还没有使用过 $(documen ...
- codevs 1126 数字统计 2010年NOIP全国联赛普及组 x
题目描述 Description 请统计某个给定范围[L, R]的所有整数中,数字2出现的次数. 比如给定范围[2, 22],数字2在数2中出现了1次,在数12中出现1次,在数20中出现1次,在数21 ...
- JavaWeb学习篇之----浏览器缓存问题详解
摘要 1.Etag和Expires中Client 端Http Request Header及Server端Http Reponse Header工作原理. 2.静态下Apache.Lighttpd和N ...
- Firefox_64.0 中selenium ide_3.4.4的使用教程（实操）
说明:旧版的selenium IDE有很多功能,在新版中都去除了,很多功能都做不了. 写于:2018.12.31 一.安装selenium IDE 下载和安装这里推荐参考文章:https://blo ...
- tp32-layuicms项目介绍
项目结构: 项目截图: 登录页 文章列表 码云仓库:https://gitee.com/lim2018/tp32-layuicms
- eclipse 简单配置
1.安装STS4 help-->Eclipse Maketplace-->search 'STS'-->install 2.代码提示 Window-->preferences- ...
- git强行覆盖master分支
目录 我遇到的场景 需要注意的预备操作 操作步骤 我遇到的场景 1.master分支只为护较早的版本 2.由于业务不稳定,新业务和功能都在dev 分支上,dev的开发周期很长,一直变更迭代 3.从de ...