《现代前端技术解析》第三章读书笔记

HTML结构层基础

• HTML5不是基于SGML的，因此不用声明DTD

• HTML5 ≈ 标签(HTML5) + CSS3 + JAVASCRIPT

• 语义化标签

  • 不要万物皆可div+css
  • 行内元素
    • a\b\span\img\input\button\select\strong等
  • 块级元素
    • div\ul\ol\li\dl\dt\dd\h1-6\p\table等
  • 空元素
    • br\hr\link\meta\area\base\col\command\embed\keygen\param\source\track等

• HTML糟糕的部分

  • 不要用table，因为要等table标签里面的内容解析完了才能展示网页
    • 可以使用ul\li模拟表格
  • 不要万物皆可div+css
  • img要写alt和title

• AMP HTML（Accelerated Mobile Pages\流动网络提速）

  • 使用严格受限的高效HTML标签
  • 使用静态网页缓存技术来提高访问静态资源的性能和用户体验

前端结构层演进

• XML和HTML的区别

  • XML注重数据存储
  • HTML注重把数据展示出来给用户看
  • 例如：结合Web Component自定义元素实现来加载

• HTML Web Component

  • video标签里面有一个用show userAgent Shadow DOM才能查看的东西，那就是Shadow DOM（播放器控件所在之处）

浏览器脚本演进时代（重点）

• ECMAScript5
  • 严格模式 ’use strict‘
  • JSON
    • stringify和parse
  • Object方法和属性
    • getPrototypeOf
    • getOwnPropertyNames
    • create
    • defineProperty
    • defineProperties
    • seal
    • freeze
    • preventExtensions
    • isSealed
    • isFrozen
    • isExtensible
    • keys
  • Array属性和方法
    • indexOf
    • lastIndexOf
    • every
    • some
    • forEach
    • map
    • filter
    • reduce
    • reduceRight
  • bind()
  • trim()
    • 去除两端空字符
  • Date
    • now()
    • toJSON()
• ECMAScript6
  • let，const
  • 字符串模板
  • 解构赋值
  • 数组新特性
    • ... 扩展运算符
    • Array.from()
      • 将类数组对象转换成真正的数组
    • Array.of()
      • 传入的一组参数值转换成数组
    • Array.prototype.copyWithin(target, start, end)
      • 数组实例的copyWithin方法，在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法，会修改当前数组。
      • 它接受三个参数。
      • target （必需）：从该位置开始替换数据。
      • start （可选）：从该位置开始读取数据，默认为 0 。如果为负值，表示倒数。
      • end （可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。
    • fill
    • find
    • findIndex
  • 函数参数
    • 默认参数 function func(name = 'xxx)
    • 不定参数 function func(...rest)
    • 扩展参数
      • let name = ['xxx','xxx1'];
      • function sayHello(name1, name2)
      • sayHi(...name)
  • 箭头函数
  • 增强对象
    • 属性简写
    • 对象方法属性简写声明
    • 返回变量或者对象作为属性名，[表达式]: 'value'
  • 类
    • class
    • extends
  • export/import
  • Iterator
  • Generator
  • Map\Set\WeakMap\WeakSet
  • Promise
  • Symbol
  • Proxy
  • 统一码
  • 进制数
  • Reflect
  • 递归安全限制
• ECMAScript7+
  • Array.prototype.includes()
  • async/await
• TypeScript

前端表现层基础

• CSS选择器与属性
  • 选择器：详看第一章
  • 属性
    • 布局类
      • position，flex，float，align等
    • 几何类
      • 盒相关（margin、padding等），渐变，background等
    • 文本类
      • font类，text类等
    • 动画类
      • css3为主的transition、animation等
    • 查询类
      • @media等
• 样式统一化
  • 清空浏览器默认格式
• CSS预处理
  • scss、less那些

表现层动画

• JavaScript
• SVG
• CSS3 animation
• Canvas
• requestAnimationFrame

响应式网站开发技术

• 结构层响应式

  • 结构层数据内容响应式
    • 前端根据userAgent获取不同的资源
  • 后端数据渲染响应式
    • 后端根据userAgent获取不同模板
  • 结构层媒体响应式
    • Media Query
    • Picture标签（草案）

• 表现层响应式

  • 响应式布局
    • Media Query
  • 屏幕适配布局
    • 百分比

• 行为层响应式

  • 判断浏览器