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 相关文章推荐
Web版彷 Visual Studio 2003 颜色选择器
Jan 09 Javascript
xml文档转换工具,附图表例子(hta)
Nov 17 Javascript
基于jquery的代码显示区域自动拉长效果
Dec 07 Javascript
js动态控制table的tr、td增加及删除的具体实现
Apr 30 Javascript
javascript设置连续两次点击按钮时间间隔的方法
Oct 28 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
Aug 24 Javascript
JS判断日期格式是否合法的简单实例
Jul 11 Javascript
深入理解Angular2 模板语法
Aug 07 Javascript
jQuery日期范围选择器附源码下载
May 23 jQuery
AngularJS监听ng-repeat渲染完成的两种方法
Jan 16 Javascript
小程序实现列表删除功能
Oct 30 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
May 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中使用Curl、socket、file_get_contents三种方法POST提交数据
2011/08/12 PHP
php使用ICQ网关发送手机短信
2013/10/30 PHP
linux平台编译安装PHP7并安装Redis扩展与Swoole扩展实例教程
2016/09/30 PHP
php使用curl伪造来源ip和refer的方法示例
2018/05/08 PHP
Ajax::prototype 源码解读
2007/01/22 Javascript
ajax无刷新动态调用股票信息(改良版)
2008/11/01 Javascript
Ext.MessageBox工具类简介
2009/12/10 Javascript
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
2012/12/12 Javascript
JS实现淘宝幻灯片效果的实现方法
2013/03/22 Javascript
JQuery中SetTimeOut传参问题探讨
2013/05/10 Javascript
jquery 获取表单元素里面的值示例代码
2013/07/28 Javascript
各种页面定时跳转(倒计时跳转)代码总结
2013/10/24 Javascript
浅谈jQuery的offset()方法及示例分享
2015/07/17 Javascript
原生JS发送异步数据请求
2017/06/08 Javascript
JS设计模式之单例模式(一)
2017/09/29 Javascript
vue中render函数的使用详解
2018/10/12 Javascript
小程序hover-class点击态效果实现
2019/02/26 Javascript
nodejs log4js 使用详解
2019/05/31 NodeJs
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
2020/02/25 Javascript
Python HTMLParser模块解析html获取url实例
2015/04/08 Python
Python使用min、max函数查找二维数据矩阵中最小、最大值的方法
2018/05/15 Python
pycharm 实现显示project 选项卡的方法
2019/01/17 Python
Django的CVB实例详解
2020/02/10 Python
python 日志模块 日志等级设置失效的解决方案
2020/05/26 Python
torchxrayvision包安装过程(附pytorch1.6cpu版安装)
2020/08/26 Python
LEGO玩具英国官方商店:LEGO Shop GB
2018/03/27 全球购物
巴西儿童时尚购物网站:Dinda
2019/08/14 全球购物
幼儿教师演讲稿
2014/05/06 职场文书
学校节能减排方案
2014/06/13 职场文书
简历自我评价优缺点
2015/03/11 职场文书
教师培训简讯
2015/07/20 职场文书
预备党员入党感想
2015/08/10 职场文书
Python合并多张图片成PDF
2021/06/09 Python
HTML5页面音频自动播放的实现方式
2021/06/21 HTML / CSS
html+css实现滚动到元素位置显示加载动画效果
2021/08/02 HTML / CSS
MySQL分区表管理命令汇总
2022/03/21 MySQL