JavaScript를 요약한 공통 코드 작성 사양

javascript 코드 사양

코딩 사양 우리는 "할 수 있다고 해서 반드시 해야 하는 것은 아니다"라는 고대 원칙을 따라야 합니다.

전역 네임스페이스 오염

항상 독립적인 모듈을 구성하려면 즉시 함수 표현식으로 코드를 래핑하세요.

권장하지 않음

var x = 10,
    y = 100;
console.log(window.x + ' ' + window.y);

권장

;(function(window){
    'use strict';
    var x = 10,
        y = 100;
    console.log(window.x + ' ' + window.y);
}(window));

기능 즉시 실행

에서 즉시 실행 함수에서 전역 변수를 사용하는 경우에는 함수의 함수 몸체가 바로 실행될 때 변수를 통해 함수 몸체를 호출할 수 있다. 어느 정도 프로그램 성능을 향상시킬 수 있습니다.

그리고

즉시 실행 함수의 형식 매개변수 마지막 위치에 undef를 추가해야 합니다. 이는 undef의 값이 변경되면 undef를 읽고 쓸 수 있기 때문입니다. 전역 위치에서는 코드가 기한이 지난 결과를 얻지 못할 수 있습니다.

병합 시 다른 사람 코드의 불규칙성으로 인해 자신의 코드에 영향을 주지 않도록

함수 즉시 실행의 시작과 끝 부분에 세미콜론을 추가하는 것도 좋습니다

권장하지 않음

(function(){
    'use strict';
    var x = 10,
        y = 100,
        c,
        elem=$('body');
    console.log(window.x + ' ' + window.y);
    $(document).on('click',function(){

    });
    if(typeof c==='undefined'){
        //你的代码
    }
}());

권장

;(function($,window,document,undefined){
    'use strict';
    var x = 10,
        y = 100,
        c,
        elem=$('body');
    console.log(window.x + ' ' + window.y);
    $(document).on('click',function(){

    });
    if(typeof c==='undefined'){
        //你的代码
    }
}(jQuery,window,document));

엄격 모드

ECMAScript 5 엄격 모드는 전체 스크립트에서 사용할 수 있습니다. 단일 방법 내에서 활성화됩니다. 다양한 자바스크립트 컨텍스트에 따라 더욱 엄격한 오류 검사를 수행합니다. 또한 엄격 모드는 JavaScript 코드가 더 강력하고 더 빠르게 실행되도록 보장합니다.

엄격 모드는 향후 도입될 가능성이 있는 예약어의 사용을 방지합니다.

스크립트에서 엄격 모드를 활성화해야 하며, 가급적이면 독립형 즉시 함수에서 활성화해야 합니다. 스크립트의 첫 번째 줄에 사용하지 마십시오. 그러면 모든 스크립트에서 엄격 모드가 활성화됩니다. 이로 인해 일부 타사 라이브러리에 문제가 발생할 수 있습니다.

권장하지 않음

'use strict';
(function(){

}());

권장

(function(){
    'use strict';
}());

변수 선언

모든 변수 선언에 대해 Var var를 지정하지 않으면 strict 모드에서 오류가 보고됩니다. 동일한 범위의 변수는 가능한 한 var로 선언해야 하며, 여러 변수는 ","로 구분해야 합니다.

권장하지 않음

function myFun(){
    x=5;
    y=10;
}

완전히 권장하지 않음

function myFun(){
    var x=5;
    var y=10;
}

권장

function myFun(){
    var x=5,
        y=10;
}

유형 판단과 함께 비교 판단 사용

판단 과정에서 JavaScript의 강제 유형 변환으로 인해 발생하는 문제를 방지하려면 항상 === 정확한 비교 연산자를 사용하세요.

=== 연산자를 사용하는 경우 비교의 양쪽이 동일한 유형이어야 유효합니다.

권장하지 않음

(function(w){
  'use strict';

  w.console.log('0' == 0); // true
  w.console.log('' == false); // true
  w.console.log('1' == true); // true
  w.console.log(null == undefined); // true

  var x = {
    valueOf: function() {
      return 'X';
    }
  };

  w.console.log(x == 'X');//true

}(window.console.log));

권장

(function(w){
  'use strict';

  w.console.log('0' === 0); // false
  w.console.log('' === false); // false
  w.console.log('1' === true); // false
  w.console.log(null === undefined); // false

  var x = {
    valueOf: function() {
      return 'X';
    }
  };

  w.console.log(x === 'X');//false

}(window));

변수에 값을 할당할 때의 논리연산

논리 연산자 || 및 &&를 사용하여 부울 값을 반환할 수도 있습니다. 피연산자가 부울이 아닌 객체인 경우 각 표현식은 왼쪽에서 오른쪽으로 평가됩니다. 이 작업을 기반으로 결국 표현식이 항상 반환됩니다. 이는 변수에 값을 할당할 때 코드를 단순화하는 데 사용할 수 있습니다.

권장하지 않음

if(!x) {
  if(!y) {
    x = 1;
  } else {
    x = y;
  }
}

권장

x = x || y || 1;

세미콜론

암시적 코드 중첩이 발생할 수 있으므로 항상 세미콜론을 사용하세요. 미묘한 문제를 일으킵니다. 물론 이러한 문제를 근본적으로 제거해야 합니다[1]. 다음 예는 세미콜론 누락의 위험성을 보여줍니다.

