JavaScript插件化开发教程 （四）_javascript技巧

一，开篇分析

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("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){
                    $("<div></div>").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") ; // 假定是必须有一项，否则插件意义就不大了！
} ;

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 <= 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 ;
 } ;

（三），完整代码以供学习，本代码已经过测试，包括目录结构以及相关的文件。

　1，html

复制代码 代码如下:

 <body>
     <div class="dxj-ui-hd">
         大熊君{{bb}} - DXJ UI ------ Tab
     </div>
     <div class="dxj-ui-bd">
         <div id="tab">
             <div class="title">
                 <div class="adder">
                     + 添加学生信息
                 </div>
                 <div class="items">
                     <!--<div><span class="del">X</span>欢迎页</div>
                     <div><span class="del">X</span>用户管理</div>
                     <div><span class="del">X</span>Bigbear</div>-->
                 </div>
                 <div class="more-mod">
                     <div class="tag">更多模块</div>
                     <div class="mods">
                        
                     </div>
                 </div>
             </div>
             <div class="console-panel">
             </div>
             <div class="content">
                 <!--<div class="c">
                
                     <div class="input-content"><span>姓名：</span><input type="text" /></div>
                     <div class="input-content"><span>备注：</span><textarea></textarea></div>
                
                 </div>    <div class="input-content"><input type="button" value="保存" /></div>
                 -->
             </div>
         </div>
     </div>
 </body>

2，css

