Skip to content

Commit 241f111

Browse files
author
liangyong
committed
feat: 团队协作文档
1 parent 6af188a commit 241f111

31 files changed

+3794
-13
lines changed

‎.vscode/launch.json

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
// 使用 IntelliSense 了解相关属性。
3+
// 悬停以查看现有属性的描述。
4+
// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
5+
"version": "0.2.0",
6+
"configurations": [
7+
{
8+
"type": "browser-preview",
9+
"name": "Browser Preview: Attach",
10+
"request": "attach"
11+
},
12+
{
13+
"type": "browser-preview",
14+
"request": "launch",
15+
"name": "Browser Preview: Launch",
16+
"url": "http://localhost:3000"
17+
}
18+
]
19+
}

‎docs/assets/img/team-standard/flow.png

269 KB
Loading

‎docs/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,7 @@
101101

102102
});
103103
}, false);
104+
console.log(1);
104105

105106

106107
</script>

‎docs/modules/arithmetic/01-stack.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
## 关于栈:
2+
> 栈是一种高效的数据结构，`线性表`实现。数据只能在栈顶添加或删除，作为一种特殊的列表，只能从一端来进行访问，就像一摞盘子，放只能放在上面，拿也只能从上面拿，所以栈是一种`先入后出`的一种数据结构。因为栈的这种特点，栈中任意不在栈顶的元素都无法访问，为了得到栈底的元素，必须把该元素之上的元素拿掉，把栈底的元素暴露在栈顶。栈还可以清空其内所有元素，也可以记录栈内元素的个数。
3+
4+
关于栈的特点：
5+

‎docs/modules/arithmetic/index.md

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
# 算法：
2+
3+
* ### [栈](/modules/arithmetic/01-stack)
4+
5+
* ### [堆](/modules/arithmetic/01-stack)
6+
7+
* ### [贪心算法](/modules/arithmetic/micro)
8+
9+
* ### [队列](/modules/arithmetic/micro)
10+
11+
* ### [排序](/modules/arithmetic/micro)
12+
13+
* ### [位运算](/modules/arithmetic/micro)
14+
15+
* ### [深度优先搜索](/modules/arithmetic/micro)
16+
17+
* ### [广度优先搜索](/modules/arithmetic/micro)
18+
19+
* ### [递归](/modules/arithmetic/micro)
20+
21+
22+

‎docs/modules/code-chunk/index.md

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,6 @@
2929

