jQuery数据缓存优化前端性能的实用指南与常见问题解决方案助你轻松掌握高效数据管理技巧提升用户体验

引言

在当今快速发展的Web开发领域，前端性能优化已成为提升用户体验的关键因素。随着应用程序复杂度的增加，高效的数据管理变得尤为重要。jQuery作为最受欢迎的JavaScript库之一，提供了强大的数据缓存机制，可以帮助开发者显著提升应用性能。本文将深入探讨jQuery数据缓存的原理、实现方法以及最佳实践，帮助你轻松掌握高效数据管理技巧，从而优化前端性能并提升用户体验。

jQuery数据缓存基础

什么是jQuery数据缓存

jQuery数据缓存是一种内部机制，允许开发者在DOM元素上关联任意数据而不直接修改DOM结构。这种机制通过jQuery内部维护的一个缓存对象来存储数据，使用唯一的标识符将数据与DOM元素关联起来。

// 基本数据缓存示例 $('#myElement').data('keyName', 'value'); // 设置数据 var value = $('#myElement').data('keyName'); // 获取数据 console.log(value); // 输出: 'value'

数据缓存的工作原理

jQuery数据缓存的工作原理基于一个内部对象$.cache，它存储了所有与DOM元素关联的数据。当你使用.data()方法时，jQuery会为每个元素生成一个唯一的ID（通过expando属性），然后使用这个ID作为键在$.cache对象中存储和检索数据。

// 简化的jQuery数据缓存工作原理示例 (function() { var cache = {}; // 内部缓存对象 var expando = "jQuery" + (new Date()).getTime(); // 生成唯一标识 function setData(element, key, value) { // 如果元素没有expando属性，则添加一个 if (!element[expando]) { element[expando] = (new Date()).getTime(); } // 获取元素的ID var id = element[expando]; // 如果缓存中没有该元素的存储空间，则创建 if (!cache[id]) { cache[id] = {}; } // 存储数据 cache[id][key] = value; } function getData(element, key) { var id = element[expando]; return cache[id] ? cache[id][key] : undefined; } // 使用示例 var element = document.getElementById('myElement'); setData(element, 'testKey', 'testValue'); console.log(getData(element, 'testKey')); // 输出: 'testValue' })();

数据缓存的优势

减少DOM操作

频繁的DOM操作是导致前端性能问题的主要原因之一。通过使用数据缓存，我们可以将数据存储在内存中，而不是直接存储在DOM元素上，从而减少DOM操作，提高性能。

// 不使用数据缓存的方式（性能较差） function updateElementStatus(element, status) { element.setAttribute('data-status', status); // 直接操作DOM } // 使用数据缓存的方式（性能更好） function updateElementStatus(element, status) { $(element).data('status', status); // 使用jQuery数据缓存 }

提高数据访问速度

数据缓存将数据存储在JavaScript对象中，访问速度远快于从DOM属性中读取数据。这对于需要频繁访问数据的场景尤为重要。

// 性能对比示例 var element = $('#myElement'); var iterations = 10000; // 不使用数据缓存 console.time('DOM属性访问'); for (var i = 0; i < iterations; i++) { var status = element[0].getAttribute('data-status'); } console.timeEnd('DOM属性访问'); // 使用数据缓存 element.data('status', 'active'); // 先缓存数据 console.time('数据缓存访问'); for (var i = 0; i < iterations; i++) { var status = element.data('status'); } console.timeEnd('数据缓存访问');

避免内存泄漏

jQuery数据缓存机制包含自动清理功能，当DOM元素被删除时，相关联的缓存数据也会被自动清理，有效避免内存泄漏问题。

// 内存管理示例 function createElementWithData() { var $div = $('<div>Test Element</div>'); $div.data('largeData', new Array(1000000).join('x')); // 存储大量数据 $('body').append($div); // 当元素被移除时，相关数据也会被自动清理 setTimeout(function() { $div.remove(); // 移除元素，相关数据也会被清理 }, 5000); } createElementWithData();

实现jQuery数据缓存

