JavaScript插件化开发教程(五)


Posted in Javascript onFebruary 01, 2015

一,开篇分析

Hi,大家好!前两篇文章我们主要讲述了以“jQuery的方式如何开发插件”,以及过程化设计与面向对象思想设计相结合的方式是如何设计一个插件的,两种方式各有利弊取长补短,嘿嘿嘿,废话少说,进入正题。直接上实际效果图:

JavaScript插件化开发教程(五)

大家看到了吧,这是一个下拉菜单插件,在我们日常开发中,系统提供的可能有时让我们觉得不是很美观并且功能有限,造成用户

的体验形式以及用户的可交互性不是很好,所以今天模拟一个嘿嘿嘿。下面就具体分析一下吧。

(二),实例分析

(1),首先确定这个插件做什么事。下面看一下插件的调用方式,以及配置参数说明。如下代码:

 $(function(){

     var itemSelector = new ItemSelector($("#item-selector"),{

         currentText : "Please Choose Item" ,

         items : [

             {

                 text : "JavaScript" ,

                 value : "js" ,

                 disabled : "1"

             } ,

             {

                 text : "Css" ,

                 value : "css" ,

                 disabled : "0"

             } ,

             {

                 text : "Html" ,

                 value : "html" ,

                 disabled : "0"

             }

         ] ,

         mode : "0" , // 为"1"时支持checkbox多选模式

         change : function(value){

             // put your code here

         }

     }) ;

     itemSelector.init() ;

     setTimeout(function(){

         console.log(itemSelector.getCurrentValue()) ; // 测试 获取当先选中项

     },2000) ;
 

“var itemSelector = new ItemSelector()”里面包含两个参数,第一个是dom节点对象,第二个是插件参数选项,"currentText"代表“ItemSelector“插件中,选中文本显示区域的文字描述。

”items“是一个数组,里面包含的是“ItemSelector”项目的属性,包括文字描述,选项值,”disabled“代表列表条目的可显度,0代表显示,1代表不可显示。

”change“代表选中时的操作回调函数,选项数据会以参数的形式进行回传。

(2),所涉的功能有哪些

可显的效果图如下:

JavaScript插件化开发教程(五)

不可显的效果图如下:

JavaScript插件化开发教程(五)

二者的区别是:不可现状态数据不会回传,悬浮上去不会有任何效果。

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

(1),html

 <body>

     <div class="dxj-ui-hd">

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

     </div>

     <div class="dxj-ui-bd">

         <div id="item-selector">

             <div class="title">

                 <div></div><span>↓</span>

             </div>

             <div class="content">

                 <div class="items">

                     

                 </div>

             </div>

         </div>

     </div>

 </body>

(2),css

 /* item-selector */ 

 #item-selector {

     margin : 0 auto;

     width : 220px ;

     overflow:hidden;

     border:2px solid #ccc;

 }

 #item-selector .title {

     border-bottom:1px solid #ccc;

     overflow:hidden;

 }

 #item-selector .title div {

     width:190px;

     border:0px ;

     color:#999;

     font-family: arial ;

     font-size: 14px;

     height:28px;

     line-height:28px;

     float:left;

     cursor:pointer;

 }

 #item-selector .title span {

     display:block;

     height:30px;

     line-height:30px;

     width:29px;

     float:left;

     text-align:center;

     border-left:1px solid #ccc;

     cursor:pointer;

 }

 #item-selector .content {

     width : 220px ;

     overflow:hidden;

 }

 #item-selector .content .items {

     overflow:hidden;

 }

 #item-selector .content .items div {

     padding-left:20px;

     width : 200px ;

     height:32px;

     line-height:32px;

     font-family: "微软雅黑" ;

     font-size: 14px;

     font-weight:bold;

     cursor:pointer;

 }

 .item-hover {

     background:#3385ff;

     color:#fff;

 }

 (3),"ItemSelector.js"

function ItemSelector(elem,opts){

    this.elem = elem ;

    this.opts = opts ;

} ;

var ISProto = ItemSelector.prototype ;

ISProto.getElem = function(){

    return this.elem ;

} ;

ISProto.getOpts = function(){

    return this.opts ;

} ;

/* data manip*/

ISProto._setCurrent = function(current){

    this.getOpts()["current"] = current ;

} ;

ISProto.getCurrentValue = function(current){

    return this.getOpts()["current"] ;

} ;

/* data manip*/

ISProto.init = function(){

    var that = this ;

    this.getOpts()["current"] = null ; // 数据游标

    this._setItemValue(this.getOpts()["currentText"]) ;

    var itemsElem = that.getElem().find(".content .items") ;

    this.getElem().find(".title div").on("click",function(){

        itemsElem.toggle() ;

    }) ;

    this.getElem().find(".title span").on("click",function(){

        itemsElem.toggle() ;

    }) ;

    $.each(this.getOpts()["items"],function(i,item){

        item["id"] = (new Date().getTime()).toString() ;

        that._render(item) ;

    }) ;

} ;

ISProto._setItemValue = function(value){

    this.getElem().find(".title div").text(value)

} ;

