位置: 编程技术 - 正文

封装属于自己的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)

  • 汇算清缴补交所得税后报表需要调整吗
  • 足浴行业是否需要缴纳文化事业建设税
  • 交通费怎么抵扣进项税
  • 飞机票的快递费多少钱
  • 非独生子女赡养老人专项附加扣除的标准
  • 房地产公司产品无偿提供他人使用 税
  • 取得的进项发票当月不抵扣怎么做账
  • 工程施工购买的标示牌怎么开票给甲方
  • 委托销售怎么做分录
  • 小规模装饰公司干150万的活开专票需要多少钱
  • 印花税计税金额怎么算
  • 基金公司管理费收入增值税
  • 服务业发票进项税怎么做凭证?
  • 员工罚款可以从工资里扣吗
  • 没有签订合同需要申报印花税吗
  • 一般纳税人企业所得税税率多少
  • 电子承兑转让怎么撤销
  • win11如何启用远程访问
  • 主营业务成本的二级科目有哪些
  • 去年的费用今年报销如何记账
  • 残疾人保障金是强制性的吗
  • win8系统出现你的电脑遇到问题需要重新启动
  • Yii2隐藏frontend/web和backend/web的方法
  • 事业单位年末收入怎么算
  • 误解苹果
  • 租赁的车间改造的会计分录
  • 怎么提升电脑速度
  • 期货公司保证金怎么算的
  • sesvc.exe是什么进程
  • 客户尾款不付会计分录
  • 按工资额提取福利费
  • 贷款核销对个人的影响
  • 员工冲借款应该怎么做账
  • php is_writable
  • 成本核算流程会议记录
  • 实际收到的货款怎么做账
  • 外资企业出租房产税优惠
  • 员工的通讯费怎么报销
  • 支付劳务费时是什么科目
  • php框架的作用
  • 详解Yii2 定制表单输入字段的标签和样式
  • 定额发票累计领用金额怎么填
  • 外管证预缴税费怎么算
  • pca降维的原理
  • 税务局批扣是什么意思
  • python用内置函数来打开文件
  • 一般公司是什么企业类型
  • 资产总额不超过5000万是指全年平均收入吗
  • 用人民币支付的公司
  • php 缓存
  • 财务上大写数字420.1怎么写
  • 利润分配的5个基本原则
  • 普票不能抵扣为什么有税率
  • 专票已认证还能作废吗
  • 开出增值税发票确认收入分录?
  • 月末应交增值税借方余额期末该怎么处理
  • 事业单位调整以前年度的费用
  • 减免增值税后附加怎么算
  • 营改增企业是什么意思
  • 运输合理损耗会计科目
  • 忘记报关可以补报吗
  • 出差包干费包括什么
  • 收到补助款的会计分录
  • 工程未完工,费用怎么处理
  • 往来款做其他应收还是其他应付
  • 一些有用的sql语句是什么
  • mysql mac下载
  • wermgr.exe是什么进程
  • 解析包错误怎么解除
  • win10商店是什么
  • linux命令行查找
  • 没有光驱有什么影响
  • win7旗舰版怎么改成专业版
  • win10系统如何禁用触摸板
  • win10系统锁屏后不弹出解锁界面
  • 卸载声卡驱动有什么影响
  • jquery给表格赋值
  • android应用程序的主要语言是
  • 医保所属期起和所属期止
  • 什么是个税扣缴期限
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设