复制代码 代码如下:

 .dxj-ui-hd {
     padding:0px ;
     margin : 0 auto;
     margin-top:30px;
     width:780px;
     height:60px;
     line-height: 60px;
     background: #3385ff;
     color:#fff;
     font-family: "微软雅黑" ;
     font-size: 28px;
     text-align: center;
     font-weight:bold;
 }
 .dxj-ui-bd {
     padding:0px ;
     margin : 0 auto;
     width:778px;
     padding-top : 30px ;
     padding-bottom : 30px ;
     overflow: hidden;
     border:1px solid #3385ff;
 }
 .dxj-ui-bd #tab {
     padding:0px ;
     margin : 0 auto;
     width:720px;
     overflow: hidden;
     position:relative;
 }
 .dxj-ui-bd #tab .title {
     width:720px;
     overflow: hidden;
     border-bottom:2px solid #3385ff;
 }
 .dxj-ui-bd #tab .title .adder {
     width:160px;
     height:32px;
     line-height: 32px;
     background: #DC143C;
     color:#fff;
     font-family: "微软雅黑" ;
     font-size: 14px;
     text-align: center;
     font-weight:bold;
     float : left;
     cursor:pointer;
 }
 .dxj-ui-bd #tab .title .more-mod {
     overflow:hidden;
     border:1px solid #DC143C;
     width:70px;
     position:absolute;
     right:0;
     margin-right:6px;
     display:none;
 }
 .dxj-ui-bd #tab .title .more-mod .tag{
     height:32px;
     line-height:32px;
     width:70px;
     background: #DC143C;
     color:#fff;
     font-family: arial ;
     font-size: 12px;
     text-align: center;
     cursor:pointer;
 }
 .dxj-ui-bd #tab .title .more-mod .mods {
     overflow:hidden;
     width:70px;
     display:none;
 }
 .dxj-ui-bd #tab .title .more-mod .mods div {
     height:24px;
     line-height:24px;
     width:62px;
     font-family: arial ;
     font-size: 12px;
     cursor:pointer;
     padding-left:10px;
 }
 .dxj-ui-bd #tab .title .items {
     height:32px;
 
     width:480px;
     overflow: hidden;
     float : left;
 }
 .dxj-ui-bd #tab .title .items div {
     padding:0px;
     margin-left:10px;
     width:84px;
     height:32px;
     line-height: 32px;
     background: #3385ff;
     color:#fff;
     font-family: arial ;
     font-size: 12px;
     text-align: center;
     position:relative;
     float : left;
     cursor:pointer;
 }
 .dxj-ui-bd #tab .title .items div span.del {
     width:16px;
     height:16px;
     line-height: 16px;
     display:block;
     background: #DC143C;
     position:absolute;
     right:0 ;
     top:0;
     cursor:pointer;
 }
 .dxj-ui-bd #tab .content {
     width:716px;
     padding-top:30px;
     overflow: hidden;
     border:2px solid #3385ff;
     border-top:0px;
     min-height:130px;
     text-align:center;
 }
 .dxj-ui-bd #tab .content table {
     margin : 0 auto ;
 }
 .dxj-ui-bd #tab .content div.c {
     padding-top : 20px ;
     padding-left:20px;
     background:#eee;
     height:140px;
 }
 .dxj-ui-bd #tab .content div.c .input-content {
     margin-top : 10px ;
     font-family: arial ;
     font-size: 12px;
 }
 .dxj-ui-bd #tab .console-panel {
     width:716px;
     padding-top:20px;
     padding-bottom:20px;
     overflow: hidden;
     border:2px solid #3385ff;
     border-top:0px;
     border-bottom:2px solid #3385ff;
     background:#fff;
     display:none;
 }
 
 .active {
     font-weight:bold ;
 }

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 = $("<div style='float:left';></div>").appendTo(root) ;
            $("<input type='radio' name='addmod' />")
            .data("item",item)
            .appendTo(elem) ;
            $("<span></span>").text(item["text"]).appendTo(elem) ;
        }) ;
        if(root.find("div").size()){
            $("<input type='button' value='添加模块' style='margin-left:20px'/>")
            .on("click",function(){
                var data = root.find("input[type=radio]:checked").data("item") ;
                if(that._getItemListByStatus("1").length < that.getOpts()["displayMax"]){
                    that.getElem().find(".title .items div").eq(data["index"]).fadeIn(function(){
                        that._saveOrUpdateStatus(data,"1") ;
                    })
                    .trigger("click") ;
                }
                else{
                    that._saveOrUpdateStatus(data,"2") ;
                }
                that.getElem().find(".title .adder").trigger("click") ;
            })
            .appendTo(root) ;
        }
        else{
            root.text("暂无任何可添加的项目！") ;
        }
    } ;
    /* update time 2015 1/26 15:36 */ 
    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() ;
    } ;
    tabProto.getElem = function(){
        return this.elem ;
    } ;
    tabProto.getOpts = function(){
        return this.opts ;
    } ;
    tabProto._resetContent = function(){
        this.getElem().find(".content").html("") ;
    } ;
    tabProto._setContent = function(html){
        this.getElem().find(".content").html(html) ;
    } ;
    tabProto._getContent = function(url){
        return $.ajax({
            url : url
        }) ;
    } ;
    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){
                        $("<div></div>").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 = $("<div></div>").text(data["text"]).appendTo(this.getElem().find(".title .items")) ;
        data["index"] = item.index() ;
        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 !") ;
            });
        })
        .data("item",data) ;
        if("2" == data["status"]){
            item.hide() ;
        }
        if("1" == data["showClose"]){
            $("<span class='del'>X</span>")
            .on("click",function(){
                if(win.confirm("是否删除此项？")){
                    that._deleteItem(item) ;
                    return false ; // 阻止冒泡
                }
            })
            .appendTo(item) ;
        }
    } ;
    ui.createTab = function(elem,opts){
        var tab = new Tab(elem,opts) ;
        tab.init() ;
        return tab ;
    } ;   
})(jQuery) ;

　　

（四），最后总结

　　（1），面向对象的思考方式合理分析功能需求。

　　（2），以类的方式来组织我们的插件逻辑。

　　（3），不断重构上面的实例，如何进行合理的重构那？不要设计过度，要游刃有余，推荐的方式是过程化设计与面向对象思想设计相结合。

时间： 2024-10-02 17:46:17

JavaScript插件化开发教程 （四）_javascript技巧的相关文章

JavaScript插件化开发教程 （二）_javascript技巧

一,开篇分析 Hi,大家好!还记得前面的那篇文章吗------这个系列的开篇(JavaScript插件化开发教程一).主要讲述了以"jQuery的方式如何开发插件", 那么今天我们带着昨天的疑问来继续我们的插件开发之旅.之前的问题如下: (1),如果项目技术选型换了这些插件又是强依赖"jQuery"机制,我们以前写的插件将会不能用(假设不用jQuery的情况),如何做重构那? (2),重构插件的关键逻辑,我们将如何组织那? 好了,带着问题去学习今天的文章吧. 首先我

JavaScript插件化开发教程 （一）_javascript技巧

一,开篇分析 Hi,大家!今天这系列文章主要是说说如何开发基于"JavaScript"的插件式开发,我想很多人对"插件"这个词并不陌生, 有的人可能叫"组件"或"部件",这不重要,关键是看如何设计,如何做一个全方位的考量,这是本文的重点阐述的概念.我想大家对 "jQuery插件的方式"有一定的了解,我们结合这个话题一起讨论一下,最终给出相关的实现方案,来不断提高自己的谁能力. 二,进入插件正题 一般来说,j

