首頁 > web前端 > js教程 > 主體

JavaScript外掛程式開發教學 (四)_javascript技巧

WBOY
發布: 2016-05-16 16:17:47
原創
1147 人瀏覽過

一,開頭分析

Hi,還記得上一篇文章嗎。主要講述了一個“Tab”插件是如何組織程式碼以及實現的”,以及過程化設計與物件導向思想設計相結合的方式是

如何設計一個插件的,兩種方式各有利弊取長補短,本系列文章是以學習為導向的,具體場景大家自己定奪使用方式。在從這篇文章中,我們還是以那個「Tab」實例為主,

繼續擴充相關功能。嘿嘿嘿,廢話少說,進入正題。直接上實際效果圖:

大家看到了吧,增加了一個新的功能,如果我們在初始化時,我們的模組配置資訊項目的條目數大於我們指定的,那麼就會顯示在「更多模組」

操作項目的隱藏清單中,我們的初始化參數配置也從新做了調整例如多了一個「displayMax」指定初始化時的條目數,還有一個項目屬性,「status」

在初始化時也去掉了不需要配置了,在程式中動態產生配置,增加了程式的彈性,下面就具體分析一下吧。

(二),實例分析

(1),先確定這個外掛做什麼事。下面看一下插件的呼叫方式,以及設定參數說明。如下碼:

複製程式碼 程式碼如下:

{
    buttonText : "新增模組" ,
    result : [
        {
            text : "精靈提示" ,
            url : "help.html" ,
            showClose : "0"
        } ,
        {
            text : "學生資料" ,
            url : "info.html" ,
            showClose : "1"
        } ,
        {
            text : "學生分類" ,
            url : "category.html" ,
            showClose : "1"
        } ,
        {
            text : "大熊君{{bb}}" ,
            url : "bb.html" ,
            showClose : "1"
        } ,
        {
            text : "Beta測試模組" ,
            url : "test.html" ,
            showClose : "1"
        } ,
        {
            text : "三胖子" ,
            url : "help.html" ,
            showClose : "1"
        } ,
        {
            text : "四禿子" ,
            url : "help.html" ,
            showClose : "1"
        }
    ] ,
    displayMax : 5 // 最多顯示項目
}   
 

「bigbear.ui.createTab」裡麵包含兩個參數,第一個是dom節點對象,第二個是插件參數選項,"buttonText "代表「Tab「插件中,操作按鈕的文字描述。

」result「是一個數組,裡麵包含的是選項卡項目的屬性,包括文字描述,點擊選項卡項目時做請求使用的url,」showClose「代表選項卡的選項是否顯示關閉按鈕。

「status」在初始化時也去掉了不需要配置了,在程式中動態產生配置。可能會有關閉狀態,分​​別表示為:1-預設顯示,0-關閉狀態,2-超過預設的條目數。

(2),功能分步驟介紹

1---,透過可選參數,初始化外掛程式:

複製程式碼 程式碼如下:

$(function(){
    bigbear.ui.createTab($("#tab"),{
        buttonText : "新增模組" ,
        result : [
            {
                text : "精靈提示" ,
                url : "help.html" ,
                showClose : "0"
            } ,
            {
                text : "學生資料" ,
                url : "info.html" ,
                showClose : "1"
            } ,
            {
                text : "學生分類" ,
                url : "category.html" ,
                showClose : "1"
            } ,
            {
                text : "大熊君{{bb}}" ,
                url : "bb.html" ,
                showClose : "1"
            } ,
            {
                text : "Beta測試模組" ,
                url : "test.html" ,
                showClose : "1"
            } ,
            {
                text : "三胖子" ,
                url : "help.html" ,
                showClose : "1"
            } ,
            {
                text : "四禿子" ,
                url : "help.html" ,
                showClose : "1"
            }
        ] ,
        displayMax : 5 // 顯示項目最多
    }) ;
}) ;           

2---,渲染並且完成時間綁定以及相關的業務邏輯,例如初始化時條目數量驗證。

複製程式碼 程式碼如下:

