web前端开发知识总结与反思（web前端开发规范）
导读：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二 、环境要求
（一） 、开发环境统一
Node.js 8.9 或更高版本 ，你可以使用 nvm 或 nvm-windows 在一台电脑中管理多个 Node 版本 使用VS Code进行代码编写 规定 Tab 大小为 2 个空格 ，保证在所有环境下获得一致展现(settings.json文件修改"editor.tabSize": 2) 安装插件 Vetur（ Vue开发扩展及 Vue 文件代码格式化） 使用 Chrome 浏览器并安装 Vue.js devtools 进行调试三 、编码规范
（一） 、HTML / Template 编码规范
HTML换行缩进：采用 tab空格 尽量减少标签层级 双标签必须闭合 ，单标签用斜线闭合 行内元素里面不可使用块级元素 <a href="https://www.cnblogs.com/catchFish-ing/test"> <div></div> </a> 避免使用已过时标签 ，如：font 对于属性的定义 ，使用双引号 ，不要使用单引号 为每个 HTML 页面根元素添加 lang 属性 <html lang="zh-CN"> <!-- ... --> </html> 通过声明一个明确的字符编码 ，让浏览器轻松 、快速的确定网页内容渲染方式 ，通常指定为UTF-8.....
【语义化】尽量遵循 HTML 标准和语义 ，但是不要以牺牲实用性为代价；任何时候都要尽量使用最少的标签并保持最小的复杂度
（二） 、css / Less / Sass 编码规范
类名使用小写字母 ，以中划线分隔 id 采用驼峰式命名 Less / Sass 中的变量 、函数 、混合等采用驼峰式命名 所有声明语句都应当以分号结尾 最后一条声明语句后面的分号是可选的 ，但是 ，如果省略这个分号 ，你的代码可能更易出错,尤其压缩打包出错 选择器不要超过4层（在Less / Sass中避免嵌套超过4 层） 缩进使用两个空格代替 Tab 为选择器分组时 ，将单独的选择器单独放在一行 每条样式声明应该独占一行 尽可能不要使用行内（inline）样式 组件之间的完全解耦 ，不会造成命名空间的污染 ，如：.mod-xxx ul li 的写法带来的潜在的嵌套风险 。 选择器权重（样式覆盖） 非通用样式使用嵌套方式进行编写 ，避免影响其他自己不了解样式 ，造成样式覆盖 Vue 中样式谨慎使用 scoped ，会影响样式选择器性能 ，请使用第一点进行特有样式编写 样式需要修改时 ，尽量找到原样式声明进行修改 属性的书写顺序, 举个例子 .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 编码规范
常量建议还是使用大写字符+下划线命名 。 const PRICE_MAX=10000; 函数按职责命名 ，一般都是动词开头 。 function setUserInfo(){} 变量不要先使用后声明 不要在同个作用域下声明同名变量 在必要的地方添加非空判断以提高代码的稳健性 使用===代替== ，!==代替!=（==会自动进行类型转换 ，可能会出现奇怪的结果） 使用三目运算代替简单的 if-else let count = 100; count = seat < 5 ? 20 : seat < 10 ? 60 : 90; 正确使用 null 不要用null来判断函数调用时有无传参 不要与未初始化的变量做比较 正确使用 undefined 不要直接使用 undefined 进行变量判断 使用typeof和字符串 undefined 对变量进行判断 不要给变量赋值 undefined（undefined 本身就表示一个变量未定义） 普通函数：首字母小写 ，驼峰式命名 ，统一使用动词或者动词+名词形式,如：fnGetVersion() 对象方法与事件响应函数：对象方法命名使用fn+对象类名+动词+名词形式,如：fnAddressGetEmail() 事件响应函数：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 暂停,(四) 、 编写注释
公共组件需要在文件头部加上注释说明： /** *文件用途说明 *作者姓名 、联系方式（旺旺） *制作日期 **/ 注释单独一行 ，不要在代码后的同一行内加注释： // 个人信息 p.s. 部分编写思路参考别的码友 ，welcome您的观光,感谢！创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！