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 相关文章推荐
treepanel动态加载数据实现代码
Dec 15 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
Jan 23 Javascript
javascript实现图片跟随鼠标移动效果的方法
May 13 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
Nov 04 Javascript
JavaScript常用基础知识强化学习
Dec 09 Javascript
Javascript技术栈中的四种依赖注入小结
Feb 27 Javascript
Vuex简单入门
Apr 19 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
Sep 20 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
Oct 16 Javascript
原生JS实现 MUI导航栏透明渐变效果
Nov 07 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
Nov 10 Javascript
详解在create-react-app使用less与antd按需加载
Dec 06 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个人网站架设连环讲(一)
2006/10/09 PHP
PHP的文件操作与算法实现的面试题示例
2015/08/10 PHP
php实现的debug log日志操作类实例
2016/07/12 PHP
phpmyadmin下载、安装、配置教程
2017/05/16 PHP
Laravel框架实现修改登录和注册接口数据返回格式的方法
2018/08/17 PHP
无语,javascript居然支持中文(unicode)编程!
2007/04/12 Javascript
jquery select 设置默认选中的示例代码
2014/02/07 Javascript
Javascript玩转继承(三)
2014/05/08 Javascript
javascript使用call调用微信API
2014/12/15 Javascript
JavaScript统计网站访问次数的实现代码
2015/11/18 Javascript
jQuery zTree加载树形菜单功能
2016/02/25 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
2016/06/28 Javascript
基于JavaScript实现带缩略图的轮播效果
2017/01/12 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
2017/02/17 Javascript
Vuejs实现带样式的单文件组件新方法
2017/05/02 Javascript
详解angularjs的数组传参方式的简单实现
2017/07/28 Javascript
NodeJS设计模式总结【单例模式,适配器模式,装饰模式,观察者模式】
2017/09/06 NodeJs
利用jQuery+localStorage实现一个简易的计时器示例代码
2017/12/25 jQuery
基于JavaScript实现简单的音频播放功能
2018/01/07 Javascript
vue使用keep-alive保持滚动条位置的实现方法
2019/04/09 Javascript
JavaScript代码实现微博批量取消关注功能
2021/02/05 Javascript
python实现中文分词FMM算法实例
2015/07/10 Python
Django中使用Whoosh进行全文检索的方法
2019/03/31 Python
OpenCV模板匹配matchTemplate的实现
2019/10/18 Python
python上传时包含boundary时的解决方法
2020/04/08 Python
CSS3弹性盒模型flex box快速入门心得(必看篇)
2016/05/24 HTML / CSS
华为C++笔试题
2014/08/05 面试题
青年文明号复核材料
2014/02/11 职场文书
小学生手册家长评语
2014/04/16 职场文书
委托协议书范本
2014/04/22 职场文书
教师群众路线剖析材料
2014/09/29 职场文书
《思路决定出路》读后感3篇
2019/12/11 职场文书
Redis延迟队列和分布式延迟队列的简答实现
2021/05/13 Redis
详解JavaScript中Arguments对象用途
2021/08/30 Javascript
浅析CSS在DevTools 中架构演变
2021/10/05 HTML / CSS
MySQL创建管理LIST分区
2022/04/13 MySQL