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 相关文章推荐
JQUERY THICKBOX弹出层插件
Aug 30 Javascript
弹出层之1:JQuery.Boxy (一) 使用介绍
Oct 06 Javascript
js写一个弹出层并锁屏效果实现代码
Dec 07 Javascript
JavaScript实现图片滑动切换的代码示例分享
Mar 06 Javascript
AngularJS API之copy深拷贝详解及实例
Sep 14 Javascript
javascript设计模式之单体模式学习笔记
Feb 15 Javascript
微信小程序 wx.request方法的异步封装实例详解
May 18 Javascript
vue2导航根据路由传值,而改变导航内容的实例
Nov 10 Javascript
vue.js根据代码运行环境选择baseurl的方法
Feb 28 Javascript
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
layui 实现表单和文件上传一起传到后台的例子
Sep 16 Javascript
vue实现一个矩形标记区域(rectangle marker)的方法
Oct 28 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
php self,$this,const,static,-&amp;gt;的使用
2009/10/22 PHP
用PHP读取超大文件的实例代码
2012/04/01 PHP
图文介绍PHP添加Redis模块及连接
2015/07/28 PHP
PHP5.2中PDO的简单使用方法
2016/03/25 PHP
php实现图片按比例截取的方法
2017/02/06 PHP
在JavaScript的AngularJS库中进行单元测试的方法
2015/06/23 Javascript
JS实现3D图片旋转展示效果代码
2015/09/22 Javascript
jQuery基本过滤选择器用法示例
2016/09/09 Javascript
JS判断浏览器是否安装flash插件的简单方法
2016/09/13 Javascript
微信小程序中的onLoad详解及简单实例
2017/04/05 Javascript
快速了解vue-cli 3.0 新特性
2018/02/28 Javascript
JavaScript反射与依赖注入实例详解
2018/05/29 Javascript
微信小程序实现多选功能
2018/11/04 Javascript
4 种滚动吸顶实现方式的比较
2019/04/09 Javascript
ES6 Promise对象的含义和基本用法分析
2019/06/14 Javascript
JavaScript鼠标拖拽事件详解
2020/04/03 Javascript
[02:41]2015国际邀请赛中国区预选赛观战指南
2015/05/20 DOTA
python 读取文本文件的行数据,文件.splitlines()的方法
2018/07/12 Python
Python语言检测模块langid和langdetect的使用实例
2019/02/19 Python
Python Excel处理库openpyxl使用详解
2019/05/09 Python
scrapy-redis源码分析之发送POST请求详解
2019/05/15 Python
Python帮你微信头像任意添加装饰别再@微信官方了
2019/09/25 Python
ITK 实现多张图像转成单个nii.gz或mha文件案例
2020/07/01 Python
python获取命令行参数实例方法讲解
2020/11/02 Python
pip/anaconda修改镜像源,加快python模块安装速度的操作
2021/03/04 Python
美国在线咖啡、茶和餐厅供应商:LollicupStore
2018/05/04 全球购物
Theo + George官方网站:都柏林时尚品牌
2019/04/08 全球购物
斯洛伐克家具和时尚装饰品购物网站:Butlers.sk
2019/09/08 全球购物
研发工程师的岗位职责
2013/11/18 职场文书
单位未婚证明范本
2014/01/18 职场文书
高级销售求职信
2014/02/21 职场文书
婚纱摄影师求职信范文
2014/04/17 职场文书
迟到检讨书2000字(精选篇)
2014/10/07 职场文书
党的群众路线教育实践活动整改方案
2014/10/28 职场文书
会议通知范文
2015/04/15 职场文书
怎么用Python识别手势数字
2021/06/07 Python