// 1.
MyClass.prototype.myMethod = function() {
  return 42;
}  //这里没有分号

(function() {

})();

 //2.
var x = {
  'i': 1,
  'j': 2
}  // 这里没有分号
//我知道这样的代码你可能永远不会写，但是还是举一个例子
[ffVersion, ieVersion][isIE]();

 // 3.
var THINGS_TO_EAT = [apples, oysters, sprayOnCheese]  // 这里没有分号

-1 == resultOfOperation() || die();

오류 결과

1. JavaScript 오류 - 처음에 42를 반환한 함수는 두 번째에 있었습니다. 함수에서 매개변수가 호출에 전달된 다음 숫자 42도 "호출"되어 오류가 발생합니다.

2. 실제 환경에서의 호출은 xffVersion, ieVersion()과 같기 때문에 80%의 경우 '정의되지 않은 속성이 없습니다'라는 오류 메시지를 받게 됩니다.

3. die는 항상 호출됩니다. 배열에서 1을 뺀 결과는 NaN이므로 어떤 것과도 같지 않습니다(resultOfOperation이 NaN을 반환하는지 여부에 관계 없음). 그래서 최종 결과는 die()가 실행된 후 얻은 값이 THINGS_TO_EAT에 할당된다는 것입니다.

문 블록 내에서 함수 선언

내에서 함수를 선언하지 마십시오. ECMAScript 5의 엄격 모드에서는 불법인 구문 블록입니다. 함수 선언은 범위의 최상위 수준에 있어야 합니다. 그러나 명령문 블록 내에서 함수 선언은 함수 표현식으로 변환되어 변수에 할당될 수 있습니다.

권장하지 않음

if (x) {
  function foo() {}
}

권장

if (x) {
  var foo = function() {};
}

평가 기능을 사용하지 마세요

eval( )은 혼란스러울 뿐만 아니라 컨텍스트는 여전히 위험합니다. 이보다 더 좋고, 명확하고, 안전한 코드를 작성하는 다른 방법이 항상 있으므로 eval 함수를 사용하지 마십시오.

배열 및 객체 리터럴

1. 배열 및 객체 리터럴을 사용하여 배열 및 객체 생성자를 대체합니다. 배열 생성자를 사용하면 인수에 실수를 하기 쉽습니다.

권장하지 않음

//数组长度3
var a1 = new Array(x1, x2, x3);
//数组长度2
var a2 = new Array(x1, x2);

//如果x1是一个自然数，那么它的长度将为x1
//如果x1不是一个自然数，那么它的长度将为1
var a3 = new Array(x1);

var a4 = new Array();

이 때문에 코드 매개변수를 2에서 1로 변경하면 배열의 길이가 예기치 않게 변경될 가능성이 높습니다. 이와 같은 이상한 상황을 피하려면 항상 읽을 수 있는 배열 리터럴을 사용하세요.

추천

var a = [x1, x2, x3];
var a2 = [x1, x2];
var a3 = [x1];
var a4 = [];

2.对象构造器不会有类似的问题，但是为了可读性和统一性，我们应该使用对象字面量。

不推荐

var o = new Object();

var o2 = new Object();
o2.a = 0;
o2.b = 1;
o2.c = 2;
o2['strange key'] = 3;

推荐

var o = {};
var o2 = {
  a: 0,
  b: 1,
  c: 2,
  'strange key': 3
};

三元条件判断（if 的快捷方法）

用三元操作符分配或返回语句。在比较简单的情况下使用，避免在复杂的情况下使用。没人愿意用 10 行三元操作符把自己的脑子绕晕。

不推荐

if(x === 10) {
  return 'valid';
} else {
  return 'invalid';
}

推荐

return x === 10 ? 'valid' : 'invalid';

for循环

使用for循环过程中，数组的长度，使用一个变量来接收，这样有利于代码执行效率得到提高，而不是每走一次循环，都得重新计算数组长度

不推荐

for(var i=0;i<arr.length,i++){

}

推荐

for(var i=0,len=arr.length;i<len,i++){

}

重复的dom操作

重复的dom操作，使用一个变量来进行接收很有必要，而不是频繁的去操作dom树，这对性能与代码的整洁及易维护性带来不好的影响

不推荐

$('.myp').find('.span1').text('1');
$('.myp').find('.span2').text('2');
$('.myp').find('.span3').text('3');
$('.myp').find('.span4').text('4');

推荐

var myp=$('.myp');
myp.find('.span1').text('1');
myp.find('.span2').text('2');
myp.find('.span3').text('3');
myp.find('.span4').text('4');

在jquery .end()可使用的情况下应该优先使用.end()

推荐

$('.myp').find('.span1').text('1')
           .end().find('.span2').text('2');
           .end().find('.span3').text('3');
           .end().find('.span4').text('4');

注释规范

在描写注释时，推荐格式化且统一的注释风格，在写注释时尽量描述写代码时的思路，而不是代码做了什么。

不推荐

//获取订单
function getOrderByID(id){
    var order;
    //...
    return order;
}

方法的注释应该统一用块级注释

推荐

/**
 * 根据订单id获取订单详细数据
 * @param  {[number]} id [订单ID]
 * @return {[order]}    [订单详细信息]
 */
function getOrderByID(id){
    var order;
    //...
    return order;
}

以上就是JavaScript-总结常用代码书写规范的内容，更多相关内容请关注PHP中文网（www.php.cn）！