Ecrire du code propre est ce que vous devez savoir et faire pour vous qualifier de développeur professionnel. Il n'y a aucune excuse raisonnable pour faire moins que ce que vous pouvez faire de mieux.
En esta publicación del Blog schoolofJavaScript.com, cubriremos los principios generales de codificación limpia para nombrar y usar variables y funciones, así como algunas de las mejores prácticas de codificación limpia específicas de JavaScript.
Tout d'abord, que signifie le codage propre?
Un codage propre signifie que vous écrivez d'abord le code pour vous-même pour le réviser plus tard et pour vos collègues, et non pour la machine.
Vous savez que vous travaillez sur du code propre lorsque chaque routine que vous lisez s'avère être à peu près ce que vous attendiez.
Bonnes pratiques pour un code JavaScript propre
Maintenant que nous savons à quoi chaque développeur devrait aspirer, jetons un coup d'œil aux meilleures pratiques!
Comment nommer mes variables?
Utilisez des noms qui révèlent des intentions et ne vous inquiétez pas si vous avez de longs noms de variables au lieu d'enregistrer quelques frappes.
Si vous suivez cette pratique, vos noms peuvent être recherchés, ce qui aide beaucoup lors de refactors ou simplement à la recherche de quelque chose.
// Essayez d'éviter de faire cela let d; laissez dpfg; // Au lieu de cela, vous pouvez le faire let days_para_la_deliverga; let number1;
Faites également des distinctions significatives et n'ajoutez pas de noms supplémentaires et inutiles aux noms de variables, tels que leur type (notation hongroise).
// essaie d'éviter de faire cela let stringname; laissez les utilisateurs; // Mieux vaut le changer alors laissez name; laissez les utilisateurs;
Rendez ses noms de variables faciles à prononcer, car il faut moins d'efforts à l'esprit humain pour les traiter.
Lorsque vous effectuez des révisions de code avec vos collègues développeurs, il est plus facile de se référer à ces noms.
// éviter de faire cela let pName, sName; let cntr; laissez plein = faux; if (size> 100) {full = true} // changez-le en ceci let firstName, secondName; laissez le compteur; const Max_Size = 100 // ... const isFull = size> Max_Size
En bref, ne provoquez pas de mind mapping supplémentaire avec leurs noms.
Comment écrire mes fonctions?
Vos fonctions ne doivent faire qu'une seule chose au niveau de l'abstraction.
// éviter de faire cette fonction Get_User_Route_Manager (req, res) {const {userId} = req.params // requête SQL en ligne knex ('user') .where ({id: userId}). first () .then ((user ) => res.json (user))} // essayez de rendre const nametable = 'user' const User = {getOne (userId) {return knex (tableName) .where ({id: nametable}). first ()} } // gestionnaire de routes (par exemple, server / routes / user / get.js) function Get_User_Routes_Handler (req, res) {const {userId} = req.params User.getOne (userId) .then ((user) => res. json (utilisateur))}
Une fois que vous avez correctement écrit vos fonctions, vous pouvez tester vos performances avec le profil de processeur, vous aidant ainsi à trouver les goulots d'étranglement.
Utilisez des noms longs et descriptifs
Un nom de fonction doit être un verbe ou une phrase verbale, et il doit communiquer son intention, ainsi que l'ordre et l'intention des arguments.
Un nom long et descriptif vaut bien mieux qu'un nom court et énigmatique ou un long commentaire descriptif.
// éviter de faire ça / ** * Inviter un nouvel utilisateur avec son adresse e-mail * @param {String} adresse e-mail de l'utilisateur * / function inv (user) {/ * implementation * /} // essayez de faire cette fonction inviteUser (emailaddress) {/ * la mise en oeuvre * /}
Évitez la longue liste d'arguments
Utiliza un único parámetro de objeto y la asignación de desestructuración en su lugar. También hace que el manejo de parámetros opcionales être mucho más fácil.
// Essayez de faire la gestion des fonctionsUsers (fields, include, fromDate, toDate) {/ * implementation * /} handlingUsers (['firstName', 'secondName', 'email'], ['inviteUsers'], '2016-06- 26 ',' 2016-12-18 ') // Essayez plutôt de faire cette fonction UserManagement ({fields, include, fromDate, toDate}) {/ * implementation * /} UserRegister ({fields: [' firstName ',' secondName ',' email '], inclure: [' inviteUsers '], fromDate:' 2016-06-26 ', toDate:' 2016-12-18 '})
Réduisez les effets secondaires.
Utilisez des fonctionnalités pures sans effets secondaires, chaque fois que vous le pouvez. Ils sont vraiment faciles à utiliser et à tester.
// essayez de ne pas faire cette fonction addItemToCart (panier, article, quantité = 1) {const déjàInCart = cart.get (item.id) || 0 cart.set (item.id, alreadyInCart + quantity) return cart} // faites ceci // sans modifier la fonction originale de la carte addItemToCart (cart, item, quantity = 1) {const cartCopy = new Map (cart) const alreadyInCart = cartCopy.get (item.id) || 0 cartCopy.set (item.id, alreadyInCart + quantity) return cartCopy} // ou en inversant l'emplacement de la méthode // vous pouvez vous attendre à ce que l'objet d'origine soit muté // addItemToCart (panier, article, quantité) -> cart. AddItem (item, quantité) const cart = new Map () Object.assign (cart, {addItem (item, quantity = 1) {const alreadyInCart = this.get (item.id) || 0 this.set (item.id, déjàInCart + quantité) retournez ceci}})
Organisez vos fonctions dans un fichier selon la règle de rétrogradation
Las funciones de nivel superior deben estar en los niveles superior e inferior a continuación. Hace que sea natural leer el code source.
// éviter de faire ceci // "J'ai besoin d'un nom super long" function getFullName (user) {return `$ {user.firstName} $ {user.lastName}`} function renderEmailTemplate (user) {// "ou ce" const fullName = getFullName (user) return 'Cher $ {fullName}, ...'} // Essayez de faire cette fonction renderEmailTemplate (user) {// "J'ai besoin du nom complet de l'utilisateur" const fullName = getFullName (user) return 'Cher $ {fullName}, ...'} // "J'utilise ceci pour le rendu du modèle d'e-mail" function getFullName (user) {return `$ {user.firstName} $ {user.lastName}`}
Consultation ou modification
Les fonctions doivent faire quelque chose (modifier) ou répondre à quelque chose (requête), mais pas les deux.
Tout le monde aime écrire du JavaScript différemment, que faire?
Dado que JavaScript es dinámico y está escrito de forma flexible, es especialmente propenso a errores de programmation.
Utilisez les règles métier et le style de formatage de l'entreprise.
Plus les règles sont strictes, moins il est difficile de signaler le mauvais format dans les révisions de code. Il doit couvrir des éléments tels que les noms cohérents, la taille du retrait, le placement des espaces blancs et même les points-virgules.
Pour commencer, le style JS standard est plutôt bon, mais pas assez strict à mon avis. Je peux accepter la plupart des règles du style Airbnb.
Comment écrire un joli code asynchrone?
Utilisez les promesses chaque fois que vous le pouvez.
Les promesses sont disponibles nativement à partir du nœud 4. Au lieu d'écrire des rappels imbriqués, vous pouvez avoir des appels de promesse viables.
// Évitez asyncFunc1 ((err, result1) => {asyncFunc2 (result1, (err, result2) => {asyncFunc3 (result2, (err, result3) => {console.lor (result3)})})}) / / utilise asyncFuncPromise1 () .then (asyncFuncPromise2) .then (asyncFuncPromise3) .then ((result) => console.log (result)) .catch ((err) => console.error (err))
La mayoría de las bibliotecas tienen interfaces de devolución de llamada y promesa, y prefieren la última. Incluso puede convertir las API de devolución de llamada para prometer una basada envolviéndolas con paquetes como es6-promisify .
// éviter const fs = require ('fs') function readJSON (filePath, callback) {fs.readFile (filePath, (err, data) => {if (err) {return callback (err)} try {callback (null , JSON.parse (données))} catch (ex) {callback (ex)}})} readJSON ('./ package.json', (err, pkg) => {console.log (err, pkg)}) // utilise const fs = require ('fs') const promisify = require ('es6-promisify') const readFile = promisify (fs.readFile) function readJSON (filePath) {return readFile (filePath) .then ((data) = > JSON.parse (données))} readJSON ('./ package.json') .then ((pkg) => console.log (pkg)) .catch ((err) => console.error (err)) Le La prochaine étape serait d'utiliser async / await (≥ Node 7) ou generatorscon co (≥ Node 4) pour obtenir des flux de contrôle de type synchrone pour votre code asynchrone. const request = require ('request-promise-native') function getExtractFromWikipedia (title) {return request ({uri: 'https://en.wikipedia.org/w/api.php', qs: {titres: title, action: 'query', format: 'json', prop: 'extraits', exintro: true, explaintext: true}, méthode: 'GET', json: true}) .then ((body) => Object.keys ( body.query.pages) .map ((clé) => body.query.pages [clé] .extract)) .then ((extraits) => extraits [0]) .catch ((err) => {console. error ('getExtractFromWikipedia () error:', err) throw err})} // ou utiliser la fonction asynchrone getExtractFromWikipedia (title) {let body try {body = await request ({/ * mêmes paramètres que ci-dessus * /})} catch (err) {console.error ('getExtractFromWikipedia () error:', err) throw err} const extracts = Object.keys (body.query.pages) .map ((key) => body.query.pages [key] .extract) renvoie des extraits [0]} // ou vous pouvez utiliser: const co = require ('co') const getExtractFromWikipedia = co.wrap (function * (title) {let body try {body = yield request ({/ *) mêmes paramètres que ci-dessus * /})} catch (err) {console.error ('getExtractFromWikipedia () error:', err) throw err} const extraits = Object.keys (body.query.pages) .map ((key) => body. query.pages [clé] .extract) retourne des extraits [0]}) getExtractFromWikipedia ('Robert Cecil Martin') .then ((robert) => console.log (robert))
Comment écrire du code performant?
Vous devez d'abord écrire du code propre, puis utiliser le profil pour trouver les goulots d'étranglement des performances.
N'essayez jamais d'écrire d'abord du code intelligent et performant, mais plutôt d'optimiser le code lorsque vous en avez besoin et de référencer l'impact réel au lieu de micro-benchmarks.
Cependant, il existe des scénarios simples comme l'initialisation avide de ce que vous pouvez (par exemple, les schémas joi dans les gestionnaires de route, qui seraient utilisés à chaque demande et ajouteraient une surcharge s'ils étaient recréés à chaque fois) et en utilisant un code asynchrone au lieu d'un code de verrouillage.
