dom,事件程序有，react-router，forEach,hover

css/2021-01-04hover与visibility.md

@@ -0,0 +1,10 @@
+# hover 与 visibility
+
+## 1.发现：当 visibility：hidden 的时候不能够响应 hover
+
+不知道为什么
+![](img/visible-hover.png)
+但是在设置样式中可以看见样式，并且点击 hover 生效
+![](img/visible-hover.png)
+
+解决办法：使用 opacity:0 实现隐藏

css/2021-01-04获取元素位置高度宽度信息.md

@@ -0,0 +1,54 @@
+# 获取元素位置高度宽度信息
+
+## 1.元素大小
+
+-   不包括 border,不受滚动条影响
+
+    element.clientWidth
+
+    element.clientHeight
+
+-   包括 border，不受滚动条影响
+
+    element.offsetWidth
+
+    element.offsetHeight
+
+-   出现滚动条
+    element.scrollWidth
+
+    element.scrollHeight = scrollTop + clientHeight
+
+## 2.鼠标点击事件
+
+-   距离浏览器视口
+
+    element.clientX
+
+    element.clientY
+
+-   点击位置相对于点击的对象的位置
+
+    element.offsetX
+
+    element.offsetY
+
+## 3.相对于 offsetParent
+
+-   前提条件：最近的父元素 position：relative/absolute
+
+    element.offsetTop
+
+    element.offsetLeft
+
+## 4.出现滚动条
+
+-   滚动条拉动的距离
+
+    scrollLeft
+
+    scrollTop
+
+## 5.获取元素到视口的距离
+
+-   getBoundingClientRect 方法返回元素的大小及其相对于视口的位置。

g6/G6总结以及Bug.md