JavaScript插件化开发教程（五）_javascript技巧

一,开篇分析 Hi,大家好!前两篇文章我们主要讲述了以"jQuery的方式如何开发插件",以及过程化设计与面向对象思想设计相结合的方式是如何设计一个插件的,两种方式各有利弊取长补短,嘿嘿嘿,废话少说,进入正题.直接上实际效果图: 大家看到了吧,这是一个下拉菜单插件,在我们日常开发中,系统提供的可能有时让我们觉得不是很美观并且功能有限,造成用户 的体验形式以及用户的可交互性不是很好,所以今天模拟一个嘿嘿嘿.下面就具体分析一下吧. (二),实例分析 (1),首先确定这个插件做什么事.下面看

JavaScript插件化开发教程（六）_javascript技巧

一,开篇分析 今天这篇文章我们说点什么那?嘿嘿嘿.我们接着上篇文章对不足的地方进行重构,以深入浅出的方式来逐步分析,让大家有一个循序渐进提高的过程.废话少说,进入正题.让我们先来回顾一下之前的 Js部分的代码,如下: 复制代码 代码如下:  function ItemSelector(elem,opts){      this.elem = elem ;      this.opts = opts ;  } ;  var ISProto = ItemSelector.prototype ;  I

JavaScript插件化开发教程 （三）_javascript技巧

一,开篇分析 前面两篇文章我们主要讲述了以"jQuery的方式如何开发插件",以及过程化设计与面向对象思想设计相结合的方式是 如何设计一个插件的,两种方式各有利弊取长补短,本系列文章是以学习为导向的,具体场景大家自己定夺使用方式.那么今天从这篇文章开始,我们就以实例的方式带着大家由浅入深的开发属于自己的插件库.嘿嘿嘿,废话少说,进入正题.直接上实际效果图: 大家看到了吧,这是一个选项卡插件,在我们日常做那种单页应用("SPA")的时候或许会接触到,就拿今天的例子来说

Android简明开发教程四：Android应用基本概念

Android平台的一个显著的特点是"低耦合".Activity是Android应用的一个最基本的用户UI模块.如果采用Windows Form 应用作为参照,Activity相当于Windows中的WinForm.和Windows 应用不同的是,运行一个Activity或是Activity之间的交互是 通过消息来实现的.也就是说如果想在起动一个Activity或是在一个Activity中启动另一个Activity,是通过发送Intent消息来 触发,而不像Windows WinFor

【我的Android进阶之旅】Android插件化开发学习资料

1.目前开源的插件开发框架大致有哪些? 1. 任玉刚 的 dynamic-load-apk Github 地址:https://github.com/singwhatiwanna/dynamic-load-apk 2.mmyydd 的 Direct-Load-apk Github 地址:https://github.com/mmyydd/Direct-Load-apk 3.limpoxe 的 Android-Plugin-Framework Github 地址:https://github.co

微信开放平台 公众号第三方平台开发 教程四 代公众号调用接口的SDK和demo

原文:微信开放平台 公众号第三方平台开发 教程四 代公众号调用接口的SDK和demo 教程导航: 微信开放平台 公众号第三方平台开发 教程一 平台介绍 微信开放平台 公众号第三方平台开发 教程二 创建公众号第三方平台 微信开放平台 公众号第三方平台开发 教程三 一键登录授权给第三方平台  微信开放平台 公众号第三方平台开发 教程四 代公众号调用接口的SDK和demo   前几章中我讲解了微信开发平台提供第三方平台的好处,和使用流程,如果你看了我的文章相信你对开放平台有了初步的了解,但是在实际的开

JavaScript组件开发完整示例_javascript技巧

本文实例讲述了JavaScript组件开发的技巧.分享给大家供大家参考,具体如下: 使用JavaScript,按照面向对象的思想来构建组件. 现以构建一个TAB组件为例. 从功能上讲,组件包括可视部分和逻辑控制部分:从代码结构上讲,组件包括代码部分和资源部分(样式.图片等). 组件的特点:高内聚,低耦合(不与其他代码逻辑交叉,可以继承,包含):封装性(隐藏私有方法和变量):可重用性(可反复多次使用,用来组装更复杂的应用). <html> <head> <meta http-e