位置: 编程技术 - 正文

封装属于自己的JS组件(封装是借助什么达到的)

编辑:rootadmin

推荐整理分享封装属于自己的JS组件(封装是借助什么达到的),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:封装属于自己的pe,封装属于自己的系统,封装是借助什么达到的,封装属于自己的品牌吗,封装属于自己的设备吗,封装属于自己的系统,封装属于自己的系统,封装属于自己的产品吗,内容如对您有帮助,希望把文章链接给更多的朋友!

一、扩展已经存在的组件1、需求背景很多时候,我们使用jquery.ajax的方式向后台发送请求,型如      

这种代码太常见了,这个时候我们有这样一个需求:在自己调用ajax请求的时候,我们不想每次都写error:function(e){}这种代码,但是我们又想让它每次都将ajax的错误信息输出到浏览器让用户能够看到。怎么办呢?

2、实现原理要想实现以上效果其实并不难,我们可以将$.ajax({})封装一层,在封装的公共方法里面定义error对应的事件即可。确实,这样能达到我们的要求,但是并不完美,原因很简单:1)在jquery的基础上面再封装一层,效率不够高;2)需要改变调用者的习惯,每次调用ajax的时候需要按照我们定义的方法的规则来写,而不能直接用原生的$.ajax({})这种写法,这是我们不太想看到。

既然如此,那我们如何做到既不封装控件,又能达到以上要求呢?答案就是通过我们的$.extend去扩展原生的jquery.ajax。

其实实现起来也并不难,通过以下一段代码就能达到我们的要求。

如果没接触过jquery里面$.extend这个方法的童鞋可能看不懂以上是什么意思。好,我们首先来看看jquery API对$.extend()方法是作何解释的。

什么意思呢?我们来看官方的两个例子就知道了

栗子一:

结果:

栗子二:

结果:

以上的两个简单例子就说明extend()方法作用就是合并另个对象,有相同的则覆盖,没有相同的则添加。就是这么简单。

了解了$.extend()的作用,我们就能大概看懂上面那个扩展jquery.ajax的实现了吧。主要的步骤分为:

1)定义默认的error处理方法。

2)判断用户在调用$.ajax({})的时候是否自定了error:function(){},如果定义过,则使用用户定义的,反之则用默认的error处理方法。

3)使用$.extend()将error默认处理方法传入$.ajax()的参数中。我们看options参数时包含$.ajax()方法里面所有的参数的,然后用默认的fn去扩展它即可。

通过以上三步就能够实现对$.ajax()方法里面error默认处理方法。这样扩展,对于我们使用者来说完全感觉不到变化,我们仍然可以$.ajax({});这样去发送ajax请求,如果没有特殊情况,不用写error处理方法。

3、组件扩展的意义使用组件扩展,能够帮助我们在原有组件上面增加一些和我们系统业务相关的处理需求,而在使用时,还是和使用原生组件一样去调用,免去了在组件上面再封装一层的臃肿。

封装属于自己的JS组件(封装是借助什么达到的)

二、扩展自己组件上面通过$.extend()方法扩展了$.ajax()的error事件处理方法。下面我们来封装一个自己的组件试试,功能很简单,但比较有说明性。我们就以select这个组件为例,很多情况下,我们的select里面的option都是需要从数据库里面取数据的,所以一般的做法就是发送一个ajax请求,然后在success方法里面拼html。现在我们就封装一个select远程取数据的方法。

1、代码实现以及使用示例先上干货吧,将写好的整出来:

先来看看我们自定义组件如何使用:

用法一:通过URL远程取数据并初始化首先定义一个空的select

然后初始化它

参数很简单,就不一一介绍了。很简单有木有~~

用法二:取值和设置

其实对于简单的select标签,博主觉得这里的getValu和SetValue意义不大,因为直接通过$('#sel_search_plant').val()就能解决的事,何必要再封一层。这里仅仅是做演示,试想,如果是封装成类似select2或者multiselect这种组件,getValue和setValue的意义就有了,你觉得呢?

2、代码详细讲解上面的实现代码,如果您一眼就能看懂,证明您是经常封组件的大虾了,下面的就不用看了。如果看不懂,也没关系,我们将代码拆开详细看看里面是什么鬼。

(1)首先看看我们最常看到的如下写法:

初初看到这种用法,博主也是狂抓,这是什么鬼嘛,四不像啊。使用多了之后才知道原来这就是一个匿名函数的形式。将它拆开来看如下:

也就是说这种写法就表示先定义一个方法,然后立即调用这个方法,jQuery相当于实参。打开jquery.js的原文件可以看到,jQuery是这个文件里面的一个全局变量。

(2)定义自己的组件的代码:

习惯这种写法的应该知道,这个就表示向jquery对象添加自定义方法,比如你想使用文章开始的 $("#id").MyJsControl({}) 这种用法,你就可以这样定义 $.fn.MyJsControl=function(options){} 。

(3) options = $.extend({}, $.fn.combobox.defaults, options || {}); 这一句,看过上文的朋友应该还记得extend这么一个方法吧,怎么样,又来了你。这句话其实就没什么好说的了,合并默认参数和用户传进来的参数。

(4)默认参数列表

如果用户没有传参,就用默认的参数列表。如果你够细心,你会发现博主之前分享的其他bootstrap组件的js文件里面都有这么一个default参数列表。我们随便找两个:

bootstrap上传组件

bootstrap table组件

基本都是这么些用法。这样来看,是否也可以自己封一个js组件~~

标签: 封装是借助什么达到的

本文链接地址:https://www.jiuchutong.com/biancheng/382726.html 转载请保留说明!

上一篇:js+css绘制颜色动态变化的圈中圈效果(用js设置颜色)

下一篇:不用一句js代码初始化组件(js 不用var)

  • 差额征税如何开票备注内容应该怎么调
  • 本月累计专项扣款怎么算
  • 地价计入房产原值公式
  • 托管开票
  • 物流公司主营业务范围
  • 资产负债表中其他流动资产包括哪些科目
  • 补交以前年度城建税和滞纳金怎么做账
  • 卖桶装水税率
  • 更换金税盘后数据能恢复么
  • 员工出差报销制度
  • 增值税电子普通发票可以抵扣吗
  • 上海地方教育费附加减半征收2018
  • 委托加工物资增值税怎么计算
  • 免征的税款每月几号申报
  • 现在就是去年
  • 一般纳税人的月报,季报年报
  • 收到厂家返利怎么做分录
  • 残保金必须交社保才能领吗
  • 京东预付卡怎么做账
  • php4位数的随机字符
  • windows10激活密钥免费2023
  • 百度有钱花借钱会上征信吗
  • 如何解决Windows10电脑卡顿现象
  • 下列关于企业发生的税费说法正确的是
  • paytime.exe - paytime是什么进程 有什么用
  • 投资利润率用什么表示
  • framework core
  • web前端开发学什么
  • vue面试题及答案2021
  • 图片美白ps
  • chat的用法及短语
  • php动态语言
  • 以厂房入股会计怎么做账
  • 进口商品会计分录怎么写
  • 固定资产租赁费的税率是多少
  • 企业所得税那些是免税的收入
  • 工商年报资产状况纳税总额怎么填
  • phpcms安装无法连接数据库服务器
  • 生产型企业可以买进就卖出吗
  • phpcms缩略图不要自动裁剪的设置方法
  • 详解MySQL中EXPLAIN解释命令及用法讲解
  • mysql中事件的作用
  • 对外捐赠非货币性资产的会计处理
  • 调整以前年度少计收入
  • 培训学校收入如何确认
  • 劳务公司账务处理实例
  • 来料加工成本是多少
  • 每月扣除的公积金怎么查
  • 建筑企业成本核算方法
  • 工资费用核算的原始记录有
  • win8系统怎么设置无线网连接啊
  • win10和os x el capitan分屏操作对比视频
  • win7系统internet怎么打开摄像头
  • win8进入传统界面
  • 在windows xp
  • win7怎么禁止u盘自动运行
  • win10系统应用和浏览器控制需要启用吗
  • 以root身份建一个目录/test
  • svn怎么切换用户名
  • edge以ie
  • Win10桌面图标没有了
  • 在linux系统中拥有
  • win7系统怎么隐藏桌面
  • bass表示什么
  • js 对象内存 占用
  • asm指令
  • html中链接
  • jquery 设置背景色
  • [android] listView解析
  • .material design
  • node.js下载安装教程
  • javascript标签大全
  • 详解Bootstrap四种图片样式
  • 原生js实现ajax步骤
  • 电子税务局官网江西省
  • 购置税完税证明电子版怎么查看
  • 惠州市公交车投诉平台
  • 耕地占用税减免税范围包括
  • 德阳契税收费标准2022
  • 西安市地方税务局高新技术产业开发区分局
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设