位置: 编程技术 - 正文

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

  • 怎么收购股份公司
  • 社保税局代缴
  • 其他业务收入在借方表示什么
  • 应付职工薪酬代扣款项账务处理
  • 纳税人经营所得预缴申报表怎么填
  • 领备用金时会计怎么做分录
  • 出口退税代理费用大概多少
  • 固定资产处置如何入账
  • 普通发票税率为1%吗
  • 电子发票可以做报销凭证吗
  • 固定资产在什么时候计提折旧
  • 材料票可以直接在税务局开吗
  • 收到人民政府寄来的ems
  • 初级备考日记
  • 没有发票的怎么报账
  • saproxy.exe - saproxy是什么进程 有什么用
  • 包装物租金怎么计算增值税
  • 树木种植公司
  • win11测试版和正式版区别
  • linux系统之间拷贝文件命令
  • kwservice.exe是什么
  • 其他应付款年末借方余额
  • 外汇收入情况说明
  • 财政补助收入核算内容
  • 应付票据可以直接填列吗
  • 企业境外所得税额抵免限额应分国分项计算
  • vue3.0项目
  • 房屋所在地的房子怎么查
  • 小企业法人怎么交社保
  • 注册公司时的注册资金
  • 其他业务收入负数坐在贷方
  • vue基础知识
  • gpt参数
  • es6面试题promise
  • php递归算法经典题目
  • 股东转让股份会退股吗
  • 举报民间借贷利息收入所得税
  • 经营性应收项目和经营性应付项目
  • 终止经营净利润含义
  • 开红字信息表后的账务处理
  • 公司申报是每月一次吗
  • 公司承担员工的社保费会计分录
  • notepad+v
  • Windows下Postgresql下载与配置方法
  • 固定资产改扩建和大修理的区别
  • 纳税人遗失税务登记证件并按照规定
  • 股东分红方式如何约定
  • 增值税报完了能改么
  • 申报无票收入后期开票要冲回要备案吗
  • 待认证进项税额月末怎么处理
  • 少数股东损益会出现负数吗
  • 金税盘抵增值税
  • 收取会费
  • 利息支出税前扣除时点
  • 资金账簿印花税减半政策
  • 单位定期存单利息如何记账
  • 2010年漏记的费用,11年该如何记账?
  • 多计费用以前年度损益调整账务处理
  • 公司注销帐务怎么处理
  • 事业单位 abc类
  • 物流公司主营业务成本会计分录
  • 企业对财会人员的要求
  • 投资入股行为
  • 购买金税盘的分录
  • 二类银行卡转账能收多少钱
  • sql server数据库中的null(空值)
  • win8屏幕显示时间
  • centos安装后配置
  • xp无法识别的usb设备unknown device
  • mom.exe是什么
  • 电脑图片密码是什么意思
  • linux启动u盘制作
  • 系统解决问题的方法
  • 一边做游戏一边学英语
  • jquery移动端ui框架
  • import python-docx
  • 陕西税务平台
  • 江西省电子税务局登录入口
  • 税务逾期未申报是什么意思
  • 税款复核需要多少天
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设