ホームページ  >  記事  >  ウェブフロントエンド  >  Dojo Javascript プログラミング標準 独自の JavaScript 記述を標準化する_基礎知識

Dojo Javascript プログラミング標準 独自の JavaScript 記述を標準化する_基礎知識

WBOY
WBOYオリジナル
2016-05-16 16:32:491229ブラウズ

はしがき

今日、Bingo は、Dojo Javascript プログラミング仕様をすべての人に推奨しています。これは、JavaScript を書く際にこの仕様から学ぶことができるものです。翻訳してくれた i.feelinglucky に感謝します。

序文

読みやすさを高めるためにこのガイドに違反する場合は、いかなる違反も許可されます。

すべてのコードは他の人が読みやすいように作成する必要があります。

クイック リファレンス

コア API 次のスタイルを使用してください:

结构 规则 注释
模块 小写 不要使用多重语义(Never multiple words)
骆驼
公有方法 混合 其他的外部调用也可以使用 lower_case(),这样的风格
公有变量 混合
常量 骆驼 或 大写
構造

ルール

コメント

结构 规则
私有方法 混合,例子:_mixedCase
私有变量 混合,例子:_mixedCase
方法(method)参数 混合,例子:_mixedCase, mixedCase
本地(local)变量 混合,例子:_mixedCase, mixedCase

モジュール 小文字 複数の単語を使用しないでください クラス ラクダ パブリック メソッド ミキシング 他の外部呼び出しでも、このスタイルの lower_case() を使用できます パブリック変数 ミキシング 定数 ラクダまたは大文字 テーブル> 以下は必須ではありませんが、推奨されます: _mixedCase テーブル>

命名規則

1. 変数名は小文字でなければなりません。
2. クラスの命名には Camel 命名規則が使用されます。例:

アカウント、イベントハンドラー

3. 定数はオブジェクト (クラス) または列挙型変数の前で宣言する必要があります。列挙型変数には実際の意味を持った名前を付ける必要があり、そのメンバーはラクダの命名規則を使用するか、大文字を使用する必要があります:

コードをコピーします コードは次のとおりです:

var NodeTypes = {
要素: 1、
文書: 2
}

4. 省略語では大文字の名前を変数名として使用できません:

getInnerHtml()、getXml()、XmlDocument
5. メソッドのコマンドは動詞または動詞句である必要があります:

obj.getSomeValue()
6. パブリック クラスは、混合名 (mixedCase) を使用して名前を付ける必要があります。
7. CSS 変数には、対応する同じパブリック クラス変数を使用して名前を付ける必要があります。
8. プライベート クラスの変数属性メンバーには、混合名 (mixedCase) を使用し、先頭にアンダースコア (_) を付けて名前を付ける必要があります。例:

コードをコピーします コードは次のとおりです:

var MyClass = function(){
var _buffer;
this.doSomething = function(){
};
}

9. 変数がプライベートに設定されている場合は、変数の前にアンダースコアを追加する必要があります。

this._somePrivateVariable = ステートメント;

10. ユニバーサル変数は、その名前と一致する型名を使用する必要があります:

setTopic(topic) // 変数 topic は Topic
型の変数です 11. すべての変数名は英語名を使用する必要があります。
12. 変数のスコープが広い (スコープが大きい) 場合は、グローバル変数を使用する必要があります。この場合、変数はクラスのメンバーとして設計できます。一方、スコープが小さい場合、または変数がプライベートである場合は、簡潔な単語の名前を使用します。
13. 変数に独自の暗黙的な戻り値がある場合は、同様のメソッドの使用を避けてください:

getHandler(); // getEventHandler()

の使用を避ける

14. 曖昧な単語の意味を避けるために、パブリック変数は独自の属性を明確に表現する必要があります。例:

MouseEventHandler
MseEvtHdlr ではありません。
このルールにもう一度注意してください。そうすることの利点は非常に明白です。式によって定義された意味を明確に表現できます。例:

dojo.events.mouse.Handler // dojo.events.mouse.MouseEventHandler

の代わりに

15. クラス/コンストラクターは、その基本クラスの名前を拡張して名前を付けることができるため、その基本クラスの名前を正確かつ迅速に見つけることができます。 イベントハンドラー
UIEventHandler
MouseEventHandler
基本クラスは、そのプロパティを明確に記述することを前提として、名前を短縮できます:
MouseUIEventHandler ではなく、MouseEventHandler.

特別な命名規則

