ES6实战

ES6的基本使用实战

ES6文件建立,实现父类、子类、继承等,ES6自动编译多个入口文件、异步加载模块、引入到页面使用编译好的JS文件,配合Vue.js做一个简单的数据渲染

2018-05-18侠课岛    初级拔高       

前端/前端必修/搭建Webpack编译ES6环境 17     0     2872

上节讲过了如何配置编译ES6,这节我们来稍微讲解一下如何在项目中使用ES6,包括ES6类的概念,以及父类与子类之间的继承等,同时还会介绍异步加载模块。

建立ES6的基类

ES6的类实际上就是ES5原型链的语法糖,其中constructor - 构造方法是类的默认方法,通过new命令生成对象实例时,会自动调用该方法,而其他的方法都被定义在类的原型链上,在类的实例上面调用方法,其实就是调用原型上的方法。这跟ES5构造函数的思路是一致的,只是在写法上略有不同,新的class写法让对象原型更加清晰,更符合面向对象的编程思想。

另外,类还有静态方法,它不能被重写也不能被继承,也不能被类的实例调用,只能使用类名来调用。

我们在上节新建的./src/es6文件夹下创建一个modules文件夹,用来存放我们需要创建的类,并创建一个base.es6,作为基类。因为不在同一个层级下,所以modules下面的文件不会被编译成webpack的入口文件。

// base.es6
class Base{
    constructor(name) {
        console.log('模块基类构造函数');
        Base.init();  //静态方法只能用类名来调用
    };
    //静态方法子类不能重写和继承
    static init () {
       console.log('模块基类静态方法');
    };
    begin(){
       console.log('模块基类可以重写的方法');
    }
}
export default Base;

建立继承基类

建立好基类之后,我们在同级目录下再创建两个modal.es6和video.es6文件,在里面引入进基类,并继承它。这样base.es6就变成了父类,而modal.es6就是它的子类。在子类中,调用关键字super可以访问父类的除静态方法以外的其他方法,super必须在子类的构造函数中声明。

7.png

8.png

类的引入与异步加载

在实际项目中,我们可以把每个功能模块写在类中,然后在需要的页面对应的入口文件引入进行调用,实现模块化的编程,减少重复代码。

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

17

本课评分:
  •     非常好
难易程度:
  •     适中的
|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?