成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

簡(jiǎn)易jquery組件開(kāi)發(fā)

jollywing / 3049人閱讀

摘要：現(xiàn)在組件化開(kāi)發(fā)，以為代表的庫(kù)或框架讓組件化開(kāi)發(fā)逐漸推廣起來(lái)。下面是我用寫(xiě)的一款簡(jiǎn)易的提示框組件。效果有時(shí)用戶執(zhí)行某個(gè)操作時(shí)，需要彈出提示框讓用戶確定執(zhí)行某個(gè)回調(diào)函數(shù)，這樣就有效的避免用戶因操作失誤執(zhí)行不該執(zhí)行的操作。從而累計(jì)事件的源碼

寫(xiě)這篇文章主要是對(duì)自己以前學(xué)習(xí)jquery插件的總結(jié)?，F(xiàn)在組件化開(kāi)發(fā)，以vuejs 、 reactjs 、angular 為代表的庫(kù)或框架讓web組件化開(kāi)發(fā)逐漸推廣起來(lái)。下面是我用jquery寫(xiě)的一款簡(jiǎn)易的提示框組件。雖然沒(méi)有遵守mvc寫(xiě)法，但也是很實(shí)用。
效果： 

有時(shí)用戶執(zhí)行某個(gè)操作時(shí)，需要彈出提示框讓用戶確定執(zhí)行某個(gè)回調(diào)函數(shù)，這樣就有效的避免用戶因操作失誤執(zhí)行不該執(zhí)行的操作。
代碼 
/**
 * 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(){
            //確認(rèn)按鈕執(zhí)行回調(diào)函數(shù)
            this.callback();
        },
        eventclick:function(){
              var that=this;
              that.$wraper.find("#btn-ok").on("click",function(){
                  that.remove();
                  that.okclick();
              })
              //只通過(guò)事件委托綁定一次，如果用on綁定，因?yàn)閐oument無(wú)法刪除，導(dǎo)致事件一直存在
             /* $(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));
總結(jié)： 
我們都知道動(dòng)態(tài)生成的dom元素，要給它綁定事件時(shí)，必須給予事件委托，通常我們委托給document.
//這里不應(yīng)該用on
$(document).one("click","#btn-ok",function(){
                  that.remove();
                  that.okclick();
                  
              });

但是我們委托給document時(shí)會(huì)出現(xiàn)一個(gè)問(wèn)題，就是但你再次觸發(fā)按鈕時(shí)，原來(lái)綁定的事件不會(huì)銷毀。因?yàn)閐ocument不能刪除。那么用one呢？我們只讓它執(zhí)行一次。大家可以試下。

最終我使用了
that.$wraper.find(".btn-cancel").on("click",function(){
                  that.remove();
                  
              })

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

github源碼

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/81556.html

相關(guān)文章

  • 前端經(jīng)典文章

    摘要：上周末看這篇文章時(shí)，偶有靈光，所以，分享出來(lái)給大家一起看看前端面試四月二十家前端面試題分享請(qǐng)各位讀者添加一下作者的微信公眾號(hào)，以后有新的文章，將在微信公眾號(hào)直接推送給各位，非常感謝。 前端切圖神器 avocode 有了這個(gè)神器，切圖再也腰不酸，腿不疼了。 這一次，徹底弄懂 JavaScript 執(zhí)行機(jī)制 本文的目的就是要保證你徹底弄懂javascript的執(zhí)行機(jī)制，如果讀完本文還不懂，...

    lowett 評(píng)論0 收藏0

  • 從頭實(shí)現(xiàn)一個(gè)簡(jiǎn)易版React（二）

    摘要：寫(xiě)在開(kāi)頭從頭實(shí)現(xiàn)一個(gè)簡(jiǎn)易版一地址上一節(jié)，我們?cè)敿?xì)介紹了實(shí)現(xiàn)一個(gè)簡(jiǎn)易的思路以及整體的結(jié)構(gòu)，但是對(duì)于渲染和更新的原理，卻還沒(méi)有提及，因此，本節(jié)我們將重點(diǎn)放在的渲染上。 寫(xiě)在開(kāi)頭 從頭實(shí)現(xiàn)一個(gè)簡(jiǎn)易版React（一）地址：https://segmentfault.com/a/11...上一節(jié)，我們?cè)敿?xì)介紹了實(shí)現(xiàn)一個(gè)簡(jiǎn)易R(shí)eact的思路以及整體的結(jié)構(gòu)，但是對(duì)于渲染和更新的原理，卻還沒(méi)有提及，因此...

    vvpvvp 評(píng)論0 收藏0

  • 前端文檔收集

    摘要：系列種優(yōu)化頁(yè)面加載速度的方法隨筆分類中個(gè)最重要的技術(shù)點(diǎn)常用整理網(wǎng)頁(yè)性能管理詳解離線緩存簡(jiǎn)介系列編寫(xiě)高性能有趣的原生數(shù)組函數(shù)數(shù)據(jù)訪問(wèn)性能優(yōu)化方案實(shí)現(xiàn)的大排序算法一怪對(duì)象常用方法函數(shù)收集數(shù)組的操作面向?qū)ο蠛驮屠^承中關(guān)鍵詞的優(yōu)雅解釋淺談系列 H5系列 10種優(yōu)化頁(yè)面加載速度的方法 隨筆分類 - HTML5 HTML5中40個(gè)最重要的技術(shù)點(diǎn) 常用meta整理 網(wǎng)頁(yè)性能管理詳解 HTML5 ...

    jsbintask 評(píng)論0 收藏0

  • 前端文檔收集

    摘要：系列種優(yōu)化頁(yè)面加載速度的方法隨筆分類中個(gè)最重要的技術(shù)點(diǎn)常用整理網(wǎng)頁(yè)性能管理詳解離線緩存簡(jiǎn)介系列編寫(xiě)高性能有趣的原生數(shù)組函數(shù)數(shù)據(jù)訪問(wèn)性能優(yōu)化方案實(shí)現(xiàn)的大排序算法一怪對(duì)象常用方法函數(shù)收集數(shù)組的操作面向?qū)ο蠛驮屠^承中關(guān)鍵詞的優(yōu)雅解釋淺談系列 H5系列 10種優(yōu)化頁(yè)面加載速度的方法 隨筆分類 - HTML5 HTML5中40個(gè)最重要的技術(shù)點(diǎn) 常用meta整理 網(wǎng)頁(yè)性能管理詳解 HTML5 ...

    muddyway 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<