JQuery 动态扩展对象之另类视角


Posted in Javascript onMay 25, 2010

例如:有一个employee对象,

function employee(){ 
this.e_id = 0; 
this.e_name = ""; 
}

现在需要为它动态的新增"age"属性和"toString()"方法,

var empObj = new employee(); 
empObj["age"] = 20; 
empObj["toString"] = function() { return this.e_id.toString() + this.e_name; };

一行简单的代码就承担了这项工作,这是Javascript内置支持的,不过往往我们需要在这基础上支持一定程度的扩展,所以会将这一行简单的代码抽成一个方法:

function dym_setprop(obj, key, value) { 
if (obj && key) { 
obj[key] = value; 
} 
}

看到这里,我们先让思路做个跳转,跳到C#中的employee对象,如下:
JQuery 动态扩展对象之另类视角
在面向对象的编程中,对外使用的都是属性(Get/Set),那么想想如何将这种方式签入到Javascript中,现在让我们跳回dym_setprop函数内,既在dym_setprop方法中不能使用obj[key]=value的直接赋值方式,而要支持Set。

function dym_setprop(obj, key, value, fn) { 
if (obj && key) { 
fn(obj, key, value); 
} 
}

参数fn,在dym_setprop中不直接操作任何对象,使用函数fn来代替相应的操作代码,则在这里除了支持Set外,还有其他很大的自由空间。
让我们继续深入dym_setprop方法,现在我们把关注点放在参数value上,大家都清楚value可以是值类型,也可以是函数,对于值类型来说,不用考虑其他东西直接赋值就可以了,对于函数来说就没有这么简单,它支持两种操作:

1、直接将函数赋给新扩展的属性

2、将函数执行的返回值赋给新扩展的属性

function dym_setprop(obj, key, value, fn, exec, pass) { 
if (obj && key) { 
var temp = value; 
if (exec) { 
temp = value.call(obj, key, fn(obj, key)); 
} 
fn(obj, key, temp, pass); 
} 
}

在这段代码中参数exec充当了上面两种操作选择的角色,参数pass是一个额外的执行参数。除此之外,大家也许会对fn有些疑惑,因为上面有两个地方使用了,区别只有参数个数不同,fn到底代表什么?!再次想下C#中的属性,它是有Get/Set的,那么在这里fn(obj,key)就相当与Get,而fn(obj,key,temp,pass)就相当与Set。

例如:看下面的代码,对于fn的定义与使用,

employee.AccessProp = function(obj, key, value) { 
if (value) { 
obj[key] = value; 
} 
else { 
return obj[key]; 
} 
} dym_setprop(empObj, "age", function(key, value) { return value + 10; }, employee.AccessProp, true);

看了这么多,也许大家觉得郁闷,简单的动态扩展对象程序为什么要以这种方式来编写,有种没事找事的感觉,其实不然,如果你只想做动态扩展对象,那么我建议你别采用上述dym_setprop的思路,但是如果你想从更加抽象的角度上思考,将dym_setprop内的程序作为一个流程执行的模板,那么这是一个不错的方式,因为dym_setprop内部不承担任何具体代码(obj[key]=value或obj[key])的执行,它都通过函数fn来代替,这样对于具体执行来说有完全自由的空间。

理解完上述的思路后,让我们进入本文的核心,JQuery是如何实现动态扩展对象的?access函数,

function access( elems, key, value, exec, fn, pass ) { 
var length = elems.length; // Setting many attributes 
if ( typeof key === "object" ) { 
for ( var k in key ) { 
access( elems, k, key[k], exec, fn, value ); 
} 
return elems; 
} 
// Setting one attribute 
if ( value !== undefined ) { 
// Optionally, function values get executed if exec is true 
exec = !pass && exec && jQuery.isFunction(value); 
for ( var i = 0; i < length; i++ ) { 
fn( elems[i], key, exec ? value.call( elems[i], i, fn( elems[i], key ) ) : value, pass ); 
} 
return elems; 
} 
// Getting an attribute 
return length ? fn( elems[0], key ) : null; 
}

仔细看完access函数的代码,你一定发现它和dym_setprop的相试度很高,它只是多了一段代码:
if ( typeof key === "object" ) { 
for ( var k in key ) { 
access( elems, k, key[k], exec, fn, value ); 
} 
return elems; 
}

