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 相关文章推荐
document.getElementById方法在Firefox与IE中的区别
May 18 Javascript
jquery实现的鼠标下拉滚动置顶效果
Jul 24 Javascript
node.js中的fs.lchmodSync方法使用说明
Dec 16 Javascript
创建、调用JavaScript对象的方法集锦
Dec 24 Javascript
JS显示表格内指定行html代码的方法
Mar 31 Javascript
innerHTML中标签可以换行的方法汇总
Aug 14 Javascript
js获取对象、数组的实际长度,元素实际个数的实现代码
Jun 08 Javascript
Bootstrap Table的使用总结
Oct 08 Javascript
Angular2库初探
Mar 01 Javascript
深入理解react-router@4.0 使用和源码解析
May 23 Javascript
详解JS中统计函数执行次数与执行时间
Sep 04 Javascript
详解Vue项目部署遇到的问题及解决方案
Jan 11 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中遇到的时区问题解决方法
2015/07/23 PHP
PHP flush 函数使用注意事项
2016/08/26 PHP
CI框架实现创建自定义类库的方法
2018/12/25 PHP
php中钩子(hook)的原理与简单应用demo示例
2019/09/03 PHP
使用js实现一个可编辑的select下拉列表
2014/02/20 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
2015/06/19 Javascript
功能强大的Bootstrap组件(结合js)
2016/08/03 Javascript
很棒的一组js图片轮播特效
2017/01/12 Javascript
js图片放大镜实例讲解(必看篇)
2017/07/17 Javascript
JavaScript日期工具类DateUtils定义与用法示例
2018/09/03 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
2019/04/17 Javascript
Vue+Element实现动态生成新表单并添加验证功能
2019/05/23 Javascript
了不起的11个JavaScript代码重构最佳实践小结
2021/01/11 Javascript
Javascript实现关闭广告效果
2021/01/29 Javascript
python 提取文件的小程序
2009/07/29 Python
Python连接mssql数据库编码问题解决方法
2015/01/01 Python
python脚本爬取字体文件的实现方法
2017/04/29 Python
利用django-suit模板添加自定义的菜单、页面及设置访问权限
2018/07/13 Python
Pycharm无法使用已经安装Selenium的解决方法
2018/10/13 Python
python用post访问restful服务接口的方法
2018/12/07 Python
Python设计模式之代理模式实例详解
2019/01/19 Python
python批量图片处理简单示例
2019/08/06 Python
python模块导入的方法
2019/10/24 Python
OpenCV里的imshow()和Matplotlib.pyplot的imshow()的实现
2019/11/25 Python
在python中使用nohup命令说明
2020/04/16 Python
在keras里面实现计算f1-score的代码
2020/06/15 Python
基于pycharm 项目和项目文件命名规则的介绍
2021/01/15 Python
Laura Geller官网:美国彩妆品牌
2018/12/29 全球购物
保密承诺书范文
2014/03/27 职场文书
公司承诺书范文
2014/05/19 职场文书
2015年校长新年寄语
2014/12/08 职场文书
小学生2015教师节演讲稿
2015/03/19 职场文书
最美乡村教师观后感
2015/06/11 职场文书
2019思想汇报范文
2019/05/21 职场文书
会计专业2019暑假实习报告
2019/06/21 职场文书
52条SQL语句教你性能优化
2021/05/25 MySQL