JavaScript Style Guide

7313 ワード

最近会社の熱心な勉強はreactjsです.一番大きな問題はjs codeをどう書くかです.はい、大牛はJavaScript Style Guideを探しました.Airbnbの規範です.英語のおかげで、意味が分からないことがあります.張り出してみんなと一緒に勉強してください.
原文のリンク
7 Funtions関数

7.1 Use function declarations instead of function expressions.jscs:require Function Declarations関数定義代替関数式.WhyFunction declarations arations,so they're easure to identify in call stacks.Also,the whole body of a function declaration is hoisted,whers only the reference of a function expressition isted.Thise makebles.関数の定義には名前がありますので、呼び出されたスタックでより簡単に識別できます.同様に、方法によって定義された全体の方法体は、一番前に先行していますが、関数式は、方法に対する参照のみが最前線に言及されます.この規則(7.1関数定義代替表現を使用して)は、常に矢印関数置換関数表現を使用することが可能になる.(最後の文は翻訳しにくいです.)

  // bad
  const foo = function () {
  };

  // good
  function foo() {
  }

*自分の理解:関数式を使う時、将来どこかでこの関数を再利用するためです.矢印関数は、より形式的に関数として定義されていますが、変数のようにパラメータとして伝達されます.＊Hoistを結合します.関数式を使うと、コード区間でエラーが発生する可能性があります.Hoistがない場合は、関数の定義の後に呼び出さなければなりません.eg.abc()//throw reference error.function abc(){}abc()//ok.Hoistがあったら、私達はこのように書くことができます.//eg.abc()//work function abc(){}しかし、関数式を使うと、eg.1 abc()//.throw type error.var abc=function(){}eg.2 abc()//throw reference error.const abc=function(){}

  //only this will work
  var abc = function () {};
  abc();

書くのが面倒で、もっと現実的です.//untested$('btn').clickok.function handleClick(){}

  $('btn').click(handleClick); // throw type error
  var handleClick = function () {};

  $('btn').click(handleClick); // throw reference error
  var handleClick = function () {};

.Immediately invoked function expressions:eslint:wrap-ife jscs:require ParthesesAreound IIIIIIIIIIIIIFE:必ず小さい括弧で囲まれます.WhyAn immediatery invoked function expressition is a single unit-wrapping both it,and it invocation parens,in parens,cleanly express this.Note that in a world with modules everrywhere,you alst never need IFE.なぜですか?IIIIFは完全な単位です.その定義と括弧の呼び出しを含みます.IIIFを括弧に書いて、この意味をはっきり表現できます.注意してください.どこでもmodulesの世界にいます.IIIFはほとんど使えません.

  // immediately-invoked function expression (IIFE)
  (function () {
    console.log('Welcome to the Internet. Please follow me.');
  }());

*IIFは歴史的な理由があり、javascriptはfunction scopeであり、意図的に他の変数(varの副作用)に修正されることを避けるためにIIIFが現れました.参照リンク:JavaScript-coping-and-Hoisting

7.3 Never declare a function in a non-function block(if,while,etc).Asign the function to a variable instead.Browsers will allow you to it,but they interpret it differently,which beisは絶対的なブロックです.関数を変数に割り当てます.ブラウザはあなたにこのようにすることを許可して、しかしそれらは実現して異なっていて、これは1つのとても悪い記憶です.

7.4 Note:ECMA-622 defines a block a s a list of statemens.A function declaration is not a statement.Read ECMA-622's note on this isis.注意してください.ECMA-622は「文のブロックは文のセットです.」と定義しています.関数の定義はステートメントではありません.ECMA-622のノートを読んでこの問題に関心を持ちます./bad if(currentUser){function test(){consolie.log('Nope.')}

  // good
  let test;
  if (currentUser) {
    test = () => {
      console.log('Yup.');
    };
  }

7.5 Never name a parameter argments.This will Tale precedence over the argments over the argment that is given to everfunction scope.一つのパラメータをargmentsと命名しないでください.これは各関数にあるアーグメンントをカバーします.

  // bad
  function nope(name, options, arguments) {
      // ...stuff...
  }

  // good
  function yup(name, options, args) {
      // ...stuff...
  }

