javascript最佳实践

最新推荐文章于 2024-03-28 09:27:06 发布

原创最新推荐文章于 2024-03-28 09:27:06 发布 · 267 阅读

1 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

48 篇文章

订阅专栏

本文探讨了JavaScript的编码规范，包括提高代码可读性的策略，如统一缩进、注释规则、合理命名等；强调了减少代码间耦合的重要性，如避免HTML与JavaScript、CSS与JavaScript的紧密耦合；介绍了尊重对象所有权、避免全局量、使用常量等最佳实践；并讨论了提升性能的方法，如避免全局查找、优化循环等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js的最佳实践，让我们少走弯路，代码更容易维护和扩展。

可读性：

统一的缩进方式。
每个函数或方法都应该包含一个注释。
单个任务的多行代码需要一个注释。
复杂算法需要一个注释。
hack注释。
变量和函数的命名合乎逻辑。

减少代码间的耦合：

html和javascript之间的交换经常会耦合在一起，使得代码变得难以维护。

<!-- 使用了 <script> 的紧密耦合的 HTML/JavaScript --> 
<script type="text/javascript">
  document.write("Hello world!");
</script>
<!-- 使用事件处理程序属性值的紧密耦合的 HTML/JavaScript -->
<input type="button" value="Click Me" onclick="doSomething()" />

var container = document.getElementById("container");
container.innerHTML = "<div class=\"msg\"><p class=\"post\">" + msg + "</p>" +
            "<p><em>Latest message above.</em></p></div>";

这里的document.write, onclick, innerHTML都让javascript和html耦合在一起。当页面问题出现问题时，很难定位错误的发生。所以尽量避免在 JavaScript 中创建大量 HTML。

2. css与javascript的松散耦合： js中通过动态更改样式类而非特定样式来实现。

3. 应用逻辑和事件处理程序解耦：事件处理程序不应包含了应用逻辑，尽可能的将应用逻辑封装成函数的形式来调用，

（1）勿将 event 对象传给其他方法;只传来自 event 对象中所需的数据。

（2）任何可以在应用层面的动作都应该可以在不执行任何事件处理程序的情况下进行。

（3）任何事件处理程序都应该处理事件，然后将处理转交给应用逻辑。

尊重对象所有权：不能修改不属于你的对象

（1）不要为实例或原型添加属性。

（2）不要为实例或原型添加方法。

（3）不要重定义已存在的方法。

避免全局量：使用命名空间有助于确保代码可以在同一个页面上与其他代码以无害的方式一起工作。（Wrox.ProAjax.EventUtil.addHandler）

//两个全局量——避免!! 
var name = "Nicholas"; function sayName(){
        alert(name);
    }

//一个全局量——推荐
var MyApplication = {
    name: "Nicholas",
    sayName: function(){
        alert(this.name);
    } 
};

使用常量：

任何在多处用到的值都应抽取为一个常量。
任何用于显示给用户的字符串，都应被抽取出来以方便国际化。
在 Web 应用中，资源位置很容易变更，所以推荐用一个公共地方存放所有的 URL。
任意可能会更改的值。

性能：

避免全局查找
避免with语句
避免不必要的属性查找
优化循环：（减值迭代）（简化终止条件）（简化循环体）（使用后测试循环）
避免双重解释
最小化语句数：var count = 5, color = "blue", values = [1,2,3], now = new Date();
插入迭代值：var name = values[i++];
数组和对象使用字面量来表示。
最小化现场更新（例如使用：document.createDocumentFragment）
使用 innerHTML 比（createElement, appendChild）快。
使用事件代理

注意HTMLCollection

var images = document.getElementsByTagName("img"),
image,
i, len;
    for (i=0, len=images.length; i < len; i++){
        image = images[i];
// 处理
 }

这里直接访问image可获得更好的性能，不要直接访问images[i]。

内容总结至《JavaScript高级程序设计（第3版）》第24章。