位置: 编程技术 - 正文

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

  • 增值税有哪些二类税种
  • 房屋租赁印花税怎么算
  • 商铺属于固定资产还是无形资产
  • 银行内部利息支出
  • 已认证发票对方红冲应该怎么做账
  • 无形资产增资账务处理
  • 免税产品的销项税
  • 公司贷款直接打供应商账户还需要发票吗
  • 电脑在固定资产中属于哪一类
  • 客户已经抵扣的发票怎么开负数发票给对方
  • 开票不走公户
  • 按期汇总缴纳印花税可以退税吗
  • 330税盘费是什么意思?
  • 增值税专用发票有效期是多长时间
  • 腾讯计算机系统扣费15元怎么查
  • 抵扣消费税的利益主要
  • 外购机器设备
  • 城建税教育附加税的会计分录
  • 企业个税网上申报时间
  • 五联折叠票和两联折叠票的区别
  • 印花税减免税额需要做账吗
  • 取得走逃失联企业的异常增值税发票如何处理
  • 非营利组织属于企业吗
  • 应收账款形成的内部原因和外部原因
  • 小企业会计准则会计科目表
  • win10系统如何卸载ie11
  • 小规模纳税人采购商品时有可能涉及的会计科目有
  • window清除临时存储文件夹
  • 担保公司代偿账户是什么
  • 营改增开始时间
  • 销售商品的会计分录已收到钱
  • php实现用户登录
  • 应收账款需要计提损失准备吗
  • php自定义变量的方法是
  • 直接费用的定义
  • 如何使用php给图片命名
  • yii2.0框架
  • 合同价格约定不明法律规定
  • 固定资产科目的备抵科目
  • 座谈会费用报销明细怎么填写
  • python generation
  • 应收应付款项
  • 存货盘亏处理报批
  • 固定资产暂估折旧怎么算
  • 预收账款冲销账户怎么做
  • 多交增值税可以不退吗
  • 建筑工程社会实践报告
  • 收到对方公司退款
  • 发票遗失证明怎么写范文
  • 销项负数发票入账分录
  • 外贸企业面对人民币升值应该采取什么的避险措施
  • 每个月计提工资没有发怎么办
  • 营业收入包括主营业务收入
  • 建账要求
  • 报废厂子出售
  • 劳务派遣税率是多少2023
  • 测试账户收入怎么处理
  • 发票怎么看是普票还是专票
  • 事业单位职工福利费支出范围
  • 工业营业收入含税吗
  • sqlserver数据库恢复挂起状态
  • select * from sp_who的解决方案
  • 注册表修改数据
  • fedoral
  • centos6.1安装
  • msoobe.exe是什么
  • winxp虚拟内存怎么改
  • centos怎么样
  • 只需2招 让Win10运行速度更加迅速
  • Cocos2d-x 3.x lua绑定
  • node.js环境搭建
  • flask操作mysql数据库
  • 动态加载dll错误
  • 前端面试题csdn
  • html淘宝搜索框代码
  • unity3d 使用Quaternion 类实现两个简单功能
  • 江西省发票综合服务平台
  • 四川国家税务局官网
  • 电子保险怎么查询车船税
  • 天津静海离天津市区多远
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设