JavaScript简单规则( 最佳实践 )

最新推荐文章于 2025-05-10 14:52:17 发布

moveofgod

最新推荐文章于 2025-05-10 14:52:17 发布

阅读量343

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript constants html function null 算法

本文链接：https://blog.youkuaiyun.com/moveofgod/article/details/7950635

JavaScript 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了JavaScript编程的最佳实践，包括代码注释、变量命名、松散耦合等技巧，并提供了具体的示例来展示如何改进代码结构，增强可读性和可维护性。

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

1. 注释

函数和方法 : 应该包含注释-- 描述用途, 算法, 假设, 参数代表, 函数返回

大段代码 : 在代码前放注释, 主要是描述任务

复杂算法 : 解释如何实现.

2. 变量和函数命名

函数名 : 要以动词开始, 如 getName() , 另外要合乎逻辑

变量有点麻烦 :

1) 要声明时直接对变量进行初始化

2) 要使用匈牙利标记法

例如 :

var bFound = false ;

var iCount = 0 ;

var sName = "" ;

var fSum = 0.0 ; // 不知道是否可以

var oPerson = null ;

3. 松散耦合

1. 解耦 HTML / JavaScript

在Web上, HTML是数据, JavaScript 是行为. ( 理想情况是, HTML和JavaSript应该是完全分离, 并通过外部文件和使用DOM附加行为来包含JavaScript.

在HTML中包含JavaScript和在JavaScript中包含HTML都是不好的,

2. 解耦 CSS / JavaScript

Web 是显示, 不能使用 JavaScript 来更改某些样式. 例如 element.style.color = "red" , 这是不好的, 应该使用 css 式样表.

3. 解耦应用逻辑 / 时间处理程序 ( 例如：

function handleKeyPress( event ) {

  if (event.keyCode == 13){

    var target = EventUtil.getTarget( event );

    var value = 5 * parseInt ( target.value ) ;

    if ( value > 10 ){

      document.getElementById( "error-msg").style.display = "block" ;

    }

  }

}

以上代码将应用逻辑, 与事件写在一起, 这样是不好的, 不容易调取应用逻辑 ( 改善如下 )

function validateValue( value ) {

    value = 5 * parseInt ( value ) ;

    if ( value > 10 ) {

       document.getElementById( "error-msg" ).style.display = "block" ;

    }

}

function handleKeyPress( event ) {

    if ( event.keyCode == 13 ){

        var target = Eventutil.getTarget( event );

        validateValue( target.value );

    }

}

以下要牢记的几条原则 :

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

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

任何时间处理程序都应该处理事件, 然后将处理转交给应用逻辑.

编程实践

1. 尊重对象的所有权 ( 你不能修改不属于你的对象 )

具体 : 不要为实例或原型添加属性和方法, 不要重定义已存在的方法.

2. 避免全局量 ( 包括变量和函数 )

3. 避免与 null 进行比较

由于 JavaScript 不做任何自动的类型检查, 所以它就成了开发人员的责任.

if ( value != null ) // 不推荐 if ( value instanceof Array ) // 推荐

与 null 比较可以大概使用以下内容替换

1) 如果是引用类型, 可以用 instanceof 检查构造函数

2) 如果是个基本类型, 使用 typeof 检查其类型

3) 如果是希望对象包含某个特定的方法名, 则使用 typeof 操作符确保指定名字的方法存在与对象上.

代码中 null 比较越少, 就越容易确定代码的目的, 并消除不必要的错误.

使用常量

尽管JavaScript没有常量的正式概念, 但是它还是很有用的,

常用常量 : 重复值 ( 多处使用 ) , 用户截面字符串, URLs , 任意可能不改变的值, 例如 PI

var Constants = {

    INVALID_VALUE_MSG : "Invalid value !" ,          // 常量用大写字母

    INVALID_VALUE_URL: "/errors/invalid.php"

} ;

性能
比编译好的C慢5000倍, 比解释型JAVA慢100倍, 比解释型Perl慢 10倍. ( 真慢 )

注意作用域

1.避免全局查找

2.避免with ( 完全不用)

3. var count = 5 , // 好

color = "blue" ;

比 var count = 5 ; // 不好

var color = "blue" ;