在JavaScript中重写jQuery对象的方法实例教程


Posted in Javascript onAugust 25, 2014

jQuery是一个款非常优秀的类库,它给我们解决了很多的客户端编程,但是任何东西都不是万能的,当它不能满足我们的需求时我们就需要对它进行重写,同时也不要影响其原有的功能或者修改其原有的功能;比如我现在的web应用程序大多数时候的数据交互都是通过Ajax来完成的,这样就可以将一些隐藏字段的数据保存在HTML标签的属性中,使HTML标签的代码量减少,如:ID,Timestamp等等,这些不需要用户输入但又不得不提交的字段,通过表单提交的做法是

<input name="ID" value="343" type="hidden" />

把ID的值保存在一个隐藏标签中,然后随表单提交。

代码如下所示:

<div>
<label data-field="id" data-property="data-id" data-id="343">First Name</label><input type="text" data-field="FirstName" />
</div>

注意蓝色的部分这个属性名称请不要太在意,您完全可以取一些更简洁名字,现在我们来重写jQuery的val方法来读取和设置data-id的值,给$.prototype.val重新定义一个函数,以闭包的形式将基类函数传入,以便在新函数中调用它,看下面这段代码:

<script>
    $.prototype.val = function (base) {
      return function () {
        var s = this, a = "data-property", p = s.attr(a), isset = arguments.length > 0, v = isset ? arguments[0] : null;



 //这里调用基类方法,当然基类方法在何时调用或者是否要调用取决于您的业务逻辑,在这里我们是要调用的,因为要保持它原有的功能。
        if (isset&&typeof(base)=="function") { base.call(s, v); } else { v = base.call(s); }
        if (p) {
          if (isset) { s.attr(p, v); return s }
          else { return s.attr(p) }
        }
        else {
          if (!s.is(":input"))
          { if (isset) { s.text(v); return s; } else { return s.text(); } }
          else { return isset ? s : v; }
        }
        
      }



//在这里传入基类方法
    }($.prototype.val);
</script>

 这个重写了之后,当在标签中指定了data-property属性时,jQuery对象调用val() 等同于调用attr("data-property"),但没有指定data-property也就是默认情况下,如果是非表单元素则是val()等同于text(),如果是表单元素则保持原来的功能也就是读写value属性的值,这样就可以通过这种方式:$("[data-field='id']").val(345)和$("[data-field='id']").val() 读取或者设置它的值了,“data-field” 这个属性将会映射到服务器上对应类型的字段中,关于重写JavaScript中的jQuery的方法就到这里了,其他方法的重写是异曲同工的,大家可以举一反三的思考。

全部代码如下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>在JavaScript中重写对象的方法</title>
  <script src="Scripts/jquery-1.8.2.min.js"></script>
  <script src="Scripts/jquery-ui-1.8.24.min.js"></script>
  <script>
    $.prototype.val = function (base) {
      return function () {
        var s = this, a = "data-property", p = s.attr(a), isset = arguments.length > 0, v = isset ? arguments[0] : null;
        if (isset&&typeof(base)=="function") { base.call(s, v); } else { v = base.call(s); }
        if (p) {
          if (isset) { s.attr(p, v); return s }
          else { return s.attr(p) }
        }
        else {
          if (!s.is(":input"))
          { if (isset) { s.text(v); return s; } else { return s.text(); } }
          else { return isset ? s : v; }
        }
      }
    }($.prototype.val);
  </script>
</head>
<body>
  <span id="lbl">Hello world!</span>
  <input type="text" id="txt" value="hello world" />
  <input type="checkbox" value="哈哈哈。。。" />
</body>
</html>

希望本文所述对大家的web前段设计有所帮助。

Javascript 相关文章推荐
addEventListener 的用法示例介绍
May 07 Javascript
JavaScript获取网页中第一个图片id的方法
Apr 03 Javascript
js实现鼠标划过给div加透明度的方法
May 25 Javascript
JavaScript为事件句柄绑定监听函数实例详解
Dec 15 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
Aug 17 Javascript
form+iframe解决跨域上传文件的方法
Nov 18 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
Nov 29 Javascript
JS自动生成动态HTML验证码页面
Jun 14 Javascript
angularjs实现分页和搜索功能
Jan 03 Javascript
webpack多入口文件页面打包配置详解
Jan 09 Javascript
javascript中call()、apply()的区别
Mar 21 Javascript
使用JS实现动态时钟
Mar 12 Javascript
一个支持任意尺寸的图片上下左右滑动效果
Aug 24 #Javascript
jquery 取子节点及当前节点属性值的方法
Aug 24 #Javascript
在JS数组特定索引处指定位置插入元素的技巧
Aug 24 #Javascript
js获取checkbox复选框选中的选项实例
Aug 24 #Javascript
jQuery异步加载数据并添加事件示例
Aug 24 #Javascript
Jquery通过JSON字符串创建JSON对象
Aug 24 #Javascript
Jquery中扩展方法extend使用技巧
Aug 24 #Javascript
You might like
如何开发一个虚拟域名系统
2006/10/09 PHP
ThinkPHP中的系统常量和预定义常量集合
2014/07/01 PHP
PHP Warning: Module 'modulename' already loaded in问题解决办法
2015/03/16 PHP
php封装的图片(缩略图)处理类完整实例
2016/10/19 PHP
php json中文编码为null的解决办法
2016/12/14 PHP
PHP实现一个轻量级容器的方法
2019/01/28 PHP
PHP实现网站应用微信登录功能详解
2019/04/11 PHP
日期函数扩展类Ver0.1.1
2006/09/07 Javascript
我见过最全的个人js加解密功能页面
2007/12/12 Javascript
jQuery 判断页面元素是否存在的代码
2009/08/14 Javascript
javaScript中Math()函数注意事项
2015/06/18 Javascript
Node.js模块封装及使用方法
2016/03/06 Javascript
完美解决IE9浏览器出现的对象未定义问题
2016/09/29 Javascript
详解PHP中pathinfo()函数导致的安全问题
2017/01/05 Javascript
jQuery模拟淘宝购物车功能
2017/02/27 Javascript
解决html input验证只能输入数字,不能输入其他的问题
2017/07/21 Javascript
JS 60秒后重新发送验证码的实例讲解
2017/07/26 Javascript
微信小程序支付功能 php后台对接完整代码分享
2018/06/12 Javascript
JS canvas绘制五子棋的棋盘
2020/05/28 Javascript
详解angular2如何手动点击特定元素上的点击事件
2018/10/16 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
2019/06/20 Javascript
js getBoundingClientRect使用方法详解
2019/07/17 Javascript
Vue+Koa2 打包后进行线上部署的教程详解
2019/07/31 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
2020/08/10 Javascript
[02:25]DOTA2英雄基础教程 虚空假面
2014/01/02 DOTA
跟老齐学Python之关于循环的小伎俩
2014/10/02 Python
Python中的localtime()方法使用详解
2015/05/22 Python
python+opencv实现霍夫变换检测直线
2020/10/23 Python
python实现电子产品商店
2019/02/26 Python
用Python批量把文件复制到另一个文件夹的实现方法
2019/08/16 Python
python re.match()用法相关示例
2021/01/27 Python
css3绘制百度的小度熊
2018/10/29 HTML / CSS
HTML5拖拉上传文件的简单实例
2017/01/11 HTML / CSS
2014春晚主持词
2014/03/25 职场文书
关于感恩的演讲稿400字
2014/08/26 职场文书
2015清明节祭奠英烈寄语大全
2015/03/04 职场文书