在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 相关文章推荐
Firefox div高度自适应
Apr 28 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
Sep 26 Javascript
用js实现控件的隐藏及style.visibility的使用
Jun 14 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
Jun 21 Javascript
创建、调用JavaScript对象的方法集锦
Dec 24 Javascript
基于jquery步骤进度条源码分享
Nov 12 Javascript
JavaScript优化专题之Loading and Execution加载和运行
Jan 20 Javascript
深入解析JavaScript中的arguments对象
Jun 12 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
在vue.js中使用JSZip实现在前端解压文件的方法
Sep 05 Javascript
详解vue中axios的使用与封装
Mar 20 Javascript
swiper实现异形轮播效果
Nov 28 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
攻克CakePHP系列三 表单数据增删改
2008/10/22 PHP
ThinkPHP中pathinfo的访问模式、路径访问模式及URL重写总结
2014/08/23 PHP
ThinkPHP 表单自动验证运用示例
2014/10/13 PHP
php继承中方法重载(覆盖)的应用场合
2015/02/09 PHP
深入分析PHP优化及注意事项
2016/07/04 PHP
php中的explode()函数实例介绍
2019/01/18 PHP
PHP多进程通信-消息队列使用
2019/03/08 PHP
用PHP的反射实现委托模式的讲解
2019/03/22 PHP
使用JavaScript switch case 另类写法
2010/03/14 Javascript
把jquery 的dialog和ztree结合实现步骤
2013/08/02 Javascript
Javascript事件实例详解
2013/11/06 Javascript
js控制iframe的高度/宽度让其自适应内容
2014/04/09 Javascript
jquery easyui 结合jsp简单展现table数据示例
2014/04/18 Javascript
jQuery实现查找最近父节点的方法
2016/06/23 Javascript
3种不同的ContextMenu右键菜单实现代码
2016/11/03 Javascript
jQuery EasyUI之验证框validatebox实例详解
2017/04/10 jQuery
vue.js vue-router如何实现无效路由(404)的友好提示
2017/12/20 Javascript
使用typescript开发angular模块并发布npm包
2018/04/19 Javascript
深入Vue-Router路由嵌套理解
2018/08/13 Javascript
解决layui轮播图有数据不显示的情况
2019/09/16 Javascript
JavaScript编写开发动态时钟
2020/07/29 Javascript
vue实现抽屉弹窗效果
2020/11/15 Javascript
[01:02]DOTA2辉夜杯决赛日 CDEC.Y对阵VG赛前花絮
2015/12/27 DOTA
python迭代dict的key和value的方法
2018/07/06 Python
flask框架jinja2模板与模板继承实例分析
2019/08/01 Python
python json load json 数据后出现乱序的解决方案
2020/02/27 Python
TensorFlow的reshape操作 tf.reshape的实现
2020/04/19 Python
新手学习Python2和Python3中print不同的用法
2020/06/09 Python
HEMA英国:荷兰原创设计
2018/08/28 全球购物
安全生产检查通报
2014/01/29 职场文书
《沙漠中的绿洲》教学反思
2014/04/24 职场文书
销售目标责任书
2014/07/23 职场文书
2014学习优秀共产党员先进事迹思想汇报
2014/09/14 职场文书
学校领导班子成员查摆问题及整改措施
2014/10/28 职场文书
拔河比赛队名及霸气口号
2015/12/24 职场文书
PHP遍历数组的6种方式总结
2021/11/17 PHP