코드 품질을 향상시키는 데 도움이 되는 JavaScript 팁 마스터하기

ㅋㅋㅋ 주로 다음 사항을 소개합니다. ㅋㅋㅋ

객체 전달 매개변수는 지나치게 긴 매개변수 목록을 대체합니다삼항 연산자를 적게 사용하세요

체인 호출을 합리적으로 사용하세요

대규모 클래스를 분해하세요

이 글은 계속해서 업데이트될 예정입니다. 부족한 점이 있으면 느껴주세요. 댓글 영역에 자유롭게 추가하세요.

1. 기능 개선

• 이점:

• 과도하게 큰 기능을 피하세요.

• 독립적인 함수는 코드 재사용을 돕습니다.

• 독립적인 함수는 덮어쓰기가 더 쉽습니다.

• 독립적인 기능이 이름이 좋으면 그 자체로 댓글 역할을 하게 됩니다.

• 다양한 기능의 여러 개별 로직 조각을 의미론적으로 구현하면 코드 로직이 명확해지고 각 단계에서 수행되는 작업을 명확하게 확인할 수 있습니다.

• 코드 예:
  데이터 획득을 구현한 다음 DOM을 조작하여 데이터를 표시하고 마지막으로 이벤트를 추가합니다.
• 함수 추출 전

  // 逻辑都写在一起，需要将所有逻辑看完才知道这段代码是干嘛的，局部逻辑无法复用
  function main() {
      $.ajax.get('/getData').then((res) => {
          const ul = document.getElementById('ul');
          ul.innerHTML = res.list.map(text => `<li class="li">${text}</li>`).join(&#39;\n&#39;);
          const list = document.getElementsByClassName(&#39;li&#39;);
          for (let i = 0; i < list.length; i ++) {
              list[i].addEventListener(&#39;focus&#39;, () => {
                  // do something
              });
          }
      });
  }

  함수 추출 후

function getData() {
    return $.ajax.get('/getData').then((res) => res.data.list);
}
function showList(list) {
    const ul = document.getElementById('ul');
    ul.innerHTML = list.map(text => `<li class="li">${text}</li>`).join(&#39;\n&#39;);
}
function addEvent() {
    const list = document.getElementsByClassName(&#39;li&#39;);
    for (let i = 0; i < list.length; i ++) {
        list[i].addEventListener(&#39;focus&#39;, () => {
            // do something
        });
    }
}
// 逻辑清晰，一眼读懂每一步在做什么，某些提炼出来的函数还可以被复用
async function main() {
    const list = await getData(); // 获取数据
    showList(list); // 显示页面
    addEvent(); // 添加事件
}

• 2. 중복된 조건부 조각 병합

If 함수 본문에 조건 분기문이 몇 개 있고, 이러한 조건 분기문 내부에 반복되는 코드가 흩어져 있기 때문에 중복을 병합하고 제거해야 합니다.

// 合并前
function main( currPage ){
    if ( currPage <= 0 ){
        currPage = 0;
        jump( currPage ); // 跳转
    }else if ( currPage >= totalPage ){
        currPage = totalPage;
        jump( currPage ); // 跳转
    }else{
        jump( currPage ); // 跳转
    }
};
// 合并后
function main( currPage ){
    if ( currPage <= 0 ){
        currPage = 0;
    }else if ( currPage >= totalPage ){
        currPage = totalPage;
    }
    jump( currPage ); // 把jump 函数独立出来
};

3. 조건 분기문을 함수로 세분화

복잡한 조건 분기문은 프로그램을 읽고 이해하기 어렵게 만드는 중요한 이유이며, 쉽게 거대한 기능으로 이어질 수 있습니다. 때로는 조건 분기문을 의미 함수로 세분화하여 코드를 보다 직관적이고 논리적으로 명확하게 만들 수 있습니다.

// 根据不同季节决定打折力度
function getPrice( price ){
    var date = new Date();
    if ( date.getMonth() >= 6 && date.getMonth() <= 9 ){ // 夏天
        return price * 0.8;
    }
    return price;
};
// 是否是夏天
function isSummer(){
    var date = new Date();
    return date.getMonth() >= 6 && date.getMonth() <= 9;
};
// 提炼条件后
function getPrice( price ){
    if ( isSummer() ){
        return price * 0.8;
    }
    return price;
};

4. 루프의 합리적인 사용

• 여러 코드 조각이 실제로 일부 반복 작업을 담당하는 경우 루프로 대체하여 코드 양을 줄일 수 있습니다.

// 判断是什么浏览器
function getBrowser(){
    const str = navigator.userAgent;
    if (str.includes('QQBrowser')) {
return 'qq';
    } else if (str.includes('Chrome')) {
return 'chrome';
    } else if (str.includes('Safari')) {
        return 'safri';
    } else if (str.includes('Firefox')) {
        return 'firefox';
    } else if(explorer.indexOf('Opera') >= 0){
        return 'opera';
    } else if (str.includes('msie')) {
        return 'ie';
    } else {
        return 'other';
    }
};
// 循环判断，将对应关系抽象为配置，更加清晰明确
function getBrowser(){
    const str = navigator.userAgent;
    const list = [
        {key: 'QQBrowser', browser: 'qq'},
        {key: 'Chrome', browser: 'chrome'},
        {key: 'Safari', browser: 'safari'},
        {key: 'Firefox', browser: 'firefox'},
        {key: 'Opera', browser: 'opera'},
        {key: 'msie', browser: 'ie'},
    ];
    for (let i = 0; i < list.length; i++) {
        const item = list[i];
        if (str.includes(item.key)) {return item.browser};
    }
    return &#39;other&#39;;
}

• 5. 중첩된 조건 분기 대신 함수가 일찍 종료되도록 합니다.

• 함수가 여러 종료로 일찍 반환되도록 하고 중첩된 조건 분기를 대체합니다.

  function del( obj ){
      var ret;
      if ( !obj.isReadOnly ){ // 不为只读的才能被删除
          if ( obj.isFolder ){ // 如果是文件夹
              ret = deleteFolder( obj );
          }else if ( obj.isFile ){ // 如果是文件
              ret = deleteFile( obj );
          }
      }
      return ret;
  };
  function del( obj ){
      if ( obj.isReadOnly ){ // 反转if 表达式
          return;
      }
      if ( obj.isFolder ){
          return deleteFolder( obj );
      }
      if ( obj.isFile ){
          return deleteFile( obj );
      }
  };

6. 너무 긴 매개변수 목록 대신 객체 매개변수를 전달하세요.

• 함수 매개변수가 너무 길면 오류 위험이 높아집니다. 전달 순서가 올바른지 확인하는 것이 번거롭고, 가독성도 좋습니다. 코드도 나빠질 수 있습니다. 함수의 매개변수가 너무 길지 않은지 확인하세요. 여러 매개변수를 전달해야 하는 경우 대신 객체를 사용하는 것이 좋습니다.
• 일반적으로 함수 매개변수는 3개를 넘지 않는 것이 가장 좋습니다

  function setUserInfo( id, name, address, sex, mobile, qq ){
      console.log( 'id= ' + id );
      console.log( 'name= ' +name );
      console.log( 'address= ' + address );
      console.log( 'sex= ' + sex );
      console.log( 'mobile= ' + mobile );
      console.log( 'qq= ' + qq );
  };
  setUserInfo( 1314, 'sven', 'shenzhen', 'male', '137********', 377876679 );
  function setUserInfo( obj ){
      console.log( 'id= ' + obj.id );
      console.log( 'name= ' + obj.name );
      console.log( 'address= ' + obj.address );
      console.log( 'sex= ' + obj.sex );
      console.log( 'mobile= ' + obj.mobile );
      console.log( 'qq= ' + obj.qq );
  };
  setUserInfo({
      id: 1314,
      name: 'sven',
      address: 'shenzhen',
      sex: 'male',
      mobile: '137********',
      qq: 377876679
  });

7. 삼항 연산자를 적게 사용하세요

삼항 연산자는 성능이 뛰어나고 코드도 적습니다.

하지만 삼항 연산자를 남용해서는 안 됩니다. 간단한 논리 분기에서는 사용하고 복잡한 논리 분기에서는 사용을 피해야 합니다.

// 简单逻辑可以使用三目运算符
var global = typeof window !== "undefined" ? window : this;
// 复杂逻辑不适合使用
var ok = isString ? (isTooLang ? 2 : (isTooShort ? 1 : 0)) : -1;

8. 체인 호출의 합리적인 사용

장점:

체인 호출은 사용이 간단하고 코드가 덜 필요합니다.

단점:

체인 호출의 단점은 디버깅이 불편하다는 것입니다. 체인에 오류가 있다는 것을 알게 되면 디버깅 로그를 추가하거나 중단점을 추가하기 전에 먼저 체인을 분해해야 합니다. 오류가 발생한 장소를 찾으십시오.

체인의 구조가 비교적 안정적이고 추후 변형이 쉽지 않은 경우 체인타입을 사용하시면 됩니다.

var User = {
    id: null,
    name: null,
    setId: function( id ){
        this.id = id;
        return this;
    },
    setName: function( name ){
        this.name = name;
        return this;
    }
};
User
  .setId( 1314 )
  .setName( 'sven' );
var user = new User();
user.setId( 1314 );
user.setName( 'sven' );

9. 대규모 클래스 분해

대규모 클래스의 분해는 함수를 세분화하는 것과 매우 유사합니다. 클래스가 너무 크면 논리가 불명확하고 이해 및 유지 관리가 어려워집니다.

큰 카테고리를 합리적으로 분해하면 클래스의 논리가 명확해지고, 하위 모듈을 쉽게 재사용할 수 있습니다.

10. 비트 연산자를 사용하세요

곱셈과 나눗셈을 계산하는 프로그래밍 언어의 성능은 높지 않지만 경우에 따라 비트 연산자를 사용하면 곱셈과 나눗셈과 같은 연산의 성능을 향상시킬 수 있습니다.

아아아아

위 내용은 코드 품질을 향상시키는 데 도움이 되는 JavaScript 팁 마스터하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!