位置: 编程技术 - 正文

jQuery 插件封装的方法(jquery插件使用教程)

编辑:rootadmin

推荐整理分享jQuery 插件封装的方法(jquery插件使用教程),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:jquery插件大全,jq组件封装,jQuery插件封装时如要实现链式编程,需要,jquery封装的函数,jQuery插件封装时如要实现链式编程,需要,jquery封装组件,jq封装插件和使用,jQuery插件封装时如要实现链式编程,需要,内容如对您有帮助,希望把文章链接给更多的朋友!

扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间。这篇文章将概述jQuery插件开发的基本知识,最佳做法和常见的陷阱。

一、入门

编写一个jQuery插件开始于给jQuery.fn加入&#;&#;新的功能属性,此处添加的对象属性的名称就是你插件的名称:

. 代码如下:

用户非常喜欢的符号哪里去了?它仍然存在,但是,为了避免和其他JavaScript库冲突,我们最好将jQuery传递给一个自我执行的封闭程序,jQuery在此程序中映射为符号,这样可以避免$号被其他库覆写。

. 代码如下:

在这个封闭程序中,我们可以无限制的使用$符号来表示jQuery函数。

二、环境

现在,我们可以开始编写实际的插件代码。 但是,在这之前,我们必须得对插件所处的环境有个概念。 在插件的范围里, this关键字代表了这个插件将要执行的jQuery对象, 这里容易产生一个普遍的误区,因为在其他包含callback的jQuery函数中,this关键字代表了原生的DOM元素。这常常会导致开发者误将this关键字无谓的包在jQuery中,如下所示。

. 代码如下:

三、基础知识

现在,我们理解了jQuery插件的基础知识,让我们写一个插件,做一些事情。

. 代码如下:

这是一个简单的插件,利用.height()返回页面中高度最大的div元素的高度。

四、维护Chainability

很多时候,一个插件的意图仅仅是以某种方式修改收集的元素,并把它们传递给链中的下一个方法。 这是jQuery的设计之美,是jQuery如此受欢迎的原因之一。 因此,要保持一个插件的chainability,你必须确保你的插件返回this关键字。

. 代码如下:

由于插件返回this关键字,它保持了chainability,这样jQuery收集的元素可以继续被jQuery方法如.css控制。 因此,如果你的插件不返回固有的价值,你应该总是在其作用范围内返回this关键字。 此外,你可能会推断出,传递给插件的参数将会在插件的作用范围内被传递。 因此,在前面的例子,字符串'width'变成了插件的类型参数。

五、默认值和选项

对于比较复杂的和提供了许多选项可定制的的插件,最好有一个当插件被调用的时候可以被拓展的默认设置(通过使用$.extend)。 因此,相对于调用一个有大量参数的插件,你可以调用一个对象参数,包含你了你想覆写的设置。

. 代码如下:

在这个例子中,调用tooltip插件时覆写了默认设置中的location选项,background-color选项保持默认值,所以最终被调用的设定值为:

. 代码如下:

这是一个很灵活的方式,提供一个高度可配置的插件,而无需开发人员定义所有可用的选项。

六、命名空间

jQuery 插件封装的方法(jquery插件使用教程)

正确命名空间你的插件是插件开发的一个非常重要的一部分。 正确的命名空间,可以保证你的插件将有一个非常低的机会被其他插件或同一页上的其他代码覆盖。 命名空间也使得你的生活作为一个插件开发人员更容易,因为它可以帮助你更好地跟踪你的方法,事件和数据。

七、插件方法

在任何情况下,一个单独的插件不应该在jQuery.fnjQuery.fn对象里有多个命名空间。

. 代码如下:

这是不被鼓励的,因为它.fn使.fn命名空间混乱。 为了解决这个问题,你应该收集对象文本中的所有插件的方法,通过传递该方法的字符串名称给插件以调用它们。

. 代码如下:

这种类型的插件架构允许您封装所有的方法在父包中,通过传递该方法的字符串名称和额外的此方法需要的参数来调用它们。 这种方法的封装和架构类型是jQuery插件社区的标准,它被无数的插件在使用,包括jQueryUI中的插件和widgets。

八、事件

一个鲜为人知bind方法的功能即允许绑定事件命名空间。 如果你的插件绑定一个事件,一个很好的做法是赋予此事件命名空间。 通过这种方式,当你在解除绑定的时候不会干扰其他可能已经绑定的同一类型事件。 你可以通过追加命名空间到你需要绑定的的事件通过 ‘.'。

. 代码如下:

在这个例子中,当tooltip通过init方法初始化时,它将reposition方法绑定到resize事件并给reposition非那方法赋予命名空间通过追加.tooltip。 稍后, 当开发人员需要销毁tooltip的时候,我们可以同时解除其中reposition方法和resize事件的绑定,通过传递reposition的命名空间给插件。 这使我们能够安全地解除事件的绑定并不会影响到此插件之外的绑定。

九、数据

通常在插件开发的时候,你可能需要记录或者检查你的插件是否已经被初始化给了一个元素。 使用jQuery的data方法是一个很好的基于元素的记录变量的途径。尽管如此,相对于记录大量的不同名字的分离的data, 使用一个单独的对象保存所有变量,并通过一个单独的命名空间读取这个对象不失为一个更好的方法。

