共计 6066 个字符，预计需要花费 16 分钟才能阅读完成。
Javascript 罕用代码优化和重构的办法
简介
次要介绍以下几点：
- 提炼函数
- 合并反复的条件片段
- 把条件分支语句提炼成函数
- 正当应用循环
- 提前让函数退出代替嵌套条件分支
- 传递对象参数代替过长的参数列表
- 少用三目运算符
- 正当应用链式调用
- 合成大型类
- 活用位操作符
- 纯函数
本文会不断更新，不足之处欢送补充。
- 提炼函数
益处：
- 避免出现超大函数。
- 独立进去的函数有助于代码复用。
- 独立进去的函数更容易被覆写。
- 独立进去的函数如果领有一个良好的命名，它自身就起到了正文的作用。
- 语义化将多段拆散的逻辑放在不同的函数中实现，能够使代码逻辑清晰，分明的看到每一步在做什么。
代码举例：
实现获取数据，而后操作 dom 显示数据，最初增加事件
- 函数提炼前
“// 逻辑都写在一起，须要将所有逻辑看完才晓得这段代码是干嘛的，部分逻辑无奈复用
function main() {
$.ajax.get(‘/getData’).then((res) => {
const ul = document.getElementById(‘ul’);
ul.innerHTML = res.list.map(text => <li class="li">${text}</li>).join(‘n’);
const list = document.getElementsByClassName(‘li’);
for (let i = 0; i < list.length; i ++) {
list[i].addEventListener(‘focus’, () => {
// do something
});
}
});
}
“
- 函数提炼后
“function getData() {
return $.ajax.get(‘/getData’).then((res) => res.data.list);
}
function showList(list) {
const ul = document.getElementById(‘ul’);
ul.innerHTML = list.map(text => <li class="li">${text}</li>).join(‘n’);
}
function addEvent() {
const list = document.getElementsByClassName(‘li’);
for (let i = 0; i < list.length; i ++) {
list[i].addEventListener(‘focus’, () => {
// do something
});
}
}
// 逻辑清晰，一眼读懂每一步在做什么，某些提炼进去的函数还能够被复用
async function main() {
const list = await getData(); // 获取数据
showList(list); // 显示页面
addEvent(); // 增加事件
}
“
- 合并反复的条件片段
如果一个函数体内有一些条件分支语句，而这些条件分支语句外部分布了一些反复的代码，那么就有必要进行合并去重工作。
`// 合并前
function main(currPage){
if (currPage <= 0){
currPage = 0;
jump(currPage); // 跳转
}else if (currPage >= totalPage){
currPage = totalPage;
jump(currPage); // 跳转
}else{
jump(currPage); // 跳转
}
};
// 合并后
function main(currPage){
if (currPage <= 0){
currPage = 0;
}else if (currPage >= totalPage){
currPage = totalPage;
}
jump(currPage); // 把 jump 函数独立进去
};
`
- 把条件分支语句提炼成函数
简单的条件分支语句是导致程序难以浏览和了解的重要起因，而且容易导致一个宏大的函数。有时能够将条件分支语句提炼成语义化的函数，使代码更加直观，逻辑清晰。
`// 依据不同节令决定打折力度
function getPrice(price){
var date = new Date();
if (date.getMonth() >= 6 && date.getMonth() <= 9){// 夏天
return price * 0.8;
}
return price;
};
// 是否是夏天
function isSummer(){
var date = new Date();
return date.getMonth() >= 6 && date.getMonth() <= 9;
};
// 提炼条件后
function getPrice(price){
if (isSummer() ){
return price * 0.8;
}
return price;
};
`
- 正当应用循环
如果多段代码实际上负责的是一些重复性的工作，那么能够用循环代替，使代码量更少。
`// 判断是什么浏览器
function getBrowser(){
const str = navigator.userAgent;
if (str.includes(‘QQBrowser’)) {
return ‘qq’;
} else if (str.includes(‘Chrome’)) {
return ‘chrome’;
} else if (str.includes(‘Safari’)) {
return ‘safri’;
} else if (str.includes(‘Firefox’)) {
return ‘firefox’;
} else if(explorer.indexOf(‘Opera’) >= 0){
return ‘opera’;
} else if (str.includes(‘msie’)) {
return ‘ie’;
} else {
return ‘other’;
}
};
// 循环判断，将对应关系形象为配置，更加清晰明确
function getBrowser(){
const str = navigator.userAgent;
const list = [
{key: ‘QQBrowser’, browser: ‘qq’},
{key: ‘Chrome’, browser: ‘chrome’},
{key: ‘Safari’, browser: ‘safari’},
{key: ‘Firefox’, browser: ‘firefox’},
{key: ‘Opera’, browser: ‘opera’},
{key: ‘msie’, browser: ‘ie’},
];
for (let i = 0; i < list.length; i++) {
const item = list[i];
if (str.includes(item.key)) {return item.browser};
}
return ‘other’;
}
`
- 提前让函数退出代替嵌套条件分支
让函数变成 多进口 提前返回，替换 嵌套条件分支。
`function del(obj){
var ret;
if (!obj.isReadOnly){// 不为只读的能力被删除
if (obj.isFolder){// 如果是文件夹
ret = deleteFolder(obj);
}else if (obj.isFile){// 如果是文件
ret = deleteFile(obj);
}
}
return ret;
};
function del(obj){
if (obj.isReadOnly){// 反转 if 表达式
return;
}
if (obj.isFolder){
return deleteFolder(obj);
}
if (obj.isFile){
return deleteFile(obj);
}
};
`
- 传递对象参数代替过长的参数列表
函数参数过长那么就减少出错的危险，想保障传递的程序正确就是一件麻烦的事，代码可读性也会变差，尽量保障函数的参数不会太长。如果必须传递多个参数的话，倡议应用 对象 代替。
一般来说，函数参数最好 不要超过 3 个
`function setUserInfo(id, name, address, sex, mobile, qq){
console.log(‘id= ‘ + id);
console.log(‘name= ‘ +name);
console.log(‘address= ‘ + address);
console.log(‘sex= ‘ + sex);
console.log(‘mobile= ‘ + mobile);
console.log(‘qq= ‘ + qq);
};
setUserInfo(1314, ‘sven’, ‘shenzhen’, ‘male’, ‘137‘, 377876679 );
function setUserInfo(obj){
console.log(‘id= ‘ + obj.id);
console.log(‘name= ‘ + obj.name);
console.log(‘address= ‘ + obj.address);
console.log(‘sex= ‘ + obj.sex);
console.log(‘mobile= ‘ + obj.mobile);
console.log(‘qq= ‘ + obj.qq);
};
setUserInfo({
id: 1314,
name: ‘sven’,
address: ‘shenzhen’,
sex: ‘male’,
mobile: ‘137‘,
qq: 377876679
});
`
- 少用三目运算符
三目运算符性能高，代码量少。
但不应该滥用三目运算符，咱们应该在简略逻辑分支应用，在简单逻辑分支防止应用。
`// 简略逻辑能够应用三目运算符
var global = typeof window !== “undefined” ? window : this;
// 简单逻辑不适宜应用
var ok = isString ? (isTooLang ? 2 : (isTooShort ? 1 : 0)) : -1;
`
- 正当应用链式调用
长处： 链式调用应用简略，代码量少。
毛病： 链式调用带来的害处就是在 调试不不便，如果咱们晓得一条链中有谬误呈现，必须得先把这条链拆开能力加上一些调试 log 或者减少断点，这样能力定位谬误呈现的中央。
如果该链条的构造绝对稳固，前期不易产生批改，能够应用链式。
`var User = {
id: null,
name: null,
setId: function(id){
this.id = id;
return this;
},
setName: function(name){
this.name = name;
return this;
}
};
User
.setId(1314)
.setName(‘sven’);
var user = new User();
user.setId(1314);
user.setName(‘sven’);
`
- 合成大型类
大型类的合成和函数的提炼很像，类太大会呈现逻辑不清晰，难以了解和保护的问题。
正当的大类合成能够使类的逻辑清晰，且子模块能够不便复用。
- 活用位操作符
编程语言计算乘除的性能都不高，然而某些状况应用位操作符能够晋升乘除等运算的性能。
- 纯函数
纯函数是指不 依赖于 且不扭转 它作用域之外的变量状态的函数。
纯函数的返回值只由它调用时的参数决定，它的执行不依赖于零碎的状态（执行上下文）。
雷同的输出参数，肯定会失去雷同的输入，也就是外部不含有会 影响输入的随机变量。
不属于纯函数的特点：
- 更改文件系统
- 往数据库插入记录
- 发送一个 http 申请
- 可变数据
- 打印 /log
- 获取用户输出
- DOM 查问
- 拜访零碎状态
纯函数的作用：
- 可靠性：函数返回永远和预期统一
- 可缓存性：因为只有输出一样输入肯定一样，因而可将输出作为 key，输入作为值，应用对象缓存曾经计算的后果
- 可移植性：因为没有内部依赖，所以移植到任何环境都可正确运行
- 可测试性：不便针对函数做单元测试
- 可并行性：对一些简单计算，能够并行计算（例如应用 nodejs 多个子过程同时并行计算多个工作，进步计算速度）
利用场景：
- 工具函数最好应用纯函数
- 多平台应用的代码（nodejs、浏览器、微信小程序、native 客户端等）
- 绝对独立的性能
`var a = 1;
// 非纯函数
function sum(b) {
return a + b;
}
// 非纯函数
function sum(b) {
a = 2;
return b;
}
// 非纯函数
function sum(b) {
return b + Math.random();
}
// 纯函数
function sum (b, c) {
return b + c;
}
`
