(五)JS学习笔记 - JQuery缓存机制
历史背景
开发中常常因为方便,把状态标志都写到dom节点中,也就是HTMLElement,缺点:
- 循环引用
- 直接暴露数据,安全性?
- 增加一堆的自定义属性标签,对浏览器来说是没意义的
- 取数据的时候要对HTML节点做操作
根本目的:
使用一种低耦合的方式让DOM和缓存数据能够联系起来
jQuery现在支持两种:
•$("ele").data()
jQuery.fn.extend({
data: function( elem, name, data ) {
return jQuery.access( this, function( value )){
//区别在each方法了,处理的是每一个元素dom节点
this.each(function() { }
}
}
},
........
•jQuery.data( element, key, value )
jQuery.extend({
acceptData: Data.accepts,
hasData: function( elem ){},
//直接调用 data_user.access 数据类的接口,传入的是elem整个jQuery对象
data: function( elem, name, data ) {
return data_user.access( elem, name, data );
},
........
区别:
•jQuery.data( element, key, value )
每一个element都会有自己的一个{key:value}对象保存着数据,所以新建的对象就算有key相同它也不会覆盖原来存在的对象key所对应的value,因为新对象保存是是在另一个{key:value}对象中
•$("div").data("a","aaaa")
它是把数据绑定每一个匹配div节点的元素上
DEMO
<div id="test">data test</div> var t1=$("#test");
var t2=$("#test"); //=======第一组========= $(''").data()方法
t1.data('a',1111);
t2.data('a',2222); t1.data('a') //结果222222,被覆盖
t2.data('a') //结果222222 //=======第二组========= $.data()方法 $.data(t1,"b","1111")
$.data(t2,"b","2222") $.data(t1,"b") //结果111111,未被覆盖
$.data(t2,"b") //结果222222
Data类的设计
function Data() {
Object.defineProperty(this.cache = {}, 0, {
get: function() {
return {};
}
});
this.expando = jQuery.expando + Math.random();
}
Data.uid = 1;
Data.accepts = jQuery.acceptData; Data.prototype = {
key: function() {},
set: function() {},
get: function() {},
remove: function() {},
hasData: function() {},
access: function() {}
} var data_priv = new Data();
var data_user = new Data();
解析:
expando:
用于把当前数据缓存的UUID值做一个节点的属性给写入到指定的元素上形成关联桥梁,所以,所以元素本身具有这种属性的可能性很少,所以可以忽略冲突。
每个节点的dom[expando]的值都设为一个自增的变量id,保持全局唯一性
uid:
每个uid对应一个elem缓存数据,每个缓存对象是可以由多个name value(名值对)对组成的,而value是可以是任何数据类型的。
为了不把数据与dom直接关联,所以会把数据存储到一个cache对象上 产生一个 unlock = Data.uid++; unlock 标记号 把unlock标记号,作为一个属性值 赋予$body节点 cache缓存对象中开辟一个新的空间用于存储foo数据,this.cache[ unlock ] = {}; 最后把foo数据挂到cache上,cache[ data ] = value;
(五)JS学习笔记 - JQuery缓存机制的更多相关文章
- 基于jquery的插件turn.js学习笔记
基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...
- 【转】Backbone.js学习笔记(二)细说MVC
文章转自: http://segmentfault.com/a/1190000002666658 对于初学backbone.js的同学可以先参考我这篇文章:Backbone.js学习笔记(一) Bac ...
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- 《Linux内核设计与实现》课本第五章学习笔记——20135203齐岳
<Linux内核设计与实现>课本第五章学习笔记 By20135203齐岳 与内核通信 用户空间进程和硬件设备之间通过系统调用来交互,其主要作用有三个. 为用户空间提供了硬件的抽象接口. 保 ...
- JS 学习笔记--9---变量-作用域-内存相关
JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...
- 《Linux内核设计与实现》第五章学习笔记
<Linux内核设计与实现>第五章学习笔记 姓名:王玮怡 学号:20135116 一.与内核通信 在Linux中,系统调用是用户空间访问内核的唯一手段:除异常和陷入外,它们是内核 ...
- 《Linux内核分析》第五周学习笔记
<Linux内核分析>第五周学习笔记 扒开系统调用的三层皮(下) 郭垚 原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.c ...
- linux内核分析第五周学习笔记
linux内核分析第五周学习笔记 标签(空格分隔): 20135328陈都 陈都 原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.co ...
- Node.js学习笔记(3):NPM简明教程
Node.js学习笔记(3):NPM简明教程 NPM常用操作 更新NPM版本 npm install npm -g -g,表示全局安装.我们可以指定更新版本,只需要在后面填上@版本号即可,也可以输入@ ...
随机推荐
- jq原创幻灯片插件slideV1.0
jq各种插件层出不穷,当然幻灯片插件也不例外,于是本人也自已写了一款,对于目前所做项目来说,足够用了,slideV1.0插件使用很简单,配置如下: 1.三种按钮类型接口选择(默认类型.数字类型.缩略图 ...
- PHPCMS v9修改栏目或者单页没有权限
问题: 普通管理员没有权限修改栏目,只有超级管理员才有权限修改,凡是非超级管理员,设置栏目权限后只能添加栏目,不能对栏目进行修改和删除操作,提示您没有权限操作该项这使系统的一个BUG. 一.对于普 ...
- asp.net 字符帮助类 类型转换类
/// <summary> /// 字符帮助类 /// </summary> public class StringHelper { private static readon ...
- 初始化JQuery方法与(function(){})(para)匿名方法介绍
一.初始化JQuery对象 DOM加载完成时运行代码 1.$(document).ready(function(){ 全写 // 在这里写你的代码... }); 2.jQuery(function() ...
- 4种CSS3效果(360度旋转、旋转放大、放大、移动)
旋转: * { transition:All .4s ease-in-out; -webkit-transition:All .4s ease-in-out; -moz-transition:All ...
- JS encode decode
网上查到的全都是escape,和需要的编码不是一回事,好不容易找到的结果 保存下来以备以后使用 js对文字进行编码涉及3个函数:escape,encodeURI,encodeURIComponent, ...
- Python学习之--异常处理
Python中的Exceptions是所有异常的基类,内置的异常类都放在了exceptions模块中,通过dir()函数可以看到这些内置的类 通过raise 语句触发异常,如 >>> ...
- 复杂事件处理引擎—Esper参考(事件部分)
声明:Esper官方未提供中文文档,以后更新的大部分内容,均来自官方文档.本人英语小白一枚,翻译内容仅供参考.有些翻译确实不忍直视,君可略过. (有人可能会说,翻译的不好不如不翻,可能会误人子弟:不过 ...
- android-UI组件实例大全(六)------ImageView图像视图
图像视图:ImageView 继承view类,用于在屏幕上显示任何Drawable对象,通常用来显示图片: 这里的话我们介绍一些比较常用的属性: Path 1: android:adjustViewB ...
- ural 1106 Two Teams
http://acm.timus.ru/problem.aspx?space=1&num=1106 #include <cstdio> #include <cstring&g ...