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 相关文章推荐
懒就要懒到底——鼠标自动点击(含时间判断)
Feb 20 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
Nov 25 Javascript
jquery数组之存放checkbox全选值示例代码
Dec 20 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
Oct 23 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
Dec 09 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
Mar 11 Javascript
基于javascript编写简单日历
May 02 Javascript
了解VUE的render函数的使用
Jun 08 Javascript
axios简单实现小程序延时loading指示
Jul 30 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
Dec 12 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
Jan 20 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
Jun 24 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网页游戏学习之Xnova(ogame)源码解读(十三)
2014/06/26 PHP
async和DOM Script文件加载比较
2014/07/20 PHP
详解PHP用substr函数截取字符串中的某部分
2016/12/03 PHP
PHP中define() 与 const定义常量的区别详解
2019/06/25 PHP
javascript 显示当前系统时间代码
2009/12/28 Javascript
jquery(live)中File input的change方法只起一次作用的解决办法
2011/10/21 Javascript
jQuery图片滚动图片的效果(另类实现)
2013/06/02 Javascript
jQuery拖动布局其结果保存到数据库
2015/10/09 Javascript
Jquery ajax基础教程
2015/11/20 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
2016/02/25 Javascript
js实现简单的选项卡效果
2017/02/23 Javascript
axios学习教程全攻略
2017/03/26 Javascript
React Native预设占位placeholder的使用
2017/09/28 Javascript
Vue集成Iframe页面的方法示例
2017/12/12 Javascript
使用axios实现上传图片进度条功能
2017/12/21 Javascript
Vue2实时监听表单变化的示例讲解
2018/08/30 Javascript
JS实现小星星特效
2019/12/24 Javascript
通过js实现压缩图片上传功能
2020/02/25 Javascript
Vue实现手机计算器
2020/08/17 Javascript
vue radio单选框,获取当前项(每一项)的value值操作
2020/09/10 Javascript
深入理解NumPy简明教程---数组2
2016/12/17 Python
详解python3中tkinter知识点
2018/06/21 Python
Python中实现单例模式的n种方式和原理
2018/11/14 Python
Python之使用adb shell命令启动应用的方法详解
2019/01/07 Python
python实现复制文件到指定目录
2019/10/16 Python
Python异常模块traceback用法实例分析
2019/10/22 Python
西班牙在线宠物商店:zooplus.es
2017/02/24 全球购物
丝芙兰波兰:Sephora.pl
2018/03/25 全球购物
歌唱比赛主持词
2014/03/18 职场文书
法人授权委托书格式
2014/04/08 职场文书
工业设计毕业生自荐信
2014/04/13 职场文书
学校督导评估方案
2014/06/10 职场文书
信仰心得体会
2014/09/05 职场文书
Javascript使用integrity属性进行安全验证
2021/11/07 Javascript
PC版《死亡搁浅导剪版》现已发售 展开全新的探险
2022/04/03 其他游戏
MySQL提取JSON字段数据实现查询
2022/04/22 MySQL