自己封装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('关闭');

  })

})

巴特西

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

最新文章

热门文章