随着项目的发展,JavaScript代码量越来越大,函数越来越臃肿。这时候,我们需要进行函数重构,使代码更加简洁清晰。
首先,我们可以将一个函数拆分成多个小函数。举个例子:
function filterArray(arr) {
let result = [];
for(let i = 0; i < arr.length; i++){
if(arr[i] > 0){
result.push(arr[i]);
}
}
return result;
}
以上函数可以拆成两个函数,如下:
function filterArray(arr) {
let result = [];
result = pushPositiveNum(result, arr);
return result;
}
function pushPositiveNum(result, arr) {
for (let i = 0; i < arr.length; i++) {
if (arr[i] > 0) {
result.push(arr[i]);
}
}
return result;
}
从上面的代码可以看出,拆分后的函数更加易读易懂,可维护性更好。
其次,我们可以利用函数参数的默认值来减少冗余代码。举个例子:
function sendEmail(address, subject, body, cc, bcc, attachment) {
address = typeof address !== 'undefined' ? address : 'no-reply@example.com';
subject = typeof subject !== 'undefined' ? subject : '(No subject)';
body = typeof body !== 'undefined' ? body : '';
cc = typeof cc !== 'undefined' ? cc : '';
bcc = typeof bcc !== 'undefined' ? bcc : '';
attachment = typeof attachment !== 'undefined' ? attachment : '';
// send email
}
以上函数可以改写成如下形式:
function sendEmail(address='no-reply@example.com', subject='(No subject)', body='', cc='', bcc='', attachment='') {
// send email
}
从上面的代码可以看出,使用默认值可以减少大量的冗余代码。
再次,我们可以使用箭头函数简化代码。举个例子:
const square = function(x) {
return x * x;
}
我们可以改写成箭头函数的形式:
const square = x =>x * x;
箭头函数可以简化代码,并且可以避免this指针的问题。
最后,我们可以使用高阶函数来避免重复代码。举个例子:
function htmlEscape(str) {
return String(str)
.replace(/&/g, '&')
.replace(/"/g, '"')
.replace(/'/g, ''')
.replace(//g, '>');
}
function cssEscape(str) {
return String(str)
.replace(/\\/g, '\\\\')
.replace(/"/g, '\\"')
.replace(/\n/g, '\\n')
.replace(/\r/g, '\\r')
.replace(/\t/g, '\\t')
.replace(/\f/g, '\\f')
.replace(/'/g, "\\'");
}
以上函数可以改写成如下形式:
function escape(str, callback) {
return callback(String(str));
}
const htmlEscape = str =>{
return escape(str, s =>s.replace(/&/g, '&')
.replace(/"/g, '"')
.replace(/'/g, ''')
.replace(//g, '>'));
}
const cssEscape = str =>{
return escape(str, s =>s.replace(/\\/g, '\\\\')
.replace(/"/g, '\\"')
.replace(/\n/g, '\\n')
.replace(/\r/g, '\\r')
.replace(/\t/g, '\\t')
.replace(/\f/g, '\\f')
.replace(/'/g, "\\'"));
}
从上面的代码可以看出,使用高阶函数可以避免重复代码,使代码更加简洁。
通过以上几种方法,我们可以使函数更加清晰简洁,提高代码的可维护性。