. 代码如下:

将数据通过命名空间封装在一个对象中,可以更容易的从一个集中的位置读取所有插件的属性。

十、总结和最佳做法

编写jQuery插件允许你做出库,将最有用的功能集成到可重用的代码,可以节省开发者的时间,使开发更高效。 开发jQuery插件时,要牢记:

1.始终包裹在一个封闭的插件:

. 代码如下:

2.不要冗余包裹this关键字在插件的功能范围内

3.除非插件返回特定值,否则总是返回this关键字来维持chainability 。

4.传递一个可拓展的默认对象参数而不是大量的参数给插件。

5.不要在一个插件中多次命名不同方法。

3.始终命名空间的方法,事件和数据。

最后加一个自己写的放大镜的插件`

以上所述是小编给大家介绍的jQuery 插件封装的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对积木网网站的支持!

仿iframe效果Aajx文件上传实例 前段时间在解决ajax上传文件时折腾了好一阵。直接用$.post上传文本信息肯定是没有问题的。但是$.post直接上传图片是不可行的。后来看到网上的一些解

jQuery ajax 当async为false时解决同步操作失败的问题 jQuery的ajax,当async为false时,同步操作失败。解决方案,jqueryasync最近做项目遇到jQuery的ajax,当async为false时,同步操作失败的问题,上网搜索下,得到

jQuery实现自动调用和触发某个事件的方法 本文实例讲述了jQuery实现自动调用和触发某个事件的方法。分享给大家供大家参考,具体如下:我以点击事件为例,研究一下这个话题:jQuery自动触发

标签: jquery插件使用教程

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

上一篇:jQuery实现的购物车物品数量加减功能代码(jquery实现购物车功能(删除商品,增加和减少商品))

下一篇:仿iframe效果Aajx文件上传实例(iframe的替代方案)

  • 个人独资企业和个体工商户的税收区别
  • 经营所得和企业所得
  • 发票开具与小票的关系是怎样的
  • 油票发票在报销中怎么开
  • 小规模转一般纳税人需要什么条件
  • 个人所得税算错
  • 员工工资占公司收入比例怎么算
  • 2021年增值税专用发票红冲发票步骤
  • 职工集资建房款属公款吗
  • 财产行为税计税依据
  • 金税三期实收资本的印花税在哪缴?
  • 应收留抵税额退税款科目是资产类
  • 施工单位给你钱敢领吗
  • 哪些税不适用征管法
  • 新产品开发费用怎么扣除
  • 税金及附加与期间费用区别
  • 营改增之后就没有营业税了吗
  • 金穗开发票时怎样添加商品?
  • 馒头税率是9么
  • 广告发布税收编码
  • 7月财务报表行次三大变化
  • 免租与转租分别什么意思
  • 企业的哪些活动属于投资活动?
  • 专用发票不抵扣联可以当普票用吗?
  • 土地返还款土地增值税处理
  • 个人投资者
  • 公司买回来做样衣的服装怎么做会计分录?
  • 研发费用如何界定
  • 进的货没有入库怎么处理
  • 借款利息资本化金额
  • 出售固定资产属于收入
  • 会计审核票据如何签字
  • 采购开票税率
  • 计提福利费会计科目
  • uniapp获取input的值
  • 电脑cn是什么意思
  • 商贸企业税收优惠政策
  • win11设置共享文件夹
  • 分类账长什么样
  • Python中tkinter的 Variable类
  • 实行营改增后,税金计算应注意哪些问题
  • 设计服务的成本票可以暂估吗
  • 总分公司汇总申报计算
  • 出纳人员收取现金合法吗
  • mysql5.7.35安装配置教程
  • 电子商业汇票是指
  • 预算收入支出
  • 应收票据贴现的实收金额一定小于票据面值
  • 小规模纳税人是简易计税还是一般计税
  • 印花税减免税优惠政策2019
  • 个体工商营业执照注销需要缴费吗
  • 售后租回交易的表述
  • 工程施工的成本
  • 税控抵税怎么做分录
  • 年度汇算清缴交税怎么做账
  • 无票收入怎么报增值税
  • 盈余公积什么时候会出现在账面
  • 在WINDOWS系统中用鼠标拖动非最大化窗口的标题栏可以
  • win8系统怎么关机
  • 对Windows Server 2008系统自带的磁盘分区进行无损分区的教程图文介绍
  • centos nohup
  • win10系统回收站在哪
  • windows10x预览版
  • wondows文件保护
  • linux服务器dns配置
  • windows7电脑怎么变快
  • 电脑安装win8
  • cocos2d教程
  • python%怎么用
  • 用javascript
  • node.js开发实战详解
  • 欢迎使用本公司智能语音电动车
  • 如何用python开发软件
  • 天龙3d畅游端下载
  • android基于linux还是unix
  • 闵行税务稽查局
  • 国家税务局几号上班
  • 打印格式不对怎么设置A4
  • 税务局全年绩效分析报告
  • 广汽传祺gs52013款2.0自动怎么样
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设