自己封装js组件 - 中级中高级

接着做关于alert组件的笔记

怎么又出来个中高级呢 对没错 就是出一个中高级来刷流量呵呵呵，但是中高级也不是白叫的 这次主要是增加了widget类，增加了自己绑定的事件和触发事件的方法！这么做是为什么呢 首先弥补浏览器自身事件交互的问题 最重要的就是 一个元素一个事件只能绑定一次！具体啥意思呢 就是一个元素只能添加一个click事件 要是在添加一个click事件就会把之前的click事件给覆盖掉（当然我就纳闷了你不会写一个事件里啊哈，但是说不定有特殊情况呢） 这是第一个原因，第二个原因就是尽量把一些关于dom的操作封装到组件的这个级别了，不要所有的事件操作都下降到dom这个层级 多了的化 会非常的乱套！为了解决上述两个问题，可以自己定义一个widget封装成一个类把事件绑定触发都放在这里，这样很多的时间绑定就可以直接写在调用组件的地方了 触发也简单了很多！不多说直接上图

下面是widget类

define(['jquery'] , function(){
  function Widget(){
    this.handlers = {};
  }
  Widget.prototype  ={
    on:function(type,handler){

      if(typeof this.handlers[type] == 'undefined'){
        this.handlers[type] = [];
      }
      this.handlers[type].push(handler);
      return this;
    },
    fire:function(type,data){
      if(this.handlers[type] instanceof Array){
        var handlers = this.handlers[type];

        for(var i = 0 ; i<handlers.length; i++){
          handlers[i](data)
        }
      }
    }
  }
  return {
    Widget : Widget
  }
})

把这个新的widget类引入到我们的组件中 如下是新window类

define(['jquery','widget'],function($,widget){
    function Window(){
        this.cfg = {
            width:400,
            height:200,
            content:'我是默认文本内容',
            handle:null,
            title:'系统消息',
            skinClassName:null,
            hasCloseBtn:false,
            hasMask:false,
            handlerClosebtn:null
        }
    }
    Window.prototype = $.extend({},new widget.Widget(),{
        alert:function(cfg){

            var that = this;
            var CFG = $.extend(this.cfg,cfg);
            //var boundingBox = $('<div class="window_boundingBox"></div>');
            var boundingBox = $('<div class="window_boundingBox">'+
                '<div class="window_header">'+CFG.title+'</div>'+
                '<div class="window_body">'+CFG.content+'</div>'+
                '<div class="window_footer"><input type="button" value="确定"></div>'+
                '</div>');

            boundingBox.appendTo('body')

            var btn = $('.window_footer input');

            if(CFG.hasMask){

                mask = $('<div class="window_mask"></div>');
                mask.appendTo('body');

            }
            btn.appendTo(boundingBox);
            btn.click(function(){
                CFG.handle && CFG.handle();
                boundingBox.remove();
                mask && mask.remove();
            })

            boundingBox.css({
                width:this.cfg.width + 'px',
                height:this.cfg.height + 'px',
                left:(CFG.x || (window.innerWidth - CFG.width)/2)+'px',
                top:(CFG.y || (window.innerHeight - CFG.height)/2)+'px',
            })

            //右上角关闭按钮
            if(CFG.hasCloseBtn){
                var closeBtn = $('<span class="window_closeBtn">X</span>');
                closeBtn.appendTo(boundingBox);
                closeBtn.click(function(){
                    boundingBox.remove();
                    mask && mask.remove();
                    that.fire('close');
                })
            }

            //定制样式
            if(CFG.skinClassName){
                boundingBox.addClass(CFG.skinClassName);
            }

            //绑定关闭样式
            /*if(CFG.handlerClosebtn){
                this.on('close',CFG.handlerClosebtn);
            }*/
            return this;
        }
    })
    return {
        Window:Window
    }
})

最后在调用处的代码 很多触发事件代码就可以直接写在这里了很方便也简洁

require(['jquery','window'],function($,w){
  var win = new w.Window();
  win.alert({
      width:500,
      height:300,
      content:'新年快乐',
      title:'我是正确标题',
      hasCloseBtn:true,
      hasMask:true,
  })
  win.on('close' , function(){
      alert('关闭');
  })
})