3030
> ## 手写-call的实现
3131
> #### call函数 其原理是利用了 JavaScript的上下文。（不同作用域this 指向不同）
32-
> 实现原理步骤如下：
33-
> * 1. 获取到上下文 context, 即调用.mycall方法的对象.
34-
> * 2. 在该对象上增加一个匿名函数，指向调用者
35-
> * 3.
3632
>
3733
3834
```js

‎docs/modules/git/git_submodule.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
33
1+
写作中

‎docs/modules/js-dot/debounce-throttle.md

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
2+
# 防抖
3+
> 防抖是指频繁触发的情况下，只有足够的空闲时间，才执行代码一次。比如生活中的坐公交，就是一定时间内，如果有人陆续刷卡上车，司机就不会开车只有别人没刷卡了，司机才开车。
4+
5+
# 节流
6+
> 节流是指一定时间内js方法只跑一次。比如人的眨眼睛，就是一定时间内眨一次。这是函数节流最形象的解释。
7+
8+
9+
在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果。
10+
11+
12+
13+
函数防抖
14+
函数防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。如下图，持续触发scroll事件时，并不执行handle函数，当1000毫秒内没有触发scroll事件时，才会延时触发scroll事件。
15+
16+
17+
防抖debounce代码：
18+
```js
19+
// 防抖
20+
function debounce(fn, wait) {
21+
var timeout = null;
22+
return function() {
23+
if(timeout !== null) clearTimeout(timeout);
24+
timeout = setTimeout(fn, wait);
25+
}
26+
}
27+
// 处理函数
28+
function handle() {
29+
console.log(Math.random());
30+
}
31+
// 滚动事件
32+
window.addEventListener('scroll', debounce(handle, 1000));
33+
34+
```
35+
36+
37+
当持续触发scroll事件时，事件处理函数handle只在停止滚动1000毫秒之后才会调用一次，也就是说在持续触发scroll事件的过程中，事件处理函数handle一直没有执行。
38+
39+
40+
41+
函数节流
42+
43+
函数节流（throttle）：当持续触发事件时，保证一定时间段内只调用一次事件处理函数。节流通俗解释就比如我们水龙头放水，阀门一打开，水哗哗的往下流，秉着勤俭节约的优良传统美德，我们要把水龙头关小点，最好是如我们心意按照一定规律在某个时间间隔内一滴一滴的往下滴。如下图，持续触发scroll事件时，并不立即执行handle函数，每隔1000毫秒才会执行一次handle函数。
44+
45+
46+
> 函数节流主要有两种实现方法：时间戳和定时器。接下来分别用两种方法实现throttle~
47+
48+
节流throttle代码（时间戳）：
49+
50+
51+
```js
52+
53+
var throttle = function(func, delay) {
54+
　　var prev = Date.now();
55+
　　return function() {
56+
　　　　var context = this;
57+
　　　　var args = arguments;
58+
　　　　var now = Date.now();
59+
　　　　if (now - prev >= delay) {
60+
　　　　　　func.apply(context, args);
61+
　　　　　　prev = Date.now();
62+
　　　　}
63+
　　}
64+
}
65+
function handle() {
66+
　　console.log(Math.random());
67+
}
68+
window.addEventListener('scroll', throttle(handle, 1000));
69+
70+
```
71+
72+
73+
### 总结
74+
`函数防抖`：将几次操作合并为一此操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。
75+
76+
### 函数节流：使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数。
77+
78+
`区别`： 函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。
79+
80+

‎docs/modules/js-dot/flag.md

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
2+
# 防抖
3+
> 防抖是指频繁触发的情况下，只有足够的空闲时间，才执行代码一次。比如生活中的坐公交，就是一定时间内，如果有人陆续刷卡上车，司机就不会开车只有别人没刷卡了，司机才开车。
4+
5+
# 节流
6+
> 节流是指一定时间内js方法只跑一次。比如人的眨眼睛，就是一定时间内眨一次。这是函数节流最形象的解释。
7+
回流一定会触发重绘，而重绘不一定会回流
8+
触发重绘的条件：改变元素外观属性。如：color，background-color等。
9+
10+
触发回流的条件：任何页面布局和几何属性的改变都会触发重排
11+
　1、页面渲染初始化；(无法避免)
12+
　　2、添加或删除可见的DOM元素；
13+
　　3、元素位置的改变，或者使用动画；
14+
　　4、元素尺寸的改变——大小，外边距，边框；
15+
16+
BFC 就是块级格式上下文，是页面盒模型布局中的一种 CSS 渲染模式，相当于一个独立的容器，里面的元素和外部的元素相互不影响。创建 BFC 的方式有：
17+
18+
html 根元素
19+
float 浮动
20+
绝对定位
21+
overflow 不为 visiable
22+
display 为表格布局或者弹性布局
23+
24+
BFC 主要的作用是：清除浮动 防止同一 BFC 容器中的相邻元素间的外边距重叠问题
25+
26+
transform
27+
过渡（transition）
28+
29+
transition-property 规定设置过渡效果的 CSS 属性的名称。
30+
transition-duration 规定完成过渡效果需要多少秒或毫秒。
31+
transition-timing-function 规定速度效果的速度曲线。
32+
transition-delay 定义过渡效果何时开始。
33+
34+
translateZ
35+
36+
async defer
37+
https://www.cnblogs.com/jiasm/p/7683930.html
38+
区别：
39+
相同点： 都是为了解决JavaScript阻塞UI渲染问题，都是在后台加载脚本，都是当页面解析&页面渲染w完毕后执行。
40+
不同点： defer 后台下载，不会阻止文档渲染，当页面解析&页面渲染w完毕后，会等到所有的defer脚本加载完毕并按照顺序执行，执行完毕后会触发DOMContentLoaded事件。
41+
async脚本的加载不计入DOMContentLoaded事件统计。
42+
43+
强缓存和协商缓存：
44+
http优化策略，减少不不必要的数据传输
45+
1.强缓存：
46+
2. 协商缓存： 304
47+
48+
过程如下:
49+
1,客户端请求一个页面（A）。
50+
51+
2,服务器返回页面A，并在给A加上一个Last-Modified/ETag。
52+
53+
3,客户端展现该页面，并将页面连同Last-Modified/ETag一起缓存。
54+
55+
4,客户再次请求页面A，并将上次请求时服务器返回的Last-Modified/ETag一起传递给服务器。
56+
57+
5,服务器检查该Last-Modified或ETag，并判断出该页面自上次客户端请求之后还未被修改，直接返回响应304和一个空的响应体。
58+
59+
302 临时重定向
60+
301 永久重定向
61+
305 通过代理才能访问
62+
401 身份认证
63+
403 拒绝请求
64+
65+
加载渲染过程
66+
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
67+
子组件更新过程
68+
父beforeUpdate->子beforeUpdate->子updated->父updated
69+
父组件更新过程
70+
父beforeUpdate->父updated
71+
销毁过程
72+
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
73+
74+
75+
76+

‎docs/modules/js-dot/index.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# javascript 知识点：
2+
3+
* ### [Number()、parseInt()、和parseFloat()的区别](/modules/js-dot/number-parseInt-parseFloat)
4+
5+
* ### [防抖(debounce)和节流（throttle）](/modules/js-dot/debounce-throttle)
6+
7+
8+
9+
10+

‎docs/modules/js-dot/number-parseInt-parseFloat.md

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
# Number()、parseInt()和parseFloat()的区别
2+
3+
## Number()
4+
>* 如果是Boolean值，true和false值将分别被转换为1和0。
5+
>* 如果是数字值，只是简单的传入和返回。
6+
>* 如果是null值，返回0。
7+
>* 如果是undefined，返回NaN。
8+
9+
如果是字符串：
10+
11+
* 如果字符串中只包含数字时，将其转换为十进制数值，忽略前导0
12+
13+
* 如果字符串中包含有效浮点格式，如“1.1”，将其转换为对应的浮点数字，忽略前导0
14+
15+
* 如果字符串中包含有效的十六进制格式，如“0xf”，将其转换为相同大小的十进制数值
16+
17+
* 如果字符串为空，将其转换为0
18+
19+
* 如果字符串中包含除上述格式之外的字符，则将其转换为NaN
20+
21+
如果是对象，则调用对象的valueOf（）方法，然后依照前面的规则转换返回的值。如果转换的结果是NaN，则调用对象的toString（）方法，然后再依照前面的规则转换返回的字符串值。
22+
23+
```js
24+
　var num1 = Number("Hello world");　　　　　　 //NaN
25+
　var num2 = Number("");　　　　　　　　　　　　//0
26+
　var num3 = Number("0000011");　　　　　　　 //11
27+
```
28+
29+
30+
## parseInt()
31+
32+
处理整数的时候parseInt()更常用。parseInt()函数在转换字符串时，会忽略字符串前面的空格，知道找到第一个非空格字符。
33+
34+
如果第一个字符不是数字或者负号，parseInt() 就会返回NaN，同样的，用parseInt() 转换空字符串也会返回NaN。
35+
36+
如果第一个字符是数字字符，parseInt() 会继续解析第二个字符，直到解析完所有后续字符串或者遇到了一个非数字字符。
37+
38+
parseInt()方法还有基模式，可以把二进制、八进制、十六进制或其他任何进制的字符串转换成整数。
39+
40+
基是由parseInt()方法的第二个参数指定的，所以要解析十六进制的值，当然，对二进制、八进制，甚至十进制（默认模式），都可以这样调用parseInt()方法。
41+
42+
```js
43+
var num1 = parseInt("AF",16);　　　　　　 　　　　//175
44+
　var num2 = parseInt("AF");　　　　　　　　　　　　//NaN
45+
　var num3 = parseInt("10",2);　　　　　　　 　　　//2　　(按照二进制解析)
46+
　var num4 = parseInt("abc");　　　　　　　　　//NaN
47+
```
48+
49+
## parseFloat()
50+
51+
与parseInt() 函数类似，parseFloat() 也是从第一个字符（位置0）开始解析每一个字符。也是一直解析到字符串末尾，或者解析到遇见一个无效的浮点数字字符为止。
52+
53+
也就是说，字符串中第一个小数点是有效的，而第二个小数点就是无效的了，它后面的字符串将被忽略。
54+
55+
parseFloat() 只解析十进制，因此它没有第二个参数指定基数的用法
56+
57+
如果字符串中包含的是一个可解析为正数的数（没有小数点，或者小数点后都是零），parseFloat() 会返回整数。
58+
59+
```js
60+
var num1 = parseFloat("123AF");　　　　　　 　　　　//123
61+
　　var num2 = parseFloat("0xA");　　　　　　　　　　　　//0
62+
　　var num3 = parseFloat("22.5");　　　　　　　 　　　 //22.5
63+
　　var num4 = parseFloat("22.3.56");　　　　　　　　　//22.3
64+
　　var num5 = parseFloat("0908.5");　　　　　　　　　 //908.5
65+
```
66+
67+
68+
## parseInt() 和parseFloat() 的区别在于：
69+
parseFloat() 所解析的字符串中第一个小数点是有效的，而parseInt() 遇到小数点会停止解析，因为小数点并不是有效的数字字符。
70+
parseFloat() 始终会忽略前导的零，十六进制格式的字符串始终会被转换成0，而parseInt() 第二个参数可以设置基数，按照这个基数的进制来转换。

‎docs/modules/sidebar.md

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
- [前后端分离接口规范](/modules/api-standard/index)
2+
- [前端开发规范](/modules/team-standard/index)
3+
24
- [代码块](/modules/code-chunk/index)
3-
- [JavaScript知识点](/modules/code-chunk/index)
5+
- [JavaScript知识点](/modules/js-dot/index)
46
- [解决方案](/modules/solution/index)
5-
- [Git篇](/modules/git/index)
6-
- [算法篇](/modules/code-chunk/index)
7+
<!-- - [算法篇](/modules/arithmetic/index) -->
78

89

910

‎docs/modules/solution/micro.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
## 基于Vue的 微前端项目实践方案
1+
## 基于Vue的 微前端项目实践方案
2+
3+
写作中...

‎docs/modules/solution/skeleton.md

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,4 @@
1-
## 基于webpack的前端骨架屏自动生成方案
1+
## 基于webpack的前端骨架屏自动生成方案
2+
3+
4+
写作中...

0 commit comments

Comments
 (0)