@@ -147,3 +147,5 @@ graph.on('circle-shape:click', (evt) => {
 可能原因： 没有将 graph.updateItem(item, model, stack) ，参数 stack 设置成 true
 
 ![](img/updateItem.png)
+
+## 10.开启布局之后节点配置 x，y 不生效

js/2020-11-17forEach.md

@@ -13,3 +13,41 @@
 不会进入循环判断，因此不会打印 1
 
 ## 2. 不能 break ，不能 return
+
+原因：一下模拟了 forEach 的大致原理
+
+```js
+const arr = [1, 2, 3, 4, 5];
+
+const callback = function (item) {
+    if (item == 4) {
+        console.log(item);
+        return;
+    }
+    console.log(item);
+};
+for (let i = 0; i < arr.length; i++) {
+    callback(arr[i]);
+}
+```
+
+打印：1 2 3 4 5
+这里的 return 是回调函数中的 return，不能将 for 循环终止
+
+```js
+const arr = [1, 2, 3, 4, 5];
+
+const callback = function (item) {
+    if (item == 4) {
+        console.log(item);
+        break;
+    }
+};
+for (let i = 0; i < arr.length; i++) {
+    callback(arr[i]);
+}
+```
+
+报错： Illegal break statement
+
+因为 break 应该在循环中使用，不能在函数中

js/2020-12-06DOM.md

@@ -6,14 +6,13 @@ https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model/Introduct
 
 https://www.zhihu.com/question/34219998
 
+-   用来呈现以及与任意 HTML 或 XML 文档交互的 API。
+-   DOM 是载入到浏览器中的文档模型，以节点树的形式来表现文档，每个节点代表文档的构成部分（例如:页面元素、字符串或注释等等）。
+-   它允许运行在浏览器中的代码访问文件中的节点并与之交互
 
-- 用来呈现以及与任意 HTML 或 XML文档交互的API。
-- DOM 是载入到浏览器中的文档模型，以节点树的形式来表现文档，每个节点代表文档的构成部分（例如:页面元素、字符串或注释等等）。
-- 它允许运行在浏览器中的代码访问文件中的节点并与之交互
+DOM 并不是天生就被规范好了的，它是浏览器开始实现 JavaScript 时才出现的。这个传统的 DOM 有时会被称为 DOM 0。现在， WHATWG 维护 DOM 现存标准。
 
-DOM 并不是天生就被规范好了的，它是浏览器开始实现JavaScript时才出现的。这个传统的 DOM 有时会被称为 DOM 0。现在， WHATWG维护DOM现存标准。
-
-开始的时候，JavaScript和DOM是交织在一起的，但它们最终演变成了两个独立的实体。JavaScript可以访问和操作存储在DOM中的内容，因此我们可以写成这个近似的等式：
+开始的时候，JavaScript 和 DOM 是交织在一起的，但它们最终演变成了两个独立的实体。JavaScript 可以访问和操作存储在 DOM 中的内容，因此我们可以写成这个近似的等式：
 
 API (web 或 XML 页面) = DOM + JS (脚本语言)
 
@@ -22,92 +21,91 @@ API (web 或 XML 页面) = DOM + JS (脚本语言)
 ## 2.浏览器渲染过程
 
 文字解析：
-输入的网址在通过DNS解析后得到服务器地址
-浏览器向服务器发起http请求，经过TCP/IP三次握手确认链接后，服务器将需要的代码发回给浏览器。
+输入的网址在通过 DNS 解析后得到服务器地址
+浏览器向服务器发起 http 请求，经过 TCP/IP 三次握手确认链接后，服务器将需要的代码发回给浏览器。
 浏览器接收到代码后进行解析，经过三大步骤：
 
-- 1.DOM构造
-- 2.布局以及绘制页面
-- 3.最终展现为人人都能看懂的网页。
+-   1.DOM 构造
+-   2.布局以及绘制页面
+-   3.最终展现为人人都能看懂的网页。
 
-### 第一步，DOM构造
+### 第一步，DOM 构造
 
-浏览器首先将收到的html代码，通过html解析器解析构建为一颗DOM树。数据结构中有许多的树,而DOM树就像是一颗倒长着的大树，这样的对象模型决定了节点之间都有一定的关联它们关系可能有父子、有兄弟，我们可以顺着这颗树做出许多操作。接着将接收到的css代码，通过css解析器构建出样式表规则将这些规则分别放到对应的DOM树节点上，得到一颗带有样式属性的DOM树。
+浏览器首先将收到的 html 代码，通过 html 解析器解析构建为一颗 DOM 树。数据结构中有许多的树,而 DOM 树就像是一颗倒长着的大树，这样的对象模型决定了节点之间都有一定的关联它们关系可能有父子、有兄弟，我们可以顺着这颗树做出许多操作。接着将接收到的 css 代码，通过 css 解析器构建出样式表规则将这些规则分别放到对应的 DOM 树节点上，得到一颗带有样式属性的 DOM 树。
 
 ### 第二步，布局
 
-浏览器按从上到下，从左到右的顺序，读取DOM树的文档节点，顺序存放到一条虚拟的传送带上。传送带上的盒子就是节点，而这条流动的传送带就是文档流。如果我们读取到的节点是属于另一个节点下的子节点，那么在放入传送带的时候，就应该按顺序放到该节点盒子的内部。如果子节点下还有子节点，在传送带上的时候就继续套到子一级的盒子内部。根据它在DOM树上的结构，可以嵌套的层级没有限制的哦。文档流排完之后，开始获取计算节点的坐标和大小等CSS属性，作为盒子的包装说明。然后把盒子在仓库里一一摆放，这就将节点布局到了页面。
+浏览器按从上到下，从左到右的顺序，读取 DOM 树的文档节点，顺序存放到一条虚拟的传送带上。传送带上的盒子就是节点，而这条流动的传送带就是文档流。如果我们读取到的节点是属于另一个节点下的子节点，那么在放入传送带的时候，就应该按顺序放到该节点盒子的内部。如果子节点下还有子节点，在传送带上的时候就继续套到子一级的盒子内部。根据它在 DOM 树上的结构，可以嵌套的层级没有限制的哦。文档流排完之后，开始获取计算节点的坐标和大小等 CSS 属性，作为盒子的包装说明。然后把盒子在仓库里一一摆放，这就将节点布局到了页面。
 
 ### 第三步，绘制页面
 
 布局完成之后，我们在页面上其实是看不到任何内容的
 浏览器只是计算出了每一个节点对象应该被放到页面的哪个位置上，但并没有可视化。
 因此最后一步就是将所有内容绘制出来，完成整个页面的渲染。
 
-
 ## 3.事件处理程序
 
-### 1.HTML事件处理程序
+### 1.HTML 事件处理程序
 
 ```html
 <input  type = "button" value = "Click" onclick = "console.log('ddddd')/>
 ```
-this是事件的目标函数
+
+this 是事件的目标函数
 **注意**
-- 1. 由于属性值是js代码,因此不允许未经转义的情况下使用HTML语法字符,例如 &,双引号,小于号,大于号,为了避免使用HTML实体,使用单引号代替双引号.或者使用字符实体(&quot;)
-- 2. 时机问题: 交互在创建函数之前,导致代码报错  ->  使用try ... catch 包裹
-- 3. 作用域链的扩展在不同浏览器中可能会导致不同的结果,以及js解析器的不同
-- 4. HTML与js代码的强耦合,使其修改的时候比较麻烦
 
-### 2.DOM0事件处理程序
+-   1. 由于属性值是 js 代码,因此不允许未经转义的情况下使用 HTML 语法字符,例如 &,双引号,小于号,大于号,为了避免使用 HTML 实体,使用单引号代替双引号.或者使用字符实体(&quot;)
+-   2. 时机问题: 交互在创建函数之前,导致代码报错 -> 使用 try ... catch 包裹
+-   3. 作用域链的扩展在不同浏览器中可能会导致不同的结果,以及 js 解析器的不同
+-   4. HTML 与 js 代码的强耦合,使其修改的时候比较麻烦
+
+### 2.DOM0 事件处理程序
 
 所赋函数被视为元素的方法,函数在元素的作用域中运行,
-注册在事件流的冒泡阶段,移除事件将函数赋值为null(在HTML中处理的程序,也可以赋值为null来移除事件)
-this元素(btn)
+注册在事件流的冒泡阶段,移除事件将函数赋值为 null(在 HTML 中处理的程序,也可以赋值为 null 来移除事件)
+this 元素(btn)
+
 ```js
-let btn = document.getElementById('myBtn')
-btn.onclick = function (){
-    console.log(this.id)
-}
+let btn = document.getElementById('myBtn');
+btn.onclick = function () {
+    console.log(this.id);
+};
 ```
 
-### 3.DOM2事件处理程序
+### 3.DOM2 事件处理程序
 
-addEventListener('事件名','事件处理函数','true/false')和removeEventListener('事件名','事件处理函数','true/false')
+addEventListener('事件名','事件处理函数','true/false')和 removeEventListener('事件名','事件处理函数','true/false')
 
 函数在元素的作用域中运行,
-**相比于DOM0,优势在于可以为一个事件添加多个事件处理程序**多个程序以添加的顺序依次触发
+**相比于 DOM0,优势在于可以为一个事件添加多个事件处理程序**多个程序以添加的顺序依次触发
 但是当事件处理程序是匿名函数的时候,移除事件的时候就会出现问题,因为传入的事件处理函数不是同一个
 
 ```js
-let btn = document.getElementById('myBtn')
+let btn = document.getElementById('myBtn');
 //匿名函数作为事件处理程序不能够移除
-// btn.addEventListener("click",()=>{
-//     console.log(this.id),
+// btn.addEventListener(
+//     'click',
+//     () => {
+//         console.log(this.id);
+//     },
 //     false
-// })
-
-let handle = function (){
-    console.log(this.id)
-}
-btn.addEventListener("click",()=>{
-    handle,
-    false
-})
-
-btn.removeEventListener("click",()=>{
-    handle,
-    false
-})
+// );
+
+let handle = function () {
+    console.log(this.id);
+};
+btn.addEventListener('click', handle, false);
+
+btn.removeEventListener('click', handle, false);
 ```
 
 大多数的事件处理程序会被添加到冒泡阶段,原因是跨浏览器兼容性好
 
-### 4.IE事件处理程序
+### 4.IE 事件处理程序
 
-attachEvent('事件处理程序名(onclick)','事件处理函数')和detachEvent('事件处理程序名(onclick)','事件处理函数')
+attachEvent('事件处理程序名(onclick)','事件处理函数')和 detachEvent('事件处理程序名(onclick)','事件处理函数')
 
-- 添加的名称是 on+XXX
-- this是全局作用域(window)
-- 添加多个事件处理函数,倒序执行
-- 匿名函数依然不可移除
+-   添加的名称是 on+XXX
+-   this 是全局作用域(window)
+-   添加多个事件处理函数,倒序执行
+-   匿名函数依然不可移除

js/2021-01-04事件回调函数防抖传参.md

@@ -0,0 +1,17 @@
+# 2021-01-04 事件回调函数防抖传参
+
+防抖函数使用 lodash debounce
+
+```js
+const abc = '123';
+element.addEventListener('mouseover', (event) => mouseoverDebounce(event, abc));
+
+const mouseover = callback((event, abc) => {}, []);
+
+const mouseoverDebounce = _.debounce(
+    (event, abc) => mouseover(event, abc),
+    500
+);
+```
+
+//不能 remove? 匿名函数不可以移除，因为因为传入的事件处理函数不是同一个

react/2021-01-04react-router render children.md

@@ -0,0 +1,3 @@
+# react-router 传参
+
+https://blog.csdn.net/chad97/article/details/89339465