tabProto.init = function(){
    if(this._isEmptyResult()){
        this._setContent("暫無任何模組!") ;
    }
    var that = this ;
    this.getElem().find(".title .adder")
    .text(" " this.getOpts()["buttonText"])
    .on("點選",function(){
        that.getElem().find(".console-panel").slideToggle(function(){
            that._renderConsolePanel("0") ;
        }) ;
    }) ;
    $.each(this.getOpts()["結果"],function(i,item){
        if(that._isDisplayMax(i 1)){
            that._saveOrUpdateStatus(item,"1") ;
        }
        其他{
            that._saveOrUpdateStatus(item,"2") ;
        }
        that._render(item) ;
    }) ;
    if(!that._isDisplayMax(this.getOpts()["結果"].length)){
        this.getElem().find(".title .more-mod").fadeIn(function(){
            $(this).find(".tag").on("click",function(){
                var root = $(this).next() ;
                root.empty() ;
                $.each(that._getItemListByStatus("2"),function(i,data){
                    $("
").text(data["text"])
                    .on("點選",function(){
                        if(that._getItemListByStatus("1").length                             that.getElem().find(".title .items div").eq(data["index"]).fadeIn(function(){
                                that._saveOrUpdateStatus(data,"1") ;
                            }) ;
                        }
                        其他{
                            alert("不能增加任何模組,目前已經是最大數量!") ;
                        }
                    })
                    .appendTo(root) ;
                }) ;
                root.toggle() ;
            }) ;
           
        });
    }
    this.getElem().find(".title .items div")
    .eq(0)
    .trigger("點擊") ; // 假設是必須有一個,否則插件意義就不大了! } ;

3---,選項卡切換以及資料內容渲染操作。

複製程式碼 程式碼如下:

 tabProto._setCurrent = function(index){
     var items = this.getElem().find(".title .items div").removeClass("active") ;
     items.eq(index).addClass("active") ;
     var contents = this.getElem().find(".content .c").hide() ;
     contents.eq(index).show() ;
 } ;   

複製程式碼 程式碼如下:

 item.on("click",function(){
     that._setCurrent($(this).index()) ;
     that._getContent(data["url"]).done(function(result){
         that._setContent(result) ;
     })
     .fail(function(){
         throw new Error("Net Error !") ;
     });
 })

 
複製程式碼 程式碼如下:

 tabProto._setContent = function(html){
     this.getElem().find(".content").html(html) ;
 } ;
 tabProto._getContent = function(url){
     return $.ajax({
         url : url
     }) ;
 } ;

4---,核心的輔助資料操作方法,不涉及dom。

複製程式碼 程式碼如下:

 /* update time 2015 1/26 15:36 */
 tabProto._isDisplayMax = function(size){
     var displayMax = this.getOpts()["displayMax"] || 5 ;
     return (size  } ;
 tabProto._isEmptyResult = function(){
     if(!this.getOpts()["result"].length){
         return false ;
     }
     return true ;
 } ;
 tabProto._saveOrUpdateStatus = function(item,status){
     item["status"] = status ;
 } ;
 tabProto._getItemListByStatus = function(status){
     var list = [] ;
     var result = this.getOpts()["result"] ;
     $.each(result,function(i,item){
         if(status == item["status"]){
             list.push(item) ;
         }
     }) ;
     return list ;
 } ;
 tabProto._getStatusByIndex = function(index){
     var status = null ;
     var result = this.getOpts()["result"] ;
     $.each(result,function(i,item){
         if(index == item["index"]){
             status = item["status"] ;
         }
     }) ;
     return status ;
 } ;

(三),完整程式碼以供學習,本程式碼已經過測試,包括目錄結構以及相關的檔案。

 1,html

複製程式碼 程式碼如下:

 
    

         大熊君{{bb}} - DXJ UI ------ Tab
    

    

        

            

                

                     新增學生資料
                

                

                    
                

                

                    
更多模組

                    

                        
                    

                

            

            

            

            

                
            

        

    

 身體>

2,css

複製程式碼 程式碼如下:

 .dxj-ui-hd {
     填入:0px;
     邊距:0 自動;
     頂部邊距:30px;
     寬度:780px;
     高度:60px;
     行高:60px;
     背景:#3385ff;
     顏色:#fff;
     font-family: "微軟雅黑" ;
     字體大小:28px;
     文字對齊:居中;
     字體粗細:粗體;
 }
 .dxj-ui-bd {
     填入:0px;
     邊距:0 自動;
     寬度:778px;
     上填充:30px;
     底部填充:30px;
     溢位:隱藏;
     邊框:1px 實心 #3385ff;
 }
 .dxj-ui-bd #tab {
     填入:0px;
     邊距:0 自動;
     寬度:720px;
     溢位:隱藏;
     位置:相對;
 }
 .dxj-ui-bd #tab .title {
     寬度:720px;
     溢位:隱藏;
     邊框底部:2px 實心 #3385ff;
 }
 .dxj-ui-bd #tab .title .adder {
     寬度:160px;
     高度:32px;
     行高:32px;
     背景:#DC143C;
     顏色:#fff;
     font-family: "微軟雅黑" ;
     字體大小:14px;
     文字對齊:居中;
     字體粗細:粗體;
     浮動:左;
     遊標:指針;
 }
 .dxj-ui-bd #tab .title .more-mod {
     溢位:隱藏;
     邊框:1px實線#DC143C;
     寬度:70px;
     地點:絕對;
     右:0;
     右邊距:6px;
     顯示:無;
 }
 .dxj-ui-bd #tab .title .more-mod .tag{
     高度:32px;
     行高:32px;
     寬度:70px;
     背景:#DC143C;
     顏色:#fff;
     字型系列:arial ;
     字體大小:12px;
     文字對齊:居中;
     遊標:指針;
 }
 .dxj-ui-bd #tab .title .more-mod .mods {
     溢位:隱藏;
     寬度:70px;
     顯示:無;
 }
 .dxj-ui-bd #tab .title .more-mod .mods div {
     高度:24px;
     行高:24px;
     寬度:62px;
     字型系列:arial ;
     字體大小:12px;
     遊標:指針;
     左內邊距:10px;
 }
 .dxj-ui-bd #tab .title .items {
     高度:32px;
 
     寬度:480px;
     溢位:隱藏;
     浮動:左;
 }
 .dxj-ui-bd #tab .title .items div {
     填充:0px;
     左邊距:10px;
     寬度:84px;
     高度:32px;
     行高:32px;
     背景:#3385ff;
     顏色:#fff;
     字型系列:arial ;
     字體大小:12px;
     文字對齊:居中;
     位置:相對;
     浮動:左;
     遊標:指針;
 }
 .dxj-ui-bd #tab .title .items div span.del {
     寬度:16px;
     高度:16px;
     行高:16px;
     顯示:塊;
     背景:#DC143C;
     地點:絕對;
     右:0 ;
     上方:0;
     遊標:指針;
 }
 .dxj-ui-bd #tab .content {
     寬度:716px;
     上填:30px;
     溢位:隱藏;
     邊框:2px實心#3385ff;
     頂部邊框:0px;
     最小高度:130px;
     文字對齊:居中;
 }
 .dxj-ui-bd #tab .內容表 {
     邊距:0 自動;
 }
 .dxj-ui-bd #tab .content div.c {
     上填:20px;
     左內邊距:20px;
     背景:#eee;
     高度:140px;
 }
 .dxj-ui-bd #tab .content div.c .input-content {
     頂部邊距:10px;
     字型系列:arial ;
     字體大小:12px;
 }
 .dxj-ui-bd #tab .console-面板 {
     寬度:716px;
     上填:20px;
     底部填入:20px;
     溢位:隱藏;
     邊框:2px實心#3385ff;
     頂部邊框:0px;
     邊框底部:2px 實心 #3385ff;
     背景:#fff;
     顯示:無;
 }
 
 .active {
     字體粗細:粗體;
 }

