Este artículo participó en la actividad semanal de lectura de código fuente iniciada por la cuenta pública @Ruo Chuan Vision , haga clic para obtener detalles para participar juntos. Este es el número 36 de la lectura del código fuente .
Encontraremos escenarios en los que se usa un objeto pero no se requiere una de las propiedades del objeto. Como persona con experiencia en el desarrollo y uso de js, cuando nos preguntamos cómo eliminar las propiedades de un objeto, todos pensamos en eliminar. Pero después de eliminar, no existe tal propiedad en el objeto. Entonces la solución es: copiar todas las propiedades del objeto que se usan, pero no el (o los) que no se usan. Tal oración corresponde a muchas líneas en el código. ¿No sería muy feliz si hubiera un método de herramienta escrito para que lo usemos? ¡Omit.js lo hará! Aprendamos juntos su uso y código fuente~
1. Preparativos
- código de clonación
https://github.com/benjycui/omit.js
- ¿Sabes qué es omitir?
es una función de utilidad para crear una copia superficial de un objeto con algunos campos eliminados.
var omit = require('omit.js');
omit({ name: 'Benjy', age: 18 }, [ 'name' ]); // => { age: 18 }
- Fuera del número: la primera vez que encontré la palabra omitir, realmente no sé lo que significa, el significado se muestra en la siguiente figura:
Puedes leer este artículo ¿Qué tienen en común abolir, cancelar, eliminar y omitir? ¿Puedes ordenarlos en orden para obtener más explicaciones léxicas? Echemos un vistazo al código fuente de omit:
2. Interpretación del código fuente
function omit(obj, fields) {
// eslint-disable-next-line prefer-object-spread
const shallowCopy = Object.assign({}, obj);
for (let i = 0; i < fields.length; i += 1) {
const key = fields[i];
delete shallowCopy[key];
}
return shallowCopy;
}
export default omit;
Primero use Object.assign para hacer una copia superficial del objeto de origen obj. (Nota: pasará el objeto de forma predeterminada en este bloque, sin verificación de parámetros. Hay una falta de try...catch o la lógica de manejo de excepciones correspondiente)
Recorra la matriz de campos y elimine las propiedades del objeto una por una. (Nota: creo que no es bueno obligar a los archivos a ser una matriz. A veces queremos eliminar un atributo cuando lo usamos. Es mejor admitir cadenas. Si es una cadena, elimine esta cadena como un atributo .)
Verifiquemos que Object.assign sea una copia superficial, vea la siguiente figura:
如上图所示，使用Object.assign将obj的属性复制给obj2, 其中obj的属性c是数组，属于引用类型的数据。当修改obj时，我们发现obj2的c属性也发生变化了。所以Object.assign()方法是一个对象的浅拷贝方法。omit的源码可以说非常简单，但是package.json中的一些npm包还是挺有学习价值的，我们来简单了解一下：
3.npm包积累
- father: Library toolkit based on rollup, docz, storybook, jest, prettier and eslint。
在omit.js的package.json文件中的好几个 npm script都有用到father,例如：
"start": "father doc dev --storybook",
"build": "father doc build --storybook",
"compile": "father build",
"gh-pages": "father doc deploy",
能够看到father又能打包编译又能生成文档，下图是执行run start命令的执行结果：
- storybook： Storybook is an open source tool for building UI components and pages in isolation. It streamlines UI development, testing, and documentation。（引自：storybook.js.org/）
我们执行run start之所以能够把readme.md显示在浏览器中就又storybook的功劳。
- assert: The assert module from Node.js, for the browser. 所以使用方法还是要看nodejs.org/api/assert.…
在omit.js的tests/index.test.js中使用assert进行测试用例的书写：
import assert from 'assert';
import omit from '../src';
describe('omit', () => {
it('should create a shallow copy', () => {
const benjy = { name: 'Benjy' };
const copy = omit(benjy, []);
assert.deepEqual(copy, benjy);
assert.notEqual(copy, benjy);
});
it('should drop fields which are passed in', () => {
const benjy = { name: 'Benjy', age: 18 };
assert.deepEqual(omit(benjy, ['age']), { name: 'Benjy' });
assert.deepEqual(omit(benjy, ['name', 'age']), {});
});
});
- umi-fabric : una colección de archivos de configuración que incluyen más bonito, eslint, stylelint
El contenido del archivo .eslintrc.js de omit.js es el siguiente:
const base = require('@umijs/fabric/dist/eslint');
module.exports = {
...base,
rules: {
...base.rules,
'no-template-curly-in-string': 0,
'prefer-promise-reject-errors': 0,
'react/no-array-index-key': 0,
'react/sort-comp': 0,
'import/no-named-as-default': 0,
'import/no-named-as-default-member': 0,
},
};
Se puede ver que umijs/fabric proporciona algunas reglas, y puede complementar sus propias reglas o anular algunas reglas cuando las usa.
- np : una mejor publicación de npm
Ayuda con la publicación de paquetes nmp, utilizada en omit.js así:
"prepublishOnly": "npm run compile && np --yolo --no-publish",
Primero ejecute compile (en realidad father-build), y luego use np.La siguiente figura es el resultado de la operación:
Indudablemente falló, con el permiso de etiquetas push de git.
- rc-tools : herramientas fuera de línea para el componente de reacción
No veo donde es útil.
Hasta ahora, omit.js está terminado, ¿cómo se puede usar en nuestro proyecto? Vea abajo:
4. Aprende a aplicar
Creo que a menudo escribo eliminar en el código, como el siguiente código:
try {
const param = JSON.parse(JSON.stringify(this.form))
delete param.lonLat
await createCarStore({
...param,
});
this.$message.success('提交成功！');
this.$router.go(-1);
} catch (error) {
this.$message.error(error.data.remark);
}
Usando omit.js se puede escribir así:
try {
const param = omit(this.form, ['lonLat'])
await createCarStore({
...param,
});
this.$message.success('提交成功！');
this.$router.go(-1);
} catch (error) {
this.$message.error(error.data.remark);
}
Dos líneas se convierten en una sola, ¿por qué no hacerlo?
5. Resumen
Después de aprender el código fuente de este número, el autor tiene las siguientes ganancias:
- Revisó el método Object.assgin y profundizó la comprensión de la copia profunda y superficial
- Aprenda sobre el uso de paquetes npm como father y storybook
- Aprendió a publicar paquetes npm
- Puede usar omit.js para optimizar el código del proyecto
Estoy participando en el reclutamiento del programa de firma de creadores de la Comunidad Tecnológica de Nuggets, haga clic en el enlace para registrarse y enviar .