【JS】使用原型对象封装下拉框

前几天面试一个前端妹纸，妹纸是应届毕业生，样式切图等也还使得，提及JS脚本时就有些吃力了，问及jQuery优缺点时，竟来了一句大实话“很好呀，没有缺点”。提及原型链和闭包等原生基础知识，妹纸也是一脸为难，其实这些看起来高（ting）大（bu）上（dong）的名字，也没那么可怕啦，毕竟我们也不是写什么惊天地泣鬼神的程序，平时用用就好了。

这次写一下平时用jQuery时怎么做数据封装和插件封装，在一些不使用前端框架的项目里，jQuery还是用得比较多的，现在jQuery升级到3.0以上了，有兴趣的可以去了解一下。

个人感觉使用jQuery的项目有两个不容忽视的问题，一个是运行速度慢；另一个是后台数据和前端数据交互时，各种DOM操作和数据同步烦不胜烦。这两个方面提前优化好，基本上在开发过程中也会轻松一些。

本次内容主要分为以下两块

1. 原型对象的基础知识；
2. 常用移动端下拉框对象封装

原型对象的基础知识：

原型对象代码一般长下面这样：

// 原型模式创建对象function Animal(name){    this.name=name;}Animal.prototype.sayName=function(){    alert(this.name);}var animal1=new Animal('熊猫');animal1.sayName();//熊猫

每个通过new创建出来的对象都会有一个原型属性prototype，对象从原型prototype继承方法和属性，例如通过new Array()创建的对象原型是Array.Prototype，数组从Array.Prototype继承数组操作方法。

上面例子中animal1对象的原型是Animal.prototype，通过在Animal.prototype上添加sayName方法，使animal1对象也拥有sayName方法。同样的将a对象的原型赋值给b对象，b对象拥有a对象的方法和属性，就可以实现继承。更多的知识大家可以去搜搜资料，网上有很多详细的文章。

---

常用移动端下拉框对象封装：

首先来分析一下下拉框DroptList的组成：

• 从标签上来讲：我一般会有一个文本标签接收下拉框选中的值，其次就是下拉列表；
• 从样式上来讲：我用bottom属性模拟标签的显示隐藏；
• 从功能上来讲：下拉框一般包括初始化（init），赋值（setValue），显示（showDropt），隐藏（hideDropt），基本上满足数据交互需求。

Html代码

<div id="dropeList2">    <a href="javascript:;" class="dropValue">请选择</a>    <!-- 下拉选项 S -->    <div class="dropList">        <span class="dropList-title">所属分公司</span>        <ul class="dropList-detial">            <li svalue="0"><span class="valueLi">请选择</span><i class="iconfont rbx-ico">&#xe635;</i></li>            <li svalue="1"><span class="valueLi">市公司</span><i class="iconfont rbx-ico">&#xe635;</i></li>            <li svalue="2"><span class="valueLi">分公司一</span><i class="iconfont rbx-ico">&#xe635;</i></li>            <li svalue="3"><span class="valueLi">内容二</span><i class="iconfont rbx-ico">&#xe635;</i></li>            <li svalue="4"><span class="valueLi">内容二</span><i class="iconfont rbx-ico">&#xe635;</i></li>            <li svalue="5"><span class="valueLi">内容二</span><i class="iconfont rbx-ico">&#xe635;</i></li>            <li svalue="6"><span class="valueLi">内容二</span><i class="iconfont rbx-ico">&#xe635;</i></li>            <li svalue="7"><span class="valueLi">内容二</span><i class="iconfont rbx-ico">&#xe635;</i></li>            <li svalue="8"><span class="valueLi">内容二</span><i class="iconfont rbx-ico">&#xe635;</i></li>            <li svalue="9"><span class="valueLi">内容二</span><i class="iconfont rbx-ico">&#xe635;</i></li>            <li svalue="10"><span class="valueLi">内容二</span><i class="iconfont rbx-ico">&#xe635;</i></li>            <li svalue="11"><span class="valueLi">内容二</span><i class="iconfont rbx-ico">&#xe635;</i></li>            <li svalue="12"><span class="valueLi">内容二</span><i class="iconfont rbx-ico">&#xe635;</i></li>            <li svalue="13"><span class="valueLi">字数测试字数测试字数测试字数测试字数测试字数测试字数测试</span><i class="iconfont rbx-ico">&#xe635;</i></li>        </ul>    </div>    <!-- 下拉选项 E -->    <i class="iconfont down-ico">&#xe607;</i></div>

