博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery源码笔记——数据缓存
阅读量:5355 次
发布时间:2019-06-15

本文共 4839 字,大约阅读时间需要 16 分钟。

数据缓存是为了解决内存泄露,他的原理是,当我们将数据存储到一个对象上面,实际上是将所有的数据存到一个单独的数据对象里,而这个对象只提供一个接口,这个接口可以访问自己存在数据对象里自己的数据。

这是一个简单的数据缓存

var cache= {};function set(obj,name,value){    //在对象上存储一个属性,用作访问数据的接口    obj.expando = 1;    //初始化对象,并在我们接口所提供的位置存放数据    cache[obj.expando] = {}    cache[obj.expando][name] =  value}function get(obj,name){    //实际就是通过对象上的expando指定在数据中位置去访问的自己的数据。    return cache[obj.expando][name]}var obj2 = {};set(obj2,"name","winder");console.log(get(obj2,"name")) //winderconsole.log(obj2) // Object { expando: 1}console.log(cache[1]) // Object { name: "winder" }

由代码可以很清楚看到,我们实际访问的是数据对象中,1引用的对象;而如何找到数据的位置,则由存储在对象上的一个接口属性提供。

当我们把他运用在jQuery中

//mini的jQuery框架。var jQuery = function( selector, context ) {        return new jQuery.fn.init( selector, context );};jQuery.fn = jQuery.prototype = {    selector: "",    init: function(selector){        var result = document.querySelectorAll(selector);        for(var i = 0;i < result.length;i++){            this[i] = result[i]         }        this.length = result.length;    },    constructor : jQuery}jQuery.fn.init.prototype = jQuery.fn;//定义date构造函数function Data(){    this.cache = {}    //默认带有随机数属性    this.expando = Math.random()}//设置在数据对象中的位置的辅助属性Data.uid = 1;Data.prototype = {    //判断对象是否有接口属性,    //没有接口时,新建接口    key: function( owner ) {        var descriptor = {},            unlock = owner[ this.expando ];        if ( !unlock ) {            unlock = Data.uid++;                descriptor[ this.expando ] = { value: unlock };                Object.defineProperties( owner, descriptor );                    }        //确保在缓存中存在        if ( !this.cache[ unlock ] ) {            this.cache[ unlock ] = {};        }        return unlock;    },    //向缓存中添加数据    set: function( owner, data, value ) {        var unlock = this.key( owner );        var cache = this.cache[ unlock ];        cache[ data ] = value;                return cache;    },    //获取数据    get: function( owner, key ) {        var cache = this.cache[ this.key( owner ) ];        return cache[ key ];    },    //access实际就是一个访问路由,根据参数判断是设置还是获取    access: function( owner, key, value ) {        //访问        if ((typeof key === "string") && value === undefined ) {                            return this.get( owner, key );        }        //设置        this.set( owner, key, value );        return value    },}var data_user = new Data()jQuery.data = function( elem, name, data ) {        return data_user.access( elem, name, data );}//测试var obj = {}jQuery.data(obj,"name","winder")console.log(jQuery.data(obj,"name")) //winderconsole.log(obj) //里面的里面是0.6637197330750032:1console.log(data_user.cache[1])//Object { name: "winder" }

采用向对象中添加随机数属性,是为了屏蔽除内部外任何访问,保证缓存中数据安全。

添加jQuery对象方法

//mini的jQuery框架。var jQuery = function( selector, context ) {        return new jQuery.fn.init( selector, context );};jQuery.fn = jQuery.prototype = {    selector: "",    init: function(selector){        var result = document.querySelectorAll(selector);        for(var i = 0;i < result.length;i++){            this[i] = result[i]         }        this.length = result.length;    },    constructor : jQuery}jQuery.fn.init.prototype = jQuery.fn;//定义date构造函数function Data(){    this.cache = {}    //默认带有随机数属性    this.expando = Math.random()}//设置在数据对象中的位置的辅助属性Data.uid = 1;Data.prototype = {    //判断对象是否有接口属性,    //没有接口时,新建接口    key: function( owner ) {        var descriptor = {},            unlock = owner[ this.expando ];        if ( !unlock ) {            unlock = Data.uid++;                descriptor[ this.expando ] = { value: unlock };                Object.defineProperties( owner, descriptor );                    }        //确保在缓存中存在        if ( !this.cache[ unlock ] ) {            this.cache[ unlock ] = {};        }        return unlock;    },    //向缓存中添加数据    set: function( owner, data, value ) {        var unlock = this.key( owner );        var cache = this.cache[ unlock ];        cache[ data ] = value;                return cache;    },    //获取数据    get: function( owner, key ) {        var cache = this.cache[ this.key( owner ) ];        return cache[ key ];    },    //access实际就是一个访问路由,根据参数判断是设置还是获取    access: function( owner, key, value ) {        //访问        if ((typeof key === "string") && value === undefined ) {                            return this.get( owner, key );        }        //设置        this.set( owner, key, value );        return value    },}var data_user = new Data()jQuery.data = function( elem, name, data ) {        return data_user.access( elem, name, data );}//简化的jQuery对象API方法jQuery.fn.data = function( key, value ){    for(var i = 0;i < this.length; i++){        return jQuery.data(this[i],key,value)    }}//测试var $emample = jQuery("#example")$emample.data("name","winder");console.log($emample.data("name")) //winder

这是一个极简化的API。而在原版jQuery当中,细致考虑了多种情况。

转载于:https://www.cnblogs.com/winderby/p/4090412.html

你可能感兴趣的文章
nmon监控linux系统性能
查看>>
SQLSERVER 创建ODBC 报错的解决办法 SQLState:'01000'的解决方案
查看>>
Spark记录-Scala类与对象小例子
查看>>
Oracle数据库表设计时的注意事项
查看>>
大华摄像头WEB页面集成
查看>>
Android广播接实现电话的监听(电话的状态,拦截)
查看>>
实验一 Java开发环境的熟悉
查看>>
20135202闫佳歆——信息安全系统设计基础第九周学习总结
查看>>
C++知识点
查看>>
借鉴Glide思想二次封装Fresco
查看>>
洛谷 P3355 骑士共存问题
查看>>
SQL数据库抽像工厂类
查看>>
2018.6.16 PHP小实验
查看>>
Eclipse插件开发(原书第3版)
查看>>
使用资源本地化 ASP.NET 网页
查看>>
顺序查找
查看>>
单例模式
查看>>
Window.document对象
查看>>
ASP.NET 执行bat文件。
查看>>
Java之SimpleDateFormat日期格式转换(Date 和 String 类型之间的转换)
查看>>