フロントエンド開発仕様書（初稿）

全体的な原則

• インデント

  すべてのプログラミング言語で、インデントはソフトタブ (スペース文字を含む) である必要があります。テキスト エディターで Tab を入力すると、スペース 4 つが入力されます。

• 可読性と圧縮

  既存のファイルを維持する場合、ファイルサイズを節約することよりも読みやすさの方が重要であると考えています。多くの空白と適切な ASCII アートを使用することをお勧めします。開発者は、意図的に HTML や CSS を縮小したり、JavaScript コードを認識できないほど縮小したりしてはなりません。

  サーバー側またはビルドプロセス中に、CSSやJSなどのすべての静的クライアントファイルを自動的に最小化し、gzip圧縮します

• HTML、CSS、JSコードの分離

  将来のメンテナンスと拡張を容易にするために、HTML コードをできるだけクリーンに保ち、複雑なレイアウト要件を完了するために最も単純なコード レベルを使用します

  CSS コード自体はグローバルです。CSS のルールを制限し、地球規模の汚染を最小限に抑えるために、すべての CSS モジュールのアイデアを採用する必要があります。

  JS コードは関数コードとビジネス コードに分割され、チーム内の他の同僚が使いやすいように関数コードは可能な限り関数コンポーネントに抽出されます。

命名規則

• ファイルとフォルダー: すべての英語の小文字 + 数字またはコネクタ「-、_」。jquery.1.x.x.js などの他の文字は使用できません

  ファイル: /libs ファイルの呼び出しにはバージョン番号が含まれている必要があり、圧縮ファイルには min が含まれている必要がありますキーワード、他のプラグインには含める必要はありません。例: /libs/modernizr-1.7.min.js

  ID: 小さなキャメルケースの命名方法、例: firstName topBoxList footerCopyright
  Class: [マイナス記号コネクタ] など: top-item main-box box-list-item-1
  明確なセマンティクスを持つ単語の名前付けを使用し、左下と下などの方向性のある別の単語の名前付けスタイルを避けてください
  
  

html仕様

---

基本文法

属性では、一重引用符ではなく二重引用符を使用してください。

自動終了タグの末尾にはスラッシュを使用しないでください。HTML5 仕様では、スラッシュはオプションであると規定されています。

オプションの終了タグ (例: と ) を無視しないでください。
スタイルのレンダリングにはクラスを使用し、スタイルの記述に ID を使用しないようにしてください

ドキュメントタイプ

リーリー

リーリー

文字エンコーディング

リーリー

リーリー

互換モード

リーリー

リーリー

基本的なSEO

リーリー

ビューポート設定

ビューポート: 通常、ツールバーやタブなどを除いたブラウザウィンドウのコンテンツ領域のサイズを指します。

幅: ブラウザの幅、出力デバイスでのページの表示領域の幅。
• device-width: デバイスの解像度幅、出力デバイスの画面の表示幅
• initial-scale: 初期スケーリング
• minimum-scale: 最小スケーリング比
• maximum-scale: 最大スケーリング比
• ユーザースケーラブル: ユーザーがページをズームできるようにします
• minimal-ui、サポートされていません (ナビゲーション バーを削除) モバイル デバイス用に最適化し、表示領域の幅と初期スケーリングを設定します。
リーリー

ファビコン

favicon が指定されていない場合、ほとんどのブラウザは Web サーバーのルート ディレクトリにある favicon.ico を要求します。ファビコンにアクセスできるようにして 404 を回避するには、次の 2 つの方法のいずれかに従う必要があります:

favicon.ico ファイルを Web サーバーのルート ディレクトリに配置します。

リンクを使用してファビコンを指定します;

• リーリー

モバイルページヘッダーの推奨構成

リーリー

CSS と JavaScript の構造、スタイル、動作の分離

リーリー

リーリー

実用性は完璧よりも優れています

リーリー

リーリー

 

避免用 document.write 生成标签

<code>用 document.write生成标签让内容变得更难查找，更难编辑，<b><strong>性能更差</strong></b>。应该尽量避免这种情况的出现。
</code>

---

CSS 规范

• 外部文件LINK加载CSS，尽可能减少文件数。加载标签必须放在文件的 HEAD 部分。
• 避免使用内联样式 不要在文件中用内联式引入的样式，不管它是定义在样式标签里还是直接定义在元素上。这样会很难追踪样式规则
• 使用 reset.css 让渲染效果在不同浏览器中更一致。
• 避免使用CSS表达式（Expression）
• 不要用@import
• 避免使用ID选择器
• 避免使用开销大的CSS选择器 如：*
• 禁止给class加上html标签 如：li.list
• 避免让选择符看起来像正则表达式 如：[name='aa'] 高级选择器执行耗时长且不易读懂，避免使用。
• 避免直接使用html tag作为样式选择器
• 避免使用 !important
• 有节制的使用css3伪元素
• 避免使用css3 低效属性，如：linear-gradient，borde-image；
• 使用语义化、通用的命名方式；
• 使用连字符 - 作为 Class 名称界定符，不要驼峰命名法和下划线；
• 避免选择器嵌套层级过多，尽量少于 3 级；

