JavaScript的中面向对象思想和组合继承

JavaScript面向对象

在最开始接触JavaScript的时候，我们大部分应该是在编写浏览器可执行的JavaScript脚本【node除外】，一种面向过程的变成思想可能会悄然而生，一些交互+事件监听系统很容易让我们写出流程式的代码，不过随着系统越来越大，结构越来越复杂，这样的书写方式已经变得极难维护了，复用性也可想而知，这里在公司被灌输了JavaScript的面向对象编程思想。

面向对象 oop

这里结合业务相关的需求进行分析；看图说话：

一张segmentfault的页面，红圈框住的部分是一个很明显的重复格式的渲染dom；每个人看了都会有自己的实现方法，这里看看本文将介绍的面向对象的方法；

实现思路

1. 模板书写
2. 对应js封装
3. js引用

既然是重复的格式，那么大部分情况下可以考虑使用模板【这里不讨论react之类的做法】，一段比较常见的模板如下：

<div id="container"></div> //这是模板的父级元素，需要提前写好

{{#info}}
<div class="flex-box js-item-shortcup">
    <div class="flex-item">
            <p>{{tickets_no}}</p>
            <p>得票</p>
    </div>
    <div class="flex-item problem-status">
            <p>{{answer_no}}</p>
            <p>回答</p>
    </div>
    <div class="flex-item scan-status">
            <p>{{scan_no}}</p>
            <p>浏览</p>
    </div>
    <div class="flex-item">
            <p>{{user-name}}</p>
            <p>{{title}}</p>
            <p>
                {{#tags}}
                <span>.</span>
                {{/tags}}
            </p>
    </div>
</div>
{{/info}}

这是对应这个格式的mustache模板，没用过这个也没关系，反转和正常的HTML没有啥区别；只不过数据时js来渲染出来的；这个时候就需要书写封装的js，这个js是完全独立的，一种比较常见的思想是使用模块来封装，可以考虑COMMONJS的require--exports或者es6的import、export；这里讲述的是es6的方式；整体思路是这样的：

• 编写构造函数，缓存dom节点和数据；
• 通过prototype进行扩展；依次扩展init【初始化】、getData【可能异步获取数据】、randerData【渲染数据到dom】、bindEvent【绑定事件】

import 'jquery';

var ListModule = function(url){
    //缓存dom节点，避免多次获取;
    this.$container= $("#container");
    this.url = url;
}
ListModule.prototype = {
    init: function(){
        this.getData(); //假装是同步的，虽然写了异步
        this.renderData();
        this.bindEvent();
    },
    getData: function(){
        var self = this;
        $ajax({
            url: this.url,
            success: function(data){
                data.status && self.data = data.data;
            }
        });
    },
    renderData: function(){
        render(this.$container,this.data);
    },
    bindEvent: funtion(){
        this.$container.on('click','.js-item-shortcup',function(){
            //dosomething
        });
    }
}

export default ListModule;  //导出构造函数

这样就可以在其他的js里面引入这个构造函数，可以进行实例化new操作，然后就可以调用实例化对象的各个函数了；

tips

1. 可以注意在JavaScript中使用的class最好加上 js- 这样的前缀；
2. 面向对象可以在this中缓存dom和数据，不用全局变量；
3. 面向对象最好能抽象出每个功能，这样书写更为简便。