辣鼠藕了 發表於 2022-4-4 16:06:00

web前端开发规范

<h1 id="web前端开发规范">web前端开发规范</h1>
<h2 id="规范概述">规范概述</h2>
<blockquote>
<p>一个人走的更快，一群人可以走的更远，前提是统一的策略，还要不断地反省和优化。不管有多少人共同参与同一项目，尽可能确保每一行代码都像是同一个人编写的</p>
</blockquote>
<ul>
<li>开发目录规范</li>
<li>开发环境规范</li>
<li>开发编码规范</li>
</ul>
<h2 id="一目录及文件命名规范">一、目录及文件命名规范</h2>
<h3 id="一例静态专题页目录">(一)、例静态专题页目录</h3>
<pre><code>- src / html 源代码   
- img / image / images图片资源
- jsJavaScript脚本
- dep / development / package 第三方依赖包
</code></pre>
<h3 id="二例管理端项目目录">（二）、例管理端项目目录</h3>
<pre><code> - project
    -- static / public 静态文件
       -- js
       -- css
       -- tpl
       -- index.html
       ...
    -- src 源代码（逻辑）
      -- common 公共资源
      -- img
      -- css
      ...
      -- component 组件
         -- home
         -- login
         ...
      -- api 接口请求
      --view / page 模板文件
</code></pre>
<h3 id="三命名规范">（三）、命名规范</h3>
<ul>
    <li> 目录，文件名称统一小驼峰命名法。
    productDetail.html</li>
</ul>
<h2 id="二环境要求">二、环境要求</h2>
<h3 id="一开发环境统一">（一）、开发环境统一</h3>
<ol>
      <li>Node.js 8.9 或更高版本，你可以使用 nvm 或 nvm-windows 在一台电脑中管理多个 Node 版本</li>
       <br>
      <li>使用VS Code进行代码编写</li>
       <br>
      <li>规定 Tab 大小为 2 个空格，保证在所有环境下获得一致展现(settings.json文件修改"editor.tabSize": 2)</li>
       <br>
   <li>安装插件 Vetur（ Vue开发扩展及 Vue 文件代码格式化）</li>
      <br>
   <li>使用 Chrome 浏览器并安装 Vue.js devtools 进行调试</li>
</ol>
<h2 id="三编码规范">三、编码规范</h2>
<h3 id="一html--template-编码规范">（一）、HTML / Template 编码规范</h3>
<ol>
    <li>HTML换行缩进：采用 tab空格</li>
    <br>
    <li>尽量减少标签层级</li>
    <br>
    <li>双标签必须闭合，单标签用斜线闭合</li>
    <br>
    <li>行内元素里面不可使用块级元素</li>
<pre><code>&lt;a href="../test"&gt;
&lt;div&gt;&lt;/div&gt;
&lt;/a&gt;
</code></pre>
<br>
    <li>避免使用已过时标签，如：font</li>
<br>
    <li>对于属性的定义，使用双引号，不要使用单引号</li>
    <br>
    <li>为每个 HTML 页面根元素添加 lang 属性</li>
<pre><code>&lt;html lang="zh-CN"&gt;
    &lt;!-- ... --&gt;
&lt;/html&gt;
</code></pre>
<br>
    <li>通过声明一个明确的字符编码，让浏览器轻松、快速的确定网页内容渲染方式，通常指定为'UTF-8'</li>
    .....
</ol>
<blockquote>
<p>【语义化】尽量遵循 HTML 标准和语义，但是不要以牺牲实用性为代价；任何时候都要尽量使用最少的标签并保持最小的复杂度</p>
</blockquote>
<br>
<h3 id="二css--less--sass-编码规范">（二）、css / Less / Sass 编码规范</h3>
<ol>
    <li>类名使用小写字母，以中划线分隔</li>
    <br>
    <li>id 采用驼峰式命名</li>
    <br>
    <li> Less / Sass 中的变量、函数、混合等采用驼峰式命名</li>
    <br>
    <li>
    所有声明语句都应当以分号结尾 最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错,尤其压缩打包出错
    </li>
    <br>
    <li>
   选择器不要超过4层（在Less / Sass中避免嵌套超过4 层）
    </li>
    <br>
    <li>缩进使用两个空格代替 Tab</li>
    <br>
    <li>为选择器分组时，将单独的选择器单独放在一行</li>
    <br>
    <li>每条样式声明应该独占一行</li>
    <br>
    <li>尽可能不要使用行内（inline）样式</li>
    <br>
    <li>组件之间的完全解耦，不会造成命名空间的污染，如：.mod-xxx ul li 的写法带来的潜在的嵌套风险。</li>
    <br>
    <li>选择器权重（样式覆盖）</li>
      <ul>
      <li>非通用样式使用嵌套方式进行编写，避免影响其他自己不了解样式，造成样式覆盖</li>
      <li>Vue 中样式谨慎使用 scoped，会影响样式选择器性能，请使用第一点进行特有样式编写</li>
      <li>样式需要修改时，尽量找到原样式声明进行修改</li>
      </ul>
    <br>
    <li>属性的书写顺序, 举个例子</li>
