Machen Sie Ihre JavaScript-Codierung standardisierter

In der tatsächlichen Arbeit sollten wir oft Code sehen, der keine Probleme mit der Funktion hat, aber einen sehr schlechten Codierungsstil und Spezifikationen aufweist. Dies führt oft dazu, dass sich die Leute nicht mehr trauen, zu lesen, und beeinträchtigt sogar das Gefühl des Lesers. Der Zweck dieses Artikels besteht darin, den JavaScript-Lernenden, die keinen guten Codierungsstil entwickelt haben und sich der entsprechenden Codierungsstandards nicht bewusst sind, dabei zu helfen, ihr Codierungsbild zu verbessern.

Vorwort

Bei der tatsächlichen Arbeit sollten wir oft Code sehen, der keine Probleme mit der Funktion hat, aber einen sehr schlechten Codierungsstil und Spezifikationen aufweist Angst davor, weiterzulesen, und kann sogar die Stimmung des Lesers für den Tag beeinträchtigen. Diese Codes sind nicht nur schwer zu lesen, sondern auch schwer zu warten. Sie werden normalerweise von Anfä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

Ich persönlich denke:

Codierungsbild = Codierungsstil + Codierungsstandards

Ein gutes Codierungsbild ist gleichbedeutend mit einem gut gekleideten jungen Mann. Für Programmierer ist dies der direkteste und einfachste Weg für Kollegen, Ihre hervorragenden Fähigkeiten zu verstehen.

Werfen wir einen Blick auf ein schlechtes Codierungsbild:

//打个招呼
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 vollständig zusammengeschrumpft, es fehlt an Bewusstsein für Standards und das Leseerlebnis ist sehr schlecht es anzusehen.

Sehen 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 angenehmer an?

Es ist ersichtlich, dass die Entwicklung eines guten Codierungsbildes von entscheidender Bedeutung ist. In diesem Artikel wird hauptsächlich das auf JavaScript basierende Codierungsbild erläutert, dh der JavaScript-basierte Codierungsstil und die Codierungsspezifikationen.

Was ist also der Codierungsstil, was ist die 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.

Im JavaScript-Codierungsstil gibt es auch 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. AngemesseneHinweise

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

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

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

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

2

// 不推荐的写法
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. Vernünftige Aussage

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

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

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

getName();

7. Vernünftiges Ende

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

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

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

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

Oben sind hauptsächlich 7 Beispiele für gängige Codierungsstile zum Vergleich aufgeführt. Es gibt kein Richtig oder Falsch bei der empfohlenen Schreibmethode und der nicht empfohlenen Schreibmethode, es handelt sich lediglich um die empfohlene Schreibmethode Es ist einfacher zu lesen und zu warten, besser für die Teamentwicklung geeignet und verkörpert auch ein gutes Codierungsbild.

Codierungsspezifikationen

Da es sich bei Codierungsspezifikationen um Spezifikationen 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.

Im Folgenden sind einige gängige Beispielcodes aufgeführt:

1. Parameter vergleichen

// 不推荐的写法：==和!=比较时会进行类型转换，应尽量避免使用
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. Wrap 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. Bestimmen Sie den Typ

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

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

5. Erkennen Sie das Attribut

// 不推荐的写法：使用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 5 Beispiele für gängige Codierungsstandards aufgeführt. Durch eine angemessene Standardisierung Ihres eigenen Codes können unnötige Wartungskosten und potenzielle Fehlerrisiken erheblich reduziert werden JavaScript-Lernende sollten dies im Hinterkopf behalten.

Fazit

„Programme sind so geschrieben, dass sie von Menschen gelesen werden können, und sie werden nur gelegentlich von Computern ausgeführt.“ Bequemlichkeitsbild, das unnötige Probleme für andere und das gesamte Projekt verursachen kann.

Das obige ist der detaillierte Inhalt vonMachen Sie Ihre JavaScript-Codierung standardisierter. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!