【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