web前端开发规范

  • web前端开发规范已关闭评论
  • 23 次浏览
  • A+
所属分类:Web前端
摘要

一个人走的更快,一群人可以走的更远,前提是统一的策略,还要不断地反省和优化。不管有多少人共同参与同一项目,尽可能确保每一行代码都像是同一个人编写的


web前端开发规范

规范概述

一个人走的更快,一群人可以走的更远,前提是统一的策略,还要不断地反省和优化。不管有多少人共同参与同一项目,尽可能确保每一行代码都像是同一个人编写的

  • 开发目录规范
  • 开发环境规范
  • 开发编码规范

一、目录及文件命名规范

(一)、例静态专题页目录

  - src / html 源代码      - img / image / images  图片资源     - js  JavaScript脚本    - dep / development / package 第三方依赖包 

(二)、例管理端项目目录

 - project      -- static / public 静态文件        -- js        -- css        -- tpl        -- index.html        ...     -- src 源代码(逻辑)       -- common 公共资源         -- img         -- css          ...       -- component 组件           -- home           -- login          ...       -- api 接口请求       --  view / page 模板文件 

(三)、命名规范

  • 目录,文件名称统一小驼峰命名法。 productDetail.html

二、环境要求

  1. Node.js 8.9 或更高版本,你可以使用 nvm 或 nvm-windows 在一台电脑中管理多个 Node 版本
  2. 使用VS Code进行代码编写
  3. 规定 Tab 大小为 2 个空格,保证在所有环境下获得一致展现(settings.json文件修改"editor.tabSize": 2)
  4. 安装插件 Vetur( Vue开发扩展及 Vue 文件代码格式化)
  5. 使用 Chrome 浏览器并安装 Vue.js devtools 进行调试

三、编码规范

(一)、HTML / Template 编码规范

  1. HTML换行缩进:采用 tab空格
  2. 尽量减少标签层级
  3. 双标签必须闭合,单标签用斜线闭合
  4. 行内元素里面不可使用块级元素
  5. <a href="../test">   <div></div> </a> 

  6. 避免使用已过时标签,如:font
  7. 对于属性的定义,使用双引号,不要使用单引号
  8. 为每个 HTML 页面根元素添加 lang 属性
  9.   <html lang="zh-CN">     <!-- ... -->   </html> 

  10. 通过声明一个明确的字符编码,让浏览器轻松、快速的确定网页内容渲染方式,通常指定为'UTF-8'
  11. .....

【语义化】尽量遵循 HTML 标准和语义,但是不要以牺牲实用性为代价;任何时候都要尽量使用最少的标签并保持最小的复杂度

(二)、css / Less / Sass 编码规范

  1. 类名使用小写字母,以中划线分隔
  2. id 采用驼峰式命名
  3. Less / Sass 中的变量、函数、混合等采用驼峰式命名
  4. 所有声明语句都应当以分号结尾 最后一条声明语句后面的分号是可选的,但是,如果省略这个分号,你的代码可能更易出错,尤其压缩打包出错
  5. 选择器不要超过4层(在Less / Sass中避免嵌套超过4 层)
  6. 缩进使用两个空格代替 Tab
  7. 为选择器分组时,将单独的选择器单独放在一行
  8. 每条样式声明应该独占一行
  9. 尽可能不要使用行内(inline)样式
  10. 组件之间的完全解耦,不会造成命名空间的污染,如:.mod-xxx ul li 的写法带来的潜在的嵌套风险。
  11. 选择器权重(样式覆盖)
    • 非通用样式使用嵌套方式进行编写,避免影响其他自己不了解样式,造成样式覆盖
    • Vue 中样式谨慎使用 scoped,会影响样式选择器性能,请使用第一点进行特有样式编写
    • 样式需要修改时,尽量找到原样式声明进行修改

  12. 属性的书写顺序, 举个例子
  13. .box {     /* 定位 */     display: block;     position: absolute;     left: 0;     top: 0;     /* 盒模型 */     width: 50px;     height: 50px;     margin: 10px;     border: 1px solid black;     / *其他* /     color: #efefef; } 
    • 定位相关, 常见的有:display position left top float 等
    • 盒模型相关, 常见的有:width height margin padding border 等
    • 其他属性

    (三)、JavaScript 编码规范

    1. 常量建议还是使用大写字符+下划线命名。 const PRICE_MAX=10000;
    2. 函数按职责命名,一般都是动词开头。 function setUserInfo(){}
    3. 变量不要先使用后声明
    4. 不要在同个作用域下声明同名变量
    5. 在必要的地方添加非空判断以提高代码的稳健性
    6. 使用===代替==,!==代替!=(==会自动进行类型转换,可能会出现奇怪的结果)
    7. 使用三目运算代替简单的 if-else
    8. let count = 100; count = seat < 5 ? 20 : seat < 10 ? 60 : 90; 

    9. 正确使用 null
      • 不要用null来判断函数调用时有无传参
      • 不要与未初始化的变量做比较

    10. 正确使用 undefined
      • 不要直接使用 undefined 进行变量判断
      • 使用typeof和字符串 'undefined' 对变量进行判断
      • 不要给变量赋值 undefined(undefined 本身就表示一个变量未定义)

    11. 普通函数:首字母小写,驼峰式命名,统一使用动词或者动词+名词形式,如:fnGetVersion()
    12. 对象方法与事件响应函数:对象方法命名使用fn+对象类名+动词+名词形式,如:fnAddressGetEmail()
    13. 事件响应函数:fn+触发事件对象名+事件名或者模块名,如:fnDivClick()

    【常用的动词】

    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 暂停, 

    (四)、 编写注释

    1. 公共组件需要在文件头部加上注释说明:
    2. /** *文件用途说明 *作者姓名、联系方式(旺旺) *制作日期 **/   
    3. 注释单独一行,不要在代码后的同一行内加注释:
    4. // 个人信息 

    部分编写思路参考别的码友,welcome你的观光,感谢!