*関数デフォルトでは、argmentsというパラメータがあります.すべてのパラメータを表します.

  x = findMax(1, 123, 500, 115, 44, 88);

  function findMax() {
      var i;
      var max = -Infinity;
      for (i = 0; i < arguments.length; i++) {
          if (arguments[i] > max) {
              max = arguments[i];
          }
      }
      return max;
  }

7.6 Never use argments,opt to use rest systeax…instead.prefer-ress t params

いつまでもargmentsを使わないでください.rest文法...で代替します.
_.Why?…is explicit about which argments you want pulled.Plus,ret argments ara real Aray,and not merrely Aray-like argments.
なぜですか...はどのパラメータを明確に表示することができますか?また、restパラメータは、argmentsのような真の配列ではなく、配列のような変数である.

    // bad
    function concatenateAll() {
        const args = Array.prototype.slice.call(arguments);
        return args.join('');
    }   

    // good
    function concatenateAll(...args) {
        return args.join('');
    }

7.7 Use default parameter syntax rather than mutting function argments.

関数のパラメータを変更するのではなく、標準パラメータのシンタックスを使用します.

    // really bad
    function handleThings(opts) {
        // No! We shouldn't mutate function arguments.
        // Double bad: if opts is falsy it'll be set to an object which may
        // be what you want but it can introduce subtle bugs.
        opts = opts || {};
        // ...
    }

    // still bad
    function handleThings(opts) {
        if (opts === void 0) {
            opts = {};
        }
        // ...
    }

    // good
    function handleThings(opts = {}) {
        // ...
    }

7.8 Avoid side effects with default parameters.

デフォルトのパラメータでの副作用を避ける.標準パラメータで外部変数の参照を変更しないでください.
WhyThey are confusing to reason about.なぜですか?なぜそうなのか迷います.

    var b = 1;
    // bad
    function count(a = b++) {
        console.log(a);
    }
    count();  // 1
    count();  // 2
    count(3); // 3
    count();  // 3

7.9 Always put default parameters last.

常にデフォルトのパラメータを最後にします.

    // bad
    function handleThings(opts = {}, name) {
        // ...
    }

    // good
    function handleThings(name, opts = {}) {
        // ...
    }

7.10 Never use the Function constructor to create a new function.

関数ビルダーで新しい関数を作成しないでください.
WhyCreating a function in this way evaluates a string simillarly to eval()は、which opens vulners abilityies.なぜですか?この方法で関数を作成するとeval()を使うようになり、攻撃されやすいです.

7.11 Spacing in a function signature.

関数の署名にスペースを残します.
WhyConsincy is good,and you shuldn’t have to add or remove a space when adding or removing a name.なぜ、このような統一性がいいですか?名前を追加または削除するときにスペースを追加し、削除します.//bad const f=function(){}const g=function(){}const h=function(){}

    // good
    const x = function () {};
    const y = function a() {};

7.12 Never mute parameters.eslint:no-param-reassign

パラメータは常に変更しないでください.
WhyManipullating object s passed in as parameters can cause unwanted variable side effects in the orical caler.なぜですか?操作パラメータから入ってくるオブジェクトは、使用者の中で望まない副作用の変化を引き起こすことができます.

    // bad
    function f1(obj) {
        obj.key = 1;
    };

    // good
    function f2(obj) {
        const key = Object.prototype.hasOwnProperty.call(obj, 'key') ? obj.key : 1;
    };

7.13 Never reassign parameters.eslint:no-param-reassign

常にパラメータに値を付けないでください.
WhyReassigning parameters can lead to unexpected behavior、especially when accessing the argments oject.It can also cause optimization ises、especially in V 8.なぜですか?パラメータの再割り当ては、特にargmentsオブジェクトに対して予期できない挙動をもたらすことができる.このようにすると同様に最適化問題を引き起こすことができます.特にV 8エンジンの中で.

    // bad
    function f1(a) {
        a = 1;
    }

    function f2(a) {
        if (!a) { a = 1; }
    }

    // good
    function f3(a) {
        const b = a || 1;
    }

    function f4(a = 1) {
    }

マウスが容易な方向に入ると判断し、jsは方向を判断します.