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 相关文章推荐
javascript 一个函数对同一元素的多个事件响应
Jul 25 Javascript
Jquery中val()表单取值赋值的实例代码
Aug 15 Javascript
js中键盘事件实例简析
Jan 10 Javascript
jQuery读取XML文件内容的方法
Mar 09 Javascript
javascript事件委托的方式绑定详解
Jun 10 Javascript
基于JavaScript实现屏幕滚动效果
Jan 18 Javascript
jQuery排序插件tableSorter使用方法
Feb 10 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
Mar 04 Javascript
微信小程序实现文件、图片上传功能
Aug 18 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
Oct 28 Javascript
利用vue3+ts实现管理后台(增删改查)
Oct 30 Javascript
nestjs中异常过滤器Exceptionfilter的具体使用
Feb 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
php中HTTP_REFERER函数用法实例
2014/11/21 PHP
PHP进行批量任务处理不超时的解决方法
2016/07/11 PHP
php版微信公众平台接口开发之智能回复开发教程
2016/09/22 PHP
curl 出现错误的调试方法(必看)
2017/02/13 PHP
PHP命名空间namespace的定义方法详解
2017/03/29 PHP
Yii2.0框架实现带分页的多条件搜索功能示例
2019/02/20 PHP
Ajax一统天下之Dojo整合篇
2007/03/24 Javascript
jQuery Ajax提交表单查询获得数据实例代码
2012/09/19 Javascript
jquery实现弹出层遮罩效果的简单实例
2014/03/03 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
2014/08/30 Javascript
javascript实现随机读取数组的方法
2015/08/03 Javascript
javascript手风琴下拉菜单实现代码
2015/11/12 Javascript
AngularJS入门教程之MVC架构实例分析
2016/11/01 Javascript
layui 上传文件_批量导入数据UI的方法
2019/09/23 Javascript
15 分钟掌握vue-next响应式原理
2019/10/13 Javascript
vue与iframe之间的信息交互的实现
2020/04/08 Javascript
python类的继承实例详解
2017/03/30 Python
python 删除列表里所有空格项的方法总结
2018/04/18 Python
python 实现调用子文件下的模块方法
2018/12/07 Python
Python 做曲线拟合和求积分的方法
2018/12/29 Python
python实现五子棋小游戏
2020/03/25 Python
Python中常用的内置方法
2019/01/28 Python
导入tensorflow时报错:cannot import name 'abs'的解决
2019/10/10 Python
Python Process多进程实现过程
2019/10/22 Python
python继承threading.Thread实现有返回值的子类实例
2020/05/02 Python
Python设计密码强度校验程序
2020/07/30 Python
Html5百叶窗效果的示例代码
2017/12/11 HTML / CSS
公司运动会策划方案
2014/05/25 职场文书
运动会方队口号
2014/06/07 职场文书
品牌转让协议书
2014/08/20 职场文书
党支部反对四风思想汇报
2014/10/10 职场文书
行政介绍信范文
2015/05/04 职场文书
从事会计工作年限证明
2015/06/23 职场文书
教师理论学习心得体会
2016/01/21 职场文书
排查Tomcat进程假死的问题
2022/05/06 Servers
SQL Server删除表中的重复数据
2022/05/25 SQL Server