いくつかのポイントで簡潔なJSコードを書いてください.

4903 ワード

javascript

コードの不具合を効果的に回避することができます.
Tips for Writing Cleeaner Code
Funebug
可読性を保証するために、本文は直訳ではなく意訳を採用する.また、この著作権は元の作者に帰属し、翻訳は学習にのみ使用されます.
初心者のためにブログを書くことにしました.よくあるプログラミング技術を紹介します.これらの技術はもっと規範的で、メンテナンスしやすいコードを書くのに役立ちます.
1.定数
この問題はJavaScriptを書いている開発者たちだけではなく、すべての開発言語で避けられます.例を見てみます.

$elem.on('keydown', function(e) {
  if (e.keyCode == 27) {
    //...
  }
});

27は一体何を代表していますか?よくプログラミングすれば、この数字がESCキーを表していることが分かります.しかし、多くの開発者、特に初心者には、これらの数字コードを覚えられないか、あるいは全く分かりません.ソースコードを読むとき、このようなコードセグメントに出会うと、27とボタンの対応関係を調べるのに時間がかかります.もちろん、後にコメントをつけてもいいです.でも、ここでは普通量の名来を使って、例えばKEY_ESC=27です.より直感的でわかりやすい!
2.識別子(identifers)
私たちはよくある要素(コメント、ブログ、ユーザ、など)の識別子を取得して、いくつかの計算をする必要があります.たとえば:

var id = $(this).attr('id').substring(8);

既に述べたように、このコードを読む開発者はなぜ8を使うのかを推測する必要があります.
もう一つの例を挙げます.

var last_id = $('#answer_pid' + id + ' li:first div').attr('id').substr(7);

)のレイアウトが少し変更されたら、このコードはエラーになります.
もう一つ見ます.


var id = $(this).attr('id').substring("comment_".length);

这段代码好一点，至少没有使用看不懂的数字，但JavaScript代码还是和html有太多的绑定。

我们可以使用data-*语法：

然后，用更加简洁的语法来获取属性值：

var id = $(this).attr('data-id');

または:

var id = $(this).data('id');

3.$postjQueryには、関数ajaxがあることを知っています.具体的な操作については、$.ajax、$.get、$..loadなどがある.これらの関数は私たちが頻繁に使用しています.(スクリプトをアップロードして、jsonファイルを実行して、post要求を実行します.)それらの下の階は全部$.postで実現されます.
個人的には、これらの簡略化版の関数を使用したことがありません.次になぜ教えますか?
初心者や経験が足りない開発者に対しては、コードを書く時にもレベルが違います.

a.初級

$.post(url, data, function(data) {
  data = $.parseJSON(data);             
  //...
});

b.異常を考慮する

$.post(url, data, function(data) {
  try {
      data = $.parseJSON(data);
  } catch (e) {
      return;
  }
  //... 
});

c.もし真剣に$postの文書を読むならば、最後のパラメータはデータの種類のdataTypeであるべきですが、多くの開発者が書いたコードの中で忘れていることを発見しました.

$.post(url, data, function(data) {
  //...
}, 'json');

初心者はプロジェクトの開発においてミス処理を考えることが少ないです.彼らは通常5分以上の時間をかけてこの部分を改善することを嫌がります.あるいはコードに問題がないと自信を持っています.
もし彼らがエラーを追加して$postに処理すると決めたら、通常は次のように書きます.

$.post(url, data, function(data) {
  //...
}, 'json').error(function() {
  //... 
});

このように書くと分かりにくいです.毎回、エラー処理が非常に煩雑で、時間がかかります.デフォルトのエラー処理ハンドルを定義して、ajax要求に対応してください.グローバルの異常に対して、製品はオンラインになったら、fundebugのJavaScriptプラグインを使ってつかむことができます.

$.ajaxSetup({
  error: function() {
    // Error modal
  } 
});

$.ajax関数に戻ります.上記の書き方は読みにくく、最後のパラメータとして$.postが漏れやすいです.個人的には、以下のような書き方が読みやすく、メンテナンスしやすいと思います.

$.ajax({
  type: "POST",
  url: url,
  data: data,
  dataType: "json",
  success: function(data) {
    //...
  },
  error: function() {
    //...
  }
});

4.多元素イベント
時々、ページ要素に対応するイベント(メッセージを削除するボタン)をバインドする必要があります.常に、私達はこのように実現します.

$('.comment a.delete').click(function(){
  //...
});

問題は、同じイベントを新たな要素(例えば、新しくロードされたコメント)に結びつけるということです.いろいろな解法を見ましたが、その中の一つの典型的な解法はすべての要素のイベントを再定義することです.

$('.comment a.delete').unbind('click').click(function() {
  //
});

jQuery 1.7にonイベントがあり、イベントをある行動に結びつけることができ、選択器によって要素をフィルタすることができます.

$('body').on('click', 'a.external', function(e) {  
  //            external     
});

なお、上記のコードは動的に生成されるオブジェクトにも有効である.大いに提唱すべきですが、気をつけてください.次のコードは、ブラウザの速度を遅くして、効率を低下させます.

$('body').on('mousemove', selector, function() {
  //...
});

5.名前空間付きイベント(namespaced events)
名前空間付きイベントはjQuery 1.2に加入しましたが、何人も使っていません.私は賭けをする勇気があります.あなたも分かりません.
例を挙げます

$('a').on('click', function() {
  // Handler 1
}); 
$('a').on('click', function() {
  // Handler 2
});

もし私たちが第二のハンドルを除去したいなら、dataTypeを使って二つのハンドルを全部外します.
ただし、名前空間付きのイベントを使えば、解決できます.

$('a').on('click.namespace1', function() {
  //Handler 1
}); 
$('a').on('click.namespace2', function() {
  //Handler 2
});

以下のコードで削除します.

$('a').off('click.namespace2');

もっと知りたいなら、Event names and namespacesを参照してください.
これは私が他の人のコードを読んでいる時、よくある問題の中の一部分です.私はこの文章が皆さんのコードの質を向上させるのを期待しています.
Funebugについて
FunndebugはJavaScript、微信小プログラム、微信小ゲーム、支付宝小プログラム、React Native、Node.js、JavaリアルタイムBUGの監視に専念しています.2016年双十一公式オンラインから、Fundebugは累計6億＋エラーイベントを処理し、Google、360、金山軟件など多くの有名ユーザーに承認されました.無料試用を歓迎します.
著作権声明
https://blog.fundebug.com/2017/07/12/tips_for_writing_cleaner.コード/

JavaScriptイベントのリリース/購読