Comment écrire du bon JavaScript

Avant-propos

Dans le travail réel, nous devrions souvent voir du code qui n'a aucun problème de fonctionnement, mais dont le style de codage et les spécifications sont très médiocres. Cela fait souvent peur aux gens de continuer à lire et affecte même l'humeur du lecteur pour la journée. Ces codes sont non seulement difficiles à lire, mais également difficiles à maintenir. Ils sont généralement écrits par des programmeurs débutants qui viennent de commencer à programmer, ou par des programmeurs expérimentés qui travaillent depuis plusieurs années. Par conséquent, le but de cet article est d'aider les apprenants JavaScript qui n'ont pas développé un bon style de codage et qui ne connaissent pas les normes de codage correspondantes à améliorer leur image de codage.

Image de codage

Ci-dessus j'ai proposé le concept d'image codée Je pense personnellement :

编码形象 = 编码风格 +　编码规范

. Une bonne image de codage équivaut à un jeune homme bien habillé. Pour les programmeurs, c'est le moyen le plus direct et le plus simple pour que leurs pairs comprennent vos excellentes capacités.

Jetons un coup d'œil à une mauvaise image de codage :

//打个招呼
function func(){
    var age=18,sex='man';
    var greeting='hello';
    if(age<=18&&sex==&#39;man&#39;){
        console.log(greeting+&#39;little boy&#39;)
    }

    ...
}
func()

Le code ci-dessus est entièrement regroupé, manque de connaissance des normes et l'expérience de lecture est très mauvaise à supporter.

Regardons une bonne image de code :

// 打个招呼
function greetFn() {
    var age = 18,
        sex = 'man',
        greeting = 'hello';

    if (age <= 18 && sex === &#39;man&#39;) {
        console.log(greeting + &#39;little boy&#39;);
    }

    ...
};

greetFn();

Le code ci-dessus vous semble-t-il plus confortable ?

On voit qu'il est crucial de développer une bonne image de codage, et cet article explique principalement l'image de codage basée sur JavaScript, c'est-à-dire le style de codage et les spécifications de codage basés sur JavaScript.

Alors, qu’est-ce que le style de codage, qu’est-ce que la spécification de codage et quelle est la différence entre les deux ?

Style de codage

Tout d’abord, puisque le style de codage est un style, il n’y a pas de bien ou de mal. Tout comme tout le monde s’habille différemment, certaines personnes s’habillent de manière plus appropriée et d’autres de manière plus décontractée.

Dans le style de codage JavaScript, il existe également un style relativement décent. Surtout dans le développement d'équipe, nous ne pouvons pas écrire notre propre style à volonté.

Voici quelques styles de codage aléatoires et comparez-les avec de bons styles de codage.

​1. Commentaires raisonnables

// 不推荐的写法
var name = '劳卜';//代码和注释之间没有间隔

if (name) {
    /*
     *注释之前无空行
     *星号后面无空格
     */
}

// 推荐的写法
var name = '劳卜'; // 代码和注释之间有间隔

if (name) {

    /*
     * 注释之前有空行
     * 星号后面有空格
     */
}

2. Intervalles raisonnables

// 不推荐的写法
var name='劳卜'; // 等号和两侧之间没有间隔

// if块级语句间没有间隔
if(name){
    console.log('hello');
}

// 推荐的写法
var name = '劳卜'; // 等号和两侧之间有间隔

// if块级语句间有间隔
if (name) {
    console.log('hello');
}

3. Indentation raisonnable

// 不推荐的写法：没有合理缩进
function getName() {
console.log('劳卜'); 
}

// 推荐的写法：合理缩进
function getName() {
    console.log('劳卜');
}

4. Lignes vierges raisonnables

// 不推荐的写法: 代码功能块之间没有空行
function getName() {
    var name = '劳卜';
    if (name) {
        console.log('hello');
    }
}

// 推荐的写法：代码功能块之间有空行
function getName() {
    var name = '劳卜';

    if (name) {
        console.log('hello');
    }
}

5. Dénomination raisonnable

// 不推荐的写法
var getName = '劳卜'; // 变量命名前缀为动词

// 函数命名前缀为名词
function name() {
   console.log('hello');
}

// 推荐的写法
var name = '劳卜'; // 变量命名前缀为名词

// 函数命名前缀为动词
function getName() {
   console.log('hello');
}

6. Déclaration raisonnable

// 不推荐的写法：函数在声明之前使用
getName(); 

function getName() {
    console.log('hello');
}

// 推荐的写法：函数在声明之后使用
function getName() {
    console.log('hello');
}

getName();

7. Fin raisonnable

// 不推荐的写法：没有使用分号结尾
var name = '劳卜' 

var getName = function() {
    console.log('hello')
}

// 推荐的写法：使用分号结尾
var name = '劳卜'; 

var getName = function() {
    console.log('hello');
};

Ce qui précède répertorie principalement 7 exemples de styles de codage courants à des fins de comparaison. Il n'y a pas de bon ou de mauvais entre la méthode d'écriture recommandée et la méthode d'écriture non recommandée. C'est simplement que la méthode d'écriture recommandée est plus facile à lire et à maintenir. pour le développement de l'équipe et est également l'incarnation d'une bonne image de codage.

Spécifications de codage

Concernant les normes de codage, puisqu’il s’agit de normes, nous devons les rédiger selon certaines règles. L'écriture aléatoire de code qui viole les normes de codage peut entraîner des erreurs de programme et des bogues potentiels. Il doit donc être plus rigoureux que le style de codage, et certaines personnes incluront le style de codage dans les normes de codage.

Voici quelques exemples de codes courants :

​1. Paramètres de comparaison

// 不推荐的写法：==和!=比较时会进行类型转换，应尽量避免使用
var num = 123;

if (num == '123') {
    console.log(num);
} else if (num != '321') {
    console.log('321');
}

// 推荐的写法：使用===和!==来进行比较
var num = 123;

if (num === '123') {
    console.log(num);
} else if (num !== '321') {
    console.log('321');
}

2. Enveloppez la déclaration if

// 不推荐的写法：if语句不用大话号包裹会出现潜在bug
var num = 123;

if (num === '123')
    console.log(num);

// 推荐的写法：if语句用大话号包裹
var num = 123;

if (num === '123') {
    console.log(num);
}

3. Utilisez eval avec prudence

// 不推荐的写法：应避免使用eval，不安全，非常耗性能（一次解析成js语句，一次执行）
var json = '{"name": "劳卜", "func": alert("hello")}';

eval('(' + json + ')'); // 弹出“hello”

// 推荐的写法
var json = '{"name": "劳卜", "func": alert("hello")}';

JSON.parse(json); // 校验报错

4. Type de jugement

// 不推荐的写法：用typeof来判断构造函数创建的对象
var str = new String('劳卜'); 

console.log(typeof str); // 'object'

// 推荐的写法：用instanceof来判断构造函数创建的对象
var str = new String('劳卜'); 

console.log(str instanceof String); // true

5. Détecter les attributs

// 不推荐的写法：使用undefined和null来检测一个属性是否存在
if (obj['name'] !== undefined) {
    console.log('name属性存在'); // 若obj.name为undefined时则会导致判断出错
}

if (obj['name'] !== null) {
    console.log('name属性存在'); // 若obj.name为null时则会导致判断出错
}

// 推荐的写法：使用in运算符来检测对象属性是否存在，使用hasOwnProperty方法来检测不包含原型链上的对象属性是否存在
if ('name' in obj) {
    console.log('name属性存在');
}

if (obj.hasOwnProperty('name')) {
    console.log('name属性存在');
}

Ce qui précède répertorie principalement 5 exemples de normes de codage courantes. Normaliser raisonnablement votre propre code peut réduire considérablement les coûts de maintenance inutiles et les risques potentiels de bogues doivent le garder à l'esprit.

Conclusion

"Les programmes sont écrits pour que les gens puissent les lire, et ils ne sont exécutés qu'occasionnellement par des ordinateurs." Nous ne pouvons pas détruire notre propre image de code juste pour une commodité temporaire. Cela causerait des problèmes inutiles aux autres et à l'ensemble du projet.

Le contenu de cet article est référencé dans le livre « Writing Maintenable JavaScript ».

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!