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

最新推荐文章于 2024-04-10 16:19:53 发布

原创最新推荐文章于 2024-04-10 16:19:53 发布 · 997 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #对象 #前端

Web前端专栏收录该内容

51 篇文章

订阅专栏

本文介绍了如何使用jQuery封装移动端下拉框对象，包括原型对象的基础知识和一个实用的下拉框封装示例。文章强调了jQuery在不使用前端框架项目中的应用，以及优化DOM操作和数据同步的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

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

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

原型对象的基础知识：

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

// 原型模式创建对象
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');
}