<pre><code>.box {
    /* 定位 */
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    /* 盒模型 */
    width: 50px;
    height: 50px;
    margin: 10px;
    border: 1px solid black;
    / *其他* /
    color: #efefef;
}
</code></pre>
<ul>
    <li>定位相关, 常见的有：display position left top float 等</li>
    <li>盒模型相关, 常见的有：width height marginpadding border 等</li>
    <li>其他属性</li>
</ul>

<br>
<h3 id="三javascript-编码规范">（三）、JavaScript 编码规范</h3>
<ol>
    <li>常量建议还是使用大写字符+下划线命名。 const PRICE_MAX=10000;</li>
<br>
    <li>函数按职责命名，一般都是动词开头。 function setUserInfo(){}</li>
<br>
    <li>变量不要先使用后声明</li>
<br>
    <li>不要在同个作用域下声明同名变量</li>
<br>
    <li>在必要的地方添加非空判断以提高代码的稳健性</li>
<br>
    <li>使用===代替==，!==代替!=（==会自动进行类型转换，可能会出现奇怪的结果）</li>
<br>
    <li>使用三目运算代替简单的 if-else</li>
<pre><code>let count = 100;
count = seat &lt; 5 ? 20 : seat &lt; 10 ? 60 : 90;
</code></pre>
<br>
    <li>正确使用 null</li>
      <ul>
      <li>不要用null来判断函数调用时有无传参</li>
      <li>不要与未初始化的变量做比较</li>
      </ul>
<br>
    <li>正确使用 undefined</li>
      <ul>
      <li>不要直接使用 undefined 进行变量判断
      </li>
      <br>
      <li>使用typeof和字符串 'undefined' 对变量进行判断</li>
      <br>
      <li>不要给变量赋值 undefined（undefined 本身就表示一个变量未定义）</li>
      </ul>
<br>
    <li>普通函数：首字母小写，驼峰式命名，统一使用动词或者动词+名词形式,如：fnGetVersion()</li>
<br>
    <li>对象方法与事件响应函数：对象方法命名使用fn+对象类名+动词+名词形式,如：fnAddressGetEmail()</li>
<br>
    <li>事件响应函数：fn+触发事件对象名+事件名或者模块名，如：fnDivClick()</li>
</ol>
   <br>
【常用的动词】
<br>
<pre><code>get 获取/set 设置,
add 增加/remove 删除
create 创建/destory 移除
start 启动/stop 停止
open 打开/close 关闭,
read 读取/write 写入
load 载入/save 保存,
create 创建/destroy 销毁
begin 开始/end 结束,
backup 备份/restore 恢复
import 导入/export 导出,
split 分割/merge 合并
inject 注入/extract 提取,
attach 附着/detach 脱离
bind 绑定/separate 分离,
view 查看/browse 浏览
edit 编辑/modify 修改,
select 选取/mark 标记
copy 复制/paste 粘贴,
undo 撤销/redo 重做
insert 插入/delete 移除,
add 加入/append 添加
clean 清理/clear 清除,
index 索引/sort 排序
find 查找/search 搜索,
increase 增加/decrease 减少
play 播放/pause 暂停,
</code></pre>
<h3 id="四-编写注释">(四)、 编写注释</h3>
<ol>
    <li>公共组件需要在文件头部加上注释说明：</li>
<pre><code>/**
*文件用途说明
*作者姓名、联系方式（旺旺）
*制作日期
**/
</code></pre>
   <li>注释单独一行，不要在代码后的同一行内加注释：</li>
<pre><code>// 个人信息
</code></pre>
</ol>
<br>
<h4 id="ps--部分编写思路参考别的码友welcome您的观光感谢">p.s.部分编写思路参考别的码友，welcome您的观光,感谢！</h4>
</ol><br><br>
来源：https://www.cnblogs.com/catchFish-ing/p/16099522.html
頁: [1]
查看完整版本: web前端开发规范