/**
 * @file 组件基类
 * @author sushuang(sushuang@baidu.com)
 */
/* jshint evil:true */
define(function (require) {

    var $ = require('jquery');
    var lib = require('dt/lib');
    var tpl = require('dt/tpl');
    var getByPath = lib.getByPath;
    var setByPath = lib.setByPath;
    var inner = lib.makeInner();

    // 基础css class
    var BASE_CSS = 'dtui-cpt';
    var ORIGINAL_HTML_KEY = '\x06\x06\x06__originalHTML';

    /**
     * 使用例子（模板以etpl为例）：
     *
     * 首先在 componentConfig.js 中挂上 someCpt 对应的 AMD module：
     *     cptClasses['someCpt'] = require('some/some/some');
     *
     * 能够在本component的模板中声明子component：
     *     {{ target: tplOfThisComponent }}
     *     ...
     *     <div data-cpt="
     *         type: 'someCpt',
     *         name: 'aSubCpt'
     *         viewModel: {
     *             someAttr1: viewModel.some,
     *             someAttr2: lib.ob(123)
     *         }"></div>
     *     ...
     *     {{ /target }}
     *
     * 另一个例子：
     *     {{ target: tplOfThisComponent }}
     *     ...
     *     <div data-cpt="
     *         type: 'someCpt',
     *         name: 'aSubCpt',
     *         viewModelGet: 'someData'"></div>
     *     ...
     *     {{ /target }}
     *
     *     然后在 本Component的_prepare 方法中，
     *     把子component的初始化数据挂在 this._viewModel().someData 上即可传入子component。
     *
     * data-cpt中可使用的属性：
     *      type: 必选。表示组件类的别名。
     *      name: 可选，给定name则能在父component取得子component实例。
     *            例如：name为'aSubCpt'，则 this._sub('aSubCpt') 就是子component实例。
     *            支持对象和数组，例如：
     *            name为'items[aSubCpt]', 则 this._sub('items')是包含子component的数组。
     *            name为'items.aa.bb.aSubCpt', 则 this._sub('items.aa')是 {bb: subComponent}。
     *      viewModel: 可选。表示要传入的viewModel，如 viewModel: {list: this.viewModel('dataList')}。
     *      viewModelGet: 可选。表示viewModel的引用路径，如 viewModel: 'dataList'。
     *
     * 父component被dispose时，会自动dispose用模板声明方式建立起来的子component。
     *
     * 每个component自动含有这两个observable对象：
     * this.viewModel('visiable') // 控制可见性（display:none)
     * this.viewModel('disabled') // 控制disabled状态（css加class：xxx-disabled）
     * 两个对象均可依据外部传入的值进行初始化，如：
     *     <div data-cpt="
     *         type: 'someCpt',
     *         viewModel: {disabled: viewModel.disabled}"></div>
     *
     * 在component内部手动创建一些实体时，如果需要进行dispose，可方便得使用_disposable方法。
     *
     * 如果想延迟模板的渲染和子component的创建，可不设定tplTarget，并在适当时机手动调用_applyTpl方法。
     *
     * @exports Component
     */
    var Component = inner.attach(lib.newClass(lib.enableEvent({

        /**
         * 代码中获取define中内容，请使用：this._getDefineProperty('nameKey')
         *
         * @protected
         */
        _define: {

            /**
             * 本组件对应的tpl内容
             * 例如使用 require('tpl!somefile.html') 得到
             * （构建的时候会自动合并所有tpl文件）
             * 或者直接在js中写html内容
             *
             * @type {string}
             * @protected
             */
            tpl: '',

            /**
             * 本组件对应的tpl的target（参见etpl）
             * 如果被设定，则在component创建过程中自动进行_applyTpl。
             *
             * @type {string}
             * @protected
             */
            tplTarget: '',

            /**
             * 本组件对应的默认的css类型，可以不设置。
             * 如需要多个css，请传数组。
             *
             * @type {(string|Array)}
             * @protected
             */
            css: '',

            /**
             * 本component的属性，以及默认值。
             * 会和祖先类的viewModel merge。
             * 控件初始化传入的viewModel中的属性，必须现在此处定义。
             * 设定成“函数”而非直接对象，因为不应在prototype上挂单例
             *（否则就需要viewModel里面的数据提供clone能力了），
             * 而应是每次实例构造时候生成实例。
             *
             * @protected
             * @return {Object} viewModel
             */
            viewModel: function () {
                return {
                    // 本文中 disabled 表示不能接受用户输入，
                    // 但是并不表示不能被程序更新，也不意味着不可见。
                    // 在initMainEl中进行初始化
                    // @type {lib.ob}
                    disabled: null,
                    // 可见与否。不可从外部传入。
                    // 在initMainEl中进行初始化，根据主元素的初始display状态来初始化。
                    // @type {lib.ob}
                    visible: null,
                    // 额外的css class。如果需要多个css，请传数组：['css1', 'css2']
                    // @type {(string|Array.<string>)}
                    css: '',
                    // 如果需要的话，可以从外部传入基础模板target（很少会这么做）
                    // @type {string}
                    tplTarget: null,
                    // 默认是innerHTML方式，还可设为'prepend', 'append'方式
                    // @type {string}
                    tplRenderMode: 'html'
                };
            },

            /**
             * @see this.viewModel(path)
             * @see lib.getByPath
             * 默认viewModel中的内容是private的。
             * 在此处可以定义public的属性路径（复杂路径可为a.b[3]）。
             * 从而可用 this.viewModel(path) 获取。
             * 默认全private是为了避免对象细节不受控得暴露，从而以后难于修改。
             *
             * @type {Array}
             * @protected
             */
            viewModelPublic: ['disabled', 'visible'],

            /**
             * 每项为viewModel第一层属性名。
             * 设置此项时，此项指定的viewModel中第一层属性，会被clone赋值
             *（无法clone的部分引用赋值，无法clone @see lib/model.js）。
             * 此项为空时，外部传入的viewModel对第一层以下的内容全是引用赋值。
             *
             * @type {Array}
             */
            viewModelMerge: [],

            /**
             * 是否只有viewModel中规定的属性可以传进来。
             * 默认true。
             *
             * @type {boolean}
             */
            viewModelOnlyAccessDeclaredProperties: true,

            /**
             * 是否阻止初始化子Componnet。某些Component不希望拥有子Component，
             * 而是使子Component隶属于祖先（例如tab控件）。
             *
             * @type {Boolean}
             */
            suppressConstructSub: false

        }, // end _define

        /**
         * 渲染前的准备
         * 子类来实现此方法
         *
         * @protected
         */
        _prepare: $.noop,

        /**
         * 自身的初始化
         * 子类来实现此方法
         *
         * @protected
         */
        _init: $.noop,

        /**
         * 自身的析构，在子组件析构前执行。
         * 子类来实现此方法。
         *
         * @protected
         */
        _dispose: $.noop,

        /**
         * 自身的析构，最后执行。
         * 子类来实现此方法。
         *
         * @protected
         */
        _disposeFinally: $.noop,

        /**
         * 自身的初始化后的执行逻辑，可能反复调用。
         * 子类来实现此方法。
         *
         * @protected
         * @param {boolean} isRefresh 初始化后第一次执行则值为false，以后均为true
         */
        _run: $.noop,

        /**
         * 得到带有本实例的 namespace 的 dom event。
         * 带有 namespace 的 dom event 会在 dispose 时自动被 off 掉。
         * 所以约定所有的 dom event 都要用此方法生成，例如：
         * $el.on(this._event('click'), function () {... handler ... });
         *
         * @protected
         * @param {string=} eventName dom事件名。
         *                            如果缺省，则返回事件 namespace，可直接用来el.off()。
         *                            例如：$el.off(this._event())。
         * @return {string} 加上了本实例的 namespace 的 dom事件名；或者事件 namespace。
         */
        _event: function (eventName) {
            var ns = inner(this).eventNamespace;
            return (eventName != null ? eventName : '') + ns;
        },

        /**
         * parse构造时传入的viewModel。如需要可override。不要去直接调用此方法。
         *
         * @protected
         * @param {*} inputViewModel 输入的viewModel
         * @param {Object} cptDef 模板中的配置参数
         * @return {Object} inputViewModel 输入的viewModel
         */
        _parseViewModel: function (inputViewModel, cptDef) {
            return inputViewModel;
        },

        /**
         * parse构造时传入的def。如需要可override。不要去直接调用此方法。
         *
         * @protected
         * @param {Object} cptDef cpt定义
         * @return {Object} cptDef cpt定义
         */
        _parseCptDef: function (cptDef) {
            return cptDef;
        },

        /**
         * 构造。不建议override此方法。
         *
         * @protected
         * @param {(HTMLElement|jQuery)=} $el 主容器
         * @param {Object=} viewModel viewModel
         * @param {Object=} def 模板中data-cpt中声明的变量
         */
        _construct: function ($el, viewModel, def) {
            arguments.length > 0 && lib.assert($el != null); // 这种错误太常见了

            // 可以初始化无主元素的component
            if (!$el || $.isPlainObject($el)) {
                def = viewModel;
                viewModel = $el;
                $el = null;
            }
            else {
                $el = $($el);
            }

            def = $.extend({}, def);
            lib.isComponent(this, true); // 标记为Component。

            var innerThis = inner(this);
            innerThis.cptDef = def;
            // 事件的名空间
            innerThis.eventNamespace = '.namespace' + lib.localUID();
            // 存放子组件，格式为：{name: someSubComponent}
            innerThis.subComponents = {};
            innerThis.sub$Els = {};
            innerThis.disposed = false;
            innerThis.cptDisposableArea = {};
            innerThis.cptInstanceUID = 'cpt-instance-' + lib.localUID();


            initViewModelControlMap.call(this);
            viewModel = this._parseViewModel(viewModel || {}, def) || {};
            setViewModel.call(this, viewModel);

            initCssDefine.call(this);
            initInnerViewModel.call(this);
            initMainEl.call(this, $el);

            this._prepare();
            applyBaseTpl.call(this);
            this._init();
        },

        /**
         * 析构。不建议override此方法。
         * 此方法只可被使用一次。析构完后不能再运行。
         *
         * @public
         */
        dispose: function () {
            var innerThis = inner(this);
            if (!innerThis.disposed) {
                var el = this.el();
                var originInnerHTML = this[ORIGINAL_HTML_KEY] || '';
                // 最先自己进行清除
                this._dispose();
                disposeSub.call(this);
                disposeEls.call(this);
                this._disposable(false);
                disposeBase.call(this);
                // 最后一次机会自己清除
                this._disposeFinally();
                el.innerHTML = originInnerHTML;
                innerThis.disposed = true;
            }
        },

        /**
         * @public
         */
        isDisposed: function () {
            return !!inner(this).disposed;
        },

        /**
         * 一般用此来判断是否可以响应用户交互，或者响应异步回调。
         *
         * @public
         */
        isFrozen: function () {
            return this._viewModel().disabled() || this.isDisposed();
        },

        /**
         * 只是 syntactic sugar。
         * 匿名注册需要被自动dispose的对象：this._disposable(obj); // obj 对象有dispose方法。
         * 实名注册需要被自动dispose的对象：this._disposable(obj, 'someName');
         * 指定名称执行dispose：this._disposable('someName');
         * 无论是匿名还是实名，注册的对象 obj，会自动在整个cpt dispose时自动被调用dispose。
         * 派生类不可使用_disposable(false)，因为它只可被使用一次，析构完后不能再运行。
         *
         * @protected
         * @param {(Object|jQuery|string|boolean)} o 要被dispose的对象（需要有dispose方法），或者是name。
         * @param {string=} name 一般不需要，除非想指定名称去dispose。
         * @return {Object} o
         */
        _disposable: function (o, name) {
            lib.assert(o != null); // 常见的错误
            var area = inner(this).cptDisposableArea;

            // o为 null 或 undefined 时什么也不做，这是为了支持编码的简洁
            if (o == null) {
                return o;
            }
            // 全部dispose
            else if (o === false) {
                for (var n in area) {
                    if (area.hasOwnProperty(n)) {
                        disposeDisposable.call(this, area[n]);
                        area[n] = null;
                    }
                }
            }
            // 指定名称进行dispose
            else if ($.type(o) === 'string') {
                disposeDisposable.call(this, area[o]);
                area[o] = null;
            }
            // 注册可以被dispose的对象
            else {
                lib.assert($.isFunction(o.dispose) || lib.isJQuery(o), 'No dispose method nor not jQuery!');
                name = name || '\x0E\x0E-component-anonymouse-disposable' + lib.localUID();
                area[name] = o;
            }

            return o;
        },

        /**
         * 通常情况下并不需要去实现resize，除非Component不得不手动resize。
         * （例如缓存了offsetXXX、使用了canvas等等）
         *
         * @public
         */
        resize: $.noop,

        /**
         * 延迟创建$el并初始化。
         * 在构建Component时，可以不传入el，而后准备好el和tpl后手动调用此方法进行初始化。
         *
         * @protected
         * @param {(HTMLElement|jQuery)} $el 主元素
         */
        _manuInitView: function ($el) {
            initMainEl.call(this, $el);
            this._constructSub($el);
        },

        /**
         * 模板渲染，并创建子控件。
         * Component子类中，可使用此方法，渲染模板片段。
         *（一般用在存在异步获取数据后再渲染的情况下）
         * 注意：此方法不支持多次使用。
         *
         * @protected
         * @param {HTMLElement|jQuery} el 在此容器上渲染模板。
         * @param {string} tplTarget tpl的target名
         */
        _applyTpl: function (el, tplTarget) {
            if (tplTarget) {
                this._renderTpl(tplTarget, null, el);
                this._constructSub(el);
            }
        },

        /**
         * 渲染模板。直接渲染到dom中 或者 只返回html字符串
         *
         * @protected
         * @param {string} tplTarget 模板的target名
         * @param {Object=} viewModel 渲染用的model。缺省则为this._viewModel()
         * @param {(HTMLElement|jQuery)=} el 如果传此参数，则渲染到此el中；否则，仅返回结果html。
         * @return {string} 模板渲染结果html
         */
        _renderTpl: function (tplTarget, viewModel, el) {
            var model = {
                // 模板中直接引用 viewModel.something
                viewModel: viewModel || this._viewModel(),
                // 语言字符从中取得，模板中使用方式例如：lang.html.some1，lang.string.some2
                lang: this.getLang(),
                constant: this.getConstant()
            };

            var result = tpl.render(
                tplTarget, model, this._getDefineProperty('tpl')
            ) || '';

            el && $(el)[this._viewModel().tplRenderMode](result);

            return result;
        },

        /**
         * 解析模板创建子cpt。一般此方法自动被调用，不手动调用。
         *
         * @protected
         * @param {HTMLElement|jQuery} container 在此容器内检查子cpt并创建。
         * @param {boolean} includeContainer 是否也解析container上的data-cpt。默认false
         */
        _constructSub: function (container, includeContainer) {
            var $container = $(container);
            lib.assert($container.length);

            if (includeContainer && $container.data('cpt')) {
                this._constructSubCpt.call(this, container);
            }

            var that = this;
            $('*[data-cpt]', $container).each(function (index, subEl) {
                that._constructSubCpt(subEl);
            });
        },

        /**
         * @protected
         */
        _constructSubCpt: function (subEl) {
            var $subEl = $(subEl);
            var originInnerHTML = subEl.innerHTML;
            var thisViewModel = this._viewModel();

            var def = this._parseCptDef(
                (new Function(
                    'viewModel', 'lib', 'lang', 'constant',
                    'return {' + $subEl.data('cpt') + '};'
                )).call(this, thisViewModel, lib, this.getLang(), this.getConstant())
            );
            var Clz = this.getCptClass(def.type);

            var subViewModel = def.viewModelGet
                 ? getByPath(def.viewModelGet, thisViewModel)
                 : def.viewModel;

            var subCpt = new Clz(subEl, subViewModel, def);
            subCpt[ORIGINAL_HTML_KEY] = originInnerHTML;

            return this._sub(
                // 如果没定义name，则表示匿名
                def.name || ('\x0E\x0F-sub-cpt-name-' + lib.localUID()),
                subCpt
            );
        },

        /**
         * 依照模板的定义，重新创建子component，旧的子component被dispose。
         * 如果组件的dispose没有写完整，则可能出现内存泄露、事件处理器指向旧对象等问题。
         *
         * @public
         * @param {string} subPath 如：'zzz.xxx'
         */
        recreateSubCpt: function (subPath) {
            var subCpt = this._sub(subPath);
            if (!subCpt) {
                return;
            }

            var subEl = subCpt.el();
            subCpt.dispose();
            this._sub(subPath, null);
            this._constructSubCpt(subEl);
        },

        /**
         * 构造完成后执行，可反复调用
         *
         * @public
         * @param {boolean} isRefresh 初始化后第一次执行则值为false，以后均为true
         */
        traversalRun: function (isRefresh) {
            // 先执行sub
            traverseSub(
                inner(this).subComponents,
                function (subCpt) {
                    subCpt.traversalRun(isRefresh);
                }
            );
            // 最后执行自己
            this._run(isRefresh);
        },

        /**
         * 设置或得到子component
         *
         * @protected
         * @param {string} name 子component路径。可以为xxx.xxx[2]这样的object路径。
         * @param {*} o 一般为子component，或者array等。如果缺省，则表示意图是“get Component”
         * @param {boolean} overlapSilently 当set时，是否可以overlap，默认false
         * @return {Component} 子组件实例
         */
        _sub: function (name, o, overlapSilently) {
            var subComponents = inner(this).subComponents;
            if (arguments.length < 2) {
                return getByPath(
                    name,
                    subComponents,
                    getByPath.actionChoice.notPlainReturn
                );
            }
            else {
                setByPath(
                    name,
                    o,
                    subComponents,
                    overlapSilently
                        ? setByPath.actionChoice.notPlainOverlap
                        : setByPath.actionChoice.notPlainThrow
                );
                return o;
            }
        },

        /**
         * 得到_define中的内容
         *
         * @protected
         * @param {string} key define property key
         * @return {*} define property
         */
        _getDefineProperty: function (key) {
            return this.constructor.defineProperties[key];
        },

        /**
         * 得到本component的主元素
         *
         * @public
         * @return {HTMLElemnet} 主元素dom节点
         */
        el: function () {
            return inner(this).el;
        },

        /**
         * 设置或得到元素（jquery）
         * 如果缺省参数，得到的是本component的主元素。
         * 这些元素会在dispose时自动off(this._event());
         *
         * @public
         * @param {string=} name 自己起名字。
         *  可以为xxx.xxx[2]这样的object路径。
         *  如果缺省表示得到主元素
         * @param {*} o 一般为要设置的元素，或者数组等
         *  如果缺省表示得到主元素
         * @param {boolean} overlapSilently 当set时，是否可以overlap，默认false
         * @return {HTMLElemnet}
         */
        $el: function (name, o, overlapSilently) {
            var innerThis = inner(this);
            if (arguments.length === 0) {
                // 得到主元素
                return innerThis.$el;
            }

            if (arguments.length === 1) {
                return getByPath(
                    name,
                    innerThis.sub$Els,
                    getByPath.actionChoice.notPlainReturn
                );
            }
            else {
                setByPath(
                    name,
                    o,
                    innerThis.sub$Els,
                    overlapSilently
                        ? setByPath.actionChoice.notPlainOverlap
                        : setByPath.actionChoice.notPlainThrow
                );
                return o;
            }
        },

        /**
         * 得到本component的基础css
         *
         * @public
         * @return {HTMLElemnet}
         */
        css: function () {
            return this._getDefineProperty('css') || '';
        },

        /**
         * 返回 view model中的指定内容
         *
         * @public
         * @param {string=} path 如可以为：'xxxx.bbbb[3]'
         * @return {*}
         */
        viewModel: function (path) {
            if (canPublic.call(this, path)) {
                return getByPath(path, inner(this).viewModel);
            }
            else {
                throw new Error(path + ' is private!');
            }
        },

        /**
         * 返回 view model 整体，私有，外部不可调用
         *
         * @protected
         * @return {Object} viewModel
         */
        _viewModel: function () {
            return inner(this).viewModel;
        },

        /**
         * 得到cpt的定义
         *
         * @public
         * @param {string} key 则返回def的某个key对应的值。如：'some/some/some'
         * @return {Class} component类定义
         */
        getCptClass: function (key) {
            return Component.cptClasses[key];
        },

        /**
         * 得到本component的定义
         *
         * @public
         * @param {string} key 则返回def的某个key对应的值。
         * @return {*}
         */
        getCptDef: function (key) {
            return inner(this).cptDef[key];
        },

        /**
         * 得到本component的uid
         *
         * @public
         * @return {string} uid
         */
        uid: function () {
            return inner(this).cptInstanceUID;
        },

        /**
         * 得到本component的基本css class
         *
         * @public
         * @param {string=} suffix 例如'-disabled'
         * @return {Array} 例如['cpt', 'someThisCss', 'someInputExtraCss']
         */
        getFullCss: function (suffix) {
            var csses = [BASE_CSS];
            var innerThis = inner(this);
            csses.push.apply(csses, innerThis.basicCss || []);
            csses.push.apply(csses, innerThis.extraCss || []);

            return $.map(
                csses,
                function (css) {
                    return css + (suffix || '');
                }
            );
        },

        /**
         * 是否禁用了
         *
         * @public
         * @return {boolean} 是否禁用
         */
        isDisabled: function () {
            return !!lib.peek(this._viewModel().disabled);
        },

        /**
         * @public
         * @protected
         */
        getLang: function () {
            // 可以在业务中自己配置，或者重载 getLang 方法
            return Component.defaultLanguageSet;
        },

        /**
         * @public
         * @protected
         */
        getConstant: function () {
            // 可以在业务中自己配置，或者重载 getLang 方法
            return Component.defaultConstant;
        },

        /**
         * 生成本对象的副本。一般不需要用到。子类可重载。
         * @see lib.cloneAtom
         *
         * @public
         * @return {Object} component instance
         */
        clone: $.noop,

        /**
         * 从最祖先类遍历到本类
         *
         * @protected
         * @param {Function} callback callback
         */
        _traverseFromAncestor: function (callback) {
            var clzChain = [];

            for (
                var Clz = this.constructor;
                Clz;
                Clz = Clz.prototype._superClass
            ) {
                clzChain.push(Clz);
            }

            for (var i = clzChain.length; i--;) {
                callback.call(this, clzChain[i]);
            }
        },

        /**
         * 创建或得到或清除local observable对象。
         * 用于提供“Component间局部通讯”功能（例如某panel由子Component触发刷新）。
         * 此对象在以自身为根的树上，对于子Component可见。
         * 如果本Component没有主dom（this.el()为空），则不支持local observable功能。
         *
         * 使用方式：
         * 创建：this.localOb('LOCAL_OB_SOME', lib.ob());
         * 移除：this.localOb('LOCAL_OB_SOME', false); // 一般不需要这么做。
         * 获得并注册监听：lib.localOb('LOCAL_OB_SOME').subscribe(someHandlerFn, this);
         * 向最近祖先上的localOb发消息：this.getAncestorLocalOb('LOCAL_OB_SOME')({someDataKey: 'someData'});
         *
         * @public
         * @param {string} key 如：'LOCAL_OB_SCROLL_RESIZE', 见contant.LocalObKey。
         * @param {(Object|Function|false)=} ob obsevable对象，参见dataDriven.js，或函数。
         *                                      如果此参数为false，表示删除此local ob。
         * @return {Object} observable对象
         */
        localOb: function (key, ob) {
            var ret;
            var innerThis = inner(this);
            var localObRepo = innerThis.localObRepo || (innerThis.localObRepo = {});

            if (arguments.length > 1) {
                if (ob === false) { // 清除local observable。
                    ret = localObRepo[key];
                    delete localObRepo[key];
                }
                else { // 增添local observable
                    lib.assert(localObRepo[key] == null); // 不允许覆盖防止编码错误
                    ret = localObRepo[key] = ob;
                }
            }
            else {
                ret = localObRepo[key];
            }

            return ret;
        },

        /**
         * 得到祖先中最近出现的匹配给定key的local observable对象。
         * 使用这种设定的原因是，例如这个场景：
         * 某外层Component有key为'refresh'的localOb，
         * 中层的Component也可设key为'refresh'的localOb，并在ob的监听函数中触发外层的refresh localOb。
         * 从而内层的Component可以触发这个链式refresh。
         *
         * @public
         * @param {string} key 如：'LOCAL_OB_SCROLL_RESIZE', 见contant.LocalObKey。
         * @return {Object} localOb
         */
        getAncestorLocalOb: function (key) {
            // 因为不维护Component的父指针（为了灵活和简化），所以按照dom结构向上找。
            var $el = this.$el();
            var cpt;
            var localOb;

            while (
                ($el = $el && $el.parent())[0]
                && !(localOb = (cpt = lib.getComponent($el)) && cpt.localOb(key))
                && $el[0] !== document.body // 最高到body（含）停止
            ) {} // jshint ignore:line

            return localOb; // jshint ignore:line
        }

    })));

    /**
     * 各种component类型的定义集合。
     * 约定外部只在componentConfig.js中使用。
     *
     * @public
     */
    Component.cptClasses = {};

    /**
     * 各种语言的话术集合。
     * 约定外部只在componentConfig.js中使用。
     *
     * @public
     */
    Component.defaultLanguageSet = {};

    /**
     * 常量集合。
     * 约定外部只在componentConfig.js中使用。
     *
     * @public
     */
    Component.defaultConstant = {};

    /**
     * @inner
     */
    function initInnerViewModel() {
        var viewModel = this._viewModel();

        // visible不可从外部传入，因为基于css的display，
        // 不需要和其他cpt（尤其不应该和子cpt）分享。
        viewModel.visible = lib.ob(true);

        // disabledOb允许从外部传入，本Component的disabledOb自动监听传入的disabledOb。
        // 从而外部的disabledOb可以控制本Component，而反之不可。
        var outerDisabledOb = viewModel.disabled;
        viewModel.disabled = lib.ob(false);

        if (outerDisabledOb != null) {
            this._disposable(outerDisabledOb.subscribe(handleDisable, this));
        }

        function handleDisable(val) {
            viewModel.disabled(val);
        }
    }

    /**
     * 主节点初始化。
     *
     * @inner
     * @param {(HTMLElement|jQuery)} $el 主节点
     */
    function initMainEl($el) {
        if (!$el) {
            return;
        }

        var innerThis = inner(this);
        $el = innerThis.$el = $($el);
        innerThis.el = $el[0];

        // 设置componentEl标志
        lib.bindComponent($el, this);

        $el.addClass(this.getFullCss().join(' '));

        var viewModel = this._viewModel();
        var disabledOb = viewModel.disabled;
        var visibleOb = viewModel.visible;

        this._disposable(disabledOb.subscribe(elChangeDisable, this));
        this._disposable(visibleOb.subscribe(elChangeVisible, this));

        // 设置disable初始状态
        elChangeDisable.call(this, disabledOb());

        // 用当前mainEl的display来初始化visible。
        // 这么做的原因是：
        // （1）符合设style="display:none"的习惯。
        // （2）方便于多个component控制一个dom时行为不冲突。
        //  例如：tab的content也是cpt时，tab改变了display，但是cpt还没有初始化，就造成了不一致。
        visibleOb($el[0].style.display !== 'none');
    }

    function elChangeDisable(v) {
        this.$el()[v ? 'addClass' : 'removeClass'](
            this.getFullCss('-disabled').join(' ')
        );
    }

    function elChangeVisible(v) {
        this.$el()[v ? 'show' : 'hide']();
    }

    function applyBaseTpl() {
        var tplTarget = inner(this).cptDef.tplTarget
            || this._getDefineProperty('tplTarget');
        var $el = this.$el();

        if (tplTarget && $el && $el.length) {
            this._renderTpl(tplTarget, null, $el);
        }
        if (!this._getDefineProperty('suppressConstructSub') && $el && $el.length) {
            this._constructSub($el);
        }
    }

    // 析构基础
    // （此方法写在闭包中是为了禁止子类调用）
    function disposeBase() {
        var $el = this.$el();
        var innerThis = inner(this);

        // 清除自己的事件挂载
        $el.off(innerThis.eventNamespace);
        $el.removeClass(
            this.getFullCss().join(' ')
        );

        // 并不默认清除 main el 中的内容，因为可能并不属于自身可控。
        innerThis.viewModel = null;

        innerThis.el = null;
        innerThis.$el = null;
        innerThis.subComponents = null;
        innerThis.sub$Els = null;

        lib.bindComponent($el, false);
    }

    // 递归dispose component
    function traverseSub(o, callback, elOrCpt) {
        if (
            (!elOrCpt && lib.isComponent(o))
            || (elOrCpt && lib.isJQuery(o))
        ) {
            callback(o);
        }
        else if ($.type(o) === 'object' && !lib.isAtom(o)) {
            for (var i in o) {
                if (o.hasOwnProperty(i)
                    // 当subcpt移除时会设为null。虽然如果编码错误也可能导致为null，
                    // 但这两种情况不好区分，所以暂时不fail fast了。
                    && o[i] != null
                ) {
                    traverseSub(o[i], callback, elOrCpt);
                }
            }
        }
    }

    /**
     * 设置view model
     *
     * @inner
     * @param {Object=} viewModel 外部输入的viewModel
     * @return {Object} viewModel
     */
    function setViewModel(viewModel) {

        // 初始化 viewModel，从祖先类开始 merge。
        var innerThis = inner(this);
        var base = innerThis.viewModel = {};
        var that = this;

        this._traverseFromAncestor(function (Clz) {
            base = lib.merge(
                base,
                // 定义中的viewModel是个函数
                Clz.defineProperties.viewModel.call(that),
                {
                    onlyMergeOwnPropertyInTarget: false,
                    levelOneNeedMerge: null,
                    clone: false
                }
            );
        });

        // 注意，如果viewModel是atom的（@see lib.atom），则会直接引用传递。
        base = lib.merge(
            base,
            viewModel,
            // 规定：只有base中有声明（表示默认值），才能被设值
            {
                onlyMergeOwnPropertyInTarget:
                    !!this._getDefineProperty('viewModelOnlyAccessDeclaredProperties'),
                levelOneNeedMerge: innerThis.viewModelMergeMap || {}
            }
        );

        innerThis.viewModel = base;
        return base;
    }

    function initViewModelControlMap() {
        // 缓存成map便于查询
        var innerThis = inner(this);
        var viewModelPublicMap = innerThis.viewModelPublicMap = {};
        var viewModelMergeMap = innerThis.viewModelMergeMap = {};

        // 从祖先开始merge
        this._traverseFromAncestor(function (Clz) {
            var pub = Clz.defineProperties.viewModelPublic || [];
            for (var i = 0, len = pub.length; i < len; i++) {
                viewModelPublicMap[pub[i]] = 1;
            }
            var mrg = Clz.defineProperties.viewModelMerge || [];
            for (var i = 0, len = mrg.length; i < len; i++) {
                viewModelMergeMap[mrg[i]] = 1;
            }
        });
    }

    function initCssDefine() {
        var viewModel = this._viewModel();
        var innerThis = inner(this);

        // 从祖先遍历到本类，找到所有基础css。
        var basicCss = [];
        this._traverseFromAncestor(function (Clz) {
            var css = Clz.defineProperties.css;
            if ($.isArray(css)) {
                basicCss.push.apply(basicCss, css);
            }
            else if (css) {
                basicCss.push(css);
            }
        });
        innerThis.basicCss = basicCss;

        // 可多个extra c
        var extraCss = viewModel && viewModel.css || [];
        if (!$.isArray(extraCss)) {
            extraCss = [extraCss];
        }
        innerThis.extraCss = extraCss;
    }

    function canPublic(path) {
        path = getByPath.normalizePath(path);
        return !!inner(this).viewModelPublicMap[path];
    }

    function disposeDisposable(o) {
        // o 为含有 dispose方法 的对象 或 jQuery
        // jQuery时意为清除本名空间的事件
        if (o && $.isFunction(o.dispose)) {
            try {
                o.dispose();
            }
            catch (ex) {
                if (Component.debug) {
                    throw ex;
                }
                // 线上为了减少用户影响，吞食dispose的ex。
                else if (Component.printLog) {
                    Component.printLog.error(ex);
                }
            }
        }
        else if (o && lib.isJQuery(o)) {
            o.off(this._event());
        }
    }

    /**
     * 递归dispose所有子component 或 指定根节点的子components。
     *
     * @inner
     * @param {*} root 如果缺省则默认为 inner(this).subComponents
     */
    function disposeSub(root) {
        root = root || inner(this).subComponents;
        traverseSub(
            root,
            function (subCpt) {
                try {
                    subCpt.dispose();
                }
                catch (ex) {
                    if (Component.debug) {
                        throw ex;
                    }
                    // 线上为了减少用户影响，吞食dispose的ex。
                    else if (Component.printLog) {
                        Component.printLog.error(ex);
                    }
                }
            }
        );
        // 清空root
        if (!lib.isAtom(root)) {
            for (var i in root) {
                if (root.hasOwnProperty(i)) {
                    root[i] = null;
                }
            }
        }
    }

    /**
     * 递归dispose所有存储的el 或 指定根节点的存储的el。
     *
     * @inner
     * @param {*} root 如果缺省则默认为 inner(this).sub$els
     */
    function disposeEls(root) {
        root = root || inner(this).sub$els;
        var ns = this._event();
        traverseSub(
            root,
            function ($el) {
                $el.off(ns);
            },
            true
        );
        // 清空root
        if (!lib.isAtom(root)) {
            for (var i in root) {
                if (root.hasOwnProperty(i)) {
                    root[i] = null;
                }
            }
        }
    }

    /**
     * 打log到debug控制台（如果浏览器支持的话）.
     * 可手动挂载到Component.printLog上。
     *
     * @public
     * @param {string} data
     */
    Component.consoleLog = function (data) {
        var console = window.console;
        if (lib.isObject(console) && typeof console.log === 'function') {
            console.log(lib.stringifyJSON(data));
        }
    };

    return Component;
});