在BaseComponent.js中继承optionable.js中的类,请问怎么改?

在BaseComponent.js中继承optionable.js中的类,然后在BaseComponent.js使用extend()函数对Optionable进行扩展,为什么我这么写运行不了,请问怎么改?

BaseComponent.js

import Optionable from './optionable'

function cloneObj(oldObj) { //复制对象方法
    if (typeof(oldObj) != 'object') return oldObj;
    if (oldObj == null) return oldObj;
    var newObj = Object();
    for (var i in oldObj)
        newObj[i] = cloneObj(oldObj[i]);
    return newObj;
}

function extend() { //扩展对象
    var args = arguments;//将传递过来的参数数组赋值给args变量


    //调用复制对象方法
    var temp = cloneObj(args[0]);


    for (var n = 1; n < args.length; n++) {
        for (var i in args[n]) {
            temp[i] = args[n][i];
        }
    }
    return temp;
}

const BaseComponent = Optionable.extend({
    getSupportEvents: function () {
        return ['render', 'click', 'mouseup', 'mousedown', 'mousemove', 'mouseover', 'mouseout', 'optionChange'].concat(this._getSupportEvents());
    },

    _getSupportEvents: function () {
        return [];
    },
        /**
         * 最小高度
         * @type {number}
         */
    minHeight: 10,
        /**
         * 最小宽度
         * @type {number}
         */
    minWidth: 10,
        /**
         * 初始化
         * @param {string=} id
         * @param {Object} serialize
         * @returns {exports}
         * @private
         */
    _init: function (id, serialize) {
        var self = this;


            serialize = self.originSerialize = serialize || {};

            self.rendered = false;

            return self;
    }
});

optionable.js

const Optionable = {

    _init: function () {
        var self = this;

        self.options = {};

        self.optionNames = [];

        self._super();

        // 监听属性变化的事件列表
        self._watchOptionEvents = {};

        // 监听属性变化
        self.bind('optionChange', function (value, name) {

            _.each(self._watchOptionEvents[name], function (event, index) {

                if (event && _.isFunction(event.callback)) {

                    _.caller(event.callback, value, name, self);

                    if (event.once == true) {
                        delete self._watchOptionEvents[name][index];
                    }
                }

            });
        });

        self._defineOptions = self.getDefineOptions();


        return self;
    },
    getDefineOptions: function () {
        return {};
    }
}

export default Optionable

我改了一下原来的函数

class.js

/**
 * @class
 * @constructor
 */
function Class() {

}

/**
 * 销毁
 */

Class.prototype.destroy = function () {
    var self = this;
    // 自动销毁全部
    _.each(self, function (v, k) {
    // 如果也是一个Class,同样调用destroy方法销毁
        if (v instanceof Class && !v.deleted) {
            self[k].destroy();
        } else {
            // 否则直接设置为 null
            self[k] = null;
        }
    });
    // 标记已销毁
    self.deleted = true;
};

    /**
     * 类继承
     * @returns {Class}
     */
    Class.extend = function extend() {

        var prototype = new this();
        var _super = this.prototype;

        // 可以一次传入多个props,越往后优先级越高
        var args = [].slice.call(arguments, 0);
        var props = {};
        args.unshift(props);
        args.unshift(true);
        // 合并所有的props
        _.extend.apply(null, args);

        for (var name in props) {
            if (props.hasOwnProperty(name)) {

                // 如果属性是一个方法,并且是继承父级的方法
                if (_.isFunction(props[name]) && _.isFunction(_super[name])) {

                    // 改写原方法
                    prototype[name] = (function (super_fn, fn) {

                        return function () {
                            var tmp = this._super;
                            // 使方法内部可以通过_super调用到父级方法
                            this._super = super_fn;

                            var ret = fn.apply(this, arguments);

                            this._super = tmp;

                            if (!this._super) {
                                delete this._super;
                            }
                            return ret;
                        }
                    })(_super[name], props[name]);

                    // 如果是一个对象,则与父级合并
                }
                /*
                else if (_.isObject(props[name])) {

                    prototype[name] = _.extend(true, {}, _super[name], props[name]);

                }
                */
                else {

                    prototype[name] = props[name];

                }

            }

        }

        function Constructor() {


        }

        Constructor.prototype = prototype;
        Constructor.prototype.constructor = Constructor;

        Constructor.extend = extend;

        /**
         * 通过create来获取实例化对象
         * @returns {Constructor}
         */
        Constructor.create = function () {

            // 实例化类
            var instance = new this();

            // 调用_init方法
            if (_.isFunction(instance._init)) {
                instance._init.apply(instance, arguments);
            }

            // 返回实例
            return instance;
        };
        return Constructor;
};

export default Class

eventful.js

import Class from './class';


const Eventful = Class.extend({
    _init: function () {

        console.log('Eventful')

        return this;
    }
})

export default Eventful

图片描述

阅读 2.2k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题