CSS代码

/*    name:下拉框    date:2017-2-14    author:wumj*/.shade {  position: fixed;  left: 0;  top: 0;  z-index: 3;  height: 100%;  width: 100%;  background-color: rgba(0, 0, 0, 0.4);}.dropValue {  position: relative;  display: block;  height: 0.5rem;  line-height: 0.5rem;  color: #666666;  width: 100%;  padding-right: 0.4rem;  padding-left: 0.08rem;  box-sizing: border-box;  z-index: 2;  overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap;}.list-detial .down-ico {  position: absolute;  top: 50%;  margin-top: -0.18rem;  right: 0.14rem;  font-size: 0.26rem;  z-index: 1;  color: #cccccc;}.dropList {  background-color: #fff;  transition: all 0.3s;  position: fixed;  z-index: 4;  left: 0;  width: 100%;  bottom: -100%;  text-align: left;}.dropList-title {  display: inline-block;  padding: 0.14rem;  color: #999999;}.dropList-detial {  overflow-y: auto;  max-height: 5.8rem;  padding: 0 0.14rem;}.dropList-detial li {  position: relative;  height: 0.5rem;  padding: 0.1rem 0;  border-bottom: 1px solid #f5f5f5;  color: 0.14rem;}.dropList-detial li .valueLi {  position: relative;  display: block;  line-height: 0.5rem;  padding-right: 0.4rem;  box-sizing: border-box;  overflow: hidden;  white-space: nowrap;  text-overflow: ellipsis;  z-index: 2;}.dropList-detial li .rbx-ico {  position: absolute;  top: 50%;  right: 0.14rem;  font-size: 0.36rem;  margin-top: -0.24rem;  color: #cccccc;  z-index: 1;}.dropList-detial .selected .rbx-ico {  color: #0f90ce;}

JS代码

/*    name:下拉框    date:2017-2-15    author:*****/function DroptList(id,svalue){    this.ID=id;    this.oValue=$('#'+id).find('.dropValue').eq(0);    this.oList=$('#'+id).find('.dropList').eq(0);    var tvalue=svalue || 0;    var _this=this;    this.oValue.bind('click',function(){        _this.showDropt();    });    _this.setValue(tvalue);}//赋值DroptList.prototype.setValue=function(svalue){    var _this=this;    var options=this.oList.find('li');    for(var i=0;i<options.length;i++){        if (options.eq(i).attr('svalue')==svalue) {            options.removeClass('selected');            options.eq(i).addClass('selected');            this.oValue.html(options.eq(i).children('.valueLi').html());            break;        }    }}//显示下拉列表DroptList.prototype.showDropt=function(){    var _this=this;    _this.oList.css('bottom',0);    //添加阴影    var shade = document.createElement("div");    shade.setAttribute('class', 'shade');    shade.setAttribute('closeTag', _this.ID);    shade.addEventListener('touchmove',function(ev){        ev.preventDefault();//禁止滑屏    });    shade.onclick=function(){        document.body.removeChild(this);        _this.hideDropt();    };    document.body.appendChild(shade);    _this.oList.find('.valueLi').bind('click',function(){        _this.oList.find('li').removeClass('selected');        $(this).parent().addClass('selected');        _this.oValue.html($(this).html());        _this.hideDropt();    });    $('body').addClass('bhpop');    $('html').addClass('bhpop');}//隐藏下拉列表DroptList.prototype.hideDropt=function(){    this.oList.css('bottom',-this.oList.height()+'px');    $('[closeTag='+this.ID+']').remove();    $('body').removeClass('bhpop');    $('html').removeClass('bhpop');}

效果图

当然也可以把html标签也封装到js去，不过这样能满足大多数需求了，就不折腾了。
源码地址：http://pan.baidu.com/s/1i49K1t7

Author:事始
Sign:只要你还在尝试，就不算失败。