在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 相关文章推荐
javascript入门·图片对象(无刷新变换图片)\滚动图像
Oct 01 Javascript
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
Mar 15 Javascript
StringTemplate遇见jQuery冲突的解决方法
Sep 22 Javascript
JS实现点击按钮后框架内载入不同网页的方法
May 05 Javascript
javascript禁止超链接跳转的方法
Feb 02 Javascript
jQuery中值得注意的trigger方法浅析
Dec 12 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
Jan 22 Javascript
JavaScript之underscore_动力节点Java学院整理
Jul 03 Javascript
JS实现的简单四则运算计算器功能示例
Sep 27 Javascript
本地搭建微信小程序服务器的实现方法
Oct 27 Javascript
js实现计时器秒表功能
Dec 16 Javascript
JavaScript实现简单的计算器
Jan 16 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
分页显示Oracle数据库记录的类之一
2006/10/09 PHP
使用网络地址转换实现多服务器负载均衡
2006/10/09 PHP
在Debian系统下配置LNMP的教程
2015/07/09 PHP
CodeIgniter配置之routes.php用法实例分析
2016/01/19 PHP
2017年最好用的9个php开发工具推荐(超好用)
2017/10/23 PHP
Javascript 获取字符串字节数的多种方法
2009/06/02 Javascript
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
2010/06/28 Javascript
MultiSelect左右选择控件的设计与实现介绍
2013/06/08 Javascript
jQuery实现点击图片翻页展示效果的方法
2015/02/16 Javascript
jQuery判断一个元素是否可见的方法
2015/06/05 Javascript
使用CamanJS在Web页面上处理图像的技巧
2015/08/18 Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
2016/12/19 Javascript
Vue开发过程中遇到的疑惑知识点总结
2017/01/20 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
2017/03/13 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
2017/06/25 Javascript
jQuery实现html table行Tr的复制、删除、计算功能
2017/07/10 jQuery
微信小程序日历/日期选择插件使用方法详解
2018/12/28 Javascript
AjaxFileUpload.js实现异步上传文件功能
2019/04/19 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
2019/08/16 Javascript
vue实现学生信息管理系统
2020/05/30 Javascript
vant 时间选择器--开始时间和结束时间实例
2020/11/04 Javascript
Python Web框架Pylons中使用MongoDB的例子
2013/12/03 Python
Python实现字典按照value进行排序的方法分析
2017/12/23 Python
纯python实现机器学习之kNN算法示例
2018/03/01 Python
TensorFlow利用saver保存和提取参数的实例
2018/07/26 Python
PyTorch中的Variable变量详解
2020/01/07 Python
python实现最短路径的实例方法
2020/07/19 Python
Python面向对象特殊属性及方法解析
2020/09/16 Python
html5 移动端视频video的android兼容(去除播放控件、全屏)
2020/03/26 HTML / CSS
意大利拉斐尔时尚购物网:Raffaello Network(支持中文)
2018/11/09 全球购物
中科创达面试题
2016/12/28 面试题
百日安全活动总结
2014/05/04 职场文书
机关干部四风问题自我剖析及整改措施
2014/10/26 职场文书
2015年中学校长工作总结
2015/05/19 职场文书
2016年“我们的节日·重阳节”主题活动总结
2016/04/01 职场文书
营销策划分析:怎么策划才能更好销量产品?
2019/09/04 职场文书