位置: 编程技术 - 正文

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

  • 财税2012年15号文件作废
  • 一般纳税人企业所得税是多少
  • 车船税不交有什么影响 三大影响要注意
  • 小型微利企业认定标准最新
  • 房产税从租和从价
  • 三代手续费怎么申请返还
  • 纳税人性质怎么改
  • 管理费用贷方余额借方是负数怎么结转
  • 车辆日常维护费用
  • 管家婆未开账可以录入单据吗
  • 能从科目余额表入账吗
  • 房地产企业如何进行市场细分
  • 在企业所得税中增值税可以扣除吗
  • 定额发票遗失情况说明怎么写
  • 项目清算组
  • 小规模企业没有进项发票怎么办
  • 建筑企业一般纳税人提供建筑服务属于老项目
  • 集团对子公司投资收益协议
  • 企业为什么要缴纳增值税
  • 酒店小规模纳税人税率
  • 专项应付款现在叫什么
  • 出差餐费报销怎么报销
  • 工资计提不发放工资个税
  • 事业基金弥补收支差额
  • 跨年红冲发票影响所得税吗
  • 不同方式的融资租赁业务如何贴花?
  • windows 10纯净版
  • win10 5月更新已知bug
  • 挂社保不发工资
  • PHP:xml_get_current_line_number()的用法_XML解析器函数
  • 电脑台式机显卡怎么拆
  • linux 定时删除文件
  • 个人转让股权如何缴纳个人所得税税率
  • php冒泡法排序
  • 年度企业所得税计算方法
  • 双线服务器
  • vue前端开发规范
  • php autoloader
  • php中construct
  • 公司报销医疗费用公司医保里面的钱也报吗
  • 红字发票账务处理需冲回成本吗?
  • javascript编写程序
  • windowsserver2008r2密码重置
  • 公司法人和经理的区别
  • 盈余公积企业所得税税率
  • 扣伙食费会计分录
  • 残疾人就业保障金申报时间
  • 个税申报信息怎么填
  • 增值税纳税申报类型有哪些
  • 工会经费到底怎么算
  • 一般纳税人是指哪些人群
  • 原始凭证审核要点包括
  • 商场返现活动怎么入账
  • 银行账户收费开户流程
  • 客户给的现金如何转到公司账上
  • 残保金计算人数1.02怎么计算
  • 企业增资的流程
  • MySQL timestamp的类型与时区实例详解
  • windows隐藏文件名
  • win10系统详情
  • Win7旗舰版系统安装
  • win10如何连接远程电脑
  • u盘装win8系统教程图解
  • linux设置网络ip地址
  • linuxnamespace入门
  • win7提示0x000000c1
  • win10如何打开ie8
  • shell脚本 定义变量
  • jquery实战
  • 详解怎样利用双色球密码选号
  • listview点击获取内容
  • dos命令可以做什么
  • dos命令怎么输入命令
  • cmd切换到当前目录
  • listview的item
  • node js官网
  • 浅谈JavaScript事件的属性列表
  • 代理记账公司自查自纠情况报告范文
  • 北京市地方税务局2015第10号文件
  • 建立高效的法治实施体系,需要着力解决四个问题
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设