基本数据缓存操作

jQuery提供了.data()方法来实现数据缓存的基本操作，包括设置、获取和删除数据。

// 设置单个数据 $('#myElement').data('username', 'john_doe'); // 设置多个数据 $('#myElement').data({ 'username': 'john_doe', 'userId': 12345, 'preferences': { 'theme': 'dark', 'language': 'en' } }); // 获取数据 var username = $('#myElement').data('username'); var preferences = $('#myElement').data('preferences'); console.log(username); // 输出: 'john_doe' console.log(preferences.theme); // 输出: 'dark' // 删除数据 $('#myElement').removeData('username'); // 删除特定数据 $('#myElement').removeData(); // 删除所有数据

使用HTML5 data属性初始化缓存

jQuery的.data()方法会自动读取HTML5的data-*属性，并将其初始化到缓存中。

<div id="user" data-id="123" data-name="John" data-role="admin"></div>

// 自动读取HTML5 data属性 var user = $('#user'); console.log(user.data('id')); // 输出: 123 console.log(user.data('name')); // 输出: 'John' console.log(user.data('role')); // 输出: 'admin' // 修改缓存数据不会影响HTML属性 user.data('name', 'Jane'); console.log(user.data('name')); // 输出: 'Jane' console.log(user.attr('data-name')); // 输出: 'John' (原始属性值不变)

批量数据缓存管理

对于需要管理大量数据的应用，可以创建专门的数据缓存管理器。

// 数据缓存管理器示例 var DataCacheManager = { // 设置批量数据 setBatchData: function(selector, dataObject) { $(selector).each(function() { var $element = $(this); $.each(dataObject, function(key, value) { $element.data(key, value); }); }); }, // 获取批量数据 getBatchData: function(selector, keys) { var result = {}; $(selector).each(function() { var $element = $(this); var elementId = $element.attr('id') || $element.index(); result[elementId] = {}; if ($.isArray(keys)) { $.each(keys, function(index, key) { result[elementId][key] = $element.data(key); }); } else { result[elementId] = $element.data(); } }); return result; }, // 清除批量数据 clearBatchData: function(selector, keys) { $(selector).each(function() { var $element = $(this); if (keys) { if ($.isArray(keys)) { $.each(keys, function(index, key) { $element.removeData(key); }); } else { $element.removeData(keys); } } else { $element.removeData(); } }); } }; // 使用示例 $('.user-item').each(function() { DataCacheManager.setBatchData(this, { 'lastAccess': new Date(), 'viewCount': 0, 'preferences': { 'theme': 'light' } }); }); // 获取所有用户数据 var allUserData = DataCacheManager.getBatchData('.user-item'); console.log(allUserData); // 更新特定数据 DataCacheManager.setBatchData('#user1', { 'viewCount': 5 });

最佳实践

合理使用数据缓存

虽然数据缓存可以提高性能，但过度使用或不恰当使用可能会导致内存问题。以下是一些合理使用数据缓存的建议：

// 好的做法：缓存频繁访问的数据 function updateUserInterface() { var $userPanel = $('#userPanel'); var userData = $userPanel.data('userData'); if (!userData) { // 数据不存在时从服务器获取 $.getJSON('/api/user', function(data) { userData = data; $userPanel.data('userData', userData); renderUserPanel(userData); }); } else { // 使用缓存数据 renderUserPanel(userData); } } // 不好的做法：缓存不必要的数据 function badExample() { // 缓存整个文档对象，没有意义且浪费内存 $(document).data('document', $(document)); // 缓存大型对象而不考虑内存限制 var hugeData = new Array(1000000).join('x'); $('body').data('hugeData', hugeData); }

设置缓存过期策略

为了避免数据过时，可以实施缓存过期策略。

