Общие методы оптимизации и восстановления кода Javascript
Введение
В основном введите следующие моменты:
-
Функция уточнения
-
Объединить повторяющиеся условные фрагменты
-
Преобразование условных операторов перехода в функции
-
Разумное использование петель
-
Пусть функция завершится заранее вместо вложенных условных ветвей
-
Передавать параметры объекта вместо длинных списков параметров
-
Используйте меньше тернарных операторов
-
Разумное использование цепных вызовов
-
Разбейте большие классы
-
Отметка срабатывания рабочего положения
-
Чистая функция
- Составьте полный PDF сборник интервью по Java
Эта статья будет постоянно обновляться, и мы приветствуем добавление недостатков.
1. Уточнить функцию
выгода:
-
Избегайте больших функций.
-
Независимые функции помогают повторно использовать код.
-
Независимые функции легче перезаписать.
-
Если у независимой функции хорошее имя, она сама служит комментарием.
- Семантизация помещает несколько разделов разделенной логики в разные функции, что может сделать логику кода ясной и ясно увидеть, что делается на каждом этапе.
Пример кода:
Осознайте, чтобы получить данные, затем манипулируйте 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(); // 添加事件
}
2. Объедините повторяющиеся условные фрагменты.
Если в теле функции есть несколько операторов условного перехода, и некоторые повторяющиеся коды разбросаны внутри этих операторов условного перехода, то необходимо объединить и удалить дубликаты.
// 合并前
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 函数独立出来
};
3. Преобразуйте условные операторы перехода в функции
Сложные операторы условного перехода - важная причина, по которой программу трудно читать и понимать, и это может легко привести к огромной функции. Иногда оператор условного перехода можно преобразовать в семантические функции, чтобы сделать код более интуитивным и логически понятным.
// 根据不同季节决定打折力度
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;
};
4. Разумное использование петель
Если несколько фрагментов кода на самом деле ответственны за некоторую повторяющуюся работу, то вместо них можно использовать циклы, чтобы уменьшить объем кода.
// 判断是什么浏览器
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';
}
5. Пусть функция завершится заранее вместо вложенных условных переходов.
Позвольте функции 多出口вернуться раньше и заменить 嵌套条件分支.
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 );
}
};
6. Передавайте параметры объекта вместо длинных списков параметров.
Параметры функции слишком длинные, чтобы увеличить риск ошибок. Трудно обеспечить правильный порядок передачи, и читабельность кода также ухудшится. Постарайтесь, чтобы параметры функции не были слишком длинными. Если вы должны передать несколько параметров, рекомендуется использовать 对象вместо них.
Вообще говоря, параметры функции лучше всего不要超过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
});
7. Используйте меньше тернарных операторов.
Тернарный оператор имеет высокую производительность и меньше кода.
Но нельзя злоупотреблять тернарным оператором, мы должны использовать его в простых логических ветвях и избегать его в сложных логических ветвях.
// 简单逻辑可以使用三目运算符
var global = typeof window !== "undefined" ? window : this;
// 复杂逻辑不适合使用
var ok = isString ? (isTooLang ? 2 : (isTooShort ? 1 : 0)) : -1;
8. Разумное использование цепных вызовов.
Преимущества: цепной вызов прост в использовании, а объем кода невелик.
Недостатки: недостатком вызова цепочки является 调试不方便то, что если мы знаем, что в цепочке есть ошибка, мы должны сначала разобрать цепочку, прежде чем добавлять журналы отладки или точки останова, чтобы мы могли определить место, где возникает ошибка.
Если структура цепи относительно устойчива и ее нелегко изменить позже, можно использовать тип цепи.
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' );
9. Разделите большие классы
Декомпозиция большого класса очень похожа на уточнение функции. Если класс слишком большой, логика будет неясной, трудной для понимания и поддержки.
Разумная декомпозиция больших классов может прояснить логику класса, а подмодули можно удобно использовать повторно.
10. Отметка срабатывания рабочего положения
Производительность вычисления умножения и деления в языке программирования невысока, но в некоторых случаях использование битовых операторов может улучшить производительность таких операций, как умножение и деление.
11. Чистые функции
Чистая функция относится к функции, которая не работает, 依赖于и к 不改变состоянию переменных вне ее области видимости.
Возвращаемое значение чистой функции определяется только параметрами при ее вызове, и ее выполнение не зависит от состояния системы (контекста выполнения).
Одни и те же входные параметры обязательно будут иметь одинаковый результат, то есть нет внутренних случайных переменных, которые будут влиять на результат .
Возможности, которые не являются чистыми функциями:
-
Измените файловую систему
-
Вставить записи в базу
-
Отправьте http-запрос
-
Переменные данные
-
Печать / журнал
-
Получить ввод пользователя
-
DOM запрос
- Статус системы доступа
Роль чистых функций:
-
Надежность : возврат функции всегда соответствует ожиданиям
-
Кэшируемость : до тех пор, пока входные данные одинаковы, а выходные данные должны быть одинаковыми, входные данные могут использоваться как ключ, а выходные - как значение, а вычисленный результат можно кэшировать с помощью объекта.
-
Переносимость : поскольку нет внешней зависимости, он может работать правильно при трансплантации в любую среду.
-
Возможность тестирования: удобно для модульного тестирования функций
- Параллелизм : для некоторых сложных вычислений он может быть вычислен параллельно (например, использование нескольких дочерних процессов nodejs для одновременного вычисления нескольких задач одновременно для повышения скорости вычислений)
Сценарии применения:
-
Служебные функции лучше всего использовать чистые функции
-
Код, используемый на нескольких платформах (nodejs, браузер, апплет WeChat, собственный клиент и т. Д.)
- Относительно независимые функции составили полную версию PDF-файла Java Interview Collection.
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;
}