用css模块化

<code>css代码本身都是全局的，所有应当采用css模块化思想，约束css的规则，尽量减少对全局的污染
</code>

属性简写

<code>坚持限制属性取值简写的使用，属性简写需要你必须显式设置所有取值。常见的属性简写滥用包括:
padding
margin
font
background
border
border-radius
大多数情况下，我们并不需要设置属性简写中包含的所有值。例如，HTML 头部只设置上下的 margin，所以如果需要，只设置这两个值。过度使用属性简写往往会导致更混乱的代码，其中包含不必要的重写和意想不到的副作用。
</code>

一行还是多行书写？

<code>css实例都是用的多行的格式，每一对属性和值占单独一行。这个是广泛使用的约定，不仅是在css文件中，也多出现在书里和文章里。许多人认为他的可读性很好。
然而在和团队的工作中，尤其是大型的css文件，我是将样式写成多行，并使用css模块化思想:
</code>

<span style="color: #800000;">.alert-window </span>{<span style="color: #ff0000;">
       background</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;"> 
       border</span>:<span style="color: #0000ff;"> 1px solid #ff0</span>;<span style="color: #ff0000;"> 
       font-weight</span>:<span style="color: #0000ff;"> bold</span>;<span style="color: #ff0000;">
       padding</span>:<span style="color: #0000ff;"> 10px</span>;
       }<span style="color: #800000;">
.alert-window .window-title</span>{<br><span style="color: #ff0000;">　　　　...<br></span>　　　　}<span style="color: #800000;">
.alert-window .window-content</span>{<br><span style="color: #ff0000;">　　　　...　　<br></span>　　　　}<span style="color: #800000;">
.alert-window .window-buttom</span>{<br><span style="color: #ff0000;">　　　　...<br></span>　　　　}

PS:　　1. 现在纯手写css比较少了，一般 都是用sass 和 less 来管理样式。<br>        2 书写sass 和 less 一行简直就是灾难 3 css 多行书写，还有个好处，可以要求团队，css 输出按照盒子模型的顺序去书写，更好维护，不强制但是倡导输出是一致的。

---

Javascript

命名规范

• 使用单引号'而不是双引号"
• 类的命名使用骆驼命名规则，并且首字母大写，例如： Account, EventHandler
• 常量必须使用大写，在对象（类）或者枚举变量的前部声明，骆驼命名规则
• 类的私有变量和属性建议以 _开头。例如：var _buffer; _init:function(){}

变量

• 必须全部小写字符组成
• 变量必须在声明初始化以后才能使用，即便是 NULL 类型。
• 在作用域顶端对变量赋值，这有助于避免变量声明问题和与声明提升相关的问题
• 变量不要产生歧义。
• 相关的变量集应该放在同一代码块中，非相关的变量集不应该放在同一代码块中。
• 变量应该尽量保持最小的生存周期。
• 能直接使用直接量的，不要使用 new ....; 如： a=/\d/g; a=new RegExp('\d','g');

不要用 void

不要用 with 语句

不要用 continue 语句

尽量不要用位运算

PS：前端团队很少有科班出身的，位运算符效率不见得会有太高的性能，优势非常不明显，出发是高强度的算法需要，否则还是不要有位运算；它会造成代码的苦涩难懂，不利于后续的维护

不要扩充内置原型（Object,Array,String...）

不要用 eval();

+运算要注意

<span style="color: #800000;">    '1'+1==2 //false;
    1+1==2 //true</span>

 

使用简易条件判断方式

<span style="color: #0000ff;">if</span> (name !== 0 || name !== '' || name!==<span style="color: #0000ff;">null</span> || name!==<span style="color: #000000;">undefined) {
...
}

</span><span style="color: #0000ff;">if</span><span style="color: #000000;"> (name) {
...
}


</span><span style="color: #0000ff;">if</span> (collection.length > 0<span style="color: #000000;">) {
  ...
}


</span><span style="color: #0000ff;">if</span><span style="color: #000000;"> (collection.length) {
...
}</span>

 

使用三元表达式来代替简单的if else