// 带有过期时间的数据缓存 function setCacheWithExpiry(element, key, value, expiryInMs) { var now = new Date(); var item = { value: value, expiry: now.getTime() + expiryInMs }; $(element).data(key, item); } function getCacheWithExpiry(element, key) { var item = $(element).data(key); if (!item) { return null; } var now = new Date(); if (now.getTime() > item.expiry) { // 缓存过期，清除数据 $(element).removeData(key); return null; } return item.value; } // 使用示例 var $userProfile = $('#userProfile'); setCacheWithExpiry($userProfile, 'userData', { name: 'John', age: 30 }, 60000); // 60秒过期 // 获取数据 var userData = getCacheWithExpiry($userProfile, 'userData'); if (userData) { console.log('使用缓存数据:', userData); } else { console.log('缓存已过期或不存在，需要重新获取'); }

使用命名空间避免冲突

在大型应用中，为了避免数据键名冲突，可以使用命名空间。

// 命名空间数据缓存管理 var NamespacedCache = { // 设置带命名空间的数据 set: function(element, namespace, key, value) { var fullKey = namespace + '.' + key; $(element).data(fullKey, value); }, // 获取带命名空间的数据 get: function(element, namespace, key) { var fullKey = namespace + '.' + key; return $(element).data(fullKey); }, // 获取命名空间下的所有数据 getAllInNamespace: function(element, namespace) { var allData = $(element).data(); var namespacedData = {}; var prefix = namespace + '.'; $.each(allData, function(key, value) { if (key.indexOf(prefix) === 0) { var shortKey = key.substring(prefix.length); namespacedData[shortKey] = value; } }); return namespacedData; }, // 删除命名空间下的数据 removeNamespace: function(element, namespace) { var allData = $(element).data(); var prefix = namespace + '.'; var keysToRemove = []; $.each(allData, function(key, value) { if (key.indexOf(prefix) === 0) { keysToRemove.push(key); } }); if (keysToRemove.length > 0) { $(element).removeData(keysToRemove.join(' ')); } } }; // 使用示例 var $app = $('#app'); NamespacedCache.set($app, 'user', 'name', 'John'); NamespacedCache.set($app, 'user', 'age', 30); NamespacedCache.set($app, 'app', 'version', '1.0.0'); console.log(NamespacedCache.get($app, 'user', 'name')); // 输出: 'John' console.log(NamespacedCache.getAllInNamespace($app, 'user')); // 输出: { name: 'John', age: 30 } NamespacedCache.removeNamespace($app, 'user'); console.log(NamespacedCache.get($app, 'user', 'name')); // 输出: undefined

常见问题及解决方案

问题1：内存泄漏

问题描述：当DOM元素被移除但相关数据未被清理时，会导致内存泄漏。

解决方案：确保在移除元素前清理相关数据，或使用jQuery的自动清理机制。

// 问题示例：可能导致内存泄漏 function createLeak() { var $div = $('<div>Leaky Element</div>'); $div.data('largeData', new Array(1000000).join('x')); // 存储大量数据 $('body').append($div); // 直接移除元素，但数据可能未被清理 $div.remove(); } // 解决方案1：手动清理数据 function noLeak1() { var $div = $('<div>Non-Leaky Element</div>'); $div.data('largeData', new Array(1000000).join('x')); $('body').append($div); // 移除前先清理数据 $div.removeData(); $div.remove(); } // 解决方案2：使用jQuery的事件委托，自动清理 function noLeak2() { var $div = $('<div>Non-Leaky Element</div>'); $div.data('largeData', new Array(1000000).join('x')); $('body').append($div); // 使用jQuery方法移除，会自动清理相关数据 $div.remove(); }

问题2：数据同步问题

问题描述：当使用HTML5 data属性初始化缓存后，修改缓存数据不会同步到HTML属性，可能导致数据不一致。

解决方案：创建一个同步机制，确保缓存数据和HTML属性保持一致。

