ドキュメント仕様について
4651 ワード
不規則で、プログラミングチームでもコードの開発を加速させるために共通のドキュメント規範が必要です.ネット上でとても良い文章を見て、自分に役立つものを抽出して見てみましょう.
1 htmlドキュメント作成仕様文書タイプ宣言及び符号化:html 5宣言タイプに統一する;符号化は、書くときにIDEを利用して階層的なインデントを実現するように統一されている. 特別でない場合、スタイルファイルは…の間にチェーンしなければならない.特別でない場合、JavaScriptファイルはページの下部に外部リンクしなければならない. スタイルファイルやJavaScriptファイルを導入する場合は、デフォルトタイプ宣言を省略して次のように書く.
4すべての符号化はxhtml規格に従い、ラベル&属性&属性命名は小文字と下線の数字で構成され、すべてのラベルは閉じなければならない.
2 css
1 classとidの使用:idは一意で親であり、classは繰り返し可能で子であるため、idは大きなモジュールでのみ使用され、classは繰り返し使用率が高いものと子で2繰り返し使用率が高いものの名前を使用できます.i_clear; 3 css属性の書く順序は、レイアウトの位置決め属性->自身の属性->テキスト属性->その他の属性に従うことをお勧めします.この条は自分の習慣に基づいて書くことができるが、できるだけ同類の属性が一緒に書くことを保証する.属性列挙:レイアウト位置決め属性は主にmargin&padding&float(clearを含む)&position(対応するtop,right,bottom,left)&display&visibility&overflowなどを含む.自身の属性は主にwidth&height&background&borderを含む.テキストプロパティには、font&color&text-align&text-decoration&text-indentなどが含まれます.その他の属性としては、list-style(リストスタイル)&vertical-vlign&cursor&z-index(積層順)&zoomなどがある.リストされているこれらの属性は最もよく使われているもので、すべてを意味しません.4.コードを書く前に、スタイルの繰り返し使用率を考慮し、向上させる.5.text-shadow||css 3の関連属性などの互換性属性の使用を避ける.6.position:absolute|floatなどの性能に影響する属性の使用を減らす.7.大きいブロックのスタイルに注釈を追加しなければならなくて、小さいブロックの適量の注釈;
3 javascriptファイルコードはutf-8に統一されており、書く過程があり、各行のコードが終わるたびにセミコロンが必要である.原则として、すべての机能はXXXプロジェクトの需要に応じて生产的に开発され、ネット上でダウンしたコードによるコード污染を避ける(冗長コード|既存のコードと冲突する|...). ライブラリ導入:原則としてjQueryライブラリのみ導入 変数命名:アルパカ式命名.原生JavaScript変数の要求は純粋な英語のアルファベットで、頭文字はiTaoLunのように小文字でなければならない.jQuery変数は先頭文字が'',その他は、元のJavaScriptルールと同じです.iTaoLun; また、グローバル変数を避けるために、変数の集中宣言を要求する. 類命名:頭文字大文字、アルパカ式命名.例えばITaoLun; 関数命名:頭文字小文字アルパカ式命名.iTaoLun()のように; 命名の意味化は、できるだけ英語の単語やその略語を利用する.7コードの構造が明瞭で、適量の注釈を加える.関数の再利用率を向上させる. htmlとの分離を重視し、reflowを低減し、性能を重視する.
4画像仕様1.すべてのページ要素クラスの画像はimgフォルダ2に格納.画像フォーマットはgif‖png‖jpgに限られる.3.ネーミングはすべて小文字英字での組み合わせで、漢字|||スペース||特殊文字を含んではならない.できるだけ分かりやすい言葉で、チームの他のメンバーが理解しやすいようにします.また、ad_などの下線で区切られたヘッダーと末尾の2つの部分に名前を付けます.left01.gif || btn_submit.gif; 4.視覚効果を保証する場合、最小の画像フォーマットと画像品質を選択し、ロード時間を減らす.5.半透明のpngピクチャの使用をできるだけ避ける(使用する場合は、css仕様の説明を参照).6.css sprite技術セットの小さい背景図またはアイコンを用いて、ページhttp要求を小さくするが、必ず対応するsprite psdソース図に参考線を引いてimgディレクトリの下に保存してください.
5注釈規範1.htmlコメント:コメント形式
参考サイトhttp://blog.sina.com.cn/s/blog_69eb015e0100mgr1.html
開発及びテストツールの約束
テストツール:前期開発はFireFox&IE 6&IE 7&IE 8のみをテストし、後期最適化時にOpera&Chrome&Safariを加える.推奨テスト手順:FireFox->IE 7->IE 8->IE 6->Opera->Chrome->Safari、firebugおよびIE Tab Plusプラグインのインストールを推奨.
1 htmlドキュメント作成仕様
<link rel=”stylesheet” href=”…” />
<style>…</style>
<script src=”…”></script>4すべての符号化はxhtml規格に従い、ラベル&属性&属性命名は小文字と下線の数字で構成され、すべてのラベルは閉じなければならない.
br (<br />), hr(<hr />)などを含む.属性値は二重引用符で含める必要があります.6互換性の問題のないhtml自身のラベル、例えばspan、em、strong、select、labelなどを十分に利用する.html要素にカスタム属性を追加する必要がある場合は、まずデフォルトの既存の適切なラベルがあるかどうかを考慮して設定し、ない場合は「data-」を接頭辞としてカスタム属性を追加し、「data:」などの他のネーミングを避けることができます.7.意味化html、例えばタイトルは重要度に応じてh*(同じページに1つのh 1しかない)、段落タグはp、リストはul、インライン要素にはネストできないブロックレベル要素;8.できるだけdivネストを減らす、例えば<div class=”box”><div class=”welcome”> XXX, <div class=”name”> </div></div></div>完全に以下のコードで代替できる:<div class=”box”><p> XXX, <span> </span></p></div>;9.リンク先を書くときは、リダイレクトは避けなければなりません.例えば、href=」http://itaolun.com/」、すなわちURLアドレスの後ろに「/」を付けなければならない.10.ページでstyle属性、すなわちstyle=「...」の使用をできるだけ避ける.11.記述的フォーム要素(input,textarea)を含むlabelを追加する必要があります.背景形式で表示できる画像は、できるだけcssスタイルに書き込む.13.重要な画像にalt属性を付けなければならない.重要な要素と遮断された要素にtitleを加える.14.ブロックコードと重要な機能(例えば循環)に注釈を加え、バックグラウンドに機能を追加しやすい.15.特殊記号の使用:できるだけコードの代替を使用します:例えば<(<)&>(>)&スペース()&?(?) など;2 css
1 classとidの使用:idは一意で親であり、classは繰り返し可能で子であるため、idは大きなモジュールでのみ使用され、classは繰り返し使用率が高いものと子で2繰り返し使用率が高いものの名前を使用できます.i_clear; 3 css属性の書く順序は、レイアウトの位置決め属性->自身の属性->テキスト属性->その他の属性に従うことをお勧めします.この条は自分の習慣に基づいて書くことができるが、できるだけ同類の属性が一緒に書くことを保証する.属性列挙:レイアウト位置決め属性は主にmargin&padding&float(clearを含む)&position(対応するtop,right,bottom,left)&display&visibility&overflowなどを含む.自身の属性は主にwidth&height&background&borderを含む.テキストプロパティには、font&color&text-align&text-decoration&text-indentなどが含まれます.その他の属性としては、list-style(リストスタイル)&vertical-vlign&cursor&z-index(積層順)&zoomなどがある.リストされているこれらの属性は最もよく使われているもので、すべてを意味しません.4.コードを書く前に、スタイルの繰り返し使用率を考慮し、向上させる.5.text-shadow||css 3の関連属性などの互換性属性の使用を避ける.6.position:absolute|floatなどの性能に影響する属性の使用を減らす.7.大きいブロックのスタイルに注釈を追加しなければならなくて、小さいブロックの適量の注釈;
3 javascript
4画像仕様1.すべてのページ要素クラスの画像はimgフォルダ2に格納.画像フォーマットはgif‖png‖jpgに限られる.3.ネーミングはすべて小文字英字での組み合わせで、漢字|||スペース||特殊文字を含んではならない.できるだけ分かりやすい言葉で、チームの他のメンバーが理解しやすいようにします.また、ad_などの下線で区切られたヘッダーと末尾の2つの部分に名前を付けます.left01.gif || btn_submit.gif; 4.視覚効果を保証する場合、最小の画像フォーマットと画像品質を選択し、ロード時間を減らす.5.半透明のpngピクチャの使用をできるだけ避ける(使用する場合は、css仕様の説明を参照).6.css sprite技術セットの小さい背景図またはアイコンを用いて、ページhttp要求を小さくするが、必ず対応するsprite psdソース図に参考線を引いてimgディレクトリの下に保存してください.
5注釈規範1.htmlコメント:コメント形式
<p> : <input type=”text” id=”name” name=”name” /></p>,’－’はコメントの始終位置のみで、コメント文字領域に入れない.2.cssコメント:コメント形式<p><label for=”name”> : </label><input type=”text” id=”name” /></p>;3.JavaScriptコメント、単行コメント使用’<!– –>’、複数行コメント使用/* */;参考サイトhttp://blog.sina.com.cn/s/blog_69eb015e0100mgr1.html
開発及びテストツールの約束
テストツール:前期開発はFireFox&IE 6&IE 7&IE 8のみをテストし、後期最適化時にOpera&Chrome&Safariを加える.推奨テスト手順:FireFox->IE 7->IE 8->IE 6->Opera->Chrome->Safari、firebugおよびIE Tab Plusプラグインのインストールを推奨.