码迷,mamicode.com
首页 > Web开发 > 详细

[DikeJS]编写组件基类(八)

时间:2015-09-01 18:37:09      阅读:191      评论:0      收藏:0      [点我收藏+]

标签:

通过前几章的定义,发现所有的组件可以拥有共同的方法,例如,设置渲染,设置组件的id、name,以及曾经使用的event方法,在这里也可以得以使用,因此我删除了之前的Event类,在基类中添加了event的触发事件,完成了渲染完成组件后执行设定好的方法,代码如下:

/**
 * @Author Dike.Li
 * @Date 2015/8/31
 * @class BaseClass
 * @public
 * @Description Basic classes for all components,have basic methods.
 */
define(function (require) {

    var baseClass = (function (temp, option, $) {
        var me = this;

        /**
         * 根据模板获取jquery对象
         */
        var tempObj = $(temp);

        /**
         * 依赖关系变量
         */
        var quite = null;

        /**
         * 组件样式变量
         */
        var cls = null;

        /**
         * 触发事件
         */
        var handle = (function (option, tempObj) {
            /**
             * 设置事件
             */
            if (typeof(option.listeners) !== ‘undefined‘) {
                for (var listenerName in option.listeners) {
                    if (listenerName === ‘onReady‘) {
                        option.listeners[listenerName](me);
                        continue;
                    }
                    tempObj.on(listenerName, option.listeners[listenerName]);
                }
            }
        });

        /**
         * 在option中设置了render属性的则进行翻译后的模板添加
         */
        if (typeof(option.render) !== ‘undefined‘) {
            option.render.append(tempObj[0]);
            handle(option, tempObj);
        }

        /**
         * 设置组件是否存在add子元素的功能
         * @param isHave value: true or false
         */
        me.setIsHaveAdd = (function (isHave) {
            if (isHave) {
                /**
                 * 在组件内部进行渲染
                 */
                if (typeof(option.items) !== ‘undefined‘) {
                    option.items.forEach(function (obj) {
                        if (typeof(obj.getEl) !== ‘undefined‘) {
                            tempObj.append(obj.getEl());
                        } else {
                            tempObj.append(obj);
                        }
                    });
                }

                /**
                 * 将外部内容添加到本组件中
                 */
                me.add = (function (obj) {
                    if (typeof(obj.getEl) !== ‘undefined‘) {
                        tempObj.append(obj.getEl());
                    } else {
                        tempObj.append(obj);
                    }
                });

                /**
                 * 将外部一组内容添加到本组件中
                 */
                me.addItems = (function (objs) {
                    objs.forEach(function (obj) {
                        if (typeof(obj.getEl) !== ‘undefined‘) {
                            tempObj.append(obj.getEl());
                        } else {
                            tempObj.append(obj);
                        }
                    });
                });
            }
        });

        /**
         * 设置依赖关系
         */
        me.setQuote = (function (array) {
            quite = array;
        });

        /**
         * 获取组件的依赖项
         */
        me.getQuote = (function () {
            return quite;
        });

        /**
         * 提供获取模板的方法
         */
        me.getTemp = (function () {
            return temp;
        });

        /**
         * 获取temp jquery object
         */
        me.getTempObj = (function () {
            return tempObj;
        });

        /**
         * 获取模板对象
         */
        me.getObj = (function () {
            return tempObj;
        });

        /**
         *获取对象Element内容
         */
        me.getEl = (function () {
            return tempObj[0];
        });

        /**
         * 注册事件
         * @param name
         * @param fn
         */
        me.on = (function (name, fn) {
            tempObj.on(name, fn);
        });

        /**
         * 获取元素ID
         * @return id
         */
        me.getId = (function () {
            return typeof(tempObj.attr(‘id‘)) === ‘undefined‘ ? null : tempObj.attr(‘id‘);
        });

        /**
         * 获取元素NAME
         * @return name
         */
        me.getName = (function () {
            return typeof(tempObj.attr(‘name‘)) === ‘undefined‘ ? null : tempObj.attr(‘name‘);
        });

        /**
         * 判断是否定义
         * @param obj
         * @return boolean
         */
        me.isDefine = (function (obj) {
            return typeof(obj) === ‘undefined‘ ? false : true;
        });

        /**
         * 设置组件样式
         * @param obj is array [‘cls1‘,‘cls2‘]
         */
        me.setCls = (function(obj){
           cls = obj;
        });

        /**
         * 获取组件依赖的组件样式
         */
        me.getCls = (function(){
             return cls;
        });
    });

    return baseClass;
});


[DikeJS]编写组件基类(八)

标签:

原文地址:http://my.oschina.net/u/2349331/blog/500266

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!