什么是可维护性的代码_什么是维护代码-CSDN博客

本文链接：https://blog.csdn.net/2301_79985178/article/details/140572204

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

从变量来说

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 onclick="doSomething()" ></button>

从代码层面上来说完全没有问题
但是实际上，这个是 HTML 和 JavaScript 的强耦合现象
第一: 每次对于代码进行的修改，都要从 HTML 和 JavaScript 两个位置去进行修改
第二: 代码引入位置不可变，一定要保证在用户点击之前就已经有函数存在了，不然一定会报错的

比较好的方法就是进行 HTML 和 JavaScript 的分离

在
.js 文件中获取 DOM 元素

通过事件绑定的形式来完成操作

var btn = document.querySelector('button')
btn.addEventListener('click', doSomething)

还有一种情况更常见, 就是在 JS 代码中为了渲染页面而进行字符串拼接

container.innerHTML = `
	<div>
		...
		<p> ... </p>
		<span> ... </span>
	</div>
`

这个代码也是完全没有问题的，而且大部分同学都会这样书写代码，因为省时省力
但是这样的情况，一旦渲染到页面上，出现样
作者徽是vip1024c
式问题需要调整的时候
我们在 HTML 结构中很难找到内容来修改，必须要到 JavaScript 代码里面去修改
如果我们的字符串拼接是在循环里面完成的话，那么有可能你添加一个或者删除一个标签的时候，导致整个页面崩溃

比较好的做法

使用一些第三方小脚本或者模板引擎来进行渲染：

比如：art-template / e.js / …

真的需要这样渲染的时候，那么在原始
html 结构中以注释的形式留下一部分渲染内容

<div class="container">
    <!-- 商品详情信息渲染结构
    <div>
        ...
        <p> ... </p>
        <span> ... </span>
    </div>
    -->
</div>

当 HTML 和 JavaScript 解耦以后
可以大量节省我们的排错时间, 和错误的准确定位

十三、CSS 和 JavaScript 的耦合

在前端的开发中，使用 JS 来操作一些元素的样式，是在常见不过的事情了

比如我们经常会写

ele.style.color = 'red' ;
ele.style.display = 'none' ;

这样书写代码其实没有大问题

对于渲染也不会造成很大的困扰

但是，一旦我们需要修改样式的时候，那么就比较麻烦了

因为有的样式可能需要在
.css 文件内修改，有的样式需要在
.js 文件内修改

比较好的做法是, 把我们需要修改的样式写成一个单独类名下
放在 .css 文件内
我们在代码里面通过操作元素的类名来进行修改

ele.classList.add('active') 
ele.classList.remove('active')

这样做保证了样式和行为的分离，我们在调整页面样式的时候，不需要 JS，直接在 CSS 中修改就可以

十四、事件处理和应用逻辑的耦合

在开发过程中, 我们经常要处理一些事件，并且在事件里面要进行一些逻辑的运算

比如：我们在点击登录的时候，要对用户填写的内容进行一个正则的验证，然后提交到服务器

ele.addEventListener('submit', function () {
    let username = xxx.value
    let password = xxx.value
    
    // 正则验证
    if ( ... ) { ... }
    
    if ( ... ) { ... }
    
    // 提交到服务器
   	var xhr = new XMLHttpRequest()
    xhr.open( ... )
    xhr.send( ... )
    xhr.onload = function () { ... }
})

这是一段合法的代码

但是函数里面包含了太多的内容

有事件处理

有逻辑处理

有请求发送

这样就相当于在一个函数里面做了太多的事情

这个代码的逻辑运算还是比较少的，但是一旦逻辑运算多了以后，那么后期阅读的时候就很麻烦了

写在最后

在结束之际，我想重申的是，学习并非如攀登险峻高峰，而是如滴水穿石般的持久累积。尤其当我们步入工作岗位之后，持之以恒的学习变得愈发不易，如同在茫茫大海中独自划舟，稍有松懈便可能被巨浪吞噬。然而，对于我们程序员而言，学习是生存之本，是我们在激烈市场竞争中立于不败之地的关键。一旦停止学习，我们便如同逆水行舟，不进则退，终将被时代的洪流所淘汰。因此，不断汲取新知识，不仅是对自己的提升，更是对自己的一份珍贵投资。让我们不断磨砺自己，与时代共同进步，书写属于我们的辉煌篇章。

需要完整版PDF学习资源私我