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 相关文章推荐
解决AJAX中跨域访问出现'没有权限'的错误
Aug 20 Javascript
JS中处理与当前时间间隔的函数代码
May 23 Javascript
Jquery index()方法 获取相应元素索引值
Oct 12 Javascript
js螺旋动画效果的具体实例
Nov 15 Javascript
js设置组合快捷键/tabindex功能的方法
Nov 21 Javascript
JS实现同时搜索百度和必应的方法
Jan 27 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
Mar 02 Javascript
轻松理解JavaScript闭包
Mar 14 Javascript
AngularJs实现聊天列表实时刷新功能
Jun 15 Javascript
JavaScript函数绑定用法实例分析
Nov 14 Javascript
浅析前端路由简介以及vue-router实现原理
Jun 01 Javascript
详解小程序如何动态绑定点击的执行方法
Nov 26 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
德生PL660的电路分析和打磨
2021/03/02 无线电
深入PHP操作MongoDB的技术总结
2013/06/02 PHP
PHP随机生成信用卡卡号的方法
2015/03/23 PHP
CodeIgniter辅助之第三方类库third_party用法分析
2016/01/20 PHP
详谈php静态方法及普通方法的区别
2016/10/04 PHP
IIS 7.5 asp Session超时时间设置方法
2017/04/17 PHP
JavaScript中的Document文档对象
2008/01/16 Javascript
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
2010/05/07 Javascript
javascript instanceof 内部机制探析
2010/10/15 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
2015/10/29 Javascript
Javascript removeChild()删除节点及删除子节点的方法
2015/12/27 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
2016/10/21 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
2017/01/04 Javascript
vue修改vue项目运行端口号的方法
2017/08/04 Javascript
JavaScript实现简单评论功能
2017/08/17 Javascript
Vue精简版风格概述
2018/01/30 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
2018/02/26 Javascript
JavaScript Canvas实现验证码
2020/08/02 Javascript
express启用https使用小记
2019/05/21 Javascript
NUXT SSR初级入门笔记(小结)
2019/12/16 Javascript
Node.js API详解之 Error模块用法实例分析
2020/05/14 Javascript
微信小程序实现时间戳格式转换
2020/07/20 Javascript
盘点提高 Python 代码效率的方法
2014/07/03 Python
浅谈Python爬取网页的编码处理
2016/11/04 Python
Python利用itchat对微信中好友数据实现简单分析的方法
2017/11/21 Python
美国婴儿用品店:Babies”R”Us
2017/10/12 全球购物
elf彩妆英国官网:e.l.f. Cosmetics英国(美国平价彩妆品牌)
2017/11/02 全球购物
周仰杰(JIMMY CHOO)英国官方网站:闻名世界的鞋子品牌
2018/10/28 全球购物
澳大利亚巧克力花束和礼品网站:Tastebuds
2019/03/15 全球购物
数据库连接池的工作原理
2012/09/26 面试题
字符串str除首尾字符外的其他字符按升序排列
2013/03/08 面试题
网络书店创业计划书
2014/02/07 职场文书
中国在我心中演讲稿
2014/09/13 职场文书
思想品德评语大全
2014/12/31 职场文书
黄埔军校观后感
2015/06/10 职场文书
Mysql中的触发器定义及语法介绍
2022/06/25 MySQL