<span style="color: #0000ff;">if</span><span style="color: #000000;">(a){
        d</span>='b'<span style="color: #000000;">
    }</span><span style="color: #0000ff;">else</span><span style="color: #000000;">{
        d</span>='c'<span style="color: #000000;">
    }

    d</span>=a?'b':'c';

 

使用&& 和 || 替代简单的if

<span style="color: #0000ff;">if</span><span style="color: #000000;">(a){
        b()
    }

    a </span>&&<span style="color: #000000;"> c();


    </span><span style="color: #0000ff;">if</span><span style="color: #000000;">(bb){
        a</span>=<span style="color: #000000;">bb
    }</span><span style="color: #0000ff;">else</span><span style="color: #000000;">{
        a</span>=2<span style="color: #000000;">
    }

    a</span>=bb||2

 

使用数组或json优化if else

<span style="color: #0000ff;">if</span>(a=='1' || a=='b' || a=='c' || a=='ss'<span style="color: #000000;">){
        bb();
    }</span><span style="color: #0000ff;">else</span><span style="color: #000000;">{
        ...
    }

    </span><span style="color: #0000ff;">var</span> hasData=<span style="color: #000000;">{
        </span>'1':1<span style="color: #000000;">,
        </span>'b':1<span style="color: #000000;">,
        </span>'c':1<span style="color: #000000;">,
        </span>'ss':1<span style="color: #000000;">
    }

    </span><span style="color: #0000ff;">if</span><span style="color: #000000;">(hasData[a]){
        bb()
    }</span><span style="color: #0000ff;">else</span><span style="color: #000000;">{
    ...
    }</span>

 

不要在非函数块中(if, while etc)声明函数

<code>尽管浏览器允许你分配函数给一个变量，但坏消息是，不同的浏览器用不同的方式解析它
如果一定要定义函数，请用函数表达式方式声明；
如：
</code>

<span style="color: #0000ff;">function</span><span style="color: #000000;"> b(){
    ...
    }

    </span><span style="color: #0000ff;">if</span><span style="color: #000000;">(a){
        </span><span style="color: #0000ff;">function</span><span style="color: #000000;"> b(){
            ...
        }
    }

    </span><span style="color: #0000ff;">var</span> b=<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
    ...
    }
    </span><span style="color: #0000ff;">if</span><span style="color: #000000;">(a){
        b</span>=<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
            ....
        }
    }</span>

 

有else的if都要有{}

<span style="color: #0000ff;">if</span><span style="color: #000000;">(a)
        b()
    </span><span style="color: #0000ff;">else</span><span style="color: #000000;">
        c();

    </span><span style="color: #0000ff;">if</span><span style="color: #000000;">(a){
        b();
    }</span><span style="color: #0000ff;">else</span><span style="color: #000000;">{
        c();
    }</span>

 

不要有多余逗号

<code>这会在IE6、IE7和IE9的怪异模式中导致一些问题；同时，在ES3的一些实现中，多余的逗号会增加数组的长度。在ES5中已经澄清
</code>

 <span style="color: #0000ff;">var</span> hero =<span style="color: #000000;"> {
    firstName: </span>'Kevin'<span style="color: #000000;">,
    lastName: </span>'Flynn'<span style="color: #000000;">,
  };

  </span><span style="color: #0000ff;">var</span> heroes =<span style="color: #000000;"> [
    </span>'Batman'<span style="color: #000000;">,
    </span>'Superman'<span style="color: #000000;">,
  ];

  </span><span style="color: #0000ff;">var</span> hero =<span style="color: #000000;"> {
    firstName: </span>'Kevin'<span style="color: #000000;">,
    lastName: </span>'Flynn'<span style="color: #000000;">
  };

  </span><span style="color: #0000ff;">var</span> heroes =<span style="color: #000000;"> [
    </span>'Batman'<span style="color: #000000;">,
    </span>'Superman'<span style="color: #000000;">
  ];</span>

 

使用事件代理

<code>在分配低调（unobtrusive）的事件监听器时，通常可接受的做法是把事件监听器直接分派给那些会触发某个结果动作的元素。不过，偶尔也会有多个元素同时符合触发条件，给每个元素都分配事件监听器可能会对性能有负面影响。这种情况下，你就应该改用事件代理了
</code>

---

图片

尽量使用png8替代gif图片

不要在移动端手机使用gif动画图片

使用雪碧图，减少css背景图的加载

使用第三方工具压缩png24的图片，可以有非常高的压缩率

PS：手机端不适用GIF图的原因是：1.可以用css3动画来代替，css3动画只出发页面复合，性能更好，2 gif动画都在手机端显示不流畅，不能使用GPU加速，会造成页面重排，严重影响页面性能