简单模拟 jQuery data函数

通过给元素分配一个属性 data + 时间戳,确定是否有缓存,再根据 data 的全局 id 值 存储/获取 缓存的数据

html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>demo</title>
</head>
<body>
	<div id="abc1">
		aaa
	</div>
	<div id="abc2">
		bbbb
	</div>
	<div id="abc3">
		ccc
	</div>
</body>
</html>

javascript:

(function(){
	var cache = {},
			uuid = 0,
			timestamp = (new Date).getTime();
	function appendData(elem, attrName, data){
		var uid = elem[‘data‘+timestamp];
		if(uid === undefined){
			++uuid;
			elem[‘data‘+timestamp] = uuid;
			cache[uuid] = {};
			cache[uuid][attrName] = data;
			return data;
		}else{
			return cache[uuid][attrName];
		}
	}
	window.appendData = appendData;
})();

window.onload = function(){
	var e1 = document.getElementById(‘abc1‘);
	appendData(e1,‘opts‘, {a:"abc",b:"123"});
	debugger;
	console.log(appendData(e1,‘opts‘));
};
时间: 2024-11-07 12:21:58

简单模拟 jQuery data函数的相关文章

一个简单的jQuery回调函数例子

jQuery回调函数简单使用 比如说,我们想要点击某个按钮后触发事件, 先把一些指定内容给隐藏掉, 然后跳出相关信息的对话框. 如果使用普通的方法, 不用回调函数的话, 会有怎么样的效果呢? 效果是先弹出对话框再隐藏内容, 然后再隐藏指定内容. 这显然不是我们想要的效果, 如果使用回调函数,就可以解决这个问题. 当然,回调函数功能远不只这么简单…… 具体的代码如下: [html] view plain copy <%@ page language="java" import=&q

搜索自动提示的简单模拟JQuery

使用jQuery实现类似于百度搜索时的自动完成功能,界面效果 所示. 首先在输入框上注册keyup事件,然后在事件中通过AJAX获取JSON对象.取得数据后,每一项数据创建一个li标签,在标签上注册click事件,这样当我们点击每一项的时候,就可以响应事件.键盘导航的关键是记录当前高亮的索引值,根据索引值来调整背景高亮.显示下拉列表的位置要根据输入框的位置来设置,当浏览器的大小改变时,随时调整下拉列表的位置. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

简单模拟jQuery创建对象的方法,以及封装一个js动画框架

今天无事点开了N年未点开的慕课网,看了一个js动画框架的视频,心血来潮用jQuery的方法封装了一下,虽然不如jQuery,但是还是有点点所获. 什么都不说,直接上代码: /** * 这是框架的唯一对象,使用jQuery框架的创建方法 * @class MyAnimation * @constructor */ function MyAnimation(Selector){ //返回MyAnimation原型链中init()方法创建的对象 return new MyAnimation.proto

JQuery data API实现代码分析

JQuery data 接口是什么? .data() Store arbitrary data associated with the matched elements or return the value at the named data store for the first element in the set of matched elements. 根据jquery官网介绍,data给存储DOM关联的数据, 设置数据是对$选取的所有JQuery对象, 获取数据是对$选取的所有对象的

jQuery.data() 的实现方式

jQuery.data() 的作用是为普通对象或 DOM Element 附加(及获取)数据. 下面将分三个部分分析其实现方式:     1. 用name和value为对象附加数据:即传入三个参数,第一个参数为需要附加数据的对象,第二个参数为数据的名称,第三个参数为数据的值.当然,只是获取值的话,也可以不传入第三个参数.     2. 用另一个对象为对象附加数据:即传入两个参数,第一个参数为需要附加的数据对象(我们称之为“obj”),第二个参数也是一个对象(我们称之为“another”):“an

jQuery.data() 即($.data())的实现方式

jQuery.data() 的作用是为普通对象或 DOM Element 附加(及获取)数据.     下面将分三个部分分析其实现方式:     1. 用name和value为对象附加数据:即传入三个参数,第一个参数为需要附加数据的对象,第二个参数为数据的名称,第三个参数为数据的值.当然,只是获取值的话,也可以不传入第三个参数.     2. 用另一个对象为对象附加数据:即传入两个参数,第一个参数为需要附加的数据对象(我们称之为“obj”),第二个参数也是一个对象(我们称之为“another”)

Jquery源码分析与简单模拟实现

前言 最近学习了一下jQuery源码,顺便总结一下,版本:v2.0.3 主要是通过简单模拟实现jQuery的封装/调用.选择器.类级别扩展等.加深对js/Jquery的理解. 正文 先来说问题: 1.jQuery为什么能使用$的方式调用,$是什么.$()又是什么.链式调用如何实现的 2.jQuery的类级别的扩展内部是怎样实现的,方法级别的扩展有是怎样实现的,$.fn又是什么 3.jQuery选择器是如何执行的,又是如何将结果包装并返回的 带着这些问题,我们进行jquery的模拟实现,文章下方有

模拟jQuery简单封装ajax

1 /*模拟jQuery的写法 (简单写法)*/ 2 var $={}; 3 /*ajax*/ 4 $.ajax = function (options) { 5 /* 6 * 请求 7 * 1.请求接口 type get post 默认的是get 决定是否设置请求头 8 * 2.接口地址 url 不确定 字符串 如果用户没有传 默认的接口地址为当前路径 9 * 3.是否是异步 async 默认的就是异步 true;false 是同步请求 10 * 4.提交数据 data 默认的是对象 {nam

jquery的data()函数和html5的data属性

jquery的data()函数和html5的data属性:在html5中新增了一个自定义data属性,利用这个属性,可以添加任意的以"data-"开头的属性,这些属性不会再页面上显示,也不会影响任何原有的布局效果,并且此自定义属性是可读写的,例如: <div id="thediv" data-webname="蚂蚁部落">蚂蚁部落欢迎您</div> 以上代码就是使用自定义data属性的一个简单例子.可以使用jquery的d