// 数据同步管理器 var DataSyncManager = { // 设置数据并同步到HTML属性 setSyncedData: function(element, key, value) { var $element = $(element); $element.data(key, value); // 将数据同步到HTML属性 var attrName = 'data-' + key.replace(/([A-Z])/g, '-$1').toLowerCase(); $element.attr(attrName, value); }, // 获取数据，优先从缓存获取 getSyncedData: function(element, key) { var $element = $(element); var cachedValue = $element.data(key); if (cachedValue === undefined) { // 如果缓存中没有，尝试从HTML属性获取 var attrName = 'data-' + key.replace(/([A-Z])/g, '-$1').toLowerCase(); var attrValue = $element.attr(attrName); if (attrValue !== undefined) { // 将HTML属性值存入缓存 $element.data(key, attrValue); return attrValue; } } return cachedValue; }, // 初始化同步，将所有data属性同步到缓存 initSync: function(selector) { $(selector).each(function() { var $element = $(this); var attributes = this.attributes; for (var i = 0; i < attributes.length; i++) { var attr = attributes[i]; if (attr.name.indexOf('data-') === 0) { // 将data-属性转换为驼峰命名 var key = attr.name.replace(/^data-/, '') .replace(/-([a-z])/g, function(g) { return g[1].toUpperCase(); }); // 将属性值存入缓存 $element.data(key, attr.value); } } }); } }; // 使用示例 var $user = $('#user'); // 初始化同步 DataSyncManager.initSync('#user'); // 设置同步数据 DataSyncManager.setSyncedData($user, 'userName', 'John'); // 获取同步数据 console.log(DataSyncManager.getSyncedData($user, 'userName')); // 输出: 'John' console.log($user.attr('data-user-name')); // 输出: 'John' (已同步)

问题3：缓存性能问题

问题描述：在大型应用中，大量使用数据缓存可能导致性能下降。

解决方案：实施缓存分级和清理策略。

// 分级缓存管理器 var TieredCacheManager = { // 缓存级别配置 tiers: { 'session': { expiry: 30 * 60 * 1000 }, // 30分钟 'short': { expiry: 5 * 60 * 1000 }, // 5分钟 'long': { expiry: 24 * 60 * 60 * 1000 } // 24小时 }, // 设置分级缓存 set: function(element, tier, key, value) { if (!this.tiers[tier]) { console.error('Invalid cache tier:', tier); return; } var $element = $(element); var fullKey = tier + '.' + key; var expiryTime = new Date().getTime() + this.tiers[tier].expiry; $element.data(fullKey, { value: value, expiry: expiryTime, tier: tier }); }, // 获取分级缓存 get: function(element, tier, key) { if (!this.tiers[tier]) { console.error('Invalid cache tier:', tier); return null; } var $element = $(element); var fullKey = tier + '.' + key; var cachedItem = $element.data(fullKey); if (!cachedItem) { return null; } var now = new Date().getTime(); if (now > cachedItem.expiry) { // 缓存过期，清理并返回null $element.removeData(fullKey); return null; } return cachedItem.value; }, // 清理过期缓存 cleanExpired: function(selector) { var now = new Date().getTime(); $(selector).each(function() { var $element = $(this); var allData = $element.data(); var keysToRemove = []; $.each(allData, function(key, item) { // 检查是否是分级缓存项 if (item && typeof item === 'object' && item.expiry && item.tier) { if (now > item.expiry) { keysToRemove.push(key); } } }); if (keysToRemove.length > 0) { $element.removeData(keysToRemove.join(' ')); } }); }, // 清理特定级别的缓存 cleanTier: function(selector, tier) { if (!this.tiers[tier]) { console.error('Invalid cache tier:', tier); return; } $(selector).each(function() { var $element = $(this); var allData = $element.data(); var keysToRemove = []; $.each(allData, function(key, item) { // 检查是否是指定级别的缓存项 if (item && typeof item === 'object' && item.tier === tier) { keysToRemove.push(key); } }); if (keysToRemove.length > 0) { $element.removeData(keysToRemove.join(' ')); } }); } }; // 使用示例 var $app = $('#app'); // 设置不同级别的缓存 TieredCacheManager.set($app, 'session', 'userToken', 'abc123'); TieredCacheManager.set($app, 'short', 'tempData', { count: 5 }); TieredCacheManager.set($app, 'long', 'userPreferences', { theme: 'dark' }); // 获取缓存数据 console.log(TieredCacheManager.get($app, 'session', 'userToken')); // 输出: 'abc123' // 定期清理过期缓存 setInterval(function() { TieredCacheManager.cleanExpired('#app'); }, 60 * 1000); // 每分钟清理一次

