Wie schreibe ich gutes JavaScript?

Vorwort

In der tatsächlichen Arbeit sollten wir häufig Code sehen, der keine Funktionsprobleme aufweist, aber einen sehr schlechten Codierungsstil und eine sehr schlechte Spezifikation aufweist. Dies macht den Leuten oft Angst, weiterzulesen, und beeinträchtigt sogar die Stimmung des Lesers für den Tag. Diese Codes sind nicht nur schwer zu lesen, sondern auch schwer zu warten. Sie werden normalerweise von Programmieranfängern geschrieben, die gerade mit dem Programmieren begonnen haben, oder von erfahrenen Programmierern, die bereits seit mehreren Jahren arbeiten. Der Zweck dieses Artikels besteht daher darin, JavaScript-Lernenden, die keinen guten Codierungsstil entwickelt haben und sich der entsprechenden Codierungsstandards nicht bewusst sind, dabei zu helfen, ihr Codierungsbild zu verbessern.

Codierungsbild

Oben habe ich das Konzept des codierten Bildes vorgeschlagen:

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

Ein gutes Programmierbild entspricht einem gut gekleideten jungen Mann. Für Programmierer ist dies die direkteste und einfachste Möglichkeit, Ihre hervorragenden Fähigkeiten zu verstehen.

Schauen wir uns ein Bild mit schlechter Codierung an:

//打个招呼
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()

Der obige Code ist zusammengedrängt, es mangelt an Bewusstsein für Standards und das Leseerlebnis ist sehr schlecht. Es ist schwer, ihn anzusehen.

Schauen wir uns ein gutes Codebild an:

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

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

    ...
};

greetFn();

Fühlt sich der obige Code komfortabler an?

Es ist ersichtlich, dass es von entscheidender Bedeutung ist, ein gutes Codierungsbild zu entwickeln. In diesem Artikel wird hauptsächlich das auf JavaScript basierende Codierungsbild erläutert, dh der JavaScript-basierte Codierungsstil und die Codierungsspezifikationen.

Was ist also ein Codierungsstil, was ist eine Codierungsspezifikation und was ist der Unterschied zwischen den beiden?

Codierungsstil

Da der Codierungsstil ein Stil ist, gibt es zunächst kein Richtig oder Falsch. So wie sich jeder anders kleidet, kleiden sich manche Menschen angemessener und manche eher leger.

Auch im JavaScript-Codierungsstil gibt es einen relativ anständigen Stil. Insbesondere in der Teamentwicklung können wir unseren eigenen Stil nicht nach Belieben schreiben.

Hier sind einige zufällige Codierungsstile und vergleichen sie mit guten Codierungsstilen.

1. Angemessene Kommentare

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

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

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

if (name) {

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

​2. Angemessene Intervalle

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

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

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

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

3. Angemessener Einzug

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

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

4. Angemessene Leerzeilen

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

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

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

5. Angemessene Benennung

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

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

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

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

6. Begründete Erklärung

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

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

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

getName();

7. Angemessenes Ende

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

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

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

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

Oben werden hauptsächlich 7 Beispiele für gängige Codierungsstile zum Vergleich aufgeführt. Es gibt kein Richtig oder Falsch zwischen der empfohlenen und der nicht empfohlenen Schreibmethode. Die empfohlene Schreibmethode ist lediglich besser zu lesen und zu pflegen für die Teamentwicklung und ist auch die Verkörperung eines guten Coding-Images.

Codierungsspezifikationen

Da es sich bei Codierungsstandards um Standards handelt, sollten wir sie nach bestimmten Regeln schreiben. Das zufällige Schreiben von Code, der gegen Codierungsstandards verstößt, kann zu Programmfehlern und potenziellen Bugs führen. Daher sollte er strenger sein als der Codierungsstil, und einige Leute beziehen den Codierungsstil in die Codierungsstandards ein.

Hier sind einige gängige Beispielcodes:

​1. Vergleichsparameter

// 不推荐的写法：==和!=比较时会进行类型转换，应尽量避免使用
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. Umschließen Sie die if-Anweisung

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

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

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

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

3. Verwenden Sie eval mit Vorsicht

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

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

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

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

4. Art der Beurteilung

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

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

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

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

5. Attribute erkennen

// 不推荐的写法：使用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属性存在');
}

Oben sind hauptsächlich fünf Beispiele für gängige Codierungsstandards aufgeführt. Durch die angemessene Standardisierung Ihres eigenen Codes können unnötige Wartungskosten und potenzielle Fehlerrisiken erheblich reduziert werden.

Fazit

„Programme werden so geschrieben, dass sie von Menschen gelesen werden können, und sie werden nur gelegentlich von Computern ausgeführt.“

Der Inhalt dieses Artikels basiert auf dem Buch „Writing Maintainable JavaScript“.

Das obige ist der detaillierte Inhalt vonWie schreibe ich gutes JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!