ISProto._render = function(item){

    var that = this ;

    var itemElem = $("<div></div>")

    .text(item["text"])

    .attr("id",item["id"]) ;

    if("0" == item["disabled"]){

        itemElem.on("click",function(){

            var onChange = that.getOpts()["change"] ;

            that.getElem().find(".content .items").hide() ;

            that._setItemValue(item["text"]) ;

            that._setCurrent(item) ;

            onChange && onChange(item) ;

        })

        .mouseover(function(){

            $(this).addClass("item-hover") ;

        })

        .mouseout(function(){

            $(this).removeClass("item-hover") ;

        }) ;

    }

    else{

        itemElem.css("color","#ccc").on("click",function(){

            that.getElem().find(".content .items").hide() ;

            that._setItemValue(item["text"]) ;

        }) ;

    }

    itemElem.appendTo(this.getElem().find(".content .items")) ;

} ;

(四),最后总结

(1),面向对象的思考方式合理分析功能需求。

(2),以类的方式来组织我们的插件逻辑。

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

    (4),下篇文章中会扩展相关功能,比如“mode”这个属性,为"1"时支持checkbox多选模式,现在只是默认下拉模式。

本文先到这里了,后续我们再继续讨论,希望小伙伴们能够喜欢本系列文章。

Javascript 相关文章推荐
Javascript基础 函数“重载” 详细介绍
Oct 25 Javascript
jquery选择器之层级过滤选择器详解
Jan 27 Javascript
jQuery中extend函数详解
Feb 13 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
Mar 04 Javascript
JS实现FLASH幻灯片图片切换效果的方法
Mar 04 Javascript
JS制作手机端自适应缩放显示
Jun 11 Javascript
jQuery代码实现对话框右上角菜单带关闭×
May 03 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
Jun 06 Javascript
基于JavaScript实现焦点图轮播效果
Mar 27 Javascript
angular.js指令中的controller、compile与link函数的不同之处
May 10 Javascript
vue-lazyload图片延迟加载插件的实例讲解
Feb 09 Javascript
JavaScript实现alert弹框效果
Nov 19 Javascript
对JavaScript中this指针的新理解分享
Jan 31 #Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
Jan 31 #Javascript
有效提高JavaScript执行效率的几点知识
Jan 31 #Javascript
JavaScript日期时间与时间戳的转换函数分享
Jan 31 #Javascript
JavaScript监听和禁用浏览器回车事件实例
Jan 31 #Javascript
JavaScript编程中容易出BUG的几点小知识
Jan 31 #Javascript
JavaScript实现的双向跨域插件分享
Jan 31 #Javascript
You might like
星际争霸中的热键
2020/03/04 星际争霸
解析在apache里面给php写虚拟目录的详细方法
2013/06/24 PHP
php中fsockopen用法实例
2015/01/05 PHP
PHP实现搜索地理位置及计算两点地理位置间距离的实例
2016/01/08 PHP
PHP递归遍历指定文件夹内的文件实现方法
2016/11/15 PHP
YII2框架中actions的作用与使用方法示例
2020/03/13 PHP
由JavaScript技术实现的web小游戏(不含网游)
2010/06/12 Javascript
不同浏览器的怪癖小结
2010/07/11 Javascript
JavaScript中关于indexOf的使用方法与问题小结
2010/08/05 Javascript
jQueryUI写一个调整分类的拖放效果实现代码
2012/05/10 Javascript
node.js中的console.log方法使用说明
2014/12/09 Javascript
js实现使用鼠标拖拽切换图片的方法
2015/05/04 Javascript
浅析nodejs实现Websocket的数据接收与发送
2015/11/19 NodeJs
jQuery实现的tab标签切换效果示例
2016/09/05 Javascript
AngularJS创建自定义指令的方法详解
2016/11/03 Javascript
鼠标经过出现气泡框的简单实例
2017/03/17 Javascript
详解使用nvm管理多版本node的方法
2017/08/30 Javascript
nodejs高大上的部署方式(PM2)
2018/09/11 NodeJs
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
2020/09/12 Javascript
python文件操作之目录遍历实例分析
2015/05/20 Python
详解Python中的__new__、__init__、__call__三个特殊方法
2016/06/02 Python
DataFrame 将某列数据转为数组的方法
2018/04/13 Python
PYTHON基础-时间日期处理小结
2018/05/05 Python
Python中应该使用%还是format来格式化字符串
2018/09/25 Python
对django views中 request, response的常用操作详解
2019/07/17 Python
python 实现多线程下载视频的代码
2019/11/15 Python
记一次pyinstaller打包pygame项目为exe的过程(带图片)
2020/03/02 Python
Python用摘要算法生成token及检验token的示例代码
2020/12/01 Python
sklearn中的交叉验证的实现(Cross-Validation)
2021/02/22 Python
法国和欧洲海边和滑雪度假:Pierre & Vacances
2017/01/04 全球购物
Lands’ End英国官方网站:高质量男女服装
2017/10/07 全球购物
四种会话跟踪技术
2015/05/20 面试题
医学类个人求职信范文
2014/02/05 职场文书
禁烟标语大全
2014/06/11 职场文书
SpringCloud的JPA连接PostgreSql的教程
2021/06/26 Java/Android
MYSQL优化之数据表碎片整理详解
2022/04/03 MySQL