WEBコード事項
4903 ワード
標準
WEB開発規格は、HTML構造規格、CSS表現規格、JS行動規格、コード規格、規格テストを含む一連の規格の集合である.
ターゲット
WEB開発プロセスは統一的に標準化され、ページ構造、表現、行為の適切な分離を実現し、ページのメンテナンス性、拡張性を高める.
に従う
HTMLコード仕様
1.標準文書DTDの使用
<!DOCTYPE html>2.構造、スタイル、動作の分離
埋め込みスタイルは、対応するスタイルファイルに移入されます.
埋め込みスクリプトは、対応するスクリプトファイルに移入されます.
要素スタイルを動的に変更する必要がない限り、できるだけインラインスタイルを書かないでください.
请不要写.使用斯坦尔法尔link拉伯,引入head赫达,使用script拉伯,引入body结束拉伯之前.ラベルラベル名、属性名小文字属性値を二重引用符で囲むstyle、link的type属性不必要指定.デフォルトはtext/css です.script的type属性不需要指定.デフォルトはtext/javascript です.空的橄榄球没有自闭斜线结束橄榄球,其他橄榄球必须开始,包括结束橄榄球。空のラベル:area,base,br,col,command,embed,hr,img,input,keygen,link,meta,param,source,track,wbr 4.字下げ、改行子要素对父母要素进行了4个空间。布洛克要素、名单要素、桌子要素在新的行中配置.5.每个注釈模特都追加评论,说明了什嚒。<!--XXモジュールSTART、私は何ですか--> <div class="module"> .... </div> <!--XXモジュールEND-->6.使用コード有効性html validator工具,检查コード.CSS符号化仕様1.id,class命名名字的小文字达什(-)用区切る:.module-title 2. 按照様式属性、属性値4个特别设计,使用可以的简单。/*Don't */ .demo { margin-top: 2px; margin-right: 3px; margin-bottom: 4px; margin-left: 0; } /* Better */ .demo { margin: 2px 3px 4px 0; }属性名之后有":"属性值之前有空间,之后有";"最后部分的属性值为0,单位无法加算16进数的颜色值,可以使用3字的fff,不是ffff,url()不使用引用符.demo { backgound-image: url(/your/path/img); } 3. 様式顺序位置决定相关,拳击模特相关,此外.demo { position: absolute; top: 0; left: 0; width: 50px; height: 50px; border: 1px solid #ddd; color: #fff; } 4. 为了不应该使用选择器!important,最上位韦特id Serector应该使用,重量很高的电脑名,id,class应该组成的/*Don't*/ #header.title { ... } /* Better */ .title { ... }史塔尔对多个塞雷克塔,各塞雷克塔占1行...btn, .txt, .hover { .... } 5. 利用Better CSS Hack IE条件注释,在htmlタグ的class中识别ie版本,请避免可以使用,新规制作hack.css专用文件收纳了hack斯タイル.<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]--> <!--[if IE 7]> <html class="ie7 oldie"> <![endif]--> <!--[if IE 8]> <html class="ie8 oldie"> <![endif]--> <!--[if IE 9]> <html class="ie9"> <![endif]--> <!--[if !IE]><!--><html> <!--<![endif]--> .ie9 .demo{ ... } .ie8 .demo{ ... } .ie7 .demo{ ... } .ie6 .demo{ ... } 6. Not Recommand CSS Hack 次のhackメソッドはブラウザ標準モードを前提としています ""下線はIE 6専用のhack "+"アンダースコアはIE 6/IE 7有効 "9"IE 6/IE 7/IE 8/IE 9/IE 10有効 "0"IE 8/IE 9/IE 10/Opera有効 "90"IE 9/IE 10が有効 これらのhackメソッドは、一般的に元のスタイルで直接混合して使用され、大量のhackメソッドは、cssコードの混乱をもたらし、メンテナンスが困難になるに違いない。 7.コメント モジュールごとにコメントを作成し、何をしたかを説明します。 /*XXモジュールSTART、私は何をしましたか*/ .module { ... } .module .title { ... } .module .content { ... } /*XXモジュールEND*/ 8.コード有効性 csslintツールを使用して、コードを確認します。 Javascript符号化仕様 1.変数、関数 4つのスペースをインデント 変数名、関数名アルパカ式命名:subTitle ローカル変数宣言はvarを必ず使用します グローバル変数、列挙変数、定数はすべて大文字で、コメントは 文が終わると、の最後の部分 変数宣言繰り上げおよび集中{{へんすう:宣言繰り上げおよびしゅうちゅう}} //私は何をしていますか function createAudit(){ var startTime, endTime, auditType, timeSpace, progress = 0; ... } 2.異常処理 異常処理、インタフェースエラー、ユーザーに友好的なヒントを与える try{ //Do something }catch(e){ //友好的なヒント } 3. eval() 逆シーケンス化のみ 4.複数行文字列 var myStr = 'blablablablablabla' + 'hlahlahlahlahlahlahla' + 'xlaxlaxlaxlaxlaxlaxla' + 'slaslaslaslaslaslasla'; 5.配列、オブジェクトの定義 /*Don't*/ var arr = new Arr, obj = new Object; /*Better*/ var arr = [], obj = {}; 6.組み込みオブジェクトメソッド、属性は変更しない 組み込みオブジェクトのメソッド、プロパティを変更しないで、共通関数を維持するための統合インタフェースを確立します。 /*Don't*/ String.prototype.newFunc = function(){ } 7.文字列 単一引用符を使用すると、htmlでは二重引用符を使用します。 8.コードフォーマット かっこ セミコロンは隠し線でコードに挿入され、カッコと前のコードは同じ行に配置されます。 if (boolean) { //... } else { //... } 配列、オブジェクトの初期化 var arr = [ someVal, anotherVal, anotherVal, anotherVal, anotherVal//ここにカンマをつけないで、ie 7、ie 8は間違いを報告します ]; var obj = { someOpt: someVal, anotherOpt: anotherVal, anotherOpt: function () { }//ここにカンマをつけないで、ie 7、ie 8は間違いを報告します }; 関数パラメータ できるだけすべての関数パラメータを同じ行に書きますが、可読性を維持するために、80文字以上の行を適切に改行したり、各パラメータが独立して1行ずつ改行したりすることができます。 very.very.very.very.lon.long.func = function ( someOpt, someOpt anotherOpt) { //.... } function foo (veryLongLongVariable, veryLongLongVariable) { //... } function foo ( veryLongLongLongLongVariable, veryLongLongLongLongVariable) { //... } if条件、三元オペレータ if (someLongLongLongVariable && anotherLongLongVariable) { //... } var y = a ? someLongLongVariable : anotherLongLongVariable; 9.コメント グローバル変数、定数、関数のコメントの追加 10.コード有効性 jshintツールを使用して、コードを確認します。 これらの規則に従う--これらの規則を改善する--規則がないわけにはいかない。