南海网站建设哪家好,公司展厅设计公司哪家好,WordPress允许用户发布文章,西安关键词排名首页1、 前言 前端开发中#xff0c;不同的开发者有不同的代码编写习惯#xff0c;但实际项目中有的公司是需要协同开发的#xff0c;想要高效的协同#xff0c;规定一个大家都能接受的规范就尤为重要。 坚持好的代码风格规范#xff0c;从你我做起。 2、代码规范的好处 … 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,lessscss 文件命名 参照项目命名规则。 例 retina-sprites.less 5)CSS,classid 命名 全部采用小写方式 以“_”分隔类名不能以数字开头除了 - _ 不能带任何其他的符号见名知意 。 例 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 tab4 个空格 .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、数组、对象 对象属性名不需要加引号 对象以缩进的形式书写不要写在一行 数组、对象最后不要有逗号。
