JavaScript面向对象变成的几种写法

1.模块化

(function (){
    function Tab(options){//构造函数
        // this.init(options);
    }
    // 初始化方法
    Tab.prototype.init = function (options){//初始化方法
        // 获取元素
        this.tits = this.getElements(options.tits);//添加属性
        this.cons = this.getElements(options.cons);//添加属性
        return this;//返回实例化对象，这样可以方便链式操作
    }
    // 设置类名的方法
    Tab.prototype.setClass = function (dom,oClass){
        dom.className = oClass;
    }
    // 获取元素的方法
    Tab.prototype.getElements = function (selector){
        return document.querySelectorAll(selector);
    }
    // 获取当前下标
    Tab.prototype.getIndex = function (){
        return this.prevIndex;
    }
   	}
    // 返回一个实例对象
    function factory(options){
        return new Tab().init(options)
    }
    window.tab = factory;// 对外公开接口
})();

var tab1 = tab({
    tits: '.part1 .header h3',
    cons: '.part1 .content div',
    showIndex: 3
});

这种动态添加方法到原型上的方法比较繁琐，每次都要写 类名.prototype.方法名

2.模块化二

(function (){
    function Tab(options){
        this.init(options);
    }
    // 原型对象上的属性方法
    Tab.prototype = {
        constructor: Tab,//指正构造器
        init: function (options){
            // 获取元素
            this.tits = this.getElements(options.tits);
            this.cons = this.getElements(options.cons);
            return this;// 链式调用需要
        },
        setClass: function (dom,oClass){
            dom.className = oClass;
        },
        getElements: function (selector){
            return document.querySelectorAll(selector);
        },
        getIndex: function (){
            return this.prevIndex;
        },
    }
    // 返回一个实例对象
    function factory(options){
        return new Tab(options);
    }
    window.tab = factory;// 对外公开接口
})();

var tab1 = tab({
    tits: '.part1 .header h3',
    cons: '.part1 .content div',
    showIndex: 3
});

这种跟第一种很类似，只不过添加原型上的方法的方式不同，这种方法需要指正构造器。

3.模块化三

(function (){
    function Tab(options){
        this.init(options);
    }
    // 原型对象上的属性方法
    Tab.prototype = {
        constructor: Tab,//指正构造器
        init: function (options){
            // 获取元素
            this.tits = this.getElements(options.tits);
            this.cons = this.getElements(options.cons);
            return this;// 链式调用需要
        },
        setClass(dom,oClass){
            dom.className = oClass;
        },
        getElements(selector){
            return document.querySelectorAll(selector);
        },
        getIndex(){
            return this.prevIndex;
        },
    }
    // 返回一个实例对象
    function factory(options){
        return new Tab(options);
    }
    window.tab = factory;// 对外公开接口
})();

var tab1 = tab({
    tits: '.part1 .header h3',
    cons: '.part1 .content div',
    showIndex: 3
});

这种方法将原型添加方法的function关键字强调了，跟ES6的class很像

4.ES6的class语法糖