Métodos de reconstrucción y optimización de código común de Javascript
Introducción
Introduzca principalmente los siguientes puntos:
-
Función de refinamiento
-
Combinar fragmentos condicionales repetidos
-
Destilar declaraciones de ramas condicionales en funciones
-
Uso razonable de bucles
-
Deje que la función salga de antemano en lugar de ramas condicionales anidadas
-
Pasar parámetros de objeto en lugar de largas listas de parámetros
-
Utilice operadores menos ternarios
-
Uso razonable de llamadas en cadena
-
Desglosar clases grandes
-
Marca de operación de posición de utilización
-
Función pura
- Compile un PDF completo de la colección de entrevistas de Java
Este artículo se actualizará continuamente y será bienvenido a agregar deficiencias.
1. Refinar la función
beneficio:
-
Evite las funciones grandes.
-
Las funciones independientes ayudan a reutilizar el código.
-
Las funciones independientes son más fáciles de sobrescribir.
-
Si una función independiente tiene un buen nombre, ella misma sirve como comentario.
- La semántica coloca múltiples secciones de lógica separada en diferentes funciones, lo que puede hacer que la lógica del código sea clara y ver claramente lo que está sucediendo en cada paso.
Ejemplo de código:
Realice para obtener datos, luego opere dom para mostrar datos y finalmente agregue eventos
- Antes del refinamiento de funciones
// 逻辑都写在一起，需要将所有逻辑看完才知道这段代码是干嘛的，局部逻辑无法复用
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
});
}
});
}
- Después de refinar la función
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. Combinar fragmentos condicionales repetidos
Si hay algunas sentencias de rama condicional en el cuerpo de una función, y algún código repetitivo está disperso dentro de estas sentencias de rama condicional, entonces es necesario fusionar y eliminar duplicados.
// 合并前
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. Refina las declaraciones de ramas condicionales en funciones
Las declaraciones de bifurcaciones condicionales complicadas son una razón importante por la que el programa es difícil de leer y comprender, y puede conducir fácilmente a una función enorme. A veces, la declaración de rama condicional se puede refinar en funciones semánticas para hacer que el código sea más intuitivo y lógicamente claro.
// 根据不同季节决定打折力度
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. Uso razonable de bucles
Si varias piezas de código son realmente responsables de un trabajo repetitivo, entonces se pueden usar bucles para reducir la cantidad de código.
// 判断是什么浏览器
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. Deje que la función salga de antemano en lugar de las ramas condicionales anidadas
Deje que la función 多出口regrese antes y reemplácela 嵌套条件分支.
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. Pase parámetros de objeto en lugar de listas de parámetros largas
Los parámetros de función son demasiado largos para aumentar el riesgo de errores. Es problemático asegurarse de que la secuencia de transmisión sea correcta y la legibilidad del código también se deteriorará. Trate de asegurarse de que los parámetros de función no sean demasiado largos. Si debe pasar varios parámetros, se recomienda utilizarlos 对象en su lugar.
En general, los parámetros de función son los mejores不要超过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. Utilice operadores menos ternarios
El operador ternario tiene un alto rendimiento y menos código.
Pero no se debe abusar del operador ternario, debemos usarlo en ramas lógicas simples y evitarlo en ramas lógicas complejas.
// 简单逻辑可以使用三目运算符
var global = typeof window !== "undefined" ? window : this;
// 复杂逻辑不适合使用
var ok = isString ? (isTooLang ? 2 : (isTooShort ? 1 : 0)) : -1;
8. Uso razonable de llamadas en cadena
Ventajas: La llamada en cadena es fácil de usar y la cantidad de código es pequeña.
Desventajas: La desventaja de la llamada en cadena es 调试不方便que si sabemos que hay un error en una cadena, primero debemos desensamblar la cadena antes de agregar algunos registros de depuración o agregar puntos de interrupción, para que podamos ubicar el lugar donde ocurre el error.
Si la estructura de la cadena es relativamente estable y no es fácil de modificar posteriormente, se puede utilizar el tipo de cadena.
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. Divida las clases grandes
La descomposición de una clase grande es muy similar al refinamiento de una función. Si la clase es demasiado grande, la lógica será poco clara y difícil de entender y mantener.
La descomposición razonable de clases grandes puede aclarar la lógica de la clase y los submódulos pueden reutilizarse convenientemente.
10. Marca de operación de posición de utilización
El rendimiento del cálculo del lenguaje de programación de multiplicación y división no es alto, pero en algunos casos el uso de operadores de bits puede mejorar el rendimiento de operaciones como multiplicación y división.
11. Funciones puras
Una función pura se refiere a una función que no lo hace 依赖于y al 不改变estado de las variables fuera de su alcance.
El valor de retorno de una función pura solo está determinado por los parámetros cuando se llama, y su ejecución no depende del estado del sistema (contexto de ejecución).
Los mismos parámetros de entrada definitivamente obtendrán la misma salida, es decir, no hay variables aleatorias internas que afecten la salida .
Características que no son funciones puras:
-
Cambiar el sistema de archivos
-
Insertar registros en la base de datos
-
Envía una solicitud http
-
Datos variables
-
Imprimir / registrar
-
Obtener información del usuario
-
Consulta DOM
- Estado del sistema de acceso
El papel de las funciones puras:
-
Fiabilidad : el rendimiento de la función siempre es coherente con las expectativas
-
Capacidad de almacenamiento en caché : siempre que la entrada sea la misma, la salida debe ser la misma, por lo que la entrada se puede usar como clave y la salida como valor, y el resultado calculado se puede almacenar en caché usando el objeto
-
Portabilidad : debido a que no existe dependencia externa, puede funcionar correctamente cuando se trasplanta a cualquier entorno
-
Capacidad de prueba: conveniente para pruebas unitarias de funciones
- Paralelismo : para algunos cálculos complejos, se puede calcular en paralelo (por ejemplo, utilizando múltiples procesos secundarios de nodejs para calcular múltiples tareas en paralelo al mismo tiempo para mejorar la velocidad de cálculo)
Escenarios de aplicación:
-
Las funciones de utilidad son mejores para usar funciones puras
-
Código utilizado en múltiples plataformas (nodejs, navegador, applet de WeChat, cliente nativo, etc.)
- Función relativamente independiente compiló una versión completa del PDF de la Colección de entrevistas de Java
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;
}