プライベート変数として定義されていない限り、「get/set」という用語をフィールドに関連付けるべきではありません。

「is」が前に付く変数名はブール値である必要があり、同様に「has」、「can」、または「 should」を使用できます。
変数名としての「計算」という用語は、計算された変数を指す必要があります。
変数名としての「find」という用語は、検索が完了した変数を指します。
変数名としての「初期化」または「init」という用語は、インスタンス化 (初期化) されたクラスまたは他のタイプの変数を指す必要があります。
UI (ユーザー インターフェイス) コントロール変数には、名前の後にコントロール タイプが必要です (例: leftComboBox、TopScrollPane)。
コレクションに名前を付けるには、複数形を使用しなければなりません。
通常、「num」または「count」で始まる変数名は数値(オブジェクト)です。
繰り返される変数には、「i」、「j」、「k」などの名前の変数を使用することをお勧めします。
補足用語には、取得/設定、追加/削除、作成/破棄、開始/停止、挿入/削除、開始/終了などの補足用語を使用する必要があります。
省略できる名前には省略形を使用します。
あいまいなブール変数名は避けてください。たとえば、
isNotError、isNotFound は不正です
エラークラスの変数名の後に「Exception」または「Error」を追加することをお勧めします。
メソッドがクラスを返す場合、名前はそれが何を返すかを示す必要があります。プロシージャの場合は、それが何を行うかを示す必要があります。

ファイル

インデントには 4 つの空白タブストップを使用してください。

エディターがファイル タグをサポートしている場合は、コードを読みやすくするために次の行を追加してください:

// vim:ts=4:noet:tw=0:

翻訳注記: 外国人は VIM エディタをよく使用するため、この記事に従うことを選択できます。

コードの折りたたみは完全かつ論理的に見える必要があります:

コードをコピーします コードは次のとおりです:
var someExpression = Expression1
式2
式 3;
var o = someObject.get(

式1、
式 2、
式 3
);

注: 式と変数宣言のインデントは一貫している必要があります。
注: 関数パラメータは明示的にインデントする必要があり、インデント規則は他のブロックと一致している必要があります。

変数

  1. 変数は、NULL 型であっても、使用する前に宣言して初期化する必要があります。
  2. 変数を曖昧にすることはできません。
  3. 関連する変数セットは同じコード ブロックに配置する必要があり、無関係な変数セットは同じコード ブロックに配置しないでください。
  4. 変数は最小限の有効期間を維持するように努める必要があります。
  5. ループ/繰り返し変数の仕様:
    1. ループ制御ブロックのみがある場合は、FOR ループを使用する必要があります。
    2. ループ変数はループの開始前に初期化する必要があります。FOR ループを使用する場合は、FOR ステートメントを使用してループ変数を初期化します。
    3. 「do … while」ステートメントは許可されます。
    4. 「break」および「 continue」ステートメントは引き続き許可されます (ただし、注意してください)。
  6. 条件式
    1. 複雑な条件式はできるだけ避ける必要があり、必要に応じて一時的なブール変数を使用できます。
    2. 名目的なケースは「if」ステートメントの「if」部分に、例外は「else」部分に置く必要があります。
    3. 条件式内のブロックは避けてください。
  7. その他
    1. マジックナンバーは避けてください。定数に置き換える必要があります。
    2. 浮動小数点変数は、小数点以下 1 桁を指定する必要があります (0 の場合でも)。
    3. 浮動小数点変数は、たとえゼロであっても実数部を指定する必要があります (先頭に 0 を使用します)。

レイアウト

ブロック

通常のコード スニペットは次のようになります:

コードをコピーします コードは次のとおりです:

while (!isDone){
doSomething();
isDone = moreToDo();
}

IF ステートメントは次のようになります:

コードをコピーします コードは次のとおりです:

