jQuery最佳实践

// 不好的做法 $('p').css('color', 'red'); $('p').css('font-size', '16px'); $('p').text('Hello World'); // 好的做法 var $paragraphs = $('p'); $paragraphs.css('color', 'red'); $paragraphs.css('font-size', '16px'); $paragraphs.text('Hello World');

// 链式调用 $('p').css('color', 'red').css('font-size', '16px').text('Hello World');

// 不好的做法 $('div#container ul.nav li.item'); // 好的做法 $('#container .nav .item');

// 使用文档片段批量添加元素 var fragment = document.createDocumentFragment(); for (var i = 0; i < 100; i++) { var $li = $('

Item ' + i + '

'); fragment.appendChild($li[0]); } $('ul').append(fragment);

// 不好的做法 $('ul li').click(function() { // 处理点击事件 }); // 好的做法 $('ul').on('click', 'li', function() { // 处理点击事件 });

// 使用IIFE封装代码 (function($) { // 代码... }(jQuery));

// 模块化组织代码 var myApp = { init: function() { this.bindEvents(); this.initializeComponents(); }, bindEvents: function() { // 绑定事件 }, initializeComponents: function() { // 初始化组件 }, // 其他方法... }; // 初始化应用 $(document).ready(function() { myApp.init(); });

// 使用命名空间 var myNamespace = myNamespace || {}; myNamespace.utils = { formatDate: function(date) { // 格式化日期 }, validateEmail: function(email) { // 验证邮箱 } };

// 使用Promise处理AJAX请求 $.ajax({ url: 'https://api.example.com/data', method: 'GET', dataType: 'json' }).done(function(data) { // 处理成功响应 }).fail(function(xhr, status, error) { // 处理错误 }).always(function() { // 无论成功失败都执行 });

// 缓存AJAX响应 var cache = {}; function getData(url) { if (cache[url]) { return $.Deferred().resolve(cache[url]); } return $.ajax({ url: url, method: 'GET', dataType: 'json' }).done(function(data) { cache[url] = data; }); }

// 设置超时时间 $.ajax({ url: 'https://api.example.com/data', method: 'GET', dataType: 'json', timeout: 5000 // 5秒超时 }).done(function(data) { // 处理成功响应 }).fail(function(xhr, status, error) { if (status === 'timeout') { console.log('请求超时'); } else { console.log('请求失败:', error); } });

// 使用try-catch捕获异常 try { // 可能抛出异常的代码 var result = riskyOperation(); } catch (e) { // 处理异常 console.error('发生错误:', e.message); }

// 全局AJAX错误处理 $(document).ajaxError(function(event, xhr, settings, error) { console.error('AJAX请求失败:', error); // 显示错误消息给用户 $('#error-message').text('请求失败，请重试').show(); });

// 提供友好的错误提示 $.ajax({ url: 'https://api.example.com/data', method: 'GET', dataType: 'json' }).done(function(data) { // 处理成功响应 }).fail(function() { // 显示友好的错误提示 $('#error-message').text('获取数据失败，请检查网络连接后重试').show(); });

// 性能优化前后对比 // 优化前 function oldWay() { // 多次执行相同的选择器 for (var i = 0; i < 100; i++) { $('div').append('

Item ' + i + '

'); } } // 优化后 function newWay() { // 缓存选择器 var $div = $('div'); // 使用文档片段 var fragment = document.createDocumentFragment(); for (var i = 0; i < 100; i++) { var $p = $('

Item ' + i + '

'); fragment.appendChild($p[0]); } // 一次性添加到DOM $div.append(fragment); }

// 模块化代码组织 var todoApp = { init: function() { this.cacheElements(); this.bindEvents(); this.loadTodos(); }, cacheElements: function() { this.$todoList = $('#todo-list'); this.$todoInput = $('#todo-input'); this.$addButton = $('#add-button'); this.$clearButton = $('#clear-button'); }, bindEvents: function() { var self = this; this.$addButton.on('click', function() { self.addTodo(); }); this.$todoInput.on('keypress', function(e) { if (e.which === 13) { self.addTodo(); } }); this.$clearButton.on('click', function() { self.clearCompleted(); }); this.$todoList.on('click', '.toggle', function() { self.toggleTodo($(this).closest('li')); }); this.$todoList.on('click', '.delete', function() { self.deleteTodo($(this).closest('li')); }); }, addTodo: function() { var text = this.$todoInput.val().trim(); if (text) { var todoItem = this.createTodoItem(text); this.$todoList.append(todoItem); this.$todoInput.val(''); this.saveTodos(); } }, createTodoItem: function(text) { return $('

' + '' + '' + text + '' + '删除' + '

'); }, toggleTodo: function($todo) { $todo.toggleClass('completed'); this.saveTodos(); }, deleteTodo: function($todo) { $todo.remove(); this.saveTodos(); }, clearCompleted: function() { this.$todoList.find('.completed').remove(); this.saveTodos(); }, saveTodos: function() { var todos = []; this.$todoList.find('li').each(function() { todos.push({ text: $(this).find('.text').text(), completed: $(this).hasClass('completed') }); }); localStorage.setItem('todos', JSON.stringify(todos)); }, loadTodos: function() { var todos = JSON.parse(localStorage.getItem('todos') || '[]'); var self = this; todos.forEach(function(todo) { var $todo = self.createTodoItem(todo.text); if (todo.completed) { $todo.addClass('completed'); $todo.find('.toggle').prop('checked', true); } self.$todoList.append($todo); }); } }; // 初始化应用 $(document).ready(function() { todoApp.init(); });

// AJAX最佳实践 var apiService = { // 缓存响应 cache: {}, // 通用AJAX请求方法 request: function(options) { var url = options.url; // 检查缓存 if (options.cache && this.cache[url]) { return $.Deferred().resolve(this.cache[url]); } // 默认选项 var defaultOptions = { method: 'GET', dataType: 'json', timeout: 10000, beforeSend: function() { // 显示加载指示器 $('#loading').show(); }, complete: function() { // 隐藏加载指示器 $('#loading').hide(); } }; // 合并选项 var ajaxOptions = $.extend({}, defaultOptions, options); // 发送请求 return $.ajax(ajaxOptions).done(function(data) { // 缓存响应 if (options.cache) { apiService.cache[url] = data; } }).fail(function(xhr, status, error) { // 处理错误 console.error('API请求失败:', error); if (status === 'timeout') { alert('请求超时，请重试'); } else { alert('请求失败，请检查网络连接'); } }); }, // 获取用户数据 getUserData: function(userId) { return this.request({ url: 'https://api.example.com/users/' + userId, cache: true }); }, // 保存用户数据 saveUserData: function(userId, data) { return this.request({ url: 'https://api.example.com/users/' + userId, method: 'POST', data: data }); } }; // 使用示例 apiService.getUserData(123).done(function(userData) { console.log('用户数据:', userData); // 处理用户数据 });