前端开发规范总结
1、 前言 前端开发中,不同的开发者有不同的代码编写习惯,但实际项目中有的公司是需要协同开发的,想要高效的协同,规定一个大家都能接受的规范就尤为重要。 坚持好的代码风格规范,从你我做起。 2、代码规范的好处 (1)从根本上降低开发成本: 提高代码整体的可读性、可维护性、可复用性。 (2)保证代码的一致性: 软件系统中最重要的因素之一就是编码的一致性。如果编码风格一致,也更加易于维护,因 为团队内任何人都可以快速理解并修改。 (3)提升团队整体效率: 开发人员通常需要花费大量的时间来解决代码质量问题,如果都按照规范编写,也有助于团 队尽早发现问题,这将提高整个交付过程的效率。 3、不规范代码的弊端 (1)增加团队成员间的协作负担,影响降低团队整体效率: 由于缺乏规范,导致代码风格不一,极端情况下,某段代码只有某个人能修改。 (2)团队间协作更加困难: 由于开发人员要适应不同的风格,会导致效率低下。 4、命名规范 (1) 项目命名 全部采用小写方式, 以“-”分隔。 例: my-project (2 )目录命名 参照项目命名规则;有复数结构时,要采用复数命名法。 例: pages , assets , directives , components , mixins , utils (3)javaScript 文件命名 通常都是驼峰式命名或者用以“-”分隔。 例: accountModel.js 、 account-model.js (4)CSS,less,scss 文件命名 参照项目命名规则。 例: retina-sprites.less (5)CSS,class,id 命名 全部采用小写方式, 以“_”分隔,类名不能以数字开头,除了 - _ 不能带任何其他的符号,见名知意 。 例: retina-sprites.less (5)HTML 文件命名 参照项目命名规则。 例: error-report.html (6) 如果使用 Vue 或者 React 技术栈 通常都是驼峰式命名或者用以“_ -”分隔。 例: calendar_list.vue 、 calendarList.vue、calendar-list.vue 5、引入 CSS, JS 根据 HTML5 规范, 通常在引入 CSS 和 JS 时不需要指明 type,因为 text/css 和 text/javascript 分别是他们的默认值。 6、 属性顺序 属性应该按照特定的顺序出现以保证易读性; class id name data-* src, for, type, href, value , max-length, max, min, pattern placeholder, title, al aria-*, role required, readonly, disabled class 是为高可复用组件设计的,所以应处在第一位; id 具体且应该尽量少使用,所以将它放在第二位 7、 减少标签数量 实用高于完美 在编写 HTML 代码时,需要尽量避免多余的父节点; 很多时候,需要通过迭代和重构来使 HTML 变得更少 尽量遵循 HTML 标准和语义,但是不应该以浪费实用性作为代价; 任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。 8、css (2)分号 缩进 使用 soft tab(4 个空格) .element { position: absolute; top: 10px; left: 10px; border-radius: 10px; width: 50px; height: 50px; } (2)分号 每个属性声明末尾都要加分号。 .element { width: 20px; height: 20px; } 9、命名 类名使用小写字母,以中划线、下划线分隔 id 采用驼峰式命名 less 中的变量、函数以中划线分隔命名 /* class */ .element-content { ... } /* id */ #myDialog { ... } /* 变量 */ @color-black: #000; /* mixins */ .my-mixin() { color: black; } 10、属性声明顺序 相关的属性声明按右边的顺序做分组处理,组之间需要有一个空行。 .declaration-order { display: block; float: right; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; border: 1px solid #e5e5e5; border-radius: 3px; width: 100px; height: 100px ; font: normal 13px "Helvetica Neue", sans-serif; line-height: 1.5; text-align: center;color: #333; background-color: #f5f5f5; opacity: 1; } 书写顺序前后为: (1)定位属性:position display float left top right bottom overflow clear z-index (2)自身属性:width height padding border margin background (3)文字样式:font-family font-size font-style font-weight font-varient color (4)文本属性 text-align vertical-align text-wrap text-transform text-indent text-letter-spacing word-spacing white-space text-overflow 目的: 减少浏览器 reflow(回流),提升浏览器渲染 dom 的性能 原理:浏览器的渲染流程为: 1、解析 html 构建 dom 树,解析 css 构建 css 树:将 html 解析成树形的数据结构将 css 解析成树形的数据结构 2、构建 render 树:DOM 树和 CSS 树合并之后形成的 render 树。 3、布局 render 树:有了 render 树,浏览器已经知道那些网页中有哪些节点, 各个节点的 css 定义和以及它们的从属关系,从而计算出每个节点在屏幕中的位置。 4、绘制 render 树:按照计算出来的规则,通过显卡把内容画在屏幕上。 css 样式解析到显示至浏览器屏幕上就发生在 234 步骤,可见浏览器并不是一获 取到 css 样式就立马开始解析而是根据 css 样式的书写顺序将之按照 dom 树的结 构分布 render 样式,完成第 2 步,然后开始遍历每个树结点的 css 样式进行解 析,此时的 css 样式的遍历顺序完全是按照之前的书写顺序。在解析过程中,一 旦浏览器发现某个元素的定位变化影响 DOM,则需要重新渲染。 11、Scss、Less 相关 每个模块应该有一个单独的 less, 然后每个最外层的父类 className 应该 写在第一位,所有子 Node 的样式都写在里面,这样是为了避免命名冲突。比如 //out: false .parent-name{ .child-name{ ... } ... } LESS 嵌套最多不能超过 5 层; 不允许有空的规则; 元素选择器用小写字母; 去掉小数点前面的 0; 去掉数字中不必要的小数点和末尾的 0; 属性值'0'后面不要加单位; 同个属性不同前缀的写法需要在垂直方向保持对齐,具体参照右边的写法; 无前缀的标准属性应该写在有前缀的属性后面; 不要在同个规则里出现重复的属性,如果重复的属性是连续的则没关系; 不要在一个文件里出现两个相同的规则; 用 border: 0; 代替 border: none; CSS 选择器不要超过 3 层; 尽量少用'*'选择器 12、变量命名 标准变量采用驼峰式命名(除了对象的属性外,主要是考虑到 cgi 返回的数据) 'ID'在变量名中全大写 'Android'在变量名中大写第一个字母 'iOS'在变量名中小写第一个,大写后两个字母 常量全大写,用下划线连接 构造函数,大写第一个字母 jquery 对象必须以'$'开头命名 13、变量声明 一个函数作用域中所有的变量声明尽量提到函数首部,用一个 var 声明,不 允许出现两个连续的 var 声明。 14、单行注释 双斜线后,必须跟一个空格; 缩进与下一行代码保持一致; 可位于一个代码行的末尾,与代码间隔一个空格。 if (condition) { // if you made it here, then all security checks passedallowed(); } var zhangsan = 'zhangsan'; // one space after code 15、多行注释 最少三行, '*'后跟一个空格,具体参照右边的写法; 建议在以下情况下使用: 难于理解的代码段 可能存在错误的代码段 浏览器特殊的 HACK 代码 业务逻辑强相关的代码 /* * // 注释 ... */ var x = 1; 16、数组、对象 对象属性名不需要加引号; 对象以缩进的形式书写,不要写在一行; 数组、对象最后不要有逗号。更多推荐
前端开发规范总结
发布评论