jQuery的实现原理的模拟代码 -2 数据部分

这个数据当然要通过属性来进行存取,但是,有多个属性怎么办呢?,要定义多个属性吗?,属性的名字叫什么呢?会不会与其他的属性有冲突呢?
在 jQuery 中,针对 DOM 对象扩展的私有数据可以用一个对象来表示,多个数据就使用这个对象的多个属性来表示。为了能够通过 DOM 对象找到这个扩展数据对象,而不会与其他现有的属性冲突,在 jQuery 中通过 expando 这个常量表示扩展对象的属性名,这个 expando 的值是计算出来的。而这个属性的值就是用来找到扩展对象的键值。
例如,我们可以定义 expando 的值为 "jQuery1234" ,那么,我们可以为每个 DOM 对象增加这个名为 "jQuery1234" 的属性,这个属性的值可以是一个键,例如为 1000。
在 jQuery 对象上的 cache 用来保存所有对象扩展的对象,这个对象可以看作一个字典,属性名就是键值,所对应的值就是扩展数据对象。
也就是说,在 jQuery 对象的 cache 上,将会有一个 1000 的成员,这个成员引用的对象就是 1000 号 DOM 对象的私有扩展对象。1000 号成员的私有数据将被存在在这个对象上。
当一个 DOM 对象需要取得扩展数据的时候,首先通过对象的 expando 属性取得一个键值,然后通过这个键值到 jQuery.cache 中取得自己的扩展对象,然后在扩展对象上读写数据。


代码如下:

/// <reference path="jQuery-core.js" />
// 常用方法
function now() {
return (new Date).getTime();
}
// 扩充数据的属性名,动态生成,避免与已有的属性冲突
var expando = "jQuery" + now(), uuid = 0, windowData = {};
jQuery.cache = {};
jQuery.expando = expando;
// 数据管理,可以针对 DOM 对象保存私有的数据,可以读取保存的数据
jQuery.fn.data = function (key, value) {
// 读取
if (value === undefined) {
return jQuery.data(this[0], key);
}
else { // 设置
this.each(
function () {
jQuery.data(this, key, value);
}
);
}
}
// 移除数据,删除保存在对象上的数据
jQuery.fn.removeData = function (key) {
return this.each(function () {
jQuery.removeData(this, key);
})
}

// 为元素保存数据
jQuery.data = function (elem, name, data) { // #1001
// 取得元素保存数据的键值
var id = elem[expando], cache = jQuery.cache, thisCache;
// 没有 id 的情况下,无法取值
if (!id && typeof name === "string" && data === undefined) {
return null;
}
// Compute a unique ID for the element
// 为元素计算一个唯一的键值
if (!id) {
id = ++uuid;
}
// 如果没有保存过
if (!cache[id]) {
elem[expando] = id; // 在元素上保存键值
cache[id] = {}; // 在 cache 上创建一个对象保存元素对应的值
}
// 取得此元素的数据对象
thisCache = cache[id];
// Prevent overriding the named cache with undefined values
// 保存值
if (data !== undefined) {
thisCache[name] = data;
}
// 返回对应的值
return typeof name === "string" ? thisCache[name] : thisCache;
}
// 删除保存的数据
jQuery.removeData = function (elem, name) { // #1042
var id = elem[expando], cache = jQuery.cache, thisCache = cache[id];
// If we want to remove a specific section of the element's data
if (name) {
if (thisCache) {
// Remove the section of cache data
delete thisCache[name];
// If we've removed all the data, remove the element's cache
if (jQuery.isEmptyObject(thisCache)) {
jQuery.removeData(elem);
}
}
// Otherwise, we want to remove all of the element's data
} else {
delete elem[jQuery.expando];
// Completely remove the data cache
delete cache[id];
}
}
// 检查对象是否是空的
jQuery.isEmptyObject = function (obj) {
// 遍历元素的属性,只有要属性就返回假,否则返回真
for (var name in obj) {
return false;
}
return true;
}
// 检查是否是一个函数
jQuery.isFunction = function (obj) {
var s = toString.call(obj);
return toString.call(obj) === "[object Function]";
}

下面的脚本可以保存或者读取对象的扩展数据。

代码如下:

// 数据操作
$("#msg").data("name", "Hello, world.");
alert($("#msg").data("name"));
$("#msg").removeData("name");
alert($("#msg").data("name"));

(0)

