！！！需求描述

产品小哥的需求：要求在一个背景墙上可以上传九张视频或者图片，如果用户上传了视频，要按照规定比例显示。

！！！问题描述

由于后端童鞋无法提供给前端视频的封面，因此需要前端本地截取视频的第一帧，然后使用canvas绘制成image，然后使用vue-cropper截取指定规格的图片（我们需要是1：1规格），最后上传到服务器即可。

UI图

解决方案

Pseudo分 Pseudo class，Pseudo element

Pseudo class: 常见的五大伪类，也是浏览器最早实现的五大伪类，都针对于链接/行为

1. :any-link (选中带link的a标签) example
2. :link :visited (表示 already visited this link) example
3. :hover (hovering over this link) example
4. :active (This link will turn while you click on it.) example
5. :focus [when the user clicks or taps on an element or selects it with the keyboard's "tab" key.] example
6. :target [常用于锚点跳转，:target表示跳转到当前的元素] example

还有一类为选择类似于选择元素在父元素的索引
:last-child
:last-of-type
:not()
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
这些伪类我们因减少使用，因为其中的一部分会造成回溯 对css computed消耗较大。其伪类的语法和功能我们可以去MDN查询

在开始之前我们介绍一下一个概念 盒(box)

在CSS排版与绘制除了需要处理文字以外，另一个就是盒(box)了，我们可以将盒(box)作为CSS排版和绘制的基本单位。

可能大家会把标签，元素，盒的概念混淆，我们首先要梳理一下。

将标签(Tag)，元素(Element)，盒(Box) 填入下面空白处

1. HTML代码中可以书写开始____，结束___，和自封闭___。
2. 一对起止___，表示一个___。
3. DOM树中存储的是___和其他类型的节点(Node/文本节点，注释节点，DOCTYPE)。
4. CSS选择器选中的是___
5. CSS选择器选中的___，在排版时可能产生多个___，排版和渲染的基本单位是___。

盒模型(四层)：

1. content
2. padding
3. border
4. margin

浏览器模式盒(box)的width为content width，但可以使用box-sizing属性来调整

正常流(Normal Flow)

如何进行正常流的排版：

1. 收集盒进行
2. 计算盒在行中的排布
3. 计算行的排布

当我们输入一个 URL 地址后，会在显示屏上呈现一个网页，在这一个过程中发生了什么？

我们以议论文三要素(论点，论据，论证)的角度去探讨这个辩题。
首先我们需要理解几个问题：
1.什么是对象？什么是JavaScript对象？
2.在程序执行时JavaScript对象运行时的表现是什么？

我们先来解决第一个问题（来自于winter老师@Winter在某平台上的总结）：在《面向对象分析与设计》这本书，Grady Booch 他认为，从人类的认知角度应该是下列事物之一：

1. 一个可以触摸或者看见的东西；
2. 人的智力可以理解的东西；
3. 可以指导思考或行动（经行想象或施加动作）的东西。

有了对自然对象的定义我们可以描述编程中的对象了，在不同语言有对对象不同的描述，具有代表性的流派是以Java和C++为首的以类来描述对象的代表流，早期的JavaScript却以比较冷门的方式：原型。

很不幸，但由于一些公司的政治原因，JavaScript推出之时，要求模仿Java，因此在JavaScript原型运行时的基础上引用了类型Java中new，this特性，使其看起来更像Java。

在ES6之前，JavaScript使用者试图在原型的基础上把JavaScript改造成基于类的编程语言。因此出现PrototypeJs，Dojo框架“方言”。

我们可以从类的运行时的角度来谈论对象，实际就是讨论对象模型。因为在任何时候代码的运行都离不开对象模型。

首先我们来了解一下JavaScript是如何设计对象模型

JavaScript对象的特征

依旧是引用winter@winter老师基于 JavaScript之父Grady Booch的《面向对象分析于设计》一书中总结对象具有以下几点特征：

1. 对象具有唯一标识性：即使两个完全一样的对象，也并非同一个对象；
2. 对象有状态：对象具有状态，即使是一个对象也可能有不同的状态；
3. 对象具有行为：基于不同状态会产生不行行为。

首先我们可以看第一个特征：对象具有唯一标识性。对象的唯一性是通过对象的内存地址来体现的。即使是两个相同的对象它的内存地址也不一样。我们可以看一段代码来佐证这以特征：

var obj1 = { a: 1 };
var obj2 = {a: 1};
console.log(obj1 == obj2);  // false 

对于第二和第三个特性“状态和行为”，不同语言会使用不同语言去描述他们，比如在Java称它们为“属性” 和 “方法”；而在C++中称作为 “成员变量” 和 “成员函数”，在JavaScript把它们统称为 “属性”，所以JavaScript可以通过属性来抽象对象的状态和行为。
举个栗子：

var o = {
  a: 1,
  b: function() {
    console.log(this.a);
  }
}

所以，用一句话来总结：在 JavaScript 中，对象的状态都被抽象成了属性。如果你用过Java，一定不要奇怪，尽管设计思路有差异，但两者很好的表现了对象的基本特征：标识性，状态和行为。

在实现了对象的基本特征的基础上，我认为， JavaScript 中对象独有的特色是：对象具有高度的动态性，这是因为 JavaScript 赋予了使用者在运行时为对象添加状态和行为的能力。

我们在运行是可以向对象添加属性，举个栗子：

var obj = { a: 1 };
obj.b = 2;
console.log(obj.a, obj.b); // 1 2

为了提高抽象能力：JavaScript 的属性被设计成比其他语言更为复杂的形式，它为对象的属性提供了一对属性（getter/setter）。

JavaScript 对象的两类属性

对JavaScript来说，属性并非简单的名称和值，JavaScript用一组特征（attribute）来描述属性（property）。

先来说第一类属性（数据属性）。它比较接近于其他语言的概念。数据属性具有四个特征：

• value: 就是属性的值。
• writable: 决定是否能被赋值。
• enumerable: 决定 for in 能否枚举该属性。
• configurable: 决定该属性能否被删除或者改变特征值。

在大多数情况下，我们只关心数据属性的即可。

第二类属性是访问器（getter/setter）属性，它也有四个特征。

• getter: 函数或 undefined，在取属性值时被调用。
• setter: 函数或 undefined，在设置属性时被调用。
• enumerable: 决定 for in 是否枚举该属性。
• configurable: 决定该属性是否被删除或者改变特征值。

访问器属性使得属性在读和写时执行代码，它允许使用者在读和写属性时，得到完全不同的值，它可以视为一种函数的语法糖。

我们通常用于定义属性的代码会产生属性，其中writable，enumerable, configurable都默认是true。我们可以使用内置函数Object.getOwnPropertyDescriptor 来查看：

var obj = { a: 1 };
obj.b = 2;
//a和b皆为数据属性
Object.getOwnPropertyDescriptor(o, "a"); // {value: 1, writable: true, enumerable: true, configurable: true}
Object.getOwnPropertyDescriptot(o, "b"); // {value: 2, writable: true, enumerable: true, configurable: true}

我们在这里使用了两种方式定义了属性，定义完属性后，我们使用JavaScript内置 API 来查看这个属性，我们可以发现，这样定义出来的都是数据属性，writable，enumerable，configurable都是默认值true。

如果我们想改变属性的特征，或者定义访问器属性，我们可以使用Object.defineProperty, 举个栗子

var obj = { a: 1 };
Object.defineProperty(obj, "b", writable: false, enumerable: true, configurable: true)
// a和b都是数据属性，但特征值变化了
Object.getOwnPropertyDescriptor(o, "a"); // { value: 1, writable: true,  enumerable: true, configurable: true}
Object.getOwnPropertyDescriptor(o, "b");  // { value: 1, writable: false,  enumerable: true, configurable: true}
o.b = 3;
console.log(o.b); // 2

我们同样使用内置 API Object.getOwnPropertyDescriptor 查看数据属性，发现改变了writable的特征值为 false ，我们再重新赋值给 b , b的值不会发生改变。

在创建对象时，也可以使用 get 和 set 关键字来创建访问器属性。

var obj = { get a() { return 1 }  };
console.log(obj.a); // 1 

访问器属性跟数据属性不同，每次访问器属性都会执行getter 或 setter 函数，这里我们的getter 函数返回的是1， 因此每次 obj.a 都返回1

这样我们就理解了，实际上 JavaScript 对象的运行时是一个 “属性的集合”，属性以字符串或者 Symbol 为key，以数据属性特征值或者访问器属性特征值为value。

写到这里，如果你理解了对象的特征，也就不难理解为什么市面会有人持有 “JavaScript 不是面向对象 ” 这样的说法了。这是因为 JavaScript 的对象设计跟目前主流基于类的面向对象差异非常大。

可事实上 JavaScript 语言标准也已经说明，JavaScript 是一门面向对象的语言，我想标准中能这样说，正是因为 JavaScript 的高度动态性的对象系统。

这样的对象系统设计虽然特别，但是 JavaScript 提供了完全运行时的对象系统，这使得它可以模仿多数面向对象编程范式（下一篇会介绍 JavaScript 中两种面向对象编程的范式：基于类和基于原型），所以它也是正统的面向对象语言。

探究前端知识边界这个题目比较大，前端的所属领域从开始的切图工到现今不断向后扩张甚至到了一些软件测试，Node, 微服务领域等本不属于传统前端的领域，随着信息技术不断飞速发展，前端岗位细分的也十分厉害。下面我们从传统的前端技术为始发点，以脑图作为辅助工具，顺着脑图的每一个分支来梳理前端技术体系，试试探索出前端技术的边界。

首先，在传统的前端技术我们很自然的会想到前端技术的三驾马车：HTML, CSS, JavaScript，和API，因为API是特定环境的产物，因此我们把API也归为前端技术的一类。

先来看一下HTML: 所谓横看成岭侧成峰，远近高低各不同，我们也会从三个不同的维度来看一下HTML。

1. 通用的计算机语言
2. SGML
3. XML

通用的计算机语言分为两部分：语法和词法，它们可以使得计算机可以识别HTML并且可以对其进行编译；通用计算机我们可以在whatwg找到一份词法资料和一份语法资料从中我们可以了解到关于HTML规定了那些词法规则并且还可以知道语法是如何将词组织串联起来的。

在描述SGML之前可以参考一份比较来自w3的资料和一份来自whatwg关于XML词法的资料。关于SGML我们要知道两个：

1. DTD：DTD的字面意思是文档类型定义，如果漏写DTD声明,Firefox仍然会按照标准模式来解析网页,但在IE中(包括IE6,IE7,IE8)就会出发怪异模式.
2. entity：这篇小文章有解释entity(实体)，大致讲的是，字符实体引用（或简称为实体）提供了一种输入字符的方法，这些字符无法用文档的字符编码表示或不能轻易在键盘上输入。

关于XML，老样子我们还是先来一篇文章介绍XML词法
，主要有两大块构成（namespace，tag）

1. namespace
2. tag

namespace：在w3中对namespace的解释，命名空间提供避免元素命名冲突的方法。举个栗子：
一个XML文档中使用

<table>
   <tr>
   <td>Apples</td>
   <td>Bananas</td>
   </tr>
</table>

另一个XML文档也使用了这个标签

<table>
   <name>African Coffee Table</name>
   <width>80</width>
   <length>120</length>
</table>

假如这两个 XML 文档被一起使用，由于两个文档都包含带有不同内容和定义的

1. svg
2. xmlns
3. mathml
4. aria

tag：我们可以通过这条线索可以知道具体有哪些标签，以及总的数量。

以上我们从三个维度来对HTML进行总结，接下来，我们再来看看JavaScript。

我们分别从语法（Grammer），语义（Semantics），运行时（Runtime）的角度来看一下JavaScript。
语法（这里的语法指的是比较大的概念）：它由词法（Lex）和语法（syntax）组成。

词法（Lex）：有分为以下几种：

1. WhiteSpace（空白符）
2. LineTerminator（换行符）
3. Comment（注释）
4. Token

前面三种我们成为没有效的输入（因为会被忽略），而Token称之为有效的输入，位于JavaScript语言的最底层，我们可以把这几类统称为原子（Atom）。它主要成分包括：

1. Identifier
2. Keywords
3. Punctuator
4. NumericLiteral
5. StringLiteral
6. RegularExpressionLiteral
7. Template

总体概括一下，就是说Token由标识符，关键字，文字量（字符串，字符和数字文字量）等组成。

语法（syntax）：有分以下几种：
Atom（原子）
Expression（表达式）
Statement （语句）
Structure（结构体）
Module&Script（模块和脚本）

因此即便是JavaScript最复杂的结构也不过是有这几部分构成。

而语义（Semantics）与语法（Grammer）一一对应

在运行时（Runtime）中 类型（Type）和 执行过程显得尤为重要：

类型（Type）：在 V10 版本中一共有七种类型，分别为：

1. Number
2. String
3. Boolean
4. Undefined
5. Null
6. Object
7. Symbol

执行过程（我们可以在ECMA标准中找到答案），它分为下面几个执行步骤：

1. runJob（初始化内置对象(Realm)）
2. Job
3. Module&Script
4. Structure
5. Promise
6. Function
7. Statement
8. Expression
9. Literial
10. Identifier

以上我们从语法（Grammar），语义（Semantics）和运行时（Runtime）三个维度来对HTML进行总结，接下来，我们再来看看CSS。

CSS的标准比较零散但我们可以参考以下 CSS V2.1版本，虽然不是最新版本，但整体大的结构还是比较完整的。

我们可以从这几个部分来分析CSS：

1. 词法/语法
2. @Rule
3. 普通规则
4. 机制

我们重点来看一下普通规则：一条普通的 CSS 语句有三个部分组成 举个栗子 .className { color: red } 其三部分分别是：

1. 选择器
2. Property
3. Value

而选择器由分为：

• 简单选择器：常见的简单选择器有 .cls，#id，tagName，*，attr=v
• 复合选择器
• 复杂选择器
• 选择器列表

Property和value就不用过多讲解。

关于CSS机制：排版，伪元素，动画，优先级。

API：将其分成下面几种主流类型：

1. Browser
2. Node.js
3. Electron
4. 小程序

Browser可以分为DOM，BOM；
而DOM由Nodes，Ranges，Events 所组成。

当我们学习一门语言时，无论是自然语言亦或者编程语言不外乎由词法、文法、语法三部分组成，而词法规定该语言的组成部分，我们就拿普通话举个例子，汉语由很多个汉字构成，这个汉字必须在规定好的规则里排列顺序，比如主谓宾，定状补。而每个汉字又是由不同的偏旁部首组成，在我看来每个偏旁部首就意味着汉语的最小粒度。那对于JavaScript来说词法又是个啥玩意，又会有哪些部分组成，该不会它的最小粒度也是个偏旁部首。嘻嘻嘻（开玩笑的啦。。。

我们可以在ecmaScript(V262)这个版本中找到线索 (这个玩意也太难懂了吧，我的妈呀快逃 。。。

我们可以从这份文档中关于词法(lex)的介绍可以了解到，JavaScript 的词法由以下四个部分构成

1. whitespace (空格)
2. lineTerminator (换行符)
3. comment (注释)
4. token (标记)

这四点我们可以分成两部分，分别是 无意义的组成 ，有意义的组成

无意义的组成：由 1、2、3 组成， 这三部分对整体代码并不会直接影响程序的运行，更多的是起到辅助，修饰作用，因此我们称其为无意义的输入。

有意义的组成：token，关于token由以下几部分组成。

1. Identifier
2. Keywords
3. Punctuator
4. NumericLiteral
5. StringLiteral
6. RegularExpressionLiteral
7. TemplateLiteral

我们来一一讲解token的组成部分

Identifier，字面意思：标识符，关于标识符的写法，我们可以在ecmaScript262得知，标识符必须由$ ，_ 或者 utf16编码格式的码点组成。

Keywords：字面意思：关键字，关于标识符的写法，我们可以在 Keywords 找到答案

Punctuator：运算符

Literal: 字面量

总结：从ecmaScript这份宝典中我们了解到JavaScript脉络，这对于我们深究JavaScript背后的原理尤为重要。我们现在就可以解决文章开头我们提出的 JavaScript词法由哪几部分组成，最小粒度会不会也是偏旁部首呢 这个问题。

关于JavaScript类型：
JavaScript类型分为两部分：语言类型（Language Types），运行时类型（Specification Types）

在 v262版本 中语言类型分为七种：Number，String，Boolean，Object，Null，undefined，symbol

而运行时类型包括 Reference, List, Completion, Property Descriptor, Lexical Environment, Environment Record, and Data Block. 关于运行时类型，它们不能不具有实现实体类型，它们只能评估，表达，说明中间过程
举个delete的例子：

var a = 3
delete a
delete 3

按我们正常思维：当我们把一个基本类型的值3赋给了变量 a , a在某种程度上与 3 是等效的，为什么我们可以 delete a 却不能 delete 3 呢。这个中间过程就可以由运行时类型可以替我们解释。

嵌套路由

在我们平时的生活应用中(我所接触的如一些中后台, 后台应用)就会利用嵌套路由规则，通过动态路由对页面中的某个结构进行动态切换。

Vue作为单页应用 通过 App.vue 作为根节点，所有和视图有关的内容都依次有序的绘制到 id 为 app 这个节点上。

<div id = "app">
  <router-view></router-view>
</div>

const Detail = {
  template: '<div>Detail {{ $route.params.id }}</div>'
}

const router = new VueRouter({
  routes = [
      { path: '/detail/:id', component: Detail }
   ]
})

App.vue 中的 是最顶层的出口，渲染最高级路由匹配的组件。同样一个被渲染的组件也可以包含自己的嵌套

const Detail = {
   template: `
    <div class="detail">
       <h2>Detail {{ $route.params.id }}</h2>
       <router-view />
   </div>
  `
}

倘若要在嵌套的出口中渲染组件，还需要在VueRouter的参数中配置Children

const router = new VueRouter({
  routes: [
      { path: '/detail:/id', component:  Detail,
        children: [ 
            {
             // 当 /detail/:id/profile 匹配成功,
             // DetailProfile 会被渲染到 Detail 的 <router-view />
             path: 'profile',
             component: DetailProfile,
            }
        ] },
    ]
})

注意：以 / 开头的嵌套路径会被当作根路径。因此嵌套组件就无需设置嵌套的路径。

举个例子

业务需求：在业务中我们需要把某种模式匹配到的路由全部映射到同一个组件里。例如我们有一个列表页面需要通过列表id跳转到详情页面。

const Detail= {
   template: '<div>detail</div>'
 } 

const router = new VueRoute({
   routes: [{ path: '/detail/:id', component: Detail }]
})

现在就会有路由 /detail/1，/detail/2 能映射到这个组件里，而id可以通过 this.$route.params.id 拿到

const Detail = {
   template: `<div>detail {{this.$route.params.id}}</div>`
 } 

点击查看完整例子

监听params变化

当组件实例被复用时，因为这个生命钩子没法重复调起(因为如何相比于摧毁再重建，复用更节约资源)。因此我们无法在生命钩子里检测到路由参数变化。但我们可以通过以下手段

const Detail = {
  templete: '...',
  watch: {
    $route(to, from) {
          // 对路由变化作出响应...
      }
  }
}

或者使用 beforeRouteUpdate 导航守卫

const Detail = {
   template: '...',
   beforeRouteUpdate(to, from, next) {
         // react to route changes...
         // don't forget to call next()
   }
}

404路由

在声明路由时候，当我们需要通过通配符 * 去匹配任意路由 ，声明位置必须要所有常规路由的最后。

  {
      path: "*",
      name: "notFound",
      component: () => { ... } 
  }

在开发中我们可能会遇到无法匹配的子路由时 notFound 却是空白页，这时我们需要在 beforeEnter 导航守卫中去判断在routes中是否能匹配该子路由，如果不能匹配则跳转到 notFound 中。

beforeEnter: (to, from, next) => {
  const exists = store.destinations.find( destination => destination.slug === to.params.slug );
  if (exists) {
      next()
   } else {
      next({ name: "notFound" });
  }
}

还有一点需要优化的：我们会看到控制台会有 警告⚠，此时我们需要给notFound 路由添加别名：

{
   path: "/404",
   alias: "*",
   name: "notFound",
   component: () => { ... } 
}

为了抓取所有CSS属性，我们可以通过以下小爬虫代码

1. 首先我们通过about:blank打开一个浏览器空白页;
2. 我们可以在控制台输入以下代码

JSON.stringify(Object.keys(document.body.style).filter(e => !e.match(/webkit/)), null, "                     ")

我们可以抓到过滤webkit开头的属性之后浏览器一共还有359个属性，我这里已经做好了一份properties的JSON文件浏览器所有properties

根据CSS的作用特点，一开始本想根据layout，intercative，render/draw，svg，others，但分类到一半时，有一些摸棱两可的属性感觉放哪都可以的属性，便在网上找了一份我还觉得ok的CSS分类的导图资料地址，便有了这份CSS属性分类分类地址

毕业总结

时光飞逝，转眼间与Winter大大、班班、助教老师们共同学习的日子即将结束。虽有不舍，但内心满怀希望，经历这段辛苦学习之后，望未来可期。

从野路子少年，到懵懵懂懂开始接触正规化，规范化，完备性的学习线路，开始也不抵触阅读英文文档，追溯发，写思维导图，甚至手把手教我们写文章，每堂课竟都颠覆了我的想象(原来代码还可以写的这么好看)，说实话每节课都让人很难受(这就是成长的过程吧)。

这段学习之旅我意识到，兴趣，好奇和不停的探索才是让你走得更远的利器，万变不离其宗，只有把基础打牢，我们就无所谓技术的大浪大潮。此时的我想到《风云》里无名的万剑归宗，只有忘记之前的光环，所有荣誉轻装上阵，再出发，未来更优秀的自己，我来了...

最后感谢《极客时间》提供给我们这么优秀的平台，Winter老师的课真可谓良心著作。望《极客时间》越办越好，再次感谢Winter大大、班班、助教老师们，未来见！

1.写文档
2.bugfix 单步追踪 通读
3. 提交作者review

单例模式：保证一个类只有一个实例

我曾做过一张关于CSS的脑图 戳这里 正所谓横看成岭侧成峰，我们可以从下面几个角度来了解CSS，若有误，望指正。

1. Attributes of a Data Property

2. Attributes of a Accessor Property

3. Essential Internal Methods

4. Additional Essential Internal Methods of Function Object