フロントエンドユニットコーディングの仕様は何ですか?

今回は、フロントエンドモノマーコーディングの仕様とは何か、フロントエンドモノリシックコーディング仕様を使用する際の注意点についてお届けします。以下は実際のケースですので、見てみましょう。

フロントエンド コードでもバックエンド コードでも、コーディング標準は特に重要であり、特に大規模なプロジェクトでは、最初にコード、形式、要件を標準化することで、多くの作業負荷が軽減され、後の段階で有益になります。コードを維持します。

9 .input、br、img、hr など、自己終了タグの場合は自己終了は許可されません。 2. HTML タグの使用は、タグのセマンティクスに従う必要があります。共通タグセマンティクス p - 段落 121.ファビコンがアクセス可能であることを確認します (favicon.ico ファイルをルート ディレクトリに置き、リンクを使用してファビコンを指定します) など、< link rel="shortcut icon" href="path/to/favicon. ico">; 15 写真: 17 HTML 記述の標準化 ビデオとオーディオ: 181928 フォントサイズ: 31 一般的な命名: thisIsAnApple、パスカルによるthisIsAnApple、アンダースコアによるthis_is_an_apple、アンダースコアによるthis-is-anの命名-りんご、関数名はキャメルケースで指定する必要がありますコンストラクター・未使用のサブルーチンの存在・未使用変数の定義

フロントエンドシングルコーディング仕様構成表

