摘要：現在組件化開發，以為代表的庫或框架讓組件化開發逐漸推廣起來。下面是我用寫的一款簡易的提示框組件。效果有時用戶執行某個操作時，需要彈出提示框讓用戶確定執行某個回調函數，這樣就有效的避免用戶因操作失誤執行不該執行的操作。從而累計事件的源碼

寫這篇文章主要是對自己以前學習jquery插件的總結。現在組件化開發，以vuejs 、 reactjs 、angular 為代表的庫或框架讓web組件化開發逐漸推廣起來。下面是我用jquery寫的一款簡易的提示框組件。雖然沒有遵守mvc寫法，但也是很實用。

有時用戶執行某個操作時，需要彈出提示框讓用戶確定執行某個回調函數，這樣就有效的避免用戶因操作失誤執行不該執行的操作。

/**
 * Created by helti on 2017/2/16 0016.
 */

!(function(window,$,undefined){

    var htmls={
        "popbg":"
",
        "pwraper":"
",
        "popheader":"
",
        "popdes":"
",
        "palert":"
確定
",
        "pconfim":"
確定 取消
"
    };
    var winpop=function(opt,callback){
        var defaults={
            headercon:"",
            popdes:""
        }
        this.options= $.extend({},defaults,opt);
        this.$body=$("body");
        //背景
        this.$popbg=$(htmls.popbg);
        //pop父容器
        this.$wraper=$(htmls.pwraper);

        if(callback !="undefined"){
            if(typeof callback == "function"){
                this.callback=callback;
            }
        }else{
            throw new Error ("callback need function")
        }

    };
    winpop.prototype={

        /*
          alert 或者 confim
         */
        createdom:function(ele){
            var $popheaer=$(htmls.popheader).text(this.options.headercon);

            var $contenthtml=$(htmls.popdes).text(this.options.popdes);
               // $palert=$(htmls.palert);

            this.$wraper.append($popheaer).append($contenthtml).append(ele);
            this.$body.append(this.$popbg).append(this.$wraper);
           // this.callback();
          //  console.log(this.callback);
        },
        okclick:function(){
            //確認按鈕執行回調函數
            this.callback();
        },
        eventclick:function(){
              var that=this;
              that.$wraper.find("#btn-ok").on("click",function(){
                  that.remove();
                  that.okclick();
              })
              //只通過事件委托綁定一次，如果用on綁定，因為doument無法刪除，導致事件一直存在
             /* $(document).one("click","#btn-ok",function(){
                  that.remove();
                  that.okclick();
                  
              });*/

               that.$wraper.find(".btn-ok").on("click",function(){
                  that.remove();
                  that.okclick();
              })
             /* $(document).one("click",".btn-ok",function(){
                  that.remove();
                  that.okclick()
              });*/
               that.$wraper.find(".btn-cancel").on("click",function(){
                  that.remove();
                  
              })
             
        },
        alertpop:function(){
            var $palert=$(htmls.palert);
            this.createdom($palert);
            this.eventclick();
        },
        confimpop:function(){
            var $pconfim=$(htmls.pconfim);
            this.createdom($pconfim);
            this.eventclick();
        },
        remove:function(){
            this.$wraper.empty().remove();
            this.$popbg.empty().remove();

        }
    };


    window.winpop=winpop;

}(window,jQuery));

我們都知道動態生成的dom元素，要給它綁定事件時，必須給予事件委托，通常我們委托給document.

//這里不應該用on
$(document).one("click","#btn-ok",function(){
                  that.remove();
                  that.okclick();
                  
              });

但是我們委托給document時會出現一個問題，就是但你再次觸發按鈕時，原來綁定的事件不會銷毀。因為document不能刪除。那么用one呢？我們只讓它執行一次。大家可以試下。

最終我使用了

that.$wraper.find(".btn-cancel").on("click",function(){
                  that.remove();
                  
              })

這樣就避免了事件不被銷毀。從而累計事件的bug.

github源碼