JavaScriptのコーディングルール-jsチュートリアル-php.cn

JavaScriptのコーディングルール

高洛峰

リリース： 2016-11-25 13:30:58

オリジナル

942 人が閲覧しました

ルールはありません。JavaScript は柔軟性と制御されていない変数とアクセスをもたらすため、ルールで制限する必要があります。成熟したチームであっても、新しいチームであっても、ルールは異なるはずです。ここでは、開発者の飛躍を抑制するための一般的または効果的な方法をいくつか挙げましたが、コードは常に制御されなければなりません。もちろん、どのルールも一定の認識基盤に基づいており、オブジェクト指向 JavaScript の基礎が不可欠であり、それがなければ何も議論できません。
変数とメソッドの制御:
モジュール開発では、対応するモジュールの「名前空間」に変数とメソッドのみを配置できます。これについては、を参照してください。この記事。とても面倒なので匿名関数を使ってみてはいかがでしょうか？
Java コード
(function() {
var value = 'xxx';
var func = function() {...};
})();

モジュール化には、コードのカルチャを厳密に制御する必要があります。これは、コードの保守性とカスタマイズ性の側面だけでなく、JavaScript エンジンが使用後にプロパティとメソッドを適時にリサイクルできるようにします。
Js コード
String.prototype.func = new function(){...}; など、モジュールコード内のネイティブオブジェクトを汚染することは許可されていません

そのようなコードは、たとえば均一に共通に配置するなど、集中的に管理する必要があります。 jsは厳重に保護してください。

データストレージの制約:
通常の変数、プロトタイプ変数、関数変数を分割して征服します。メソッド名はすべて大文字で始める必要があります。変数名は引き続き Camel 命名法に従ってください。
Java コード
function T(name){
T .prototype._instance_number++;
this.name = 名前;
アラート(this.name);
T.prototype = {
_instance_number:0,
getInstanceNum: function( ){
を返します。prototype._instance_number
}
}

var t("PortalONE");
new T("Again"); ()); // Print: 2

ここでは、T 内のプロパティとプライベートメソッドがアンダースコアで始まっていることが 1 つあり、これによりカプセル化が適切に実装されます (上記のコードで t.instanceNum が使用されている場合、この値は使用できません)。このコードが理解できない場合は、JavaScript のオブジェクト指向の性質をすぐに復習してください :)。 JavaScript には、継承とポリモーフィズムを実現するための 2 つのメソッドが用意されています。これについては、後続の章で説明します。また、配列、Ajax などの JavaScript のネイティブオブジェクトとコンテナーの使用を優先します。データ型は JSON に統一されており、非表示フィールドは使用しないようにします。また、通常は DOM オブジェクトを自由に拡張することはできません。
モジュール間の通信に関して: モジュール間の通信はモジュール間の結合を意味し、これは厳密に回避する必要があります。通信方法は通常、メソッドレベルの属性またはモジュールレベルのプロトタイプ変数を使用します。

DOM 操作ルール:
モジュールコードでは、通常、DOM の操作をモジュール js に分離する必要があります。例:

バインドに基づく JQuery の一連のメソッドを使用すると、動作ロジックを分離した後、更新された HTML タグを完全に確認できます。
DOM オブジェクトは通常、ID によってアクセスされ、場合によっては名前によってアクセスされます。DOM ツリーを不当に何度も走査することは、フロントエンドのパフォーマンスを維持する上でタブーです。

CSS スタイルコントロール:
(1) style="xxx" の記述を拒否してみます。主な目的は、スタイルをテーマスタイルフォームに統一することです。もちろん、テーマスタイルフォームもモジュールに従って保存されます。さまざまなカスタマイズとさまざまな言語スタイルを切り替えると便利です。
(2) JavaScript によるスタイルの操作を標準化する理想的には、適切にカプセル化された UI はそのスタイルコレクションを自由に置き換えることができます。

上記は氷山の一角にすぎませんが、実際のプロジェクトでは、開発プロセス中に徐々に洗練され、改善される必要があります。