if (someCondition){
ステートメント;
else if (someOtherCondition){
ステートメント;
} else {
ステートメント;
}

FOR ステートメントは次のようになります:

コードをコピーします コードは次のとおりです:

for (初期化; 条件; 更新){
ステートメント;
}

WHILE ステートメントは次のようになります:

コードをコピーします コードは次のとおりです:

while (!isDone) {
doSomething();
isDone = moreToDo();
}

DO … WHILE ステートメントは次のようになります:

コードをコピーします コードは次のとおりです:

{
を実行します ステートメント;
while (条件);

SWITCH ステートメントは次のようになります:

コードをコピーします コードは次のとおりです:

スイッチ (条件) {
ケース ABC:
ステートメント;
// フォールスルー
ケース防御:
ステートメント;
休憩;
デフォルト:
ステートメント;
休憩;
}

TRY … CATCH ステートメントは次のようになります:

コードをコピーします コードは次のとおりです:

{
を試してください ステートメント;
} catch(ex) {
ステートメント;
最後に {
ステートメント;
}

単一行の IF – ELSE、WHILE、または FOR ステートメントにも括弧が必要ですが、次のように記述できます。
if (条件){ ステートメント }
while (条件){ ステートメント }
for (初期化; 条件; 更新){ ステートメント }

空白

  1. 演算子はスペースで区切ることをお勧めします (三項演算子を含む)。
  2. 次のキーワードを区切るのに空白を使用しないでください。
    • 休憩
    • キャッチ
    • 続き
    • してください
    • その他
    • ついに
    • 関数 (匿名関数の場合、例: var foo = function(){}; )
    • 場合
    • 戻る
    • スイッチ
    • これ
    • 試してください
    • 無効
    • その間
  3. 次のキーワードは空白で区切る必要があります:
    • ケース
    • デフォルト
    • 削除
    • 関数 (宣言の場合、例: function foo(){}; )
    • のインスタンス
    • 新しい
    • 投げる
    • タイプ
    • var
  4. カンマ(,)は空白で区切ることを推奨します。
  5. コロン (:) 空白で区切ることをお勧めします。
  6. 最後のドット(.)は空白で区切ることを推奨します。
  7. ドット (.) 先頭に空白を使用しないでください。
  8. 関数呼び出しとメソッドは空白の使用を避けます。例: doSomething(someParameter) // の代わりに doSomething (someParameter)
  9. 論理ブロック間に空行を使用します。
  10. ステートメントは、読みやすくするために整列することをお勧めします。

メモ

  1. ぎくしゃくしたコード でコメントを追加する必要はありません。まず、 を書き換える必要があります。 > 彼らです。 すべてのコメントには英語を使用してください。
  2. 解決済みのソリューションから未開発の機能まで、コメント
  3. はコードに関連する でなければなりません。 多数の変数宣言の後
  4. の後にコメントを続ける必要があります。 コメントでは、コード スニペット、特に次のコード スニペットの有用性を説明する必要があります。
  5. コメント
  6. すべての行に を追加する必要はありません。
ドキュメント

次に、いくつかの基本的な関数またはオブジェクトの記述方法を示します。

概要: この関数またはオブジェクトの目的を簡単に説明します

説明: この関数またはクラスの簡単な説明

Return: この関数が何を返すかを説明します (戻り値の型は含まれません)
基本機能情報

コードをコピーします コードは次のとおりです:
function(){
// 要約: もうすぐ、ニュージャージー全土を統治するのに十分な宝が手に入るでしょう。
// 説明: あるいは、新しいルームメイトを見つけることもできます。
// ほら、彼を探しに行ってください。彼はあなたに怒鳴ったりしません。
// 私がやろうとしているのは、彼を笑顔にして歌ってもらうことだけです
// 彼を囲んで踊ると、彼はただ私に抱きつきます。
// 彼は私に、カーニバルがあるから冷凍庫に入るように言いました。
// 戻り値: 見てください、バナナラマ テープです!
}


オブジェクト関数情報

戻り値の説明はありません

コードをコピー コードは次のとおりです:

{
// 概要: ディングル、レインボー マシンに出動してください!
// 説明:
// 言っておきますが、ああ、ああ、あのビーム、
だったらよかったのにと思います // このようになったら、速度を調整するとよいでしょう。
// それは本当に私の背中に大きな影響を与えました、つまり、私はそうではありません
。 // むち打ちと言いたいところですが、それはちょっと言い過ぎです
// でも、あなたは保険に入っていますよね?
}

関数の宣言

場合によっては、関数呼び出しと宣言が表示されないことがあります。この場合、(プログラムが呼び出すための) 関数に命令を追加する方法はありません。この状況が発生した場合は、クラスを使用して関数をカプセル化できます。

注: このメソッドは、関数に初期化されたパラメーターがない場合にのみ使用できます。そうでない場合は無視されます。

コードをコピーします コードは次のとおりです:

dojo.declare(
「ふー」、
null、
{
// 概要: ふう、これは確かにリラックスできます、フライロック。
// 説明:
//数千年前、
の夜明け前 // 私たちが知っているように、サー・サンタ・オブ・クロースがいたのです: an
// 粗野で無意味なおもちゃを作る猿のような生き物
// 恐竜の骨をチンパンジーのような生き物に投げつけます。
// 振る舞いに関係なく、しわくちゃの手
// 前年。
// 戻り値: カールが宇宙にいるエルフィンの長老たちに敬意を表しない限り。
}
);

パラメータ



  1. シンプルタイプ
    単純型パラメータには、関数パラメータ定義で直接注釈を付けることができます。
    [cc lang="javascript"]function(/*String*/ foo, /*int*/ bar)...
    変数型パラメータ
    参考までにいくつかの修飾子を示します:
    ? オプションのパラメータ
    …麺パラメータの範囲が不明とのこと
    配列
    function(/*String?*/ foo, /*int...*/ bar, /*String[]*/ baz)...
    グローバルパラメータの説明
    説明を追加したい場合は、初期化ブロックに移動できます。
    基本情報の形式は: *key* 説明フィールド (*key* 説明文)
    パラメータと変数の形式は次のとおりです: *key* ~*type*~ 説明フィールド (*key* ~*type*~ 説明文)
    注: *キーワード* と ~*タイプ*~ は、任意の文字と数字を使用して表現できます。

    コードをコピーします コードは次のとおりです:

    関数 (foo, bar) {
    // foo: 文字列
    // 最初のパラメータとして使用されます
    // バー: int
    // 2 番目のパラメータとして使用されます
    }

    変数

    インスタンス変数、プロトタイプ変数、外部変数の宣言は一貫しているため、変数を宣言および変更する方法は数多くあります。具体的な定義と配置では、最初に出現する変数の名前、型、スコープ、その他の情報を示す必要があります。

    コードをコピーします コードは次のとおりです:

    関数 foo() {
    // myString: 文字列
    // 回数: int
    // myString を何回出力するか
    // 区切り文字: 文字列
    // myString*
    の間に何を出力するか this.myString = "プレースホルダー テキスト";
    this.times = 5;
    }
    foo.prototype.setString = function (myString) {
    this.myString = myString;
    }
    foo.prototype.toString = function() {
    for(int i = 0; i dojo.debug(this.myString);
    dojo.debug(foo.separator);
    }
    }
    foo.separator = "=====";

    オブジェクト内の変数アノテーション

    は、オブジェクトの値やメソッドと同じ方法でマークする必要があります。たとえば、次のように宣言するときです。

    コードをコピーします コードは次のとおりです:
    {
    // キー: 文字列
    // 単純な値
    キー: "値"、
    // key2: 文字列
    // 別の単純な値
    }

    戻り値

    関数は複数の異なる (型) 値を同時に返すことができるため、各戻り値の後に戻り型のコメントを追加する必要があります。行内でコメントを作成できます。すべての戻り値が同じ型である場合は、戻り値の型を示します。複数の異なる戻り値がある場合は、戻り値の型を「混合」としてマークします。

    コードをコピー コードは次のとおりです:

    function() {
    if (arguments.length) {
    return "引数を渡しました" // String
    ; } else {
    false を返します // ブール値
    }
    }

    疑似コード (議論予定)

    場合によっては、この関数またはクラスの関数プロセスの記述を関数またはクラスに追加する必要があります。これを行う予定がある場合は、/*======== (= 文字は 5 回以上出現することが好ましい) を使用できます。これには、コードにこれらのものを追加する必要がないという利点があります (注釈: 元の作成者による)おそらくコード管理システムを意味します)。

    /*====== と =====*/ に非常に長いコメントが含まれるようですが、機能調整が完了してから削除するかどうかを検討してください。

    コードをコピー コードは次のとおりです:

    /*=====
    module.pseudo.kwArgs = {
    // URL: 文字列
    // ファイルの場所
    URL: ""、
    // mimeType: String
    // text/html、text/xml など
    mimeType: ""
    }
    =====*/

    関数(/*module.pseudo.kwArgs*/ kwArgs){
    dojo.debug(kwArgs.url);
    dojo.debug(kwArgs.mimeType);
    }

    元のリンク: http://dojotoolkit.org/developer/StyleGuide
    翻訳: i.feelinglucky{at}gmail.com http://www.gracecode.com

プライベート変数 混合、例: _mixedCase
メソッドパラメータ 混合、例: _mixedCase、mixedCase
ローカル (ローカル) 変数 混合、例: _mixedCase、mixedCase

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。