`
decentway
  • 浏览: 160712 次
  • 性别: Icon_minigender_1
  • 来自: 重庆
社区版块
存档分类
最新评论
阅读更多

Cache 工具为存储名值对到本地JavaScript内存提供了一个基本的缓存管理工具。作为Plugin的一个子类,它无缝地与其他组件结合(例如DataSource)。

升级说明

3.1.1以及之前的版本,使用cache时,要有Y.Cache变为Y.Plugin.Cache.

使用Cache工具

基本的caching

基本的caching允许你存储在本地JavaScript内存中频繁使用的数据。这种情况下允许你取得从服务器传送过来的响应数据,存储到本地,以消除下一次的重复请求,这样能获得很好的性能,减轻服务器负载。

使用以下属性来配置你的Cache实例。

属性 默认值 描述
max 0 cache能存储的最大数据条数。默认情况下,cache是关闭的,设置大于0的值来打开cache
size n/a 只读。返回当前存储在cache中的条数。
entries n/a 只读。返回当前存储在cache中的条目数组。
expires 0 默认下,截止时间是关闭的。为了是截至时间有效,可以设置相对值也可以设置绝对值。
uniqueKeys false

When calling add() with an entry, checks to see if the key is already stored in the cache. Enforcing unique keys requires iterating through all stored entries, so setting this attribute to false is more performant. Note: If expiration is enabled, you should probably set uniqueKeys to false to avoid problems if data is cached multiple times with conflicting expirations.

个人觉得这里可能有错误:最后一句话Note: If expiration is enabled, you should probably set uniqueKeys to false to avoid problems if data is cached multiple times with conflicting expirations.

false 应该是true吧。。。。

// 在构造函数中配置cache的最大值
var myCache = new Y.Cache({max:5});

// 在运行时设置最大值
myCache.set("max", 10);

 用add()方法Cache名值对:

// Add entries to the Cache
myCache.add("key1", "value1");

  用retrieve()方法获得缓存的条目。如果没有与给定的key对应的条目,将返回null。存储的条目包含的属性有:request,response,cached,expires.

 

// Retrieve a cached entry
var cachedEntry = cache.retrieve("key1");

 默认情况下,存储的条目包含复制的keys:如果你增加一个"foo"请求,值为"bar",然后增加另一个"foo"请求,值为"bat"。cache将包含两个条目。用"foo"请求获得一个条目将仅仅取得最新的值。然而,设置uniqueKeys为true将验证存储在cache中的key是不是唯一的。

// Enforce unique keys in the constructor
var myCache = new Y.Cache({max:5, uniqueKeys:true});

// Enforce unique keys at runtime
myCache.set("uniqueKeys", true);

 一个cache可以用flush()方法来清空所有内容。

// Flush the cache
myCache.flush();

 

Offline caching

这个CacheOffline cache通过在HTML5 localStorage object支持的浏览器上存储数据,扩展了基本的caching功能,所以即使在浏览器离线情况下,通过存储到浏览器会话上,数据依然有效。这这种情况下啊,如果HTML5 localStorage无效的(例如IE6 和IE7),将同基本的caching一样。

var myCache = new Y.CacheOffline();

 

ATTRIBUTE DEFAULT DESCRIPTION
sandbox "default" A unique identifier used to sandbox each cache instance's entries from other entries. This string persists across browser sessions so take care that it is not dynamically generated.
expires 86400000 By default, data will expire one day after it is cached. This Attribute accepts a Data value, or a number of milliseconds.
max null Read-only. This Attribute is disabled for CacheOffline — there is no notion of capping the number of entries in a cache. Each browser implements a maximum localStorage byte size.
uniqueKeys true Read-only. This Attribute is disabled for CacheOffline. All stored keys are unique.

作为一个plugin的cache

在一个宿主对象上使用plug(Y.Plugin.Cache)方法来打开caching功能。Y.Plugin.Cache类在"cache-plugin"子模块下是有效的。

// Define a max value to enable plugging.
myWidget.plug(Y.Plugin.Cache, {max:3});
myWidget.cache.add("key", "value");

 Cache plugin也可以接受一个cache值,来是你能够指明任何一个Cache 工具。

// Define a max value to enable plugging.
myWidget.plug(Y.Plugin.Cache, {cache:Y.CacheOffline});

 The Y.Plugin.DataSourceCache plugin enables seamless caching of DataSource responses.

// Use a basic cache
myDataSource.plug(Y.Plugin.DataSourceCache, {
    cache: Y.Cache, // this is the default, this line is not needed
    max: 100
});

// Use the "cache" configuration property to enable offline caching
myDataSource.plug(Y.Plugin.DataSourceCache, {
    cache: Y.CacheOffline,
    sandbox: "my3HrCache",
    expires: 10800000 // 3 hours
});

 一旦DataSourceCache plugin是有效的,它处理caching和获取值,不需要额外的代码。而且,所有的Cache实例的方法和属性,在主机的cache命名空间中都是有效的。

// Flush myDataSource's cache.
myDataSource.cache.flush();

 

事件

事件 什么时候 PROPERTIES AVAILABLE ON THE EVENT FACADE PASSED TO HANDLER
add Entry is added to the cache.
entry
The cached entry.
request Entry is requested from the cache.
request
The request value.
retrieve Entry is retrieved from the cache.
entry
The retrieved entry.
flush Cache is flushed. none
error CacheOffline only. Fired when an entry could not be added, most likely due to exceeding the browser quota for the localStorage object.
error
The error object.

分享到:
评论

相关推荐

    yuicompressor-2.4.8.jar

    's users have an empty cache experience and about 20% of all page views are done with an empty cache (see this article by Tenni Theurer on the YUIBlog for more information on browser cache usage)....

    Ajax的一些有用的小技巧.pdf

    - **YUI(Yahoo User Interface Library)**:YUI是由Yahoo!开发的一套成熟稳定的JavaScript库。它包含了大量的UI组件,如模态对话框、拖放功能、滑块等,非常适合于构建功能丰富的Web应用程序。此外,YUI还提供了...

    学习YUI.Ext 第七天–关于ViewJSONView

    在学习YUI.Ext框架的过程中,了解和掌握View和JSONView组件是非常重要的。View组件和它的子类JSONView在处理不同类型的数据展示上有各自的优势。在一些需要展示二维关系数据的场景中,比如表格,我们通常会使用Grid...

    淘宝商品详情页面的优化实践.pdf

    - **JavaScript文件**:使用更轻量级的库替换原有库,例如将YUI替换为KISSY。 ##### Reduce策略 - **库的选择**:选择更小巧高效的库。 - **代码重构**:精简CSS和JavaScript代码,移除不必要的样式和脚本。 - **...

    Web前端模块化组件seajs-3.0.0版

    除了解决命名冲突和依赖管理,使用 Sea.js 进行模块化开发还可以带来很多好处: 模块的版本管理。...直到最近两三年,随着 Dojo、YUI3、Node.js 等社区的推广和流行,前端的模块化开发理念才逐步深入人心。

    sea.js2.1.1版

    除了解决命名冲突和依赖管理,使用 Sea.js 进行模块化开发还可以带来很多好处: 模块的版本管理。...直到最近两三年,随着 Dojo、YUI3、Node.js 等社区的推广和流行,前端的模块化开发理念才逐步深入人心。

    SEO前端规范的21条军规.pdf

    3. **设置Expires或Cache-Control**:为文件设置缓存策略,区分静态和动态内容,减少不必要的HTTP请求。 4. **避免空的src和href**:确保如link、script、img、iframe等标签的属性有有效值,防止无效请求。 5. **...

    Jquery1.3 完整包

    2. **$.ajax()** 更新:在Ajax功能上,jQuery 1.3引入了更多的选项,如`cache`、`global`、`dataType`等,使开发者能更精确地控制Ajax请求。 3. **事件处理**:jQuery 1.3改进了事件处理机制,引入了`live()`函数,...

    Jquery1.2.6源码分析教程

    在这个教程中,我们将探讨 jQuery 的核心机制,以及它为何能与其他 JavaScript 库如 Prototype、YUI 和 Mootools 相比,在性能上表现出色。 **一、jQuery 的核心概念** 1. **选择器引擎(Sizzle)**:jQuery 的...

    前端工程师-高级WEB网站前端开发减少请求数指南.docx

    例如,使用Yahoo提供的`yuiCompressor`工具,不仅可以合并文件,还能压缩代码,进一步减小文件大小。 2. **CSS Sprites**: - CSS精灵技术允许将多个小图片合并到一张大图中,通过设置CSS背景图像的位置来显示所...

    Ajax的小贴士使用小结

    - **YUI (Yahoo! User Interface Library)**:由雅虎开发,提供了丰富的组件和强大的功能,适合大型项目和团队协作。 - **jQuery**:以其高效和灵活著称,CSS3和XPath选择器支持使得DOM操作变得简单。 - **...

    王宏-大众点评网Web开发之路

    3. **CDN与静态资源管理**:随着图片资源的不断增多,团队采用了第三方CDN服务,并实现了静态资源的版本控制机制。例如,通过将静态资源的URL添加版本号,确保浏览器能正确地缓存新版本资源。 4. **分布式文件系统*...

    Linux命令大全

    - `apt-cache`/`yum search`/`dnf search`:搜索软件包。 - `dpkg`/`rpm`:直接处理软件包文件。 7. **文本编辑器**: - `nano`:简单的文本编辑器,适合初学者。 - `vi`/`vim`:功能强大的文本编辑器,学习...

    基于jquery的文本框与autocomplete结合使用(asp.net+json)

    context.Response.Cache.SetNoStore(); // 根据类型查询数据 string where = string.Format("(select dbo.[f_GetPy](platname)) like '%{0}%' or platname like '%{0}%'", Common.Common.ToSql(queryStr)); ...

    java开源包3

    3. 支持缓存数据分区规则的定义 4. 使用redis作缓存时,支持list类型的高级数据结构,更适合论坛帖子列表这种类型的数据 5. 支持混合使用redis缓存和memcached缓存。可以将列表数据缓存到redis中,其他kv结构数据...

    高性能WEB开发 为什么要减少请求数,如何减少请求数!

    例如,使用Yahoo提供的YUI Compressor这样的工具,不仅可以合并文件,还可以压缩代码以减小文件大小。 2. **CSS Sprites**:这是一种将多个小图片合并到一张大图中,然后通过CSS的背景定位来显示所需图片的技术。...

    《YaHoo军规》

    3. **为文件头指定Expires或Cache-Control** - 这种做法可以告知浏览器哪些内容是可以被缓存的,从而减少后续请求时的网络传输时间; - 有助于提高用户再次访问同一页面时的速度。 4. **避免空的src和href属性** ...

Global site tag (gtag.js) - Google Analytics