很容易看出它其实就是用来支持object对象的动态扩展属性。具体的执行流程通过下图来展示:
JQuery 动态扩展对象之另类视角
到这里已经写完了,本文试着从自己的角度上去猜测JQuery的开发者是如何设计出access函数的,让它去支持动态扩展对象,并且说明了access的执行流程。其实对于我的这种猜测不一定正确,不过不妨碍我对于JQuery的研究。
Javascript 相关文章推荐
jquery实现图片水平滚动效果代码分享
Aug 26 Javascript
微信企业号开发之微信考勤Cookies的使用
Sep 11 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
Dec 04 Javascript
浅析创建javascript对象的方法
May 13 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
Jun 24 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
Nov 23 Javascript
解析Vue2.0双向绑定实现原理
Feb 23 Javascript
基于js中this和event 的区别(详解)
Oct 24 Javascript
详解vue mixins和extends的巧妙用法
Dec 20 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
Mar 02 Javascript
Vue中mintui的field实现blur和focus事件的方法
Aug 25 Javascript
浅谈vue.watch的触发条件是什么
Nov 07 Javascript
jQuery的Ajax时无响应数据的解决方法
May 25 #Javascript
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
May 25 #Javascript
ExtJS 2.0 GridPanel基本表格简明教程
May 25 #Javascript
Chrome中模态对话框showModalDialog返回值问题的解决方法
May 25 #Javascript
json格式化/压缩工具 Chrome插件扩展版
May 25 #Javascript
js 多种变量定义(对象直接量,数组直接量和函数直接量)
May 24 #Javascript
js 设置选中行的样式的实现代码
May 24 #Javascript
You might like
1982年日本摄影师镜头下的中国孩子 那无忧无虑的童年
2020/03/12 杂记
php下通过POST还是GET来传值
2008/06/05 PHP
PHP 第二节 数据类型之数组
2012/04/28 PHP
PHP资源管理框架Assetic简介
2014/06/12 PHP
php发送get、post请求的6种方法简明总结
2014/07/08 PHP
php生成过去100年下拉列表的方法
2015/07/20 PHP
PHP对象相关知识总结
2017/04/09 PHP
Laravel5.4框架中视图共享数据的方法详解
2019/09/05 PHP
跨浏览器的设置innerHTML方法
2006/09/18 Javascript
jquery 页面全选框实践代码
2010/04/02 Javascript
简单的js表单验证函数
2013/10/28 Javascript
jquery制作居中遮罩层效果分享
2014/02/21 Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
2014/03/28 Javascript
全面解析Bootstrap手风琴效果
2020/04/17 Javascript
javascript类型系统 Array对象学习笔记
2016/01/09 Javascript
animate 实现滑动切换效果【实例代码】
2016/05/05 Javascript
javascript 解决浏览器不支持的问题
2016/09/24 Javascript
Bootstrap CSS组件之输入框组
2016/12/17 Javascript
微信小程序实现弹出菜单功能
2018/06/12 Javascript
iview实现select tree树形下拉框的示例代码
2018/12/21 Javascript
在JavaScript中使用严格模式(Strict Mode)
2019/06/13 Javascript
vue-router之实现导航切换过渡动画效果
2019/10/31 Javascript
vue实现自定义多选按钮
2020/07/16 Javascript
Python引用传值概念与用法实例小结
2017/10/07 Python
Python程序退出方式小结
2017/12/09 Python
关于ResNeXt网络的pytorch实现
2020/01/14 Python
Web前端页面跳转并取到值
2017/04/24 HTML / CSS
乡镇三项教育实施方案
2014/03/30 职场文书
施工质量承诺书范文
2014/05/30 职场文书
护士求职信
2014/07/05 职场文书
幼儿园教师自我评价
2015/03/04 职场文书
数学教师求职信范文
2015/03/20 职场文书
学校2016年圣诞节活动总结
2016/03/31 职场文书
2007年老电脑安装win11会怎么样? 网友实测win11在老电脑运行良好
2021/11/21 数码科技
聊聊Python String型列表求最值的问题
2022/01/18 Python
MySQL如何使备份得数据保持一致
2022/05/02 MySQL