业务模块的demo

howDispose.js

/**
 * @fileoverview 售中维权卖家详情页“我该如何处理”
 * @author: 剑平（明河）<minghe36@126.com>
 *
 **/
KISSY.add(function(S, Node,Base,io) {
    var EMPTY = '',$ = Node.all;
    /**
     *  售中维权卖家详情页“我该如何处理”
     * @param config
     * @constructor
     */
    function HowDispose(config){
        var self = this;
        HowDispose.superclass.constructor.call(self, config);
        self._init();
    }
    S.extend(HowDispose,Base,/** @lends HowDispose.prototype*/{
        /**
         * 初始化
         * @private
         */
        _init:function(){
            var self = this;
            var $target = self.get('target');
            if(!$target.length) return false;
            self._setUrl();
            $target.on('mouseover',function(ev){
                 if(!self.get('isCreate')){
                     self._send();
                 }else{
                     self.set('display',true);
                 }
            })
        },
        /**
         * 发送异步请求获取内容
         * @private
         */
        _send:function(){
            var self = this;
            var url  = self.get('url');
            if(url == EMPTY) return false;
            io.get(url,{t:S.now()},function(data){
                if(data.data != ''){
                    self._create(data.data);
                }
            },'json')
        },
        /**
         * 插入dom
         * @param {Object} data
         * @return NodeList | Boolean
         * @private
         */
        _create:function(data){
            var self = this;
            var isCreate = self.get('isCreate');
            //已经存在直接退出
            if(isCreate) return true;
            var tpl = self.get('tpl');
            if(!S.isString(tpl)) return false;

            var $html = $(S.substitute(tpl,{result:self.formatData(data)}));

            var $target = self.get('target');
            var offset = $target.offset();
            $('body').append($html);
            $html.css({top:offset.top-6,left:offset.left-11});

            self.set('isCreate',true);
            self.set('popupBox',$html);

            $html.on('mouseleave',function(){
                self.set('display',false);
            })

            self.set('display',true);
            return $html;
        },
        /**
         * 设置url属性
         * @private
         */
        _setUrl:function(){
            var self = this;
            var $target = self.get('target');
            if(!$target.length) return false;
            var url = $target.attr('data-action');
            self.set('url',url);
            return url;
        },
        /**
         * 转移服务器端返回内容
         * @param {String} data
         * @return {String}
         * @private
         */
        formatData:function(data){
            if(!S.isString(data)) return EMPTY;
            return S.unEscapeHTML(data);
        }
    },{ATTRS:/** @lends HowDispose.prototype*/{
        /**
         * 目标元素
         * @type NodeList
         * @default ''
         */
        target:{
            value:'.J_HowDispose',
            getter:function(v){
                return $(v);
            }
        },
        /**
         * 提示层容器
         * @type NodeList
         * @default ''
         */
        popupBox:{
            value:EMPTY
        },
        /**
        * 异步请求接口
        * @type String
        * @default ''
        */
        url:{value:EMPTY},
        /**
        * 内容是否已经创建
        * @type Boolean
        * @default false
        */
        isCreate:{value:false},
        /**
        * 模版
        * @type String
        * @default
        */
        tpl:{
            value:'<div class="how-dispose-popup-box">' +
                            '<p class="box-title">我该如何处理？</p>' +
                            '<div class="grid">' +
                                '<div class="g-u">建议您：</div>' +
                                '<div class="g-u">{result}</div>' +
                             '</div> ' +
                      '</div>'
        },
        /**
         * 控制弹出层的显隐
         * @type Boolean
         * @default false
         */
        display:{
            value:false,
            setter:function(v){
                var self = this;
                var popupBox = self.get('popupBox');
                if(popupBox && popupBox.length){
                    popupBox[v && 'show' || 'hide'](0.1);
                }
                return v;
            }
        }
    }});
    return HowDispose;
}, {requires:['node','base','ajax'
]});