web开发中怎么维护代码

发布时间：2021-12-17 13:39:54 作者：iii
来源：亿速云阅读：341

这篇文章主要介绍“web开发中怎么维护代码”，在日常操作中，相信很多人在web开发中怎么维护代码问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”web开发中怎么维护代码”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

什么是可维护性的代码

今天我们不聊性能优化，只是从后期维护代码的角度谈谈如何优雅的书写代码

为什么需要些可维护性高的代码 ?

在开发的过程中，迭代和维护是再正常不过的操作了
那么就必然要阅读别人的代码
你有没有遇到过一些尴尬的事情：
1、看不懂别人的代码，不知从何下手
2、修改一个功能，得读两天代码，改完发现 bug 最少的时候是修改以前
3、只是修改了一行代码，发现控制台报错好几十个
...
如果代码的可维护性高了，那么可以避免很多这些问题
编写可维护性高的代码, 从我做起 ^_^

什么是可维护性高的代码 ?

容易理解: 不需要求助源代码书写人员，就能看得懂
符合常识: 代码书写的自然通透
容易适配: 当数据发生变化的时候，不至于完全重写
容易扩展: 对于核心功能有可扩展性(适当利用策略模式)
容易调试: 当出现问题的时候，能给出明确且详细的错误提示，可以直接定位问题源

从下面几点做起：

一、代码可读性

想要好维护, 那么第一任务就是你写的代码要让别人看得懂
因为我们的代码，当他不运行的时候，就是一个纯文本
想要让别人看得懂你写的一堆文本，那么就要从一切自定义的内容开始做起

二、代码缩进

能区分是论文还是代码的第一因素，也是最直观的因素就是代码缩进
代码没有缩进，或者随机缩进，那么和给你看一篇火星文论文没有区别

for (var i = 0; i < 100; i++) {
if (true) {
function fn() {   

for (var j = 0; j < 100; j++) {
}
} 

for (var j = 0; j < 100; j++) {
}
}
}

整整齐齐的就是看不懂

我们严格保持了代码缩进以后, 虽然代码意义不一定看得懂, 但是代码结构我能看得懂了

for (var i = 0; i < 100; i++) {
    if (true) {
        function fn() {   

            for (var j = 0; j < 100; j++) {
            }
        } 

        for (var j = 0; j < 100; j++) {
        }
    }
}

这个时候就可以尝试下改一改了

三、注释

在任何一个语言里面，都是有注释的

语言规范里定义注释，不是为了让你学了玩的，就是为了让你对代码进行一些标注的

大型代码块，和大量变量堆积的地方，都要有清楚的注释，用来表明这个代码块或者说这一堆变量是干什么用的，尤其是函数，尽量做到每一个函数的前面都有一个说明注释。

/*
 * fn 获取范围之间随机整数的函数
 * @param {Number} a 范围开始的数字
 * @param {Number} b 范围结束的数字
 * @return {Number} 范围内的随机整数
*/
function fn(a, b) { ... }

每一个函数都应该有参数说明，是否有返回值，返回值是什么
因为这些内容在函数定义中是不能直观看到了，需要阅读代码才可以
当你写明了这些以后，阅读性就大大提高了
假设，你的函数块里面涉及到很复杂的算法，最好也是在说明注释里面标注出来

当你对于一些浏览器问题做出的修复，你使用了一些黑科技

那么你一定要把这些黑科技标注出来，避免别人修改你的代码的时候
觉得这些黑科技没有用，给你删掉了，导致你修改好的问题又重新出现了

四、变量和函数命名

变量的命名和函数的命名，是最能体现我们自定义的地方

对于每一个变量和函数的命名，我们都尽量准确的给到一个语义，不管你是使用大驼峰还是小驼峰，都要保证看到名字就能知道这个变量或者函数的意义

从变量来说

1、尽量使用名词，而不是动词

比如：car / person / show / ...

2、常量来说，要使用大写字母来表示

比如：TEST / BROWSER / ...

3、区分全局和私有变量，函数内的私有变量我会以 _ 开头

比如： _this / ...

从函数来说

1、当函数返回布尔值的时候, 一般会以 is 开头

比如：isEnabled() / isSelected() / ...

