feat: update

whu-luojian · Mar 24, 2021 · 6b5304c · 6b5304c
1 parent e26a5a5
commit 6b5304c
Show file tree

Hide file tree

Showing 9 changed files with 213 additions and 2 deletions.
diff --git a/src/2020-03-24/bfc.html b/src/2020-03-24/bfc.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<body>
+  <!-- BFC -->
+
+  <!-- BFC 创建方式 -->
+  <!--  
+    1. 根元素（html）
+    2. 浮动元素（元素的 float 不是 none）
+    3. 绝对定位元素（元素的 position 为 absolute 或 fixed）
+    4. overflow 不为 visible 的块元素（hidden、auto、scroll）
+    5. display 为 flow-root 的元素
+    6. 弹性元素（display 为 flex 和 inline-flex 的元素）
+    7. 行内块元素（display 为 inline-block）
+    8. 表格相关元素（display 为 table、table-cell、table-row、table-caption 等）
+  -->
+
+  <!-- BFC 布局规则 -->
+  <!-- 
+    1. BFC 是页面上一个隔离的独立容器，容器内的子元素不会影响到外面的元素，外面的元素也不会影响到内部子元素
+    2. 在 BFC 中，内部的 Box 会在垂直方向，一个接一个放置
+    3. Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠（margin 塌陷）
+    4. BFC 区域不会与 float box 重叠
+    5. 在计算 BFC 的高度时，浮动元素也参与计算
+    6. 在 BFC 中，每个元素的 margin box 的左边，与包含块 border box 的左边相接触，即使存在浮动也是如此
+   -->
+
+   <!-- 应用 -->
+   <!-- 
+     1. 自适应两栏布局 https://jsbin.com/bisamuzohi/edit?html,css,output
+     2. margin 塌陷（父子元素）：https://juejin.cn/post/6844903937192132616
+     3. margin 合并（兄弟元素）：https://juejin.cn/post/6844903937192132616
+    -->
+</body>
+</html>
diff --git a/src/2020-03-24/cache.js b/src/2020-03-24/cache.js
@@ -0,0 +1,18 @@
+/**
+ * https://whu-luojian.github.io/blog/browser-frontend-cache.html
+ * 
+ * 发起资源请求：
+ * 1. service worker
+ * 2. memory cache
+ * 3. disk cache
+ * 4. http 请求
+ * 
+ * 资源从服务器返回：
+ * 1. service worker（根据 worker 的 handler 配置是否存入 cache storage ）
+ * 2. disk cache (根据响应头判断是否存入 disk)
+ * 3. memory cache (资源引用存入 memory，下次使用)
+ * 
+ * max-age 单位是秒，比如 cache-control: max-age=3600，表示资源 60 分钟后失效
+ * last-modified 是资源上次修改的时间，比如：Last-Modified: Mon, 10 Nov 2018 09:10:11 GMT，
+ * 精度也是秒，所以如果资源更新速度是秒以下单位，那么该缓存是不能被使用的
+ */
diff --git a/src/2020-03-24/curry.js b/src/2020-03-24/curry.js
@@ -0,0 +1,18 @@
+/**
+ * sum(2, 3) = sum(2)(3) = 5
+ */
+
+// 方法1
+const sum = (...args) => {
+  return args.length === 2 ? args.reduce((a, b) => a + b) : (...moreArgs) => sum(...args, ...moreArgs)
+}
+
+// 方法2
+const add = (a, b) => a + b
+const curry = fn => {
+  const judge = (...args) => args.length === fn.length
+    ? fn(...args)
+    : (...moreArgs) => judge(...args, ...moreArgs)
+}
+const sum = curry(add)
+
diff --git a/src/2020-03-24/https.js b/src/2020-03-24/https.js
@@ -0,0 +1,14 @@
+/**
+ * https 是安全版的 http。
+ * https 在 http 和 tcp 之间加了一层用于加密解密的 SSL/TLS（secure sockets layer 安全套接层 / transport layer security 安全传输层）；
+ * https 默认使用 443 端口，http 默认使用 80 端口；
+ * 
+ * 通信过程如下：
+ * 1. 客户端发出请求：给出支持的协议版本、支持的加密方法以及一个客户端生成的随机数
+ * 2. 服务端回应：确认双方通信的协议版本和加密方法，并给出服务器证书和一个服务器生产的随机数
+ * 3. 客户端回应：客户端确认证书有效，使用 CA 机构的公钥从证书中解密出服务端的公钥，然后生成一个
+ * 随机数，使用服务端公钥加密这个随机数，发送给服务端；
+ * 4. 服务端回应：服务端使用自己的私钥解密客户端发来的随机数，客户端和服务端根据约定的加密方法，使用
+ * 三个随机数，生成“对话秘钥”；
+ * 5. 会话通信：客户端和服务端使用“对话秘钥”加密通信
+ */
diff --git a/src/2020-03-24/tri.html b/src/2020-03-24/tri.html
@@ -0,0 +1,22 @@
+<!-- css 实现三角形 -->
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <style>
+    .tri {
+      width: 0;
+      height: 0;
+      border: 10px solid;
+      border-color: transparent transparent #000 transparent;
+    }
+  </style>
+</head>
+<body>
+  <div class="tri"></div>
+</body>
+</html>
diff --git a/src/2020-03-24/v-model.html b/src/2020-03-24/v-model.html
@@ -0,0 +1,70 @@
+<!-- v-model 实现原理 -->
+<!-- 答题：语法糖 + 响应式原理 -->
+
+<!-- 语法糖 -->
+<!-- 
+  vue 2.x:
+  1. v-model="msg" 是 v-bind:value="msg" 和 v-on:input(change)="msg=$event.target.value" 的语法糖
+
+  vue 3.x
+  1. v-model="msg" 是 v-bind:modelValue="msg" 和 v-on:update:modelValue="msg=$event.target.value" 的语法糖
+  // https://v3.cn.vuejs.org/guide/component-custom-events.html#%E5%A4%9A%E4%B8%AA-v-model-%E7%BB%91%E5%AE%9A
+  2. 支持多个 v-model 绑定，v-bind:name="name" 等价于 :name="name" + @update:name="name=$event.target.value"
+
+  v-model 作用于普通表单元素和自定义组件
+
+  作用于表单元素时：
+  1. 编译 v-model,指令 created 时把 v-model 绑定的值 value 赋值给表单元素(el.value)，以及添加 input or change(lazy修饰符情况下) 事件，
+  当表单内容更改时 $emit 出对应的事件(绑定在 el._assign 上);
+  2. v-model 监听了 compositionstart 和 compositionend 事件，当使用中文输入法时，会触发 compositionstart 事件，设置 e.target.composing 为 true，
+  compositionend 设置 e.target.composing 为 false，e.target.composing 为 false 时 input 才会触发对应的回调
+  
+  作用于自定义组件时：
+  1. 编译结果和指令没关系，编译结果为往组件传了一个名为 modelValue 的 prop，以及在组件上监听了一个名为 update:modelValue 的自定义事件，事件
+    回调会把参数 $event 赋值给 data
+  2. 本质是父子组件通信的语法糖, 通过 prop 向组件传递数据，并监听自定义事件接受组件反传的数据并更新
+ -->
+
+ <!-- 响应式原理 -->
+ <!-- 
+   vue 2.x
+   1. Object.defineProperty
+
+   vue 3.x
+   1. proxy
+  -->
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<body>
+  <input id="input" type="text">
+  <div id="text"></div>
+  <script>
+    let input = document.getElementById('input')
+    let text = document.getElementById('text')
+
+    let data = {}
+    let value = ''
+    Object.defineProperty(data, 'value', {
+      get() {
+        return value
+      },
+      set(newVal) {
+        value = newVal
+        input.value = newVal
+        text.innerHTML = newVal
+      }
+    })
+
+    input.addEventListener('input', e => {
+      data.value = e.target.value
+    })
+  </script>
+</body>
+</html>
diff --git a/src/2020-03-24/vue-router.js b/src/2020-03-24/vue-router.js
@@ -0,0 +1,28 @@
+/**
+ * https://router.vuejs.org/zh/guide/advanced/navigation-guards.html
+ * vue-router 钩子分类：
+ * 1. 全局守卫：
+ *    beforeEach    // 路由权限判断和路由参数补充
+ *    beforeResolve // 可用来做页面 PV 上报
+ *    afterEach
+ * 2. 路由配置独享守卫：
+ *    beforeEnter
+ * 3. 组件内守卫：
+ *    beforeRouteEnter
+ *    beforeRouteUpdate
+ *    beforeRouteLeave
+ * 
+ * 完整的导航解析流程：
+ * 1. 导航被触发
+ * 2. 在失活的组件调用 beforeRouteLeave 守卫
+ * 3. 调用全局的 beforeEach 守卫
+ * 4. 在重用的组件内调用 beforeRouteUpdate 守卫
+ * 5. 在路由配置里调用 beforeEnter
+ * 6. 解析异步路由组件
+ * 7. 在被激活的组件内调用 beforeRouteEnter 守卫
+ * 8. 调用全局的 beforeResolve 守卫
+ * 9. 导航被确认
+ * 10. 调用全局的 afterEach 守卫
+ * 11. 触发 dom 更新
+ * 12. 调用组件 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为参数传入。
+ */
diff --git a/src/2020-12-07/question-1.ts b/src/2020-12-07/question-1.ts
@@ -55,7 +55,7 @@ const isPossible = (nums: number[]) => {
 
 /**
  * start、end数组
- * @param nums
+ * @param nums [1,2,3,3,4,4,5,5]
  */
 const isPossible2 = (nums: number[]) => {
   const start: number[] = []

diff --git a/src/2020-12-08/question-1.ts b/src/2020-12-08/question-1.ts
@@ -18,7 +18,7 @@
       console.log('dosth_a3_after')
     }
 
-    function fn([a1, a2, a3]){}
+    function fn([a1, a2, a3])()
  */
 
 /**
-Original file line number
+Diff line change
@@ Expand Up / @@ -18,7 +18,7 @@ @@
           console.log('dosth_a3_after')
         }
-        function fn([a1, a2, a3]){}
+        function fn([a1, a2, a3])()
      */
     /**
@@ Expand Down @@