加入收藏 | 设为首页 | 会员中心 | 我要投稿 河北网 (https://www.hebeiwang.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 业界 > 正文

jQuery 道理的模仿代码 -2 数据部门

发布时间:2018-09-01 15:27:49 所属栏目:业界 来源:站长网
导读:上一篇:jQuery 道理的模仿代码 -1 焦点部门 在 jQuery 中,可以对每一个 DOM 工具生涯私有的数据。 这个数据虽然要通过属性来举办存取,可是,有多个属性怎么办呢?,要界说多个属性吗?,属性的名字叫什么呢?会不会与其他的属性有斗嘴呢? 在 jQuery 中

上一篇:jQuery 道理的模仿代码 -1 焦点部门

在 jQuery 中,可以对每一个 DOM 工具生涯私有的数据。

这个数据虽然要通过属性来举办存取,可是,有多个属性怎么办呢?,要界说多个属性吗?,属性的名字叫什么呢?会不会与其他的属性有斗嘴呢?

在 jQuery 中,针对 DOM 工具扩展的私稀有据可以用一个工具来暗示,多个数据就行使这个工具的多个属性来暗示。为了可以或许通过 DOM 工具找到这个扩展数据工具,而不会与其他现有的属性斗嘴,在 jQuery 中通过 expando 这个常量暗示扩展工具的属性名,这个 expando 的值是计较出来的。而这个属性的值就是用来找到扩展工具的键值。

譬喻,我们可以界说 expando 的值为 "jQuery1234" ,那么,我们可觉得每个 DOM 工具增进这个名为  "jQuery1234" 的属性,这个属性的值可所以一个键,譬喻为 1000。

在 jQuery 工具上的 cache 用来生涯全部工具扩展的工具,这个工具可以看作一个字典,属性名就是键值,所对应的值就是扩展数据工具。

也就是说,在 jQuery 工具的 cache 上,将会有一个 1000 的成员,这个成员引用的工具就是 1000 号 DOM 工具的私有扩展工具。1000 号成员的私稀有据将被存在在这个工具上。

当一个 DOM 工具必要取得扩展数据的时辰,起首通过工具的 expando 属性取得一个键值,然后通过这个键值到 jQuery.cache 中取得本身的扩展工具,然后在扩展工具上读写数据。

1 /// <reference path="jQuery-core.js" />
2
3 // 常用要领
4 function now() {
5 return (new Date).getTime();
6 }
7
8 // 扩凑数据的属性名,动态天生,停止与已有的属性斗嘴
9 var expando = "jQuery" + now(), uuid = 0, windowData = {};
10 jQuery.cache = {};
11 jQuery.expando = expando;
12
13 // 数据打点,可以针对 DOM 工具生涯私有的数据,可以读取生涯的数据
14 jQuery.fn.data = function (key, value) {
15
16 // 读取
17 if (value === undefined) {
18 return jQuery.data(this[0], key);
19 }
20 else { // 配置
21
22 this.each(
23 function () {
24 jQuery.data(this, key, value);
25 }
26 );
27 }
28 }
29 // 移除数据,删除生涯在工具上的数据
30 jQuery.fn.removeData = function (key) {
31 return this.each(function () {
32 jQuery.removeData(this, key);
33 })
34 }
35
36
37 // 为元素生涯数据
38 jQuery.data = function (elem, name, data) { // #1001
39
40 // 取得元素生涯数据的键值
41 var id = elem[expando], cache = jQuery.cache, thisCache;
42
43 // 没有 id 的环境下,无法取值
44 if (!id && typeof name === "string" && data === undefined) {
45 return null;
46 }
47
48 // Compute a unique ID for the element
49 // 为元素计较一个独一的键值
50 if (!id) {
51 id = ++uuid;
52 }
53
54 // 假如没有生涯过
55 if (!cache[id]) {
56 elem[expando] = id; // 在元素上生涯键值
57 cache[id] = {}; // 在 cache 上建设一个工具生涯元素对应的值
58 }
59
60 // 取得此元素的数据工具
61 thisCache = cache[id];
62
63 // Prevent overriding the named cache with undefined values
64 // 生涯值
65 if (data !== undefined) {
66 thisCache[name] = data;
67 }
68
69 // 返回对应的值
70 return typeof name === "string" ? thisCache[name] : thisCache;
71
72 }
73
74 // 删除生涯的数据
75 jQuery.removeData = function (elem, name) { // #1042
76
77 var id = elem[expando], cache = jQuery.cache, thisCache = cache[id];
78
79 // If we want to remove a specific section of the element's data
80 if (name) {
81 if (thisCache) {
82 // Remove the section of cache data
83 delete thisCache[name];
84
85 // If we've removed all the data, remove the element's cache
86 if (jQuery.isEmptyObject(thisCache)) {
87 jQuery.removeData(elem);
88 }
89 }
90
91 // Otherwise, we want to remove all of the element's data
92 } else {
93
94 delete elem[jQuery.expando];
95
96 // Completely remove the data cache
97 delete cache[id];
98 }
99 }
100
101 // 搜查工具是否是空的
102 jQuery.isEmptyObject = function (obj) {
103 // 遍历元素的属性,只有要属性就返回假,不然返回真
104 for (var name in obj) {
105 return false;
106 }
107 return true;
108
109 }
110
111 // 搜查是否是一个函数
112 jQuery.isFunction = function (obj) {
113 var s = toString.call(obj);
114 return toString.call(obj) === "[object Function]";
115 }
116

下面的剧本可以生涯可能读取工具的扩展数据。

1 // 数据操纵
2 $("#msg").data("name", "Hello, world.");
3 alert($("#msg").data("name"));
4 $("#msg").removeData("name");
5 alert($("#msg").data("name"));

原文:http://www.cnblogs.com/haogj/archive/2010/08/01/1789715.html

(编辑:河北网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    热点阅读