2、获取类的函数一般以 get 开头

比如：getUserList() / getUserInfo() / ...

3、设置类的一般使用 set 开头

比如：setName() / setUserInfo() / ...

4、修改类的一般使用 update 开头

比如：updateName() / updatePrice() / ...

4、程序处理类函数使用 handler 结尾

比如：showEditHandler() / submitHandler() / ...

5、尽可能的通过名字描述清楚函数的作用，不用担心太长，因为后期打包工具会帮我们处理掉的

比如： getUserInfoById() / delGoodsParamsById() / ...

五、变量类型透明化

因为 JS 是一个弱类型语言，在定义变量的时候，不会限制数据类型

但是我们在给变量赋值的时候，也要尽可能的做到数据类型统一

当你需要定义一些变量，在后期操作中进行赋值的时候

尽可能在定义的时候，给一个初始值表示一下你变量将来要存储的数据类型

比如：
var count = 0;
var name = '';
var boo = false;
var person = null;
var todoList = [ ];

如果你实在不想给一个初始值

也可以使用注释的形式表明一下你定义的变量, 将来存储的是什么类型的数据

var count /* Number */;
var name /* String */;
var boo /* Boolean */;

六、代码书写习惯

我们要保证一个良好的代码书写习惯

七、链式编程的习惯

我们来看一下下面这个代码

[ ... ].map(function () {
 // code ...
}).filter(function () {
 // code ...
}).reduce(function () {
 // code ...
})

其实没啥问题, 而且也挺好的
更甚至当代码简单一些的时候有人把它写成一行

[ ... ].map(function () { ... }).filter(function () { ... }).reduce(function () { ... })

但是到了后期修改的时候，问题就会逐步显示，一旦修改了第一个，那么后面的都有可能会出现问题
而且当代码量过大的时候，很难保证你不修改串行了

我们可以把上面的代码换成下面的方式

[ ... ]
    .map(function () {
    // code ...
    })
    .filter(function () {
    // code ...
    })
    .reduce(function () {
    // code ...
    })

这样的话，看起来会舒服的多

而且可以利用编辑器的代码折叠，一个函数一个函数的来书写

八、书写运算符的习惯

很多人喜欢相对紧凑的书写结构

比如下面的代码

if (year%4===0&&year%100!==0||year%400===0) { ... }

很简单的一个判断闰年的代码

但是当你的运算符很紧凑的时候，那么看起来就会比较费眼睛

相对来说，我更喜欢在运算符两边都加上空格

让结构相对松散一些，看起来可能也容易一些

我们也不用担心这些空格，后期处理都会帮我们处理掉的

if ( year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) { ... }

还有一种写法

if ( 

 year % 4 === 0 && 

 year % 100 !== 0 || 

 year % 400 === 0
) { ... }

这个适用于条件比较长的时候使用看起来会更加清晰一些

九、函数调用传递参数

当调用一个函数，需要传递一个函数作为参数的时候
我们通常都会直接书写一个匿名函数或者箭头函数在参数位置
或者说传递一个复杂数据类型作为参数的时候，都会直接讲对应的数组或者对象写在参数位置
比如下面这段代码

$.get('/xxx', {
    a: 100,
    b: 200
}, function (res) {
    // code ...
}, 'json')

代码没有问题，但是一旦对象中数据过多或者函数中代码过多的时候后期看起来就会很复杂

我会建议把这些内容单独书写出来

var params = {
    a: 100,
    b: 200
}

function success(res) {
    // code ...
}

$.get('/xxx', params, success, 'json')

这样一来, 不管是修改, 还是增加一些内容, 都会比较方便了

十、功能性函数的单独封装

把我们自定义的一些功能性函数进行单独的封装，放在一个单独的 JS 文件中进行引入或者导入使用，其实就是模块化的概念

十一、松散耦合

对于比较难以阅读的代码来说，强耦合的代码是最难阅读的，JS 代码本身层面上的耦合我们就不说了，大家都应该了解面向对象编程和模块化编程

十二、HTML 和 JavaScript 的耦合

在前端开发中，我们经常会见到有些人写代码会把一些简单的事件直接写到 html 结构上

<button >

到此，关于“web开发中怎么维护代码”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！