3,bigbear.js

複製程式碼程式碼如下:

(function($){
    var win = window ;
    var bb = win.bigbear = win.bigbear || {
        ui : {}
    } ;
    var ui = bb.ui = {} ;
    var Tab = function(elem,opts){
        this.elem = elem ;
        this.opts = opts ;
    } ;
    var tabProto = Tab.prototype ;
    /* update time 2015 1/26 15:36 */
    tabProto._isDisplayMax = function(size){
        var displayMax = this.getOpts()["displayMax"] || 5 ;
        return (size <= displayMax) ? true : false ;
} ;
tabProto._isEmptyResult = function(){
if(!this.getOpts()["result"].length){
return false ;
}
return true ;
} ;
tabProto._saveOrUpdateStatus = function(item,status){
item["status"] = status ;
} ;
tabProto._getItemListByStatus = function(status){
var list = [] ;
var result = this.getOpts()["result"] ;
$.each(result,function(i,item){
if(status == item["status"]){
list.push(item) ;
}
}) ;
return list ;
} ;
tabProto._getStatusByIndex = function(index){
var status = null ;
var result = this.getOpts()["result"] ;
$.each(result,function(i,item){
if(index == item["index"]){
status = item["status"] ;
}
}) ;
return status ;
} ;
tabProto._renderConsolePanel = function(status){
var that = this ;
var root = that.getElem().find(".console-panel") ;
this._resetConsolePanel() ;
$.each(that._getItemListByStatus(status),function(i,item){
var elem = $("
").appendTo(root) ;
            $("")
            .data("項目", 項目)
            .appendTo(elem) ;
            $("").text(item["text"]).appendTo(elem) ;
        }) ;
        if(root.find("div").size()){
            $("")
            .on("點選",function(){
                var data = root.find("input[type=radio]:checked").data("item") ;
                if(that._getItemListByStatus("1").length                     that.getElem().find(".title .items div").eq(data["index"]).fadeIn(function(){
                        that._saveOrUpdateStatus(data,"1") ;
                    })
                    .trigger("點擊") ;
                }
                其他{
                    that._saveOrUpdateStatus(data,"2") ;
                }
                that.getElem().find(".title .adder").trigger("click") ;
            })
            .appendTo(root) ;
        }
        其他{
            root.text("暫無任何可新增的項目!") ;
        }
    } ;
    /* 更新時間 2015年1/26 15:36 */ 
    tabProto._setCurrent = 函數(索引){
        var items = this.getElem().find(".title .items div").removeClass("active") ;
        items.eq(index).addClass("active") ;
        var content = this.getElem().find(".content .c").hide() ;
        content.eq(index).show() ;
    } ;
    tabProto.getElem = function(){
        返回 this.elem ;
    } ;
    tabProto.getOpts = function(){
        返回 this.opts ;
    } ;
    tabProto._resetContent = function(){
        this.getElem().find(".content").html("") ;
    } ;
    tabProto._setContent = 函數(html){
        this.getElem().find(".content").html(html) ;
    } ;
    tabProto._getContent = 函數(url){
        返回 $.ajax({
            網址:網址
        }) ;
    } ;
    tabProto._deleteItem = function(elem){
        var that = this ;
        this.getElem().find(".title .items div")
        .eq(elem.index())
        .fadeOut(function(){
            that._resetContent() ;
            that._saveOrUpdateStatus(elem.data("item"),"0") ;
            that._triggerItem(elem.index() + 1) ;
        }) ;
    } ;
    tabProto._triggerItem = function(next){
        var nextStatus = this._getStatusByIndex(next) ;
        var items = this.getElem().find(".title .items div") ;
        next = items.eq(next) ;
        if(next.size() && "1" == nextStatus){ //后继dom节点存在
            next.trigger("click") ;
        }
        else{
            items.eq(0).trigger("click") ;
        }
    } ;
    tabProto._resetConsolePanel = function(){
        this.getElem().find(".console-panel").empty() ;
    } ;
    tabProto.init = function(){
        if(this._isEmptyResult()){
            this._setContent("暂无任何模块!") ;
        }
        var that = this ;
        this.getElem().find(".title .adder")
        .text("+" + this.getOpts()["buttonText"])
        .on("click",function(){
            that.getElem().find(".console-panel").slideToggle(function(){
                that._renderConsolePanel("0") ;
            }) ;
        }) ;
        $.each(this.getOpts()["result"],function(i,item){
            if(that._isDisplayMax(i + 1)){
                that._saveOrUpdateStatus(item,"1") ;
            }
            else{
                that._saveOrUpdateStatus(item,"2") ;
            }
            that._render(item) ;
        }) ;
        if(!that._isDisplayMax(this.getOpts()["result"].length)){
            this.getElem().find(".title .more-mod").fadeIn(function(){
                $(this).find(".tag").on("click",function(){
                    var root = $(this).next() ;
                    root.empty() ;
                    $.each(that._getItemListByStatus("2"),function(i,data){
                        $("
").text(data["text"])
                        .on("click",function(){
                            if(that._getItemListByStatus("1").length < that.getOpts()["displayMax"]){
                                that.getElem().find(".title .items div").eq(data["index"]).fadeIn(function(){
                                    that._saveOrUpdateStatus(data,"1") ;
                                }) ;
                            }
                            else{
                                alert("不能添加任何模块,目前已经是最大数量!") ;
                            }
                        })
                        .appendTo(root) ;
                    }) ;
                    root.toggle() ;
                }) ;
                
            });
        }
        this.getElem().find(".title .items div")
        .eq(0)
        .trigger("click") ; // 假定是必须有一项,否则插件意义就不大了!
    } ;
    tabProto._render = function(data){
        var that = this ;
        var item = $("
").text(data["text"]).appendTo(this.getElem().find(".title .items")) ;
        data["index"] = item.index() ;
        item.on("點選",function(){
            that._setCurrent($(this).index()) ;
            that._getContent(data["url"]).done(function(result){
                that._setContent(結果) ;
            })
            .fail(function(){
                拋出新錯誤(「網路錯誤!」);
            });
        })
        .data("項目",資料) ;
        if("2" == data["status"]){
            item.hide() ;
        }
        if("1" == data["showClose"]){
            $("X")
            .on("點選",function(){
                if(win.confirm("刪除該項目?")){
                    that._deleteItem(item) ;
                    回復為假式; // 阻止冒泡
                }
            })
            .appendTo(項目) ;
        }
    } ;
    ui.createTab = function(elem,opts){
        var tab = new Tab(elem,opts) ;
        tab.init() ;
        返回標籤;
    };   
})(jQuery) ;

(四),最後總結

(1),物件導向的思考方式合理分析功能需求。

  (2),以類別的方式來組織我們的插件邏輯。

(3),不斷重構上面的實例,如何進行合理的重構那?不要過度設計,要游刃有餘,推薦的方式是過程化設計與物件導向思想設計結合。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板