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 相关文章推荐
写的htc的数据表格
Jan 20 Javascript
jquery uaMatch源代码
Feb 14 Javascript
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
May 30 Javascript
javascript的document.referrer浏览器支持、失效情况总结
Jul 18 Javascript
javascript实现图像循环明暗变化的方法
Feb 25 Javascript
实用jquery操作表单元素的简单代码
Jul 04 Javascript
EasyUI为Numberbox添加blur事件的方法
Mar 05 Javascript
详解Bootstrap 学习(一)入门
Apr 12 Javascript
一个小时快速搭建微信小程序的方法步骤
Apr 15 Javascript
深入解析koa之中间件流程控制
Jun 17 Javascript
Openlayers学习之地图比例尺控件
Sep 28 Javascript
JS实现手风琴特效
Nov 08 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 date与gmdate的获取日期的区别
2010/02/08 PHP
如何让CI框架支持service层
2014/10/29 PHP
php将html转为图片的实现方法
2017/05/19 PHP
PHP使用数组实现矩阵数学运算的方法示例
2017/05/29 PHP
js点击出现悬浮窗效果不使用JQuery插件
2014/01/20 Javascript
$.each与$().each的区别示例介绍
2014/03/20 Javascript
淘宝网提供的国内NPM镜像简介和使用方法
2014/04/17 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
2014/06/17 Javascript
javascript 构造函数方式定义对象
2015/01/02 Javascript
jQuery实现鼠标划过添加和删除class的方法
2015/06/26 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
2017/04/28 Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
2018/03/23 Javascript
微信小程序获取音频时长与实时获取播放进度问题
2018/08/28 Javascript
Vue 动态组件components和v-once指令的实现
2019/08/30 Javascript
vue微信分享插件使用方法详解
2020/02/18 Javascript
JS实现横向跑马灯效果代码
2020/04/20 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
2020/10/24 Javascript
Python实现短网址ShortUrl的Hash运算实例讲解
2015/08/10 Python
如何利用python查找电脑文件
2018/04/27 Python
详解Appium+Python之生成html测试报告
2019/01/04 Python
Python中单线程、多线程和多进程的效率对比实验实例
2019/05/14 Python
Python Numpy计算各类距离的方法
2019/07/05 Python
Python 线程池用法简单示例
2019/10/02 Python
简单了解Python多态与属性运行原理
2020/06/15 Python
用 python 进行微信好友信息分析
2020/11/28 Python
Python 里最强的地图绘制神器
2021/03/01 Python
申报职称专业技术个人的自我评价
2013/12/12 职场文书
元旦促销方案
2014/03/15 职场文书
党员弘扬焦裕禄精神思想汇报
2014/09/10 职场文书
导游词开场白
2015/01/31 职场文书
党员“一帮一”活动总结
2015/05/07 职场文书
2015年教务处干事工作总结
2015/07/22 职场文书
那些美到让人窒息的诗句,值得你收藏!
2019/08/20 职场文书
深入浅析React中diff算法
2021/05/19 Javascript
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
2021/12/06 HTML / CSS
MySQL数据库简介与基本操作
2022/05/30 MySQL