案例研究

案例1：电子商务网站的产品列表缓存

背景：一个电子商务网站需要在产品列表页面缓存产品数据，以提高用户体验和减少服务器负载。

挑战：产品数据量大，频繁更新，需要高效的缓存机制。

解决方案：使用jQuery数据缓存结合本地存储，实现多级缓存策略。

// 电商产品缓存管理器 var ProductCacheManager = { // 缓存配置 config: { memoryCacheExpiry: 10 * 60 * 1000, // 内存缓存10分钟过期 localStorageExpiry: 60 * 60 * 1000, // 本地存储1小时过期 cacheKeyPrefix: 'product_' }, // 从内存缓存获取产品数据 getFromMemoryCache: function(productId) { var $productElement = $('#product-' + productId); if ($productElement.length === 0) { return null; } var cachedData = $productElement.data('productCache'); if (!cachedData) { return null; } var now = new Date().getTime(); if (now > cachedData.expiry) { // 缓存过期 $productElement.removeData('productCache'); return null; } return cachedData.data; }, // 设置内存缓存 setToMemoryCache: function(productId, data) { var $productElement = $('#product-' + productId); if ($productElement.length === 0) { return false; } var expiry = new Date().getTime() + this.config.memoryCacheExpiry; $productElement.data('productCache', { data: data, expiry: expiry }); return true; }, // 从本地存储获取产品数据 getFromLocalStorage: function(productId) { var key = this.config.cacheKeyPrefix + productId; var cachedData = localStorage.getItem(key); if (!cachedData) { return null; } try { var parsedData = JSON.parse(cachedData); var now = new Date().getTime(); if (now > parsedData.expiry) { // 缓存过期 localStorage.removeItem(key); return null; } return parsedData.data; } catch (e) { console.error('Error parsing cached product data:', e); localStorage.removeItem(key); return null; } }, // 设置本地存储 setToLocalStorage: function(productId, data) { var key = this.config.cacheKeyPrefix + productId; var expiry = new Date().getTime() + this.config.localStorageExpiry; try { var cachedData = JSON.stringify({ data: data, expiry: expiry }); localStorage.setItem(key, cachedData); return true; } catch (e) { console.error('Error caching product data:', e); return false; } }, // 获取产品数据（多级缓存） getProductData: function(productId, callback) { // 首先尝试从内存缓存获取 var data = this.getFromMemoryCache(productId); if (data) { callback(null, data); return; } // 尝试从本地存储获取 data = this.getFromLocalStorage(productId); if (data) { // 同时更新内存缓存 this.setToMemoryCache(productId, data); callback(null, data); return; } // 从服务器获取数据 var self = this; $.getJSON('/api/products/' + productId, function(response) { if (response.success) { // 更新各级缓存 self.setToMemoryCache(productId, response.data); self.setToLocalStorage(productId, response.data); callback(null, response.data); } else { callback(new Error('Failed to fetch product data'), null); } }).fail(function() { callback(new Error('Network error'), null); }); }, // 批量预加载产品数据 preloadProducts: function(productIds) { var self = this; productIds.forEach(function(productId) { // 检查是否已在缓存中 if (self.getFromMemoryCache(productId) || self.getFromLocalStorage(productId)) { return; // 已缓存，跳过 } // 异步加载产品数据 self.getProductData(productId, function(error, data) { if (error) { console.error('Error preloading product', productId, ':', error); } else { console.log('Product', productId, 'preloaded successfully'); } }); }); }, // 清理过期缓存 cleanExpiredCaches: function() { var self = this; var now = new Date().getTime(); // 清理内存缓存 $('[id^="product-"]').each(function() { var $element = $(this); var cachedData = $element.data('productCache'); if (cachedData && now > cachedData.expiry) { $element.removeData('productCache'); } }); // 清理本地存储 for (var i = 0; i < localStorage.length; i++) { var key = localStorage.key(i); if (key.indexOf(self.config.cacheKeyPrefix) === 0) { try { var cachedData = JSON.parse(localStorage.getItem(key)); if (now > cachedData.expiry) { localStorage.removeItem(key); } } catch (e) { localStorage.removeItem(key); } } } } }; // 使用示例 $(document).ready(function() { // 初始化产品页面 function initProductPage() { // 获取所有产品ID var productIds = []; $('[id^="product-"]').each(function() { var productId = this.id.replace('product-', ''); productIds.push(productId); }); // 预加载所有产品数据 ProductCacheManager.preloadProducts(productIds); // 定期清理过期缓存 setInterval(function() { ProductCacheManager.cleanExpiredCaches(); }, 5 * 60 * 1000); // 每5分钟清理一次 } // 产品详情查看处理 function viewProductDetails(productId) { ProductCacheManager.getProductData(productId, function(error, data) { if (error) { showError('无法加载产品详情'); return; } // 显示产品详情 showProductDetails(data); }); } // 初始化页面 initProductPage(); // 绑定产品点击事件 $('.product-item').click(function() { var productId = this.id.replace('product-', ''); viewProductDetails(productId); }); });

