在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 相关文章推荐
js cookies 常见网页木马挂马代码 24小时只加载一次
Apr 13 Javascript
JavaScript 权威指南(第四版) 读书笔记
Aug 11 Javascript
基于jquery实现状态限定编辑的代码
Feb 11 Javascript
JavaScript阻止事件冒泡示例分享
Dec 28 Javascript
javascript计时器详解
Feb 28 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
Sep 08 Javascript
Vue2.0组件间数据传递示例
Mar 07 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
Aug 15 Javascript
详解Angular4 路由设置相关
Aug 26 Javascript
详解Webpack-dev-server的proxy用法
Sep 08 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
Nov 14 Javascript
JS面向对象编程基础篇(二) 封装操作实例详解
Mar 03 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
php is_file 判断给定文件名是否为一个正常的文件
2010/05/10 PHP
ThinkPHP使用UTFWry地址库进行IP定位实例
2014/04/01 PHP
php模拟实现斗地主发牌
2020/04/22 PHP
JavaScript 动态将数字金额转化为中文大写金额
2009/05/14 Javascript
jquery 插件开发方法小结
2009/10/23 Javascript
javascript下arguments,caller,callee,call,apply示例及理解
2009/12/24 Javascript
DOM和XMLHttpRequest对象的属性和方法整理
2012/01/04 Javascript
Javascript实现返回上一页面并刷新的小例子
2013/12/11 Javascript
详解JavaScript中的事件流和事件处理程序
2016/05/20 Javascript
jQuery获取与设置iframe高度的方法
2016/08/01 Javascript
javascript 单例模式详解及简单实例
2017/02/14 Javascript
详解webpack3编译兼容IE8的正确姿势
2017/12/21 Javascript
babel的使用及安装配置教程
2018/02/22 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
2018/09/27 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
2019/07/19 Javascript
使用Karma做vue组件单元测试的实现
2020/01/16 Javascript
Vue作用域插槽实现方法及作用详解
2020/07/08 Javascript
python urllib urlopen()对象方法/代理的补充说明
2017/06/29 Python
python检测主机的连通性并记录到文件的实例
2018/06/21 Python
Flask配置Cors跨域的实现
2019/07/12 Python
Python3打包exe代码2种方法实例解析
2020/02/17 Python
如何使用python写截屏小工具
2020/09/29 Python
CSS中几个与换行有关的属性简明总结
2014/04/15 HTML / CSS
美国Randolph太阳镜官网:美国制造的飞行员太阳镜和射击眼镜
2018/06/15 全球购物
英国电子产品购物网站:TobyDeals
2018/07/30 全球购物
深圳-东方伟业笔试部分
2015/02/11 面试题
毕业生找工作的求职信范文
2013/12/24 职场文书
汽车销售员如何做职业生涯规划
2014/02/16 职场文书
优秀驾驶员先进事迹材料
2014/05/04 职场文书
承租经营合作者协议书
2014/10/01 职场文书
长江三峡导游词
2015/01/31 职场文书
催款函怎么写
2015/06/24 职场文书
如何用python绘制雷达图
2021/04/24 Python
解决mysql的int型主键自增问题
2021/07/15 MySQL
Python Pandas解析读写 CSV 文件
2022/04/11 Python
Python matplotlib绘制雷达图
2022/04/13 Python