前端开发规范
<h1 id="%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83" class="code-line" data-line="0">前端开发规范</h1><ol>
<li class="code-line" data-line="1">
<p class="code-line" data-line="1">项目目录命名原则</p>
<ul>
<li class="code-line" data-line="2">src 用来存放源代码
<ul>
<li class="code-line" data-line="3">common 公共资源</li>
<li class="code-line" data-line="4">public/static 静态资源</li>
<li class="code-line" data-line="5">component 组件</li>
<li class="code-line" data-line="6">view/tpl 模板文件</li>
</ul>
</li>
</ul>
<pre><code class="code-line" data-line="7"><code>- img 用来存放图片资源
- js用来存放JavaScript脚本
- dep 存放第三方依赖包
- 以上命名均不适用复数形式
- 以上目录可以使用gulp等进行手动打造或利用框架提供的脚手架工具进行修改
</code></code></pre>
</li>
<li class="code-line" data-line="14">
<p class="code-line" data-line="14">CSS命名规范</p>
<ul>
<li class="code-line" data-line="15">BEM规范：Block Element Modifier 是一种前端命名方法，旨在帮助开发者实现模块化，可复用，高可维护性和结构化的CSS代码。</li>
<li class="code-line" data-line="16">OOCSS规范：Object Oriented CSS，面向对象的CSS，旨在编写高可复用，低耦合和高扩展的CSS代码。OOCSS是以前面向对象的思想去定义样式，将抽象和现实分离，抽离公共代码。</li>
</ul>
<pre><code class="code-line" data-line="17"><code>- 总结：将重用的东西当作一个对象来看，然后将不同的属性放到另一个类名去。
</code></code></pre>
</li>
<li class="code-line" data-line="20">
<p class="code-line" data-line="20">CSS属性规范</p>
<ul>
<li class="code-line" data-line="21">属性顺序</li>
</ul>
<ol>
<li class="code-line" data-line="22">位置属性(position top right z-index display float..)</li>
<li class="code-line" data-line="23">大小(width height padding margin..)</li>
<li class="code-line" data-line="24">文字(font line-height litter-spacing color..)</li>
<li class="code-line" data-line="25">背景(background border..)</li>
<li class="code-line" data-line="26">其他(animation transition..)</li>
</ol>
<ul>
<li class="code-line" data-line="27">尽量不适用CSS3的选择器</li>
<li class="code-line" data-line="28">属性使用缩写</li>
</ul>
</li>
<li class="code-line" data-line="29">
<p class="code-line" data-line="29">JS规范</p>
<ul>
<li class="code-line" data-line="30">语言规范</li>
</ul>
<ol>
<li class="code-line" data-line="31">声明变量必须加上 let 关键字.不要再使用 var</li>
<li class="code-line" data-line="32">优先使用箭头函数</li>
<li class="code-line" data-line="33">使用模板字符串取代连接字符串</li>
</ol>
<ul>
<li class="code-line" data-line="34">每个语句都写分号，适当使用空格缩进以及换行来调整代码的格式，以确保代码的可读性</li>
<li class="code-line" data-line="35">命名规范</li>
</ul>
<ol>
<li class="code-line" data-line="36">camel 表示驼峰命名法 pascal表示 首字母大写</li>
<li class="code-line" data-line="37">变量名: 必须使用 camel 命名法</li>
<li class="code-line" data-line="38">参数名: 必须使用 camel 命名法</li>
<li class="code-line" data-line="39">函数名: 必须使用 camel 命名法</li>
<li class="code-line" data-line="40">方法/属性: 必须使用 camel 命名法</li>
<li class="code-line" data-line="41">私有 ( 保护 ) 成员: 必须以下划线开头</li>
<li class="code-line" data-line="42">常量名: 必须使用全部大写的下划线命名法,e.g. XTEP_HOST_API</li>
<li class="code-line" data-line="43">类名: 必须使用 pascal 命名法</li>
<li class="code-line" data-line="44">枚举名: 必须使用 pascal 命名法</li>
<li class="code-line" data-line="45">枚举的属性: 必须使用全部大写的下划线命名法,e.g. XTEP_HOST_API</li>
<li class="code-line" data-line="46">命名空间: 必须使用 camel 命名法</li>
<li class="code-line" data-line="47">语义: 命名同时还需要关注语义</li>
</ol></li>
</ol><br><br>
来源：https://www.cnblogs.com/zengfanjie/p/11712316.html
頁:
[1]