创造可维护代码 (javascript红皮书二刷 - Ch24.1 可维护性)

最新推荐文章于 2024-09-14 18:52:56 发布

Nesb01t

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量265

点赞数

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/Littlelumos/article/details/128025425

版权

JavaScript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

文章目录

简单理解要点
什么样的代码是可维护的？

简单理解要点

是重要的技能，能够体现出网站爱好者还是真正理解自己作品的开发人员。
作为智力成果为后来的程序员提供更快捷方便的开发维护。

什么样的代码是可维护的？

可理解性：其他人接受时，可以通过代码理解你的意图和一般途径。
直观性：代码内容一看就能让人明白，无论有多复杂。
可适应性：数据上变化时，执行数据操作的方法可以自适应，并方便修改。 (个人理解)
可扩展性：当前的代码结构支持未来对核心功能进行扩展。
可调试性：当代码运行出错时可以直观地知道问题所在。

优化代码 - 产生可读性

规范缩进

约定整个项目的缩进格式，不能使用制表符，每个IDE的解析方式不同。

规范注释

函数注释：应当简单描述其目的和达到目的的算法，进行参数和返回值上的假设性提示。
大坨代码：当你用一坨代码完成了一项任务，当然也要对其进行注释。
复杂算法：方便自己和他人理解复杂算法是如何工作的。
Debugger/Hack：让别人理解你的Debugger/Hack进行运作的意图

命名规范 👍

变量 - 命名应是名词：比如user, player
函数 - 应以动词开始：比如getName()，布尔类型应该为isPlayer()
变量 - 类型透明化：
1. 通过 var found = false; var count = -1 进行类型初始化
2. 通过 var bFound; var iCount 来显式表达变量类型

优化代码 - 松散耦合

耦合过紧：当应用的一部分过于依赖另一部分代码，具体表现是修改了一部分代码还需要对另一部分代码进行修改

应用逻辑 & 事件处理程序

首先看这一坨代码，他的应用逻辑和事件处理紧密耦合了

function handleClick(event){ // 事件处理
    event = EventUtil.getEvent(event);
    if (event.keyCode == 13){ // if块中内容为应用逻辑
        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 handleClick(event){
    event = EventUtil.getEvent(event);
    if (event.keyCode == 13){
        var target = EventUtil.getTarget(event);
        validateValue(target.value);
    }
}

应用 & 业务逻辑的几条解耦原则

不要将event对象传给方法，只传数据 (这是显然的)
任何 应用层面的动作 都应该脱离事件处理
事件处理程序都应该只处理事件，把处理转交给应用逻辑

代码安全 - js数据

勿要随意修改对象

❌ 不要为 实例或对象 添加方法和属性，或者重定义 已经存在的方法。
👍 创建包含功能的新对象，或者创建继承原类型的新类型，并给他添加新功能～

正确使用全局变量

❌ 创建var name = 'A'; function sayName()，这可能导致 window.name 被覆盖。
👍 创建var MyApplication = { name: 'A', function sayName(){} }，这暗示了命名空间 ⭐️。

避免与 null 进行比较

尝试使用以下代码进行替换：

值为引用类型：使用 instanceof 操作符检查其构造函数。
值为基本类型：使用 typeof 操作符检查其类型。
如果检查对象里面的东西，使用 typeof 确定指定名字的方法在特定对象上。

将常量解耦使用

看下面的内容，注意这几点，这样可以保护数据的同时保护代码 ⚠️

重复值：当一个值变了另一个值没变时会产生的错误，比如css类名。
显示给用户的字符串：任何显示给用户的字符串都应该抽取出来方便操作。
URL：推荐在一个地方存储所有的URL，web应用常见的需求场景。
任意可能改变的值：在定义常量时，问自己未来有没有可能改变，如果有，那么解耦是最好的～

var Constants = {
    INVALID_VALUE_MSG: "Invalid value!",
    INVALID_VALUE_URL: "/errors/invalid.php"
};

function validate(value){
    if (!value){
        alert(Constants.INVALID_VALUE_MSG);
        location.href = Constants.INVALID_VALUE_URL;
    }
}