Es6系列之module and class

Ecmascript 6简称es6,是javascript下一代标准,还处在开发阶段,估计2014年底发布,有关更多浏览器对es6的支持情况,点击这里

今天说说es6里新增的Module和Class.

Class

关于class其实前端已有太多的模拟了,因为js本身的弱类型决定了只要你有想法什么编程模式都可以模拟出来,跟class相关的oop模式早已在后端领域扎根了,前端class概念大多是通过function函数来实现,现在我们来看看es6提供了什么语法?,我们先以下例子来说明,这样比较直观

提示下,下面的例子最后实现的是一个backbone里的模型与视图

class Model {

 constructor(properties){

 this.properties = properties;

 toObject(){

 return this.properties;

可以看到es6原生提供了class关键字来定义类,提供了constructor来实现后端的构造函数,内部以this来代表当前实例

除了构造函数,普通函数除掉了function关键字,目前没有提供关于方法的保护属性比如private,public,protect,要是以后能提供这些关键字的话倒是不错

下面我们再来看看class里的继承,es6提供了extends来支持

// 先定义一个父类,这里是视图类

class View{

 // 构造函数

 constructor(options){

 this.model = options.model;

 this.template = options.template;

 render(){

 return _.template(this.template, {name: feenan, info: haha});

// 然后我们定义一个继承上面视图的日志子类,然后重载render方法

class LogView extends View{

 render(){

 var complied = super();

 console.log(complied);

通过上面的例子我们知道通过在定义类后面加上extends关键字实现继承

这里重载父类方法不需要额外加任务关键字，不像后端有些语言要加上override

在重载方法里使用super(),默认会调用同名的父类方法

目前es6里的class定义只是一些基础的功能，相信以后还会增加一些别的特性,比如提高属性或者方法的封装性.

Module

目前的前端模块规范有CMD,AMD,不过commonjs也可以用于前端开发只是需要工具来支持

为什么需要模块呢?大家可以看看我之前的一篇文章,传送门:)

模块解决的问题无非是这几点:

像上面这样定义的模块,在使用的时候导入模块方法的时候可以省掉别名，这个下面会讲到

定义完模块之后,可以来使用它了.

import 从模块文件中导入功能到使用的文件中

// 使用export 定义的模块功能

import {obj, print} from ./module

// 使用export default 定义的模块功能

import md from ./module1

使用import的时候有两种情况

用export 定义的模块,import的时候后面一定得写上{},里面的功能名称得跟模块定义里的相匹配,否则会报错

用export default 定义的模块功能,import 后面不用跟上{},而且导入的名称也可以随意写,不必跟模块定义里的相同

使用module关键字可以导入模块内所有支持导出的方法,后面的别名可以随意命名.

一个完整的例子

下面我们使用module和class来写一个例子,利用上面的Model与View,下面是完整的代码

model.js

// 定义模型数据 

export class Model {

 constructor(properties){

 this.properties = properties;

 toObject(){

 return this.properties;

log.view.js 此处的父类View其实也可能做成模块导入进来

// 导入underscore

import { underscore } from ./underscore;

// 获取_变量

_ = underscore._;

// 定义一个视图

class View{

 // 构造函数

 constructor(options){

 this.model = options.model;

 this.template = options.template;

 render(){

 return _.template(this.template, {name: feenan, info: haha});

export class LogView extends View{

 // 重载render方法

 render(){

 var complied = super();

 console.log(complied);

underscore.js 这里只写个样子,因为代码太长

export var underscore = {}; 

// 下面是underscore源码部分

(function() {

 // 这里代码太长就不写了....

 // ......

}).call(underscore);

main.js 这里是调用的地方

import { Model } from ./model;

import { LogView } from ./log.view;

var m = new Model({

 name: feenan,

 info: frontender

var v = new LogView({

 model: m,

 template: hello %= name% ! %= info% 

v.render();

上面就是完整代码，下面说说怎么运行此例子.

关于上面的例子可以通过安装traceur模块来进行测试

npm install -g traceur

运行例子如下

traceur main.js

es6里的Module与Class统一了前端模块的调用与依赖加载,以及类的规范定义,真心觉的这个很不错,当所有浏览器都原生支持这个特性的时候,相信现在的require.js,seajs基本都用不上了,而且模块加载的性能也会上一个台阶.

ES6-Class如何优雅的进行“糖化” 这是一篇番外篇，其实他的主线是由一篇ES6-Class科普文章引发的“惨案”。虽然是番外篇，但是有些剧情还是不容错过的。 现在我们来进入番外篇的主线：ES6的Class是ES5构造函数的语法糖。
ES6相关知识——class JS查漏补缺系列是我在学习JS高级语法时做的笔记，通过实践费曼学习法进一步加深自己对其的理解，也希望别人能通过我的笔记能学习到相关的知识点。这一次我们来了解ES6相关知识——class
ES6 - class的学习 http://es6.ruanyifeng.com/#docs/class：class Person { constructor{ //构造函数，里边放不被继承的私有属性和方法 this.property1 = 第一个私有属性 //属性结尾用分号 } //不写在constructor里边...