【引言】距离上一回写博客已经有一些时日了，之前的爱莲iLinkIT系列主要是讲解了如何用NodeJS来实现一个简单的“文件传送”软件，属于JavaScript中在服务器端的应用。
今天，我们就回归到JavaScript的主战场 ---- 前端设计，一起来聊聊如何开发一个“自定义”的Web控件（基于jQuery），属于基础级别，高手请轻拍，还望不吝赐教，先谢过。
我们先假设这样一个场景，BOSS下达了命令，要求开发一款“幼儿早教”的应用，方便小朋友进行选择操作，而你则负责设计一个“下拉框”的Web控件，方便团队中其他弟兄使用，设计师的MM已经把效果图设计好了，如下：
总的来说，这是一个类似“下拉框”的Web控件：
a. 用户单击控件之后，显示下拉列表。
b. 选中下拉列表中的某项(例如：桃子)，会将选中项的图片显示出来。
接下来，就让我们一步一步来实现这样的功能，我们先对整个讲解过程做一个整体的规划，以便我们心中有谱：
1. 实现控件的外观部分：包括HTML代码的组织，CSS样式设计。
2. 实现控件的基本框架：用JavaScript实现控件的交互设计。
3. 优化控件的可扩展性：让控件可以接受JavaScript回调函数。
4. 优化控件的可用性：可以动态传入选项的数据，达到自定义选项列表的目的。
最后，我们来做一个简单的回顾和总结。单击此处下载演示包，解压缩后打开index.html页面体验。
实现控件的外观部分
我们先来分析一下整个控件的几个组成部分，然后组织我们的HTML代码，为了后面设计CSS样式表的方便，在组织HTML代码时，就应该遵照相关规范（例如：公司的样式表命名规范），完成class的名称设计。
控件的组成
控件的最外层是一个大的容器，包含控件的各个组成部分，其中的组件包括：
1. 结果显示框
可以将选中的选项显示在结果显示框中。
2. 下拉框按钮
控制下拉框的显示与隐藏，单击按钮，显示下拉列表，再次单击时，隐藏下拉框，不同的状态下，箭头的方向不一样。
3. 下拉框
下拉框中包含多个可供用户选择的“项”。
4. 下拉框中的项
选项包含图片和文字两个部分，当前被选中的选项，应该呈现不同的外观。
HTML代码
根据前面的组成分析，我们可以实现如下的HTML代码(index.html)：
<div class="zl_combobox">
<div class="cb_input"><img src="data:images/f_apple.png" /><span>苹果</span></div>
<span class="cb_btn"></span>
<ul class="item_list">
<li><img src="data:images/f_apple.png" /><span>苹果</span></li>
<li><img src="data:images/f_lemon.png" /><span>柠檬</span></li>
<li><img src="data:images/f_peach.png" /><span>桃子</span></li>
<li><img src="data:images/f_watermelon.png" /><span>西瓜</span></li>
</ul>
</div>
其中：
- zl_combobox：代表整个Web控件。
- cb_input：结果显示框。
- cb_btn: 下拉框按钮。
- item_list：下拉框。下拉框中的“项”用<li>元素来表示。
CSS样式表设计
接下来我们要根据控件最终的效果图和前面设计的HTML代码，来完成样式表的设计。在设计样式表时，一般分为两个部分：
- 基础外观：包括各个子部件的部件、关联关系、呈现外观等。
- 状态样式：要考虑到控件在交互过程中的状态变化，通过‘开关’来实现不同状态下的外观，方便后续的JavaScript的控制。
基础外观的相关CSS代码(zlbox.css)如下：
.zl_combobox{
position:relative;
width:180px;
font-size:1.5em;
margin-left:5px;
color:#323232;
}
.zl_combobox .cb_input{
width:170px;
height:60px;
padding:0px 5px;
line-height:60px;
border:1px #A9A9A9 solid;
background-color:#F2F2F2;
cursor:pointer;
}
.zl_combobox .cb_input:after,
.zl_combobox .item_list li:after{
content:'';
clear:both;
display:table;
}
.zl_combobox .cb_input span,
.zl_combobox .item_list li span{
display:block;
padding-left:10px;
height:60px;
line-height:60px;
}
.zl_combobox .cb_input img,
.zl_combobox .item_list li img{
display:block;
width:50px;
height:50px;
}
.zl_combobox .cb_input>img,
.zl_combobox .cb_input>span,
.zl_combobox .item_list li>img,
.zl_combobox .item_list li>span
{
float:left;
}
.zl_combobox .cb_btn{
position:absolute;
right:0px;
top:1px;
width:60px;
height:60px;
background:url('img/cb_btn_down.png') no-repeat center center;
cursor:pointer;
}
.zl_combobox .item_list{
display:none;
position:absolute;
right:0px;
top:62px;
width:180px;
line-height:60px;
background-color:#FEFEFE;
z-index:;
}
.zl_combobox .item_list li{
padding-left:10px;
border-bottom:2px #CCCCCC dotted;
cursor:pointer;
}
因为本文重点在于介绍Web控件的设计过程，关于CSS设计的细节，就不展开细讲，如有疑问，咱们在评论中交流讨论。
那么，整个控件在交互过程中，会有哪些状态需要考虑呢？
1. 默认的状态：不显示下拉框，仅仅显示“结果显示框”和“下拉框按钮”。
2. 下拉框展开状态：显示下拉框，并且下拉框按钮的箭头变为向上。
3. 选项的鼠标悬停状态：当鼠标悬停到选项时，改变不同的样式。
(当然，如果你确定你的控件只是在手机/Pad上使用，可以不考虑鼠标悬停)。
4. 被选中的选项的状态：这个可以根据需要设计。
状态相关的样式的CSS代码(zlbox.css)如下：
.zl_combobox.selected .item_list{
display:block;
}
.zl_combobox.selected .cb_btn{
background:url('img/cb_btn_up.png') no-repeat center center;
}
.zl_combobox .item_list li:hover{
color:#5281F8;
}
注意到，我们通过判断控件主体.zl_combobox是否有selected的class来控制下拉框的显示状态。
至此，控件的外观部分设计已经完成，我们可以看到，Web控件的外观设计有以下几个特点：
a. 布局属性：Web控件可能在各种场合中使用，所以，我们一般不对控件主体的布局属性进行设置(举例中我们仅仅设置了margin-left:5px，约定控件在使用过程中，距离它前面的控件为5px)。
b. 基础属性：像字体大小、字体颜色这样基础属性，在控件主体中尽量设置一下，确保控件的风格可以得到保证。比如：常规情况下，背景色是白色的，而字体的颜色是黑色，这时候，黑色的字体在白色背景的下拉框中可以显示出来。假设你没有设置控件主体的字体颜色，而在某个使用环境中，背景变成了黑色，字体颜色设置为白色，由于样式具有继承的特性，这时候就会变成在白色下拉框中的字体颜色是白色的。所以，在控件主体中设置基础属性，可以有效避免外部环境的“入侵”，让控件的风格自成一体。
实现控件的基本框架
工程文件组织
尽管前面我们已经讲解了控件的外观设计，也写了相关的HTML代码和CSS代码，但其实有一个本来应该先做的事情没有完成，就是工程文件组织，如下所示：
控件主文件夹的说明如下：
- css：保存项目用到的CSS相关的文件。
- images：保存需要在项目中直接引用的图片资源。
- js：保存项目用到的JavaScript相关的文件。
- index.html：HTML主体文件。
CSS文件夹下的内容：
- img：保存在css样式表中要引用的背景图片资源。
- index.css：与工程相关的样式表，比如：页面布局等。
- reset.css：一个重置样式表，将HTML中元素的标准特性重置。
- zlbox.css：与控件相关的样式表。
JS文件夹下的内容：
- jquery.zlbox.js：与控件相关的JavaScript文件，因为我们用到了jQuery库，所以以jquery为前缀。
- jquery.1.7.1.js：jQuery库文件。
本来应该还有一个index.js，用于保存工程相关的js代码，考虑到我们的演示demo的内容比较简单，工程相关的js代码调用就直接放到index.html文件中。
关于工程文件的组织和命名，各个公司应该有各自的规范标准，实际使用过程中，请遵照公司的规范。本文的论述将按以上的组织来进行。
JavaScript代码设计
总算到了我们Web控件设计的核心环节，我们的控件是基于jQuery库来设计的。jQuery插件的设计方法有很多种，我们依据我们的业务特点，选用了下面的基本框架模式，核心代码如下：
$.fn.czl_combobox = function( options )
{
this.each( function()
{
var instance = $.data( this , 'czl_combobox' );
if( !instance )
{
$.data( this, 'czl_combobox' , new $.ZLComboBox( options , this ) );
} });//end of each return this;
};
$.ZLComboBox = function( options , element )
{
this.$el= $( element );
this._init( options );
};
$.ZLComboBox.defaults = { };
$.ZLComboBox.prototype = {
_init : function( options ) {
//初始化函数
},
_loadEvents:function( ){
//控件相关的事件注册
}
};
我们先来看一下调用这个Web控件的代码，然后我们对照起来分析：
$('.zl_combobox').czl_combobox( {} );
让前端的HTML元素和后端的JavaScript代码关联起来，czl_combobox 这个函数是关键，所以，我们就从$.fn.czl_combobox这个函数入手，来看看它到底是如何关联的，先看代码：
$.fn.czl_combobox = function( options )
{
this.each( function()
{
var instance = $.data( this , 'czl_combobox' );
if( !instance )
{
$.data( this, 'czl_combobox' , new $.ZLComboBox( options , this ) );
} });//end of each return this;
};
1. czl_combobox是$.fn的成员，意味着凡是jQuery对象都可以调用它。
2. 通过$.data()获取jQuery对象(对应一个HTML元素)的名称为czl_combobox的数据对象。
如果不存在，那么，就通过$.data()新建一个ZLComboBox 的对象。
如果已存在，那么，就不重复创建对象。
3. 创建对象时，把当前jQuery对象和参数options传入。
经过分析，我们发现$.fn.czl_combobox也仅仅是桥梁，还不是控件的核心，真正的核心是ZLComboBox对象，这个对象可以通过对应的HTML元素访问到。
现在，我们依据控件的业务特征，先来预估一下ZLComboBox对象能做什么：
1. 既然将HTML元素对应的DOM对象作为参数传给ZLComboBox对象，那么，ZLComboBox对象就能对相关的HTML元素以及它的子元素进行操作。
2. 同时将参数options传递给ZLComboBox对象，意味着，可以根据业务需要对ZLComboBox对象进行一些”定制”操作，包括：属性和行为。
下面我们再来看一下ZLComboBox的核心代码：
1. 在它的构造函数中，将传入的HTML DOM对象保存到自己的一个属性成员中，并且将参数options传递给自己的一个初始化方法(_init())。
2. 在它的原型中，定义了_init() 和 _loadEvents()两个方法。
我们的目的是要让控件能够响应’单击’事件，并且对控件的各个子部件进行状态的改变，所以我们可以这样操作：
1. 在_init中，通过控件主体的 DOM对象，获得它的各个子部件的jQuery对象。
2. 在_loadEvents中，对子部件的jQuery对象绑定响应事件。
3. 增加一个属性selected_index，记录当前选中的项的序号。
4. 定义一个方法_show_itemlist，用来操作下拉框的显示和隐藏。
完整的JS代码(zlbox.js)如下，可对照注释进行理解：
(function($){
$.fn.czl_combobox = function( options )
{
this.each( function()
{
var instance = $.data( this , 'czl_combobox' );
if( !instance )
{
//主体功能通过一个对象实现
$.data( this, 'czl_combobox' , new $.ZLComboBox( options , this ) );
}
});//end of each
return this;
};
$.ZLComboBox = function( options , element )
{
this.$el= $( element );
this._init( options );
};
$.ZLComboBox.prototype = {
_init : function( options )
{
//相关的控件
this.comboBox = this.$el ;
//相关的HTML控件
this.cb_btn = this.comboBox.children( '.cb_btn' ).eq(0);
this.cb_input = this.comboBox.children( '.cb_input' ).eq(0);
this.cb_item = this.comboBox.find( 'li' );
//控件的状态，标记是否显示下拉列表
this.cb_showitem_status = false ;
//初始化默认的值，默认选中最后一个选项
this.selected_index = this.cb_item.length-1 ;
this.cb_input.html( this.cb_item.eq(this.selected_index).html() );
//注册响应事件
this._loadEvents();
},
_show_itemlist:function(){
if( this.cb_showitem_status === false ){
this.comboBox.addClass( 'selected' );
this.cb_showitem_status = true;
}
else{
this.comboBox.removeClass( 'selected' );
this.cb_showitem_status = false;
}
return ;
},
_loadEvents:function(){
var _self = this;
//1_单击下拉箭头
this.cb_btn.on( 'click' , function( event ){
_self._show_itemlist( );
return ;
});
//2_单击编辑框，也同样进行下拉框的状态切换
this.cb_input.on( 'click' , function( event ){
_self._show_itemlist( );
return ;
});
//3_单击选项
this.cb_item.on( 'click' , function( event ){
var index = $(this).index();
if( _self.selected_index !== index ){
//设置选项的值
_self.cb_input.html( $(this).html() );
//设置当前选中的项
_self.selected_index = index ;
//隐藏下拉框
_self._show_itemlist();
}
return ;
});
}
};
}(jQuery));
插件验证：
在index.html中，增加对插件调用的代码：
<script type="text/javascript">
$('.zl_combobox').czl_combobox( {} );
</script>
打开index.html网页，我们发现自定义的控件已经可以响应用户的单击事件，效果如下：
优化控件的可扩展性
有了前面的基础，接下来的理解就会比较简单。前面我们在分析控件的调用过程中，有一个参数options传到ZLComboBox对象中，但是，在最后的_init和_loadEvents方法中都没有用到过，那么，这个options的意义在哪里呢？
我们还是从业务的需求出发，然后再来考虑我们如何实现：
- 如果将控件用在“幼儿教学”的应用中，用户选中一种水果之后，可以播放与这种水果相关的介绍视频。
- 如果将控件用在“卖水果”的应用中，用户选中一种水果，可以显示这种水果的价格、产地等信息。
这就意味着，在不同的应用场景中，用户做出“选择水果”的操作时，触发的后续动作是不一样的，我们的控件应该支持这种操作才对。
如果在初始化控件的时候，传入一个“回调函数”，当事件触发时，调用一下这个传入的回调函数，那不就达到我们的目的了吗？这样，不同的业务场景，我们只要传入不同的回调函数即可。
回调函数是JavaScript的最拿手的，现在，我们就来优化我们的控件，让它支持回调函数。
这里也先假设一个场景：
当用户选中一个选项之后，我们就将选项中水果的图片显示出来，这时候，调用这个控件的方式变成这样：
$('#fruit_box').czl_combobox( {
selectItemEvent:function( index ){
var html_content = $( '.item_list li img' ).get( index ).outerHTML;
$('#result_box').html( html_content );
}
} );
注意到两点：
1. #fruit_box 为控件. zl_combobox对应的id，在同一个应用中可能存在多个zl_combobox控件，当要传入回调函数时，一般就用id去引用对应的控件元素，因为相同的控件，在不同的应用场景，行为是不同的，传入的回调函数也应该不同，所以不建议通过$(‘. zl_combobox’)一次性对所有的控件进行初始化。
2.传入的回调函数的名称是selectItemEvent，带有一个index 的参数。
现在，我们来优化控件的核心对象ZLComboBox中的内容：
1. 新增一个options成员，用来保存传入的参数对象：
_init:function( options ){
//…
this. options = options ;
}
2. 在下拉列表框中的选项单击事件中，增加对回调函数的调用：
//….
//隐藏下拉框
_self._show_itemlist();
//调用回调函数
_self.options.selectItemEvent( index );
然后，我们再来验证一下效果，打开index.html，从下拉框中选中一个选项，效果如下：
至此，我们最初设定的目的是已经达成了。为了完整性，再补充一下控件“扩展性”的另外一个特征：默认值设定。
还是以之前的业务场景为例：如果用户没有传入回调函数，我们希望控件就把选中项的序号通过提示框显示出来。如果有传入会调用函数，就调用用户传入的回调函数。也就是说，给控件增加默认的行为，当调用时没有传入指定参数，就调用默认的值。
现在我们就来实现控件的默认值设定：
1. 给ZLComboBox对象增加defaults成员，代码如下：
//默认值设置
$.ZLComboBox.defaults = {
selectItemEvent:function( index ){
alert( index );
return ;
}
};
2. 在_init方法中，保存传入的options对象采用如下的方式：
this.options = $.extend( true , {} , $.ZLComboBox.defaults , options );
这样，如果options中没有指定相关的成员，就调用defaults中的成员。这是jQuery插件处理传入参数的一种方式，$.extend为jQuery库定义的方法。
优化控件的可用性
从理解语言特性来看，这部分内容与上一部分没有什么差异，我们只是从业务角度来看，对实现方式做一些区分。
回到我们控件的场景，本文实现的控件我们取名为ZLComboBox，ZL为前缀，显然，它的行为特征与标准的组合框控件是类似的，组合框控件最常见的使用方式就是在表单(Form)中，那么，我们的控件也应该支持在表单(Form)中使用。
如果ZLComboBox是作为表单的一个组件，那么，就需要在用户提交表单数据时，能够获取到用户到底选了哪个选项。从目前来看，似乎只能判断.cb_input容器中的内容，而这个内容是这个样子：
<img src="data:images/f_apple.png" /><span>苹果</span>
显然，用户处理起来非常不方便。
也许你已经想到了，可以通过传入回调函数的方式，当用户选中一个选项之后，就将这个序号值(index)更新到某个隐藏的<input>元素中，表单提交数据时，提交这个隐藏的<input>中的值即可，这当然是一种处理方式。
其实，我们可以给控件的核心对象ZLComboBox增加一个方法getSelectedIndex，用来获取当前用户选中的项的序号，代码如下：
_loadEvents:function(){
//…
},
getSelectedIndex:function(){
return this.selected_index;
}
这时候，控件的调用方式变成：
$('#fruit_box').czl_combobox( {
selectItemEvent:function( index ){
var html_content = $( '.item_list li img' ).get( index ).outerHTML;
$('#result_box').html( html_content );
}
} );
//在表单提交前的数据处理中，取得用户选中项的序号
var index = $('#fruit_box').data( ‘czl_combobox’ ). getSelectedIndex() ;
重点在第9行。
当然，你也许会觉得，这种方式还不如之前动态更新隐藏<input>的方式自然，这里的主要目的是给大家一个特性解释，具体情况当然依据业务需要来确定。
另外，也许你已经发现了，每次调用我们自定义的控件，在HTML代码中都要写入一大堆内容，能不能在使用时HTML代码中仅仅定义<div class=” zl_combobox”></div>？然后将选项通过参数options传入，在ZLComboBox的_init方法中动态生产子部件呢？答案是：当然可以，就留作练习吧。
总结
通过前面的内容介绍，我们大致理解了自定义控件的意义，以及开发一个Web自定义控件的大致过程，希望能给大家带来一些启发。当然，我们的举例，实现方式都仅仅是为了讲解整个过程，在实际的开发过程中，除了业务诉求之外，还需要考虑其他方面的要求，比如性能方面：将整个控件库中CSS样式用到的背景图片优化成"雪碧"图，减少加载时间。或者安全性的优化：将某些插件的框架由'伪类'(new)调整为'闭包'模式，增强控件的安全性。
完整的示例代码，请单击此处下载。
感谢诸位捧场^_^～～