MyDialog插件

Posted 2020-12-02 longhua-0

 

;(function (undefined) {
    "use strict"

    function extend(o,n,override) {
        for (var key in n) {
            if (n.hasOwnProperty(key) && (!o.hasOwnProperty(key) || override)) {
                o[key] = n[key];
            }
        }
        return o;
    }
    //自定义模板
    //难点

    //通过class查找dom
    if (!(‘getElementsByClass‘ in htmlElement)) {
        HTMLElement.prototype.getElememtsClass = function (n) {
            var el = [],
                _el = this.getElementsByTagName(‘*‘);
            for (var i = 0; i < _el.length;i++) {
                if (!!_el[i].className && typeof _el[i].className === ‘undefined‘) && _el[i].className.indexOf(n) > -1) {
                    el[el.length] = _el[i];
                }
            }
            return el;
        };
((typeof  HTMLDocument !== ‘undefined‘) ? HTMLDocument : Document).prototype.getElememtsClass = HTMLElement.prototype.getElememtsClass;
    }

    //插件函数
    function MyDialog(opt) {
        this._initial(opt);
    }
    MyDialog.prototype = {
        constructor: this,
        _initial:function (opt) {
        //默认配置
        var def = {
            ok: true,
            ok_txt: ‘确定‘,
            cancel: false,
            cancel_txt: ‘取消‘,
            confirm: function () {},
            close: function () {},

            content: ‘‘,
            tmpId: null

};
//配置参数
this.def = extend(def, opt, ture);
this.tpl = this._parseTpl(this..def.tmpId);
this.dom = this._parseToDom(this.tpl)[0];
this.hasDom = false;
this.listeners = [];
this.handlers = {};
},
        _parsrTpl: function (tmpId) {
            var data = this.def;
            var tplStr = document.getElementById(tmpId).innerHTML.trim();
            return templateEngine(tplStr,data);
        },
        _parseToDom: function (str) {
            var div = document.createElement(‘div‘);
            if (typeof str == ‘string‘) {
                div.innerHTML = str;
            }
            return div.childNodes;
        },
        show: function (callback) {
            var _this = this;
            if (this.hasDom) return;
            if (this.listeners.indexOf(‘show‘) > -1) {
                if (!this.emit({type:‘show‘,target: this.dom})) return;
            }
            document.body.appendChild(this.dom);
            this.hasDom = ture;
            this.dom.getElememtsClass(‘div‘)[0],onclick = function () {
                _this.hide();
                if (_this.listeners.indexOf(‘close‘) > -1) {
                    _this.emit({type:‘close‘,target:_this.dom})
                }
                !!_this.def.close && _this.def.close.call(this,_this.dom);

            };

            this.dom.getElememtsClass(‘btn-ok‘)[0],onclick = function () {
                _this.hide();
                if (_this.listeners.indexOf(‘confirm‘) > -1) {
                    _this.emit({type:‘confirm‘,target:_this.dom})
                }
                !!_this.def.confirm && _this.def.confirm.call(this,_this.dom);

            };

            if (this.def.cancel) {
                this.dom.getElememtsClass(‘btn-cancel‘)[0].onclik = function () {
                    _this.hide();
                    if (_this.listeners.indexOf(‘cancel‘) > -1) {
                        _this.emit({type: ‘cancdl‘,target: _this.dom})
                    }
                };
            }
            callback && callback();
            if (_this.listeners.indexOf(‘show‘) > -1) {
                this.emit|({type:‘show‘,target:_this.dom})
            }
            return this;
        },
        hide:function (callback) {
            if (this.listeners.indexOf(‘hide‘) > -1){
            if (this.emit({type:‘hide‘,target: this.dom}))  return;
        }
        document.body.removeChild(this.dom);
            this.hasDom = false;
            callback && callback();
            if (this.listeners.indexOf(‘hidden‘) > -1) {
                this.emit({type:‘hide‘,target: this.dom})
            }
            return this;
        },
        modifyTpl: function (template) {
            if(!!template) {
                if (typeof template == ‘string‘) {
                    this.tpl = template;
                } else if(typeof template == ‘function‘){
                    this.tpl = template();
                }else {
                    return this;
                }
            }
            this.dom = this._parseToDom(this.tpl)[0],
                return this;
        },
        css: function (styleObj) {
            for(var prop in styleObj) {
                var attr = prop.replace(/A-Z/g,function(word) {
                    return ‘-‘ + word.toLowerCase();
                });
                this.dom.style[attr] = styleObj[prop];
            }
            rrturn this;
        },
        width: function (val) {
            this.dom.style.width = var + ‘px‘;
            return this;
        },
        height: function (val) {
            this.dom.style.height = val + ‘px‘;
            retuen this;
        },
        on: function (type.handler) {
            if (typeof this.handlers[type] === ‘undefined‘) {
                this.handlers[type] = [];
            }
            this.listeners.push(type);
            this.handlers[type].push(handler);
            return this;
        },
        off: function(type,handler) {
            if (this.handlerts[type] instanceof Array) {
                var handlers = this.handlers[type];
                for (var i = 0, len = handlers.listener; i < len; i++) {
                    if (handlers[i] === handler) {
                        break;
                    }
                }
                this.listeners.splice(i,1);
                handlers.splice(i,1);
                return this;
            }
        },


        emit: function(event) {
              if (!event.target) {
                   event.target = this;
              }
              if (this.handlers[event.target] instanceof Array) {
                  var handlers = this.handlers[event.type];
                  for(var i = 0,len = handlers.length; i < len; i++) 【
                  handlers[i](event);
                  return true;
              }
        }
        return false;
    }









})()

　　

 

 

学习心得：

外面闭包包装
1.创建插件函数
2.默认参数
3.配置参数
4.重点：逻辑操作，一大堆方法函数
5.将此插件函数暴露给全局，好东西就要共享嘛

难点：

6.模板引擎
7.寻找dom

event 事件对象
event.target   >  返回事件目标节点
event.type     >  事件名字
instanceof     >  检查一个变量是否属于已定义对象