提升jQuery性能：19条编码黄金法则

"高效编写jQuery代码的指南，包括缓存变量、避免全局变量、使用匈牙利命名法、使用Var链以及更新事件处理方法等19条建议，旨在提升jQuery代码性能和可读性。" 在jQuery编程中，遵循一些最佳实践能够显著提高代码效率和可维护性。以下是一些关键的指导原则： 1. **缓存变量**：DOM操作比计算和变量操作昂贵得多。当你需要多次引用同一个DOM元素时，应将其存储在一个变量中。例如，将`$(‘#element’)`缓存为`$element`，然后重复使用，避免不必要的DOM查询。 ```javascript // 原始代码 h = $('#element').height(); $('#element').css('height', h - 20); // 改进后的代码 $element = $('#element'); h = $element.height(); $element.css('height', h - 20); ``` 2. **避免全局变量**：全局变量可能导致命名冲突和其他问题。保持变量的作用域尽可能小，使用`var`关键字定义它们。这样可以防止意外污染全局空间。 ```javascript // 避免全局变量 var $element = $('#element'); var h = $element.height(); $element.css('height', h - 20); ``` 3. **使用匈牙利命名法**：为了区分jQuery对象和普通变量，可以在jQuery对象前加上`$`前缀，提高代码可读性。 ```javascript // 使用匈牙利命名法 var $first = $('#first'); var $second = $('#second'); var value = $first.val(); ``` 4. **使用Var链（单Var模式）**：合并多个`var`声明可以减少代码行数，同时保持代码整洁。未赋值的变量可以放在最后。 ```javascript var $first = $('#first'), $second = $('#second'), value = $first.val(), k = 3, cookiestring = 'SOMECOOKIESPLEASE', i, j, myArray = {}; ``` 5. **使用`on`方法**：对于事件绑定，使用`on`方法代替老式的`.click()`等方法。`on`更强大且适应性强，支持动态添加的元素。 ```javascript // 使用'on'处理事件 $('body').on('click', '#button', function() { // 事件处理代码 }); ``` 6. **链式操作**：jQuery方法返回的是jQuery对象，允许链式调用。合理利用这一点可以减少代码量。 ```javascript $('#element').addClass('highlight').text('Clicked!').fadeOut(); ``` 7. **避免使用CSS选择器的子集**：如果可能，避免在CSS选择器中使用子集，如`$('.parent .child')`。如果知道子元素的数量较少，可以先选择父元素，再过滤子元素。 ```javascript // 避免使用子集 $('.parent .child').doSomething(); // 更优的替代方案 var $parent = $('.parent'); $parent.find('.child').doSomething(); ``` 8. **使用`data-*`属性**：为DOM元素存储数据时，使用`data-*`属性，而不是jQuery的`data()`方法。这样可以避免内存泄漏。 9. **利用$.each()**：当需要迭代jQuery对象中的元素时，使用`$.each()`代替`for`循环，以保持代码简洁。 10. **优化DOM操作**：尽量减少DOM操作次数，一次性修改多个属性或添加多个类。 11. **利用事件委托**：使用事件委托（如`on`的事件冒泡模式）可以减少事件监听器的数量，提高性能。 12. **避免使用`live`和`delegate`**：这两个方法已经被弃用，应使用`on`来替代。 13. **使用$.trim()**：处理字符串时，使用`$.trim()`去除首尾空格。 14. **避免在DOM就绪事件中执行耗时操作**：将这些操作延迟到用户交互时，或者使用`setTimeout`分批次处理。 15. **选择正确的遍历方法**：根据需求选择`each()`、`map()`或`grep()`，以提高效率。 16. **利用$.ajax()的异步特性**：不要阻塞主线程，让Ajax请求在后台进行。 17. **合理使用$.extend()**：合并对象时，注意深拷贝和浅拷贝的区别。 18. **理解并优化动画**：了解`animate()`的工作原理，避免不必要的动画效果。 19. **持续学习和更新知识**：jQuery库不断发展，及时学习新的API和最佳实践，保持技能的最新状态。 遵循以上指南，你可以编写出更加高效、可读和易于维护的jQuery代码。在实践中不断学习和改进，你的jQuery技能将得到显著提升。