JavaScript插件化开发教程 (四)


Posted in Javascript onJanuary 27, 2015

一,开篇分析

Hi,还记得上一篇文章吗。主要讲述了一个“Tab”插件是如何组织代码以及实现的”,以及过程化设计与面向对象思想设计相结合的方式是

如何设计一个插件的,两种方式各有利弊取长补短,本系列文章是以学习为导向的,具体场景大家自己定夺使用方式。在从这篇文章中,我们还是以那个“Tab”实例为主,

继续扩展相关功能。嘿嘿嘿,废话少说,进入正题。直接上实际效果图:

JavaScript插件化开发教程 (四)

大家看到了吧,增加了一个新的功能,如果我们在初始化时,我们的模块配置信息项目的条目数大于我们指定的,那么就会显示在“更多模块”

操作项的隐藏列表中,我们的初始化参数配置也从新做了调整比如多了一个“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

JavaScript插件化开发教程 (四)

(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),不断重构上面的实例,如何进行合理的重构那?不要设计过度,要游刃有余,推荐的方式是过程化设计与面向对象思想设计相结合。

Javascript 相关文章推荐
JavaScript 面向对象的之私有成员和公开成员
May 04 Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
Nov 04 Javascript
js日期相关函数总结分享
Oct 15 Javascript
js 判断控件获得焦点的示例代码
Mar 04 Javascript
JS实现动态移动层及拖动浮层关闭的方法
Apr 30 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
Jun 23 Javascript
Node.js 日志处理模块log4js
Aug 28 Javascript
js清除浏览器缓存的几种方法
Mar 15 Javascript
Bootstrap fileinput文件上传组件使用详解
Jun 06 Javascript
JavaScrip关于创建常量的知识点
Dec 07 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
Dec 05 Javascript
django js 实现表格动态标序号的实例代码
Jul 12 Javascript
JavaScript插件化开发教程 (三)
Jan 27 #Javascript
js实现简单随机抽奖的方法
Jan 27 #Javascript
JavaScript插件化开发教程 (二)
Jan 27 #Javascript
javascript将数字转换整数金额大写的方法
Jan 27 #Javascript
JS实现同时搜索百度和必应的方法
Jan 27 #Javascript
js获取域名的方法
Jan 27 #Javascript
JavaScript插件化开发教程 (一)
Jan 27 #Javascript
You might like
MySQL连接数超过限制的解决方法
2011/07/17 PHP
PHP格式化MYSQL返回float类型的方法
2016/03/30 PHP
Yii框架结合sphinx,Ajax实现搜索分页功能示例
2016/10/18 PHP
js 替换
2008/02/19 Javascript
IE8 引入跨站数据获取功能说明
2008/07/22 Javascript
基于jQuery的计算文本框字数的代码
2012/06/06 Javascript
js 实现 input type=&quot;file&quot; 文件上传示例代码
2013/08/07 Javascript
js获取本机的外网/广域网ip地址完整源码
2013/08/12 Javascript
jquery重复提交请求的原因浅析
2014/05/23 Javascript
jquery实现的点击翻书效果代码
2015/11/04 Javascript
前端jquery部分很精彩
2016/05/03 Javascript
深入浅析knockout源码分析之订阅
2016/07/12 Javascript
Javascript中浏览器窗口的基本操作总结
2016/08/18 Javascript
浅谈javascript的url参数parse和build函数
2017/03/04 Javascript
你可能不知道的前端算法之文字避让(inMap)
2018/01/12 Javascript
vue mint-ui tabbar变组件使用
2018/05/04 Javascript
vue-cli项目中使用Mockjs详解
2018/05/14 Javascript
VUE 配置vue-devtools调试工具及安装方法
2018/09/30 Javascript
mocha的时序规则讲解
2019/02/16 Javascript
js中offset,client , scroll 三大元素知识点总结
2019/09/11 Javascript
Vue实现简单计算器
2021/01/20 Vue.js
[59:44]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 paiN vs iG
2018/03/31 DOTA
python DataFrame 取差集实例
2019/01/30 Python
pyqt5实现按钮添加背景图片以及背景图片的切换方法
2019/06/13 Python
python twilio模块实现发送手机短信功能
2019/08/02 Python
python爬虫 线程池创建并获取文件代码实例
2019/09/28 Python
python 基于opencv 绘制图像轮廓
2020/12/11 Python
Watchshop德国:欧洲在线手表No.1
2019/06/20 全球购物
三星法国官方网站:Samsung法国
2019/10/31 全球购物
员工自我鉴定
2013/10/09 职场文书
爱情保证书范文
2014/02/01 职场文书
餐厅楼面部长岗位职责范文
2014/02/16 职场文书
三八妇女节演讲稿
2014/05/27 职场文书
爱岗敬业先进典型事迹材料(2016推荐版)
2016/02/26 职场文书
什么是检讨书?检讨书的格式及范文
2019/11/05 职场文书
Spring boot应用启动后首次访问很慢的解决方案
2021/06/23 Java/Android