案例2：单页应用的状态管理

背景：一个复杂的单页应用需要管理多个组件的状态，并确保状态变化时UI同步更新。

挑战：组件间状态同步、状态持久化、性能优化。

解决方案：使用jQuery数据缓存实现中央状态管理系统。

// 单页应用状态管理器 var AppStateManager = { // 应用状态 state: {}, // 状态变更监听器 listeners: {}, // 初始化状态管理器 init: function(initialState) { this.state = initialState || {}; // 尝试从本地存储恢复状态 var savedState = localStorage.getItem('appState'); if (savedState) { try { var parsedState = JSON.parse(savedState); this.state = $.extend(true, this.state, parsedState); } catch (e) { console.error('Error restoring app state:', e); } } // 将状态缓存到根元素 this._cacheState(); // 定期保存状态到本地存储 var self = this; setInterval(function() { self.saveState(); }, 30 * 1000); // 每30秒保存一次 }, // 将状态缓存到DOM _cacheState: function() { $('#app').data('appState', this.state); }, // 获取状态 getState: function(key) { if (!key) { return this.state; } // 支持嵌套键，如 'user.profile.name' var keys = key.split('.'); var value = this.state; for (var i = 0; i < keys.length; i++) { if (value[keys[i]] === undefined) { return undefined; } value = value[keys[i]]; } return value; }, // 设置状态 setState: function(key, value, options) { options = options || {}; var keys = key.split('.'); var currentState = this.state; // 导航到要设置的属性的父对象 for (var i = 0; i < keys.length - 1; i++) { if (currentState[keys[i]] === undefined) { currentState[keys[i]] = {}; } currentState = currentState[keys[i]]; } var lastKey = keys[keys.length - 1]; var oldValue = currentState[lastKey]; // 设置新值 currentState[lastKey] = value; // 更新缓存 this._cacheState(); // 触发状态变更事件 this._triggerStateChange(key, value, oldValue, options); // 如果需要，立即保存状态 if (options.saveImmediately) { this.saveState(); } }, // 合并状态 mergeState: function(key, value, options) { options = options || {}; var currentValue = this.getState(key); var newValue; if ($.isPlainObject(currentValue) && $.isPlainObject(value)) { // 如果都是对象，则合并 newValue = $.extend(true, {}, currentValue, value); } else { // 否则直接替换 newValue = value; } this.setState(key, newValue, options); }, // 添加状态变更监听器 addListener: function(key, callback, context) { if (!this.listeners[key]) { this.listeners[key] = []; } this.listeners[key].push({ callback: callback, context: context || window }); }, // 移除状态变更监听器 removeListener: function(key, callback) { if (!this.listeners[key]) { return; } if (!callback) { // 移除所有监听器 this.listeners[key] = []; return; } // 移除特定监听器 this.listeners[key] = this.listeners[key].filter(function(listener) { return listener.callback !== callback; }); }, // 触发状态变更事件 _triggerStateChange: function(key, newValue, oldValue, options) { if (!this.listeners[key]) { return; } var eventData = { key: key, newValue: newValue, oldValue: oldValue, timestamp: new Date() }; this.listeners[key].forEach(function(listener) { listener.callback.call(listener.context, eventData); }); // 触发通用的状态变更事件 if (this.listeners['*']) { this.listeners['*'].forEach(function(listener) { listener.callback.call(listener.context, eventData); }); } }, // 保存状态到本地存储 saveState: function() { try { localStorage.setItem('appState', JSON.stringify(this.state)); } catch (e) { console.error('Error saving app state:', e); } }, // 重置状态 resetState: function(key, options) { options = options || {}; if (key) { // 重置特定键的状态 var keys = key.split('.'); var currentState = this.state; for (var i = 0; i < keys.length - 1; i++) { if (currentState[keys[i]] === undefined) { return; // 路径不存在，无需重置 } currentState = currentState[keys[i]]; } var lastKey = keys[keys.length - 1]; var oldValue = currentState[lastKey]; delete currentState[lastKey]; // 更新缓存 this._cacheState(); // 触发状态变更事件 this._triggerStateChange(key, undefined, oldValue, options); } else { // 重置整个状态 var oldState = this.state; this.state = {}; // 更新缓存 this._cacheState(); // 触发状态变更事件 this._triggerStateChange('*', undefined, oldState, options); } // 如果需要，立即保存状态 if (options.saveImmediately) { this.saveState(); } } }; // 使用示例 $(document).ready(function() { // 初始化应用状态 AppStateManager.init({ user: { id: null, name: 'Guest', preferences: { theme: 'light', language: 'en' } }, ui: { sidebarOpen: false, notifications: [] }, data: { lastUpdated: null, items: [] } }); // 用户登录处理 function handleUserLogin(userData) { AppStateManager.setState('user', userData, { saveImmediately: true }); } // 主题切换处理 function setupThemeToggle() { $('#theme-toggle').click(function() { var currentTheme = AppStateManager.getState('user.preferences.theme'); var newTheme = currentTheme === 'light' ? 'dark' : 'light'; AppStateManager.setState('user.preferences.theme', newTheme); applyTheme(newTheme); }); // 监听主题变化 AppStateManager.addListener('user.preferences.theme', function(event) { applyTheme(event.newValue); }); } // 应用主题 function applyTheme(theme) { if (theme === 'dark') { $('body').addClass('dark-theme'); } else { $('body').removeClass('dark-theme'); } } // 侧边栏切换处理 function setupSidebarToggle() { $('#sidebar-toggle').click(function() { var currentState = AppStateManager.getState('ui.sidebarOpen'); AppStateManager.setState('ui.sidebarOpen', !currentState); }); // 监听侧边栏状态变化 AppStateManager.addListener('ui.sidebarOpen', function(event) { if (event.newValue) { $('#sidebar').addClass('open'); } else { $('#sidebar').removeClass('open'); } }); } // 初始化UI组件 function initUIComponents() { setupThemeToggle(); setupSidebarToggle(); // 应用当前状态 applyTheme(AppStateManager.getState('user.preferences.theme')); if (AppStateManager.getState('ui.sidebarOpen')) { $('#sidebar').addClass('open'); } } // 加载数据 function loadData() { $.getJSON('/api/data', function(response) { AppStateManager.mergeState('data', { items: response.items, lastUpdated: new Date() }); renderData(response.items); }); } // 渲染数据 function renderData(items) { var $container = $('#data-container'); $container.empty(); items.forEach(function(item) { var $item = $('<div class="data-item"></div>'); $item.text(item.name); $item.data('itemData', item); // 使用jQuery数据缓存存储项目数据 $container.append($item); }); } // 初始化应用 initUIComponents(); loadData(); });