现代前端技术解析-第5章 前端项目与技术实践(一)

《现代前端技术解析》第5章阅读笔记(一)


  • 笔记章节目录
  • 第1章 Web前端技术基础
  • 第2章 前端与协议
  • 第3章 前端三层结构与应用
  • 第4章 现代前端交互框架
  • 第5章 前端项目与技术实践
    • 一(5.1 前端开发规范)
    • 二(5.2 前端组件规范 & 5.3 自动化构建)
    • 三(5.3 自动化构建)
    • 四(5.5 前端用户数据分析 & 5.6 前端搜索引擎优化基础 & 5.7 前端协作)
  • 第6章 前端跨栈技术
  • 第7章 未来前端时代

  • 2020/02/19

5.1 前端开发规范

本节的使用规范均为《现代前端技术解析》作者的推荐规范,不是强制规范。

5.1.1前端通用规范(推荐规范)

(p205-208)

最好是在团队中统一规范。

  • 三层结构分离: 开发时应该做到3层结构分离,保证他们之间的最小耦合。

  • 缩进: 统一使用tab(或4个空格宽度)来进行缩进。

  • 内容编码: HTML使用来指定编码,css默认即可。

  • 小写: 所有的HTML标签、属性、样式名及规则建议使用小写,id可以用驼峰命名法。

    <ul id='menuList' class='menu-list'>ul>
    
  • 代码单行长度限制: 不要超过120字符(推荐)。

  • 注释: 尽可能的添加注释,也尽量在文件头部添加文件注释。推荐使用自文档化风格的代码进行开发。

  • 行尾空格与符号: 删除行尾空格与多余的符号。


5.1.2 前端HTML规范

(p208-212)

  • DTD定义: 统一使用H5的标准文档类型定义—

  • head内容: head中必须定义title、keyword、description,保证基本的SEO。(p208)

  • 省略type属性: 在引入css和js文件时,省略type属性。因为H5有默认值。

  • 使用双引号包裹属性值

  • 属性值省略: 非 必 须 的 属 性 值 可 以 省 略 ( 例 如 d i s a b l e d = " d i s a b l e d " 写 为 d i s a b l e d ) 。 \color{red}{非必须的属性值可以省略(例如disabled="disabled" 写为 disabled)。} disabled="disabled"disabled

    • 关于这一点,在XHTML语法规则(W3school XHTML语法规则)中明确规定了进制使用属性值最小化写法/简写。所以最好还是不要省略属性值
  • 嵌套: 所有元素必须正确嵌套。

  • 标签闭合: 非自闭合标签必须添加关闭标识。

  • 使用img标签的alt属性: 尽量避免alt属性为空。

  • 使用lablefor属性:lable中使用for属性,或者 将对应的控件放在lable内部 ,以实现点击lable内容会focus到控件上。

  • 按模块添加注释

  • 标签元素格式: 块级元素一般另起一行写。行内元素可以根据情况换行写。正确使用缩进。

  • 语义化标签: 推荐多使用H5的语义化标签,不要使用H5废弃的用于样式表现的无语义化标签(如

    ,,等)


5.1.3 前端CSS规范

(p212-218)

  • CSS引用规范: 尽量多使用外部样式引用规范,外部样式可以复用并能够利用浏览器缓存提高加载速度。强烈不建议大量使用内联样式。

  • 样式的命名约定: 使用小写单词加-组成。

  • 简写方式:

    • 单位0的缩写:如果属性值是0,则不写后面的单位(如px等)。
    • 去掉URL中引用资源的引号
    • 颜色值使用小写并尽量缩写到3位(如果可以的话)
  • 属性书写顺序: CSS样式书写遵循先布局(position、display、float等)后内容(color、font等)的规则。(p215)

  • Hack写法: 尽可能减少对CSS Hack的使用和依赖,选择其他方式代替。CSS若要实现多版本浏览器内核支持的话,应该遵循先写私有属性后写标准属性的原则。

  • CSS高效实现规范: (p216)

    • 标签名与id或者class组合选择器会造成冗余,应避免使用。
    • 尽量使用简短的CSS实现方式,对于无继承关系的元素使用合并的写法。
    • 不同元素之间属性存在继承关系时,应使用分拆方式,避免继承属性的重复定义。
  • 使用预处理脚本编码开发: 使用预处理嵌套的方式描述元素之间的层次关系。尽可能使用预处理器的高效语法来提高开发效率(如嵌套、变量、嵌套属性、注释、继承等)。(SASS、LESS)


5.1.4 ECMAScript 5常用规范(推荐规范)

(p218- 222)

  • 分号: JS语句后面统一加上分号。

  • 空格: 所有运算符、符号与英文单词之间添加必要的空格,有利于阅读。

  • 空行: 一般在代码块后保留空行,显得块内容层次分明。

  • 引号: JS字符串最外层统一使用单引号。方便内部的HTML使用双引号。

  • 变量命名: 标准变量采用驼峰命名法;常量使用大写字母加下划线;构造函数首字母大写。

  • 对象: 对象属性名不需要加引号;对象键值对以缩进的形式进行书写;数组、对象最后一个元素后面不要保留逗号,避免浏览器解析错误。

  • 大括号: 代码块使用大括号包裹,注意换行。

  • 条件判断: 尽量不要直接使用undefined进行变量判断,使用typeof代替。使用严格相等云算法(===,!==).

  • 不要在条件语句或循环语句中声明函数

  • 一些其他的可选规范参考: p222


5.1.5 ECMAScript 6+ 参考规范

(p222 - 227)

  • 正确使用ES6的变量声明关键字: letconst

  • 字符串拼接使用字符串模版完成

  • 解构赋值尽量使用一层解构,否则声明变量嵌套太深难以理解

  • 数组拷贝推荐使用...实现,更加简洁高效

  • 数组循环遍历使用for...of,非必须情况下不推荐使用forEachmap、简单循环:

    ​ 关于数组遍历大效率,参考博客JS 中的数组遍历方式效率比较,简单循环是效率最高的循环!!!

  • 使用ES6的类来代替之前的类实现方式,尽量使用constructor进行属性成员变量赋值

  • 模块化多变量导出时尽量使用对象解构,不使用全局导出。尽量不要把importexport写在一行

  • 导出类名时,保持模块名称和文件名相同,类名首字符需要大写

  • 生成器中yield进行异步操作时需要使用try...catch包裹,方便对异步进行处理

  • 推荐使用Promise, 避免使用第三方库或直接回调,原生的异步处理性能更好而且符合语言规范

  • 如果不是必须,避免使用迭代器

  • 不要使用统一码(Unicode),中文正则匹配和计算较消耗时间,而且容易出现问题

  • 合理使用Generator,推荐使用async/await,更加简洁


5.1.6 前端防御性编程规范

(p227-228)

防御性编程是指通过检测任何可能存在逻辑异常问题的代码实现,提高脚本执行过程健壮性的一种编程手段。

  • 对外部数据的安全检测判断: 外部(如后台)返回的数据,需要先做判断在进行处理,避免undefined报错。
  • 规范化的错误处理: 对请求或长时间的文件读写等可能失败的异步操作,需要进行错误情况的处理或异常捕获处理,而不应该静默,否则出错是不利于用户体验。

参考

W3school XHTML语法规则

JS 中的数组遍历方式效率比较

你可能感兴趣的:(#,读书笔记-现代前端技术解析,javascript,前端,现代前端技术解析,读书笔记)