前端代码规范点整理

「爱情、让人受尽委屈。」 2024-02-19 13:53 24阅读 0赞

<table> 
 <tbody> 
  <tr> 
   <th colspan="1" style="width:50px;">类型</th> 
   <th style="width:433px;">前端代码规范点</th> 
  </tr> 
  <tr> 
   <td colspan="1">项目</td> 
   <td style="width:433px;"> <p>在 web项目中，所有的文件名应该都遵循同一命名约定。以可读性而言，减号（-）是用来分隔文件名的不二之选，同时它也是常见的 URL 分隔符；文件命名总是以字母开头而不是数字。</p> <p><strong><span style="color:#f33b45;">资源的字母名称必须全为小写，这是因为在某些对大小写字母敏感的操作系统中，当文件通过工具压缩混淆后，或者人为修改过后，大小写不同而导致引用文件不同的错误，很难被发现。</span></strong></p> <p>还有一些情况下，需要对文件增加前后缀或特定的扩展名（比如 .min.js, .min.css）。这种情况下，建议使用点分隔符来区分这些在文件名中带有清晰意义的元数据。</p> <p>&nbsp;</p> 
    <table> 
     <tbody> 
      <tr> 
       <td> <p>不推荐：</p> </td> 
       <td> <p>推荐：</p> </td> 
      </tr> 
      <tr> 
       <td> <p>首页.js</p> <p>MyScript.js</p> <p>myCamelCaseName.css</p> <p>i_love_underscores.html</p> <p>1001-scripts.js</p> <p>my-file-min.css</p> </td> 
       <td> <p>index.js</p> <p>my-script.js</p> <p>my-camel-case-name.css</p> <p>i-love-underscores.html</p> <p>thousand-and-one-scripts.js</p> <p>my-file.min.css</p> </td> 
      </tr> 
     </tbody> 
    </table></td> 
  </tr> 
  <tr> 
   <td colspan="1">项目</td> 
   <td colspan="1" style="width:433px;">不要指定引入资源所带的具体协议 <p>当引入图片或其他媒体文件，还有样式和脚本时，URLs 所指向的具体路径，不要指定协议部分（<code>http：</code>,&nbsp;<code>https：</code>），除非这两者协议都不可用。</p> <p>不指定协议使得 URL 从绝对的获取路径转变为相对的，在请求资源协议无法确定时非常好用，而且还能为文件大小节省几个字节。</p> <p>&nbsp;</p> 
    <table> 
     <tbody> 
      <tr> 
       <td> <p>不推荐：</p> </td> 
       <td> <p>推荐：</p> </td> 
      </tr> 
      <tr> 
       <td> <p>&lt;script&nbsp;src="http：//cdn.com/a.min.js"&gt;&lt;/script&gt;</p> <p>background:url(http：//static.example.com/a.jpg);</p> </td> 
       <td> <p>&lt;script&nbsp;src="//cdn.com/a.min.js"&gt;&lt;/script&gt;</p> <p>background:url(//static.example.com/a.jpg);</p> </td> 
      </tr> 
     </tbody> 
    </table></td> 
  </tr> 
  <tr> 
   <td colspan="1">项目</td> 
   <td colspan="1" style="width:433px;">文本一次缩进两个空格</td> 
  </tr> 
  <tr> 
   <td colspan="1">html</td> 
   <td colspan="1" style="width:433px;"> <p>对页面上的媒体而言，像图片、视频、canvas 动画等，要确保其有可替代的接入接口。图片文件我们可采用有意义的备选文本（alt），视频和音频文件我们可以为其加上说明文字或字幕。</p> <p>&nbsp;</p> 
    <table> 
     <tbody> 
      <tr> 
       <td> <p>不推荐：</p> </td> 
       <td> <p>推荐：</p> </td> 
      </tr> 
      <tr> 
       <td>&lt;img&nbsp;src="luke-skywalker.jpg"&gt;</td> 
       <td> <p>&lt;img&nbsp;src="luke-skywalker.jpg" alt="Luke skywalker riding an alien horse"&gt;</p> </td> 
      </tr> 
     </tbody> 
    </table></td> 
  </tr> 
  <tr> 
   <td colspan="1">html</td> 
   <td colspan="1" style="width:433px;"> <p>关注点分离：信息（HTML 结构）、外观（CSS）和行为（JavaScript）；</p> <p>为了使它们成为可维护的干净整洁的代码，我们要尽可能的将它们分离开来。</p> <p>&nbsp;</p> 
    <table> 
     <tbody> 
      <tr> 
       <td> <p>不推荐：</p> </td> 
       <td> <p>推荐：</p> </td> 
      </tr> 
      <tr> 
       <td> <p>不使用超过一到两个脚本（学会用合并脚本）；</p> <p>不使用行内样式（<code>&lt;style&gt;.no-good {}&lt;/style&gt;</code>）；&nbsp;</p> <p>不在元素上使用 style 属性（<code>&lt;hr style="border-top： 5px solid black"&gt;</code>）；</p> <p>不使用行内脚本（<code>&lt;script&gt;alert('no good')&lt;/script&gt;</code>）；</p> <p>不使用表象元素（i.e.&nbsp;<code>&lt;b&gt;</code>,&nbsp;<code>&lt;u&gt;</code>,&nbsp;<code>&lt;center&gt;</code>,&nbsp;<code>&lt;font&gt;</code>,&nbsp;<code>&lt;b&gt;</code>）；</p> <p>不使用表象 class 名（i.e. red, left, center）；</p> </td> 
       <td> <p>&nbsp;</p> </td> 
      </tr> 
     </tbody> 
    </table></td> 
  </tr> 
  <tr> 
   <td colspan="1">html</td> 
   <td style="width:433px;"> <p>省略样式表与脚本上的 type 属性。鉴于 HTML5 中以上两者默认的 type 值就是 text/css 和 text/javascript，所以 type 属性一般是可以忽略掉的。甚至在老旧版本的浏览器中这么做也是安全可靠的。</p> <p>&nbsp;</p> 
    <table> 
     <tbody> 
      <tr> 
       <td> <p>不推荐：</p> </td> 
       <td> <p>推荐：</p> </td> 
      </tr> 
      <tr> 
       <td> <p>&lt;link&nbsp;rel="stylesheet"&nbsp;href="main.css"&nbsp;type="text/css"&gt;</p> <p>&lt;script&nbsp;src="main.js"&nbsp;type="text/javascript"&gt;&lt;/script&gt;</p> </td> 
       <td> <p>&lt;link&nbsp;rel="stylesheet"&nbsp;href="main.css"&gt;</p> <p>&lt;script&nbsp;src="main.js"&gt;&lt;/script&gt;</p> </td> 
      </tr> 
     </tbody> 
    </table></td> 
  </tr> 
  <tr> 
   <td colspan="1">html</td> 
   <td colspan="1" style="width:433px;">对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。</td> 
  </tr> 
  <tr> 
   <td colspan="1">html</td> 
   <td colspan="1" style="width:433px;">请仅仅把标题标签hn用于标题文本，不要仅仅为了产生粗体文本或改变字体大小而使用它们，请使用其它标签或 CSS 代替。h1 标签一个页面只能用一次。</td> 
  </tr> 
  <tr> 
   <td colspan="1">html</td> 
   <td colspan="1" style="width:433px;">登录、注册、帮助中心等无需要百度抓取的页面a标签 要加&nbsp; rel="nofollow"</td> 
  </tr> 
  <tr> 
   <td colspan="1">js</td> 
   <td colspan="1" style="width:433px;">总是使用&nbsp;<code>===</code>&nbsp;精确的比较操作符，避免在判断的过程中，由 JavaScript 的强制类型转换所造成的困扰。</td> 
  </tr> 
  <tr> 
   <td colspan="1">js</td> 
   <td colspan="1" style="width:433px;"> <p>逻辑操作符&nbsp;<code>||</code>&nbsp;和&nbsp;<code>&amp;&amp;</code>&nbsp;也可被用来返回布尔值。如果操作对象为非布尔对象，那每个表达式将会被自左向右地做真假判断。基于此操作，最终总有一个表达式被返回回来。这在变量赋值时，是可以用来简化你的代码的。</p> <p>&nbsp;</p> 
    <table> 
     <tbody> 
      <tr> 
       <td> <p>不推荐：</p> </td> 
       <td> <p>推荐：</p> </td> 
      </tr> 
      <tr> 
       <td colspan="1" style="width:328px;"> <p>if(!x) { <br> &nbsp; if(!y) { <br> &nbsp; &nbsp; x = 1;<br> &nbsp; } else { <br> &nbsp; &nbsp; x = y;<br> &nbsp; }<br> }</p> </td> 
       <td>&nbsp;x = x || y ||&nbsp;1;</td> 
      </tr> 
     </tbody> 
    </table></td> 
  </tr> 
  <tr> 
   <td colspan="1">js</td> 
   <td colspan="1" style="width:433px;">语句要以分号结束，否则它将会继续执行下去，不管换不换行。所以总是使用分号，因为隐式的代码嵌套会引发难以察觉的问题。当然我们更要从根本上来杜绝这些问题</td> 
  </tr> 
  <tr> 
   <td colspan="1">js</td> 
   <td colspan="1" style="width:433px;">统一使用单引号(‘)，不使用双引号(“)。这在创建 HTML 字符串非常有好处</td> 
  </tr> 
  <tr> 
   <td colspan="1">js</td> 
   <td colspan="1" style="width:433px;"> <p>用三元操作符分配或返回语句。在比较简单的情况下使用，避免在复杂的情况下使用。没人愿意用 10 行三元操作符把自己的脑子绕晕。</p> <p>&nbsp;</p> 
    <table> 
     <tbody> 
      <tr> 
       <td> <p>不推荐：</p> </td> 
       <td> <p>推荐：</p> </td> 
      </tr> 
      <tr> 
       <td>if(x === 10) { <br> return 'valid';<br> } else { <br> return 'invalid';<br> }</td> 
       <td>return x ===&nbsp;10&nbsp;?&nbsp;'valid'&nbsp;：&nbsp;'invalid';</td> 
      </tr> 
     </tbody> 
    </table></td> 
  </tr> 
  <tr> 
   <td colspan="1">css</td> 
   <td colspan="1" style="width:433px;"> <p>省略“0”值后面的单位。不要在0值后面使用单位，除非有值。</p> <p>&nbsp;</p> 
    <table> 
     <tbody> 
      <tr> 
       <td> <p>不推荐：</p> </td> 
       <td> <p>推荐：</p> </td> 
      </tr> 
      <tr> 
       <td colspan="1" style="width:328px;"> <p>padding-bottom：&nbsp;0px;</p> <p>margin：&nbsp;0em;</p> </td> 
       <td> <p>padding-bottom：&nbsp;0;</p> <p>margin：&nbsp;0;</p> </td> 
      </tr> 
     </tbody> 
    </table></td> 
  </tr> 
  <tr> 
   <td colspan="1">css</td> 
   <td colspan="1" style="width:433px;">属性选择器或属性值用双引号（””），而不是单引号（”）括起来。URI值（url()）不要使用引号。</td> 
  </tr> 
 </tbody> 
</table>