相关推荐

  • jQuery实现原理的模拟代码 -6 代码下载

    演示代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title><

  • jQuery的实现原理的模拟代码 -1 核心部分

    核心部分实现了两种选择器,使用 id 和标记名,还可以提供 css 的设置,以及 text 的设置. 复制代码 代码如下: // # 表示在 jQuery 1.4.2 中对应的行数 // 定义变量 undefined 方便使用 var undefined = undefined; // jQuery 是一个函数,其实调用 jQuery.fn.init 创建对象 var $ = jQuery = window.$ = window.jQuery // #19 = function (selecto

  • jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend

    jQuery.fn.extend 提供了一个扩展机制,可以方便我们通过一个或者多个示例对象来扩展某个对象.如果没有指定被扩展的对象,那么将扩展到自己身上. jQuery.extend 也可以通过 jQuery.fn.extend 使用, 在 jQuery 中使用很多,用来为一个目标对象扩展成员,扩展的成员来自于一系列参考对象. 这样,如果我们需要为 jQuery.fn 扩展成员 removeData,就可以这样进行. 复制代码 代码如下: jQuery.fn.extend( { removeDa

  • jQuery的实现原理的模拟代码 -3 事件处理

    在对象的私有扩展对象上,专门增加了一个名为 events 的事件管理对象,在这个对象上每种事件分别对应一个同名的属性,这个属性的值是一个数组,针对这个事件的处理程序依次压入这个数组中,构成一个事件处理的列表.自定义的事件处理函数即被压入这个列表中. 在事件触发的时候,通过注册的匿名函数来执行 jQuery.event.handle ,由于使用了闭包,所以在这个函数中的 this 就是事件源对象,通过这个事件源对象找到对象的私有扩展数据,然后在 events 中找到对应的事件处理程序列表,最后,依

  • jQuery的实现原理的模拟代码 -5 Ajax

    复制代码 代码如下: // 创建 XHR 对象 var xhr; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if (window.ActiveXObject) { xhr = new ActiveXObject("Msxml2.XMLHTTP"); } else { throw new Error("Ajax is not supported by this browser");

  • jQuery的实现原理的模拟代码 -2 数据部分

    这个数据当然要通过属性来进行存取,但是,有多个属性怎么办呢?,要定义多个属性吗?,属性的名字叫什么呢?会不会与其他的属性有冲突呢? 在 jQuery 中,针对 DOM 对象扩展的私有数据可以用一个对象来表示,多个数据就使用这个对象的多个属性来表示.为了能够通过 DOM 对象找到这个扩展数据对象,而不会与其他现有的属性冲突,在 jQuery 中通过 expando 这个常量表示扩展对象的属性名,这个 expando 的值是计算出来的.而这个属性的值就是用来找到扩展对象的键值. 例如,我们可以定义

  • mvvm双向绑定机制的原理和实现代码(推荐)

    mvvm框架的双向绑定,即当对象改变时,自动改变相关的dom元素的值,反之,当dom元素改变时,能自动更新对象的值,当然dom元素一般是指可输出的input元素. 1. 首先实现单向绑定,在指定对象的属性值发生改变时触发callback函数. 2. 单向绑定可采用ES5新增的defineProperty实现(或defineProperties),用了ES5注定就不支持IE9以下了,为了防止递归死循环问题,原有属性需要剪切到一个私有属性中保存. 3. 循环调用defineProperty定义闭包时

  • jQuery Ajax 全局调用封装实例代码详解

    有一种情况:全站都要用异步方式来调用 数据,提交数据,那么你每次操作 都会要$.ajax({.....}) 写重复的方法 和代码,冗余太大, 也浪费时间,虽说你有代码自动提示补全,但真的不优雅,身为前端极客,是不能允许的! [嘿嘿!虽说我现在基本不用jquery了 ,不过异步概念 是永远要用的,就帮助下新人] jQuery Ajax通用js封装 第一步:引入jQuery库 <script type="text/javascript" src="/js/jquery.mi

  • Jquery选择器 $实现原理

    但由于工作的原因,很久不曾做过网站项目了,也没有时间去好好研究Jquery的源码,这个疑问也一直没有得到解决了, 今天,空闲之余,打开Jquery的源码看看,才明天它实现的原理,原来在加入jquery的js这个文件时,实际上是执行了一个函数,在这个函数里己经初始化了$和JQuery变量, 实现这个功能源码如下(代码已删减和更改,并不影响说明实现原理): 复制代码 代码如下: (function() { var // Will speed up references to window, and

  • C#中foreach原理以及模拟的实现

    本文实例讲述了C#中foreach原理以及模拟的实现方法,分享给大家供大家参考.具体如下: 复制代码 代码如下: public class Person:IEnumerable     //定义一个person类  并且 实现IEnumerable 接口  (或者不用实现此接口 直接在类 //里面写个GetEnumerator()方法) {         string[] names = { "小杨", "科比布莱恩特", "凯文杜兰特", &

随机推荐