No	カテゴリ	検証内容
1	ページデザイン	リストのタイトルが中央に表示されます。
2	ページデザイン	クエリデータエリアのデータ表示スタイル: 1. 左側に不定長の中国語、不定長の英語、不定長の中国語と英語、不定長の英語の数字 2. 中央に固定長、固定値のデータ、中央に日付、時刻、シリアル番号 3. 金額: 右側
3	ファイルごとの	ヘッダーに正しいコメントがあるか
4	共通記述仕様	各関数に正しいコメントがあるか
5	共通-仕様の記述性別	各設定ファイル関連コンテンツにコメントがあるかどうか
6	共通記述の標準化	各論理ブロックにコメントがあるかどうか
7	共通 - 記述基準	未使用の変数と参照はありますか
8	共通 - 記述基準	インデントにタブを使用し、タブを 4 つのスペースに設定します
3. HTML5 で指定されている終了タグの場合、タグは省略できません。		10 HTML 記述の規範性 タグ 2: 1 タグの使用は、p に p を配置することはできず、tbody を配置する必要があるなどのタグのネスト規則に従う必要があります。表にある。
h1,h2,h3,h4,h5,h6 - 階層タイトル	強力、em - 強調	ins - 挿入 del - 削除 abbr - 略語 code - コード識別 cite - 出典作品のタイトル q - 引用 Blockquote - 段落または長い引用 ul - 順序なしリスト ol - 順序付きリスト dl,dt,dd - 定義テーブル
11	HTML 記述の標準化	属性: 1. 属性名には小文字を使用する必要があります。 2. カスタム属性には xxx- とデータを付けることをお勧めします。 - が推奨されます (例: )。
HTML 記述の標準化	コーディング 1:	1. 標準モードを有効にするには、HTML5 doctype を使用することをお勧めします。 2. ページにはタイトルを宣言するための title タグが含まれている必要があります。 3.title は、head の直接の子要素であり、charset 宣言の直後になければなりません。 例 13 HTML - 記述の標準化
コーディング 2:		2. プロジェクトがモバイルまたは レスポンシブ レイアウトの場合、ページのビューポートを指定する必要があります。
14	HTML 記述の標準化	はじめに: 1. CSS を導入するときは、; 2. CSS と JavaScript を導入するときに type 属性を指定する必要はありません (デフォルト値があります)。 head、JavaScript をページの最後に配置するか、非同期読み込みを使用する必要があります。 (スクリプトをページの中央に配置すると、ページのレンダリングがブロックされます)。
HTML記述の規範性		1. imgのsrc値を空にすることは禁止されています。画像の遅延読み込みでは、デフォルトの src も追加する必要があります (空の src ではページが再読み込みされます)。 不要なタイトル属性を画像に追加します (過剰なタイトルは画像の表示エクスペリエンスに影響し、ページ サイズが増加します)。重要な画像には alt 属性を付けます。 4. ダウンロード要件のある画像は img タグを使用して実装され、ダウンロード要件のない画像は CSS 背景画像で実装されます。
16	HTMLの書き方	フォーム: 1. テキストタイトルを持つコントロールは、ラベルタグを使用してタイトルに関連付けます。 2. ボタン要素を使用します。属性値を指定する必要があります。 3. 主要な機能を担うボタンを DOM の最初に配置する必要があります (これが推奨され、特定のデザインが優先されます)。
		1. HTML5 をサポートするブラウザーでオーディオ要素とビデオ要素を定義するための audio タグと video タグの使用を優先します。 2. 必要な場合にのみ、オーディオとビデオの自動再生を有効にします。 3. ブラウザがそのタグをサポートしていないことを示す指示を object タグ内に提供します (例: 。
CSS 記述標準	スタイルの行の長さ 1 行が分割できない場合を除き、各行は 120 文字を超えてはなりません。
CSS 記述の標準化	名前付け:	1.class、id はすべて小文字である必要があり、単語は - (ダッシュ) で区切られます。クラスと ID は、対応するモジュールまたはコンポーネントのコンテンツまたは関数を表す必要があり、名前に left、right、center、red、black などの単語を単独で使用することはできません。 .class を追加する必要があります。 g はグローバル スタイルを表し、m はモジュール スタイルを表し、ui はコンポーネント スタイルを表します。詳細はプロジェクトの規制に従います。単一のスタイルの出現は許可されません。 5. クラスは、JavaScript がスタイル情報を使用せずにクラスを作成できるようにするためにのみ使用されます。ページ上でユニークであること 7. 同じページ、異なるタグ、同じ名前と ID の使用は避けてください (同じタグを使用することはできます)。
20	CSS 記述標準	ルールに複数のセレクターが含まれる場合、各セレクター宣言は独自の行になければなりません。
21	CSS-Writing Normative	属性セレクターの値は二重引用符で囲む必要があります。 input[name="acd"] {...}
22	CSS の書き方の規範	値が 0 ～ 1 の間の小数の場合は、0 を省略します。整数部分。たとえば、不透明度: .8
23	CSS 記述仕様	url() 関数内のパスは引用符で囲まれません。例えば、background: url(bg.png);
24	CSSの書き方の規範	長さが0の場合は単位を省略する必要があります。例: パディング: 0 5px
25	CSS 記述仕様	スタイル コードは .css 接尾辞が付いたファイルに独立して保存される必要があり、特別な場合を除いて行間スタイルは許可されません状況。
26	CSS 記述標準	RGB カラー値には 16 進表記 #rrggbb を使用する必要があります。 rgb() は許可されません。
27	CSS 記述仕様	色: 1. RGB カラー値は 16 進表記 #aabbcc を使用する必要があり、rgb() は許可されません。 2.色の値を省略できる場合は、#fff、#000 3 などの省略形を使用する必要があります。赤、緑、その他の不確実な色の値には使用できません。 4. 色の値はすべて、必ず小文字の英字を使用してください。
CSS 記述の標準化	フォントファミリー属性のフォントファミリー名には、フォントの英語ファミリー名を使用する必要があります。スペース、引用符で囲む必要があります。中国語は固く禁止されています。フォントファミリーの例: 「Microsoft YaHei」 Windows Microsoft	Microsoft は Windows Windows JhengHei をハッキングしています中文字幕法） WenQuanYi Micro Hei 29 CSS記述の標準化
フォント2: 1.font-family を押して「欧文フォントを前に、中国語フォントを後ろに」 「戻る」と「良い効果 (高品質/よりニーズを満たす)」「最初にフォント、最後に平均的な効果を持つフォント」の順序で記述し、最後にユニバーサル フォント ファミリー (セリフ / サンセリフ) を指定する必要があります。	フォントファミリーの例: Arial、sans-serif;	30 CSS-Writing Normality
1。 Windows プラットフォームで表示する必要がある中国語コンテンツは 12 ピクセル以上である必要があります。通常以外のフォント スタイルを使用しないでください。		JS記述の標準化 命名:
1. メソッド/プロパティ名、変数名、パラメータ名、名前空間	2. クラス名、列挙名、	、Pascal 命名を使用する必要があります。 3. 定数名と列挙属性: IS_DEBUG_ENABLED など、すべて大文字のアンダースコア命名法を使用する必要があります。4. プライベート (保護された) メンバー (プロパティ、関数など): _ で始まる必要があります。 5. ブール型は、その型を示すために is、has などで始まる必要があります。6. 名前を付けるときは、セマンティクスにも注意する必要があります。たとえば、変数名には名詞を使用し、関数名には動詞と目的語の句 (getAccListData) を使用し、クラス名には名詞を使用する必要があります。
32	JS 記述標準	JavaScript プログラムは、拡張子 .js が付いたファイルに独立して保存する必要があります。
33	JS 記述標準	1 行あたり 80 文字を超えないようにしてください。
34	JS 記述標準	グローバル変数の使用を最小限に抑え、ローカル変数でグローバル変数を上書きしないようにします。
35	JS-Writing Standards	共通関数が使用できる場合、共通関数を使用するかどうか。
36	JS 記述の規範	ステートメント: 1. 各行には、各単純なステートメントの最後に; (セミコロン) を付けます。 2.return文 戻り値を伴うreturn文では、戻り値を()(括弧)で囲んではなりません。式が返される場合、誤ってセミコロンを追加するミスを避けるために、式は return キーワードと同じ行にある必要があります。プログラムの論理プロセスがわかりにくくなる可能性があるため、 continue ステートメントの使用は避けてください。 ; 4.eval は JavaScript で最も悪用されやすいメソッドであるため、使用を避けてください。
37	JS 記述の標準化	ES5 構文は、グローバル名前空間の汚染を防ぐために、コードを IIFE (即時呼び出し関数式) にラップして、独立した分離された定義ドメインを作成する必要があります。
38	JS記述標準	コードにjs strictモード「use strict」を追加します
39	J S -ライティング規範	変数宣言: var または let を使用して変数を宣言します。変数を指定しない場合、暗黙的にグローバル変数として宣言されるため、変数の制御が困難になります。
40	JSプログラムの滑らかさ	真と偽の判断を賢明に使用してください。if(a == true)はif(a)とは異なり、この判断は特別に合格します。操作はそれを変換します。 true または false に設定し、次の式はすべて false を返します: false、0、unknown、null、NaN、(空の文字列)
41	JS-Program Smoothness	関数の作成を避けてください。単純なループ ステートメントに関数を追加すると、簡単にクロージャが形成され、隠れた危険が生じる可能性があります。
42	JS プログラムのスムーズさ	厳密モードでは、構文エラーが報告されます。
43	JS プログラムの滑らかさ	配列とオブジェクト リテラルを使用して、配列とオブジェクト コンストラクターを置き換えます。配列コンストラクターを使用すると、パラメーターを間違えやすくなります。
44	JS-Program Smoothness	三項条件判断 (if のショートカットメソッド)、複雑な状況での使用を避けるためにステートメントを代入または返すために三項演算子を使用します。
45	JS プログラムのブロック解除	文字列では一重引用符 (') を使用し、二重引用符 (") を使用しません。これは、 などの HTML 文字列を作成するときに非常に役立ちます。 var msg = 'これは HTML ' です。以下の例は参考用です:
・繰り返し初期化
47	JS論理的な正しさ	おかしなロジックがないこと（空の関数や未処理の分岐など）
48	JS-論理的な正しさ	テキスト入力ボックスの文字列の長さは、1. ビジネス要件であるかどうか、2. データベースのフィールド長が満たされているかどうか
49	JS 論理的な正しさ	クエリが完了した後、クエリ条件は対応する入力ボックスに保持される必要があります
50	JS 論理的な正しさ	クエリ結果が正しいかどうか並べ替えました。
51	JS論理的な正確性	クエリ領域内の項目の合計数は、現在クエリされているすべてのデータの合計数である必要があります。現在のページに表示されているアイテムの数ではなく
52	JS論理的な正確さ	クエリ条件入力ボックスは、クエリを実行する前に先頭と末尾のスペースを削除する必要があります

この記事を読んでいただけると思います。私はこの方法をマスターしました。さらに興味深い情報については、php 中国語の記事の他の関連トピックに注目してください。

推奨読書:

Safariブラウザの選択ドロップダウンリストのテキストが長すぎて折り返されない問題の解決策

HTMLとCCSの組み合わせ

以上がフロントエンドユニットコーディングの仕様は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。