14 |
15 | 
16 |
17 | 
18 |
19 | 
20 |
21 | 
22 |
--------------------------------------------------------------------------------
/docs/.vuepress/enhanceApp.js:
--------------------------------------------------------------------------------
1 | import ElementUI from 'element-ui';
2 | import 'element-ui/lib/theme-chalk/index.css';
3 | import store from './store/index.js';
4 | import User from './views/index';
5 |
6 | export default ({
7 | Vue, // the version of Vue being used in the VuePress app
8 | options, // the options for the root Vue instance
9 | router, // the router instance for the app
10 | siteData, // site metadata
11 | }) => {
12 | Vue.use(ElementUI);
13 | Vue.mixin({
14 | store,
15 | });
16 |
17 | router.addRoutes([{
18 | path: '/views',
19 | name: 'user',
20 | component: User
21 | }])
22 | // Vue.prototype.$EventBus = new Vue();
23 | }
--------------------------------------------------------------------------------
/docs/Java/README.md:
--------------------------------------------------------------------------------
1 | > 点击勘误[issues](https://github.com/webVueBlog/learn-web/issues)，哪吒感谢大家的阅读
2 |
3 | 1、JAVA基础部分内容有：JAVA开发环境搭建、Eclipse的使用、JAVA中的数据类型、输入输出、分支结构、循环结构、数组、方法的使用等。
4 |
5 | 2、面向对象部分，内容有：类和对象、构造方法、对象间关系、对象数组、封装、继承、重写、多态、抽象类、接口、static和final、this和super关键字等。
6 |
7 | 3、JAVA进阶，内容有：异常处理、常用工具类的使用、集合、IO流、JSON及其解析。
8 |
9 | 4、tomcat和Servlet，主要内容有：tomcat的下载和安装、tomcat的常用配置、tomcat的启动和停止、Eclipse中tomcat的集成、Dynamic web Project的创建、Servlet的编写和运行、Servlet3.0中注解的使用、Servlet中请求参数的接收、中文乱码问题、tomcat调用Servlet的原理。
10 |
11 | 5、数据库和JDBC，主要内容有：Mysql数据库的安装和配置、数据库的连接和退出、数据库的操作、数据表的操作、数据的增删改查的操作、JDBC连接数据库、JDBC完成数据库的增删改查、JDBC工具类和PropertiesUtil工具类的抽取等。
12 |
13 | 6、从0到1开发java服务端项目驾照题库系统，主要内容有：数据库的设计、利用爬虫完成数据库中数据的收集、服务端项目搭建、服务端接收并处理客户端请求、服务端响应数据给客户端、客户端进行服务端测试。
--------------------------------------------------------------------------------
/docs/JavaScript-advanced-programming/16章-DOM2和DOM3.md:
--------------------------------------------------------------------------------
1 | > 点击勘误[issues](https://github.com/webVueBlog/learn-web/issues)，哪吒感谢大家的阅读
2 |
3 | [[toc]]
4 |
5 | ## DOM2 和 DOM3
6 |
7 | 1. DOM2 到 DOM3 的变化
8 | 2. 操作样式的 DOM API
9 | 3. DOM 遍历与范围
10 |
11 | > DOM1（DOM Level 1）主要定义了 HTML 和 XML 文档的底层结构。
12 | >
13 | > DOM2（DOM Level 2）和 DOM3（DOM Level 3）在这些结构之上加入更多交互能力，提供了更高级的 XML 特性。
14 |
15 | - DOM Core：在 DOM1 核心部分的基础上，为节点增加方法和属性。
16 | - DOM Views：定义基于样式信息的不同视图。
17 | - DOM Events：定义通过事件实现 DOM 文档交互
18 | - DOM Style：定义以编程方式访问和修改 CSS 样式的接口。
19 | - DOM Traversal and Range：新增遍历 DOM 文档及选择文档内容的接口。
20 | - DOM HTML：在 DOM1 HTML 部分的基础上，增加属性、方法和新接口。
21 | - DOM Mutation Observers：定义基于 DOM 变化触发回调的接口。这个模块是 DOM4 级模块，用于取代 Mutation Events。
22 |
23 | # XML 命名空间
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
--------------------------------------------------------------------------------
/docs/README.md:
--------------------------------------------------------------------------------
1 | ---
2 | home: true
3 | lang: zh-CN
4 | heroText: 哪吒的全栈官方文档
5 | heroImage: /logo.jpg
6 | actionText: 开始 ->
7 | actionLink: /HTML/
8 | features:
9 | - title: 知识管理
10 | details: 包含三种典型的知识管理形态：结构化、碎片化、体系化的知识管理平台
11 | - title: 简介搞笑
12 | details: 带给你一种沉浸式阅读体验。配合多维索引快速定位每个知识点
13 | - title: 沉浸式阅读
14 | details: 如果你所学的东西 处于喜欢 才会有强大的动力支撑
15 | - title: 仅适合本人
16 | details: 记录日常所得，见证成长之路～
17 | - title: 特此说明
18 | details: 感谢大佬的文章，你们的付出我有在看~
19 | - title: 文档网站
20 | details: 愿你遇到那个心疼你付出的人~
21 | footer: Copyright © Jekson-learn-web
22 | ---
23 |
24 | **支持一下**
25 |
26 | - 进行关注
27 | - [Github链接在此, 欢迎点个 Start](https://github.com/webVueBlog/learn-web)
28 | - 将好文章分享给您身边更多的小伙伴
29 |
30 | ### 参与贡献
31 |
32 | 1. 如果您对本项目有任何建议或发现文中内容有误的，欢迎提交 issues 进行指正。
33 | 2. 对于文中我没有涉及到知识点，欢迎提交 PR。
34 | 3. 如果您有文章推荐请以 markdown 格式到邮箱 `2397923107@qq.com`，[中文技术文档的写作规范指南](https://github.com/ruanyf/document-style-guide)。
35 |
--------------------------------------------------------------------------------
/docs/DataStructure/时间复杂度与空间复杂度.md:
--------------------------------------------------------------------------------
1 | > 点击勘误[issues](https://github.com/webVueBlog/learn-web/issues)，哪吒感谢大家的阅读
2 |
3 | [[toc]]
4 |
5 | 
6 |
7 | ## 反转链表
8 |
9 | ```
10 | var reverseList = function(head) {
11 | let prev = null;
12 | let curr = head;
13 | let next = null;
14 | while (curr != null) {
15 | next = curr.next;
16 | curr.next = prev;
17 | prev = curr;
18 | curr = next;
19 | }
20 | return prev;
21 | }
22 | ```
23 |
24 | ## Set和Map
25 |
26 | ```js
27 | const numberSet = new Set();
28 | numberSet.add(1);
29 | console.log(numberSet);
30 | // Set(1) {1}
31 | // Set里面的值是不重复的
32 | numberSet.has(1) // true
33 | numberSet.size()
34 | // forEach
35 | ```
36 |
37 | ```js
38 | const person = new Map()
39 | person.set("name", "jeskson")
40 | // for...of
41 | ```
42 |
43 | ## let和const
44 |
45 | var 函数作用域， let const 块级作用域
46 |
--------------------------------------------------------------------------------
/docs/.vuepress/components/mIframe.vue:
--------------------------------------------------------------------------------
1 |
2 |
12 |
13 |
14 |
40 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # learn-web文档
2 |
3 | > 点击勘误[issues](https://github.com/webVueBlog/learn-web/issues)，哪吒感谢大家的阅读
4 |
5 | 文档地址[learn-web](https://webvueblog.github.io/learn-web/)
6 |
7 | 
8 |
9 | **支持一下**
10 |
11 | - 进行关注
12 | - [Github链接在此, 欢迎点个 Start](https://github.com/webVueBlog/learn-web)
13 | - 将好文章分享给您身边更多的小伙伴
14 |
15 | ### 参与贡献
16 |
17 | 1. 如果您对本项目有任何建议或发现文中内容有误的，欢迎提交 issues 进行指正。
18 | 2. 对于文中我没有涉及到知识点，欢迎提交 PR。
19 | 3. 如果您有文章推荐请以 markdown 格式到邮箱 `2397923107@qq.com`，[中文技术文档的写作规范指南](https://github.com/ruanyf/document-style-guide)。
20 |
21 | ## 学前必读
22 |
23 | 哪吒希望能为开发人员提供最大程度的愉悦开发体验。提供便捷的阅读文档，帮助前端开发小团体高效率的工作进度，并维护本站learn-web文档。
24 |
25 | ## 感谢指正
26 |
27 | 指正不胜感激，无以回报。
28 |
29 | ## 声明
30 |
31 | 学习文档，仅适合本人食用！！!
32 |
33 | ## 勘误及提问
34 |
35 | 如果有疑问或者发现错误，可以在相应的 issues 进行提问或勘误。
36 |
37 | 如果喜欢或者有所启发，欢迎 star，对作者也是一种鼓励。
38 |
39 | ## License
40 |
41 | 所有文章采用[知识共享署名-非商业性使用-相同方式共享 3.0 中国大陆许可协议](http://creativecommons.org/licenses/by-nc-sa/3.0/cn/)进行许可。
--------------------------------------------------------------------------------
/docs/coding/浏览器中实现剪切板复制内容的功能.md:
--------------------------------------------------------------------------------
1 | > 点击勘误[issues](https://github.com/webVueBlog/learn-web/issues)，哪吒感谢大家的阅读
2 |
3 | [[toc]]
4 |
5 | 它一般可以使用第三方库 clipboard-copy （打开新窗口）来实现，源码很简单，可以读一读
6 |
7 | 目前最为推荐的方式是使用 Clipboard API 进行实现
8 |
9 | ```js
10 | navigator.clipboard.writeText(text);
11 | ```
12 |
13 | 而对于一些不支持 Clipboard API 的浏览器，使用以下 API 进行复制
14 |
15 | 1. 选中: Selection API
16 | 2. 复制: document.execCommand (已被废弃)
17 |
18 | ## 选中: Selection API/Range API
19 |
20 | 选中主要利用了 Selection API （打开新窗口）给定范围 API
21 |
22 | 选中的代码如下
23 |
24 | ```js
25 | const selection = window.getSelection();
26 | const range = document.createRange();
27 |
28 | // RangeAPI: 制造区域
29 | range.selectNodeContents(element);
30 |
31 | // Selection: 选中区域
32 | selection.addRange(range);
33 |
34 | selectedText = selection.toString();
35 | ```
36 |
37 | 取消选中的代码如下
38 |
39 | ```js
40 | window.getSelection().removeAllRanges();
41 | ```
42 |
43 | 它有现成的第三方库可以使用: select.js（打开新窗口）
44 |
45 | ## 复制: execCommand
46 |
47 | 复制就比较简单了，execCommand
48 |
49 | ```js
50 | document.execCommand("copy");
51 | ```
52 |
53 |
--------------------------------------------------------------------------------
/docs/JavaScript/README.md:
--------------------------------------------------------------------------------
1 | > 点击勘误[issues](https://github.com/webVueBlog/learn-web/issues)，哪吒感谢大家的阅读
2 |
3 | ## JavaScript
4 |
5 | - [对象](/JavaScript/对象.md)
6 | - [函数](/JavaScript/函数.md)
7 | - [数组](/JavaScript/数组.md)
8 | - [类型](/JavaScript/类型.md)
9 | - [eval-undefined-null-主动分号插入-setTimeout和setInterval](/JavaScript/eval-undefined-null-主动分号插入-setTimeout和setInterval.md)
10 | - [函数-可复用代码块](/JavaScript/函数-可复用代码块.md)
11 | - [创建您自己的函数](/JavaScript/创建您自己的函数.md)
12 | - [对象原型](/JavaScript/对象原型.md)
13 | - [原型链](/JavaScript/原型链.md)
14 | - [词法作用域和动态作用域](/JavaScript/词法作用域和动态作用域.md)
15 | - [45道Promise](/JavaScript/45道Promise.md)
16 | - [深浅拷贝](/JavaScript/深浅拷贝.md)
17 | - [继承](/JavaScript/继承.md)
18 | - [执行上下文栈](/JavaScript/执行上下文栈.md)
19 | - [变量对象](/JavaScript/变量对象.md)
20 | - [作用域](/JavaScript/作用域.md)
21 | - [防抖](/JavaScript/防抖.md)
22 | - [节流](/JavaScript/节流.md)
23 | - [40道this](/JavaScript/40道this.md)
24 | - [执行上下文](/JavaScript/执行上下文.md)
25 | - [闭包](/JavaScript/闭包.md)
26 | - [立即执行函数](/JavaScript/立即执行函数.md)
27 | - [浅谈instanceof和typeof的实现原理](/JavaScript/浅谈instanceof和typeof的实现原理.md)
28 | - [bind的实现](/JavaScript/bind的实现.md)
29 |
30 |
31 |
32 |
33 |
34 |
--------------------------------------------------------------------------------
/docs/html-css-js-coding/实现水平垂直居中最便捷的方法.md:
--------------------------------------------------------------------------------
1 | > 点击勘误[issues](https://github.com/webVueBlog/learn-web/issues)，哪吒感谢大家的阅读
2 |
3 | 在 flex 格式化上下文中，设置了 margin: auto 的元素，在通过 justify-content 和 align-self 进行对齐之前，任何正处于空闲的空间都会分配到该方向的自动 margin 中去
4 |
5 | 这里，很重要的一点是，margin auto 的生效不仅是水平方向，垂直方向也会自动去分配这个剩余空间。
6 |
7 | HTML：
8 |
9 | ```js
10 | 
10 |
11 | 应用场景
12 |
13 | ## 窗口大小变化，调整样式
14 |
15 | ```js
16 | window.addEventListener('resize', debounce(handleResize, 200));
17 | ```
18 |
19 | ## 搜索框，输入后1000毫秒搜索
20 |
21 | ```js
22 | debounce(fetchSelectData, 300);
23 | ```
24 |
25 | ## 表单验证，输入1000毫秒后验证
26 |
27 | ```js
28 | debounce(validator, 1000);
29 | ```
30 |
31 | ## 实现
32 |
33 | 注意考虑两个问题：
34 |
35 | 在debounce函数中返回一个闭包，这里用的普通function，里面的setTimeout则用的箭头函数，这样做的意义是让this的指向准确，this的真实指向并非debounce的调用者，而是返回闭包的调用者。
36 |
37 | 对传入闭包的参数进行透传。
38 |
39 | ```js
40 | function debounce(event, time) {
41 | let timer = null;
42 | return function (...args) {
43 | clearTimeout(timer);
44 | timer = setTimeout(() => {
45 | event.apply(this, args);
46 | }, time);
47 | };
48 | }
49 | ```
50 |
51 | 有时候我们需要让函数立即执行一次，再等后面事件触发后等待n秒执行，我们给debounce函数一个flag用于标示是否立即执行。
52 |
53 | 当定时器变量timer为空时，说明是第一次执行，我们立即执行它。
54 |
55 | ```js
56 | function debounce(event, time, flag) {
57 | let timer = null;
58 | return function (...args) {
59 | clearTimeout(timer);
60 | if (flag && !timer) {
61 | event.apply(this, args);
62 | }
63 | timer = setTimeout(() => {
64 | event.apply(this, args);
65 | }, time);
66 | };
67 | }
68 | ```
69 |
70 |
--------------------------------------------------------------------------------
/docs/JavaScript/节流.md:
--------------------------------------------------------------------------------
1 | > 点击勘误[issues](https://github.com/webVueBlog/learn-web/issues)，哪吒感谢大家的阅读
2 |
3 | ## 定义
4 |
5 | 节流（throttle）:不管事件触发频率多高，只在单位时间内执行一次。
6 |
7 | 
12 |
13 | 已知两个有序数组，找到两个数组合并后的中位数。
14 |
15 | ## 2. 解法一
16 |
17 | 简单粗暴，先将两个数组合并，两个有序数组的合并也是归并排序中的一部分。然后根据奇数，还是偶数，返回中位数。
18 |
19 | ## 前置知识
20 |
21 | - 中位数
22 | - 分治法
23 | - 二分查找
24 |
25 | ## 暴力法
26 |
27 | 暴力解主要是要 merge 两个排序的数组（A，B）成一个排序的数组。
28 |
29 | 用两个`pointer（i，j）`，i 从数组A起始位置开始，即i=0开始，j 从数组B起始位置， 即j=0开始. 一一比较 `A[i]` 和 `B[j]`,
30 |
31 | - 如果`A[i] <= B[j]`, 则把`A[i]` 放入新的数组中，i 往后移一位，即 i+1.
32 | - 如果`A[i] > B[j]`, 则把`B[j]` 放入新的数组中，j 往后移一位，即 j+1.
33 | - 重复步骤#1 和 #2，直到i移到A最后，或者j移到B最后。
34 | - 如果j移动到B数组最后，那么直接把剩下的所有A依次放入新的数组中.
35 | - 如果i移动到A数组最后，那么直接把剩下的所有B依次放入新的数组中.
36 |
37 | ## 3. 代码
38 |
39 | ```js
40 | /**
41 | * @param {number[]} nums1
42 | * @param {number[]} nums2
43 | * @return {number}
44 | */
45 | var findMedianSortedArrays = function (nums1, nums2) {
46 | // 归并排序
47 | const merged = [];
48 | let i = 0;
49 | let j = 0;
50 | while (i < nums1.length && j < nums2.length) {
51 | if (nums1[i] < nums2[j]) {
52 | merged.push(nums1[i++]);
53 | } else {
54 | merged.push(nums2[j++]);
55 | }
56 | }
57 | while (i < nums1.length) {
58 | merged.push(nums1[i++]);
59 | }
60 | while (j < nums2.length) {
61 | merged.push(nums2[j++]);
62 | }
63 |
64 | const { length } = merged;
65 | return length % 2 === 1
66 | ? merged[Math.floor(length / 2)]
67 | : (merged[length / 2] + merged[length / 2 - 1]) / 2;
68 | };
69 | ```
70 |
71 | ## 复杂度分析
72 |
73 | - 时间复杂度：$O(max(m, n))$
74 | - 空间复杂度：$O(m + n)$
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
--------------------------------------------------------------------------------
/docs/ALG/1-两数之和.md:
--------------------------------------------------------------------------------
1 | > 点击勘误[issues](https://github.com/webVueBlog/learn-web/issues)，哪吒感谢大家的阅读
2 |
3 | [[toc]]
4 |
5 | ## 1. 题目描述 （简单难度）
6 |
7 | 
8 |
9 | 给定一个数组和一个目标和，从数组中找两个数字相加等于目标和，输出这两个数字的下标。
10 |
11 | 给定一个整数数组 nums 和一个整数目标值 target，请你在该数组中找出 和为目标值 target 的那 两个 整数，并返回它们的数组下标。
12 |
13 | 你可以假设每种输入只会对应一个答案。但是，数组中同一个元素在答案里不能重复出现。
14 |
15 | 你可以按任意顺序返回答案。
16 |
17 | 示例 1：
18 |
19 | ```js
20 | 输入：nums = [2,7,11,15], target = 9
21 | 输出：[0,1]
22 | 解释：因为 nums[0] + nums[1] == 9 ，返回 [0, 1] 。
23 | 示例 2：
24 |
25 | 输入：nums = [3,2,4], target = 6
26 | 输出：[1,2]
27 | 示例 3：
28 |
29 | 输入：nums = [3,3], target = 6
30 | 输出：[0,1]
31 | ```
32 |
33 | 提示：
34 |
35 | ```js
36 | 2 <= nums.length <= 104
37 | -109 <= nums[i] <= 109
38 | -109 <= target <= 109
39 | ```
40 |
41 | 只会存在一个有效答案
42 |
43 | 进阶：你可以想出一个时间复杂度小于 O(n2) 的算法吗？
44 |
45 | ## 2. 解法一
46 |
47 | 简单粗暴些，两重循环，遍历所有情况看相加是否等于目标和，如果符合直接输出。
48 |
49 | ```js
50 | /**
51 | * @param {number[]} nums
52 | * @param {number} target
53 | * @return {number[]}
54 | */
55 | var twoSum = function(nums, target) {
56 |
57 | var map = {};
58 | for(var i = 0 ; i < nums.length ; i++){
59 | var v = nums[i];
60 |
61 | for(var j = i+1 ; j < nums.length ; j++ ){
62 | if( nums[i] + nums[j] == target ){
63 | return [i,j];
64 | }
65 | }
66 |
67 | }
68 | };
69 | ```
70 |
71 | ## 进阶
72 |
73 | 上面双回圈的时间复杂度是O(n^2)，效率明显不太好，用map就可以在一次走访中找到i,j的位置
74 |
75 | ```js
76 | var twoSum = function(nums, target) {
77 |
78 | var map = {};
79 | for(var i = 0 ; i < nums.length ; i++){
80 | var v = nums[i];
81 |
82 | if(map[target-v] >= 0){
83 | // 如果 target - v可以在map中找到值x，代表之前已經出現過值x， target = x + v
84 | // 因此回傳 x的位置與目前v的位置
85 | return [map[target-v],i]
86 | } else {
87 | // 使用map儲存目前的數字與其位置
88 |
89 | map[v] = i;
90 | }
91 | }
92 | };
93 | ```
94 |
95 |
--------------------------------------------------------------------------------
/docs/browser/浏览器解析渲染页面过程.md:
--------------------------------------------------------------------------------
1 | > 点击勘误[issues](https://github.com/webVueBlog/learn-web/issues)，哪吒感谢大家的阅读
2 |
3 | [[toc]]
4 |
5 | ## 浏览器向服务器请求资源过程
6 |
7 | 1. 输入网址;
8 | 2. 浏览器查找域名的IP地址;
9 | 3. 浏览器给web服务器发送一个HTTP请求 ;
10 | 4. 网站服务的永久重定向响应 ;
11 | 5. 浏览器跟踪重定向地址知道了要访问的正确地址，所以它会发送另一个获取请求;
12 | 6. 服务器“处理”请求，服务器接收到获取请求，然后处理并返回一个响应;
13 | 7. 服务器发回一个HTML响应 ;
14 | 8. 浏览器开始渲染HTML，显示HTML
15 | 9. 浏览器发送请求，以获取嵌入在HTML中的对象,在浏览器显示HTML时，它会注意到需要获取其他地址内容的标签,这时，浏览器会发送一个获取请求来重新获得这些文件,这些文件就包括CSS/JS/图片等资源，这些资源的地址都要经历一个和HTML读取类似的过程,所以浏览器会在DNS中查找这些域名，发送请求，重定向等。
16 |
17 | ## 浏览器解析渲染流程
18 |
19 | 一、大致分为五步：
20 |
21 | 1. 解析HTML
22 | 2. 构建DOM树
23 | 3. DOM树与CSS样式进行附着构造呈现树
24 | 4. 布局
25 | 5. 绘制
26 |
27 | 二、解析渲染过程
28 |
29 | 1. DOM Tree：浏览器将HTML解析成树形的数据结构，构建一颗DOM树，同时进行第三步。
30 | 2. CSS Rule Tree：浏览器将CSS解析成树形的数据结构，构建CSSOM tree，生成页面的样式表。
31 | 3. Render Tree: 将DOM树和样式表，关联起来，构建一颗Render树(这一过程又称为Attachment)。每个DOM节点都有attach方法，接受样式信息，返回一个render对象(又名renderer)。这些render对象最终会被构建成一颗Render树。
32 | 4. layout: 有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系，从而去计算出每个节点在屏幕中的位置。
33 | 5. painting: 按照算出来的规则，调用每个节点paint方法，把它们绘制出来。
34 | 6. reflow（回流or重排）：当浏览器发现某个部分发生了点变化影响了布局，需要倒回去重新渲染，这个回退的过程叫 reflow。reflow 会从 `` 这个 root frame 开始递归往下，依次计算所有的结点几何尺寸和位置。reflow 几乎是无法避免的。现在界面上流行的一些效果，比如树状目录的折叠、展开（实质上是元素的显示与隐藏）等，都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引起它内部、周围甚至整个页面的重新渲染。通常我们都无法预估浏览器到底会 reflow 哪一部分的代码，它们都彼此相互影响着。要从第四步重新开始，更加耗费性能。
35 | 7. repaint（重绘）：改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，屏幕的一部分要重画，但是元素的几何尺寸没有变，只需要重新走第五步。
36 |
37 | 
38 |
39 | - 浏览器从服务端拿到html文件后，首先开始解析html文件，构建DOM tree，并且同时构建Render Tree；
40 | - 遇到js文件的话，阻塞DOM tree的构建；因为js可能会改变dom和css，因此浏览器会先解析script，避免浪费。
41 | - 遇到css文件的话，先加载css然后构建CSSOM Tree，与此同时构建DOM Tree， 但是将阻塞Render Tree的构建。
42 | - 如果将css文件放在底部，render tree在之前就已经构建完了，因此用户可能会看到无样式的页面，或者闪屏。
43 | - 重排意味着重新计算节点的位置大小等信息，重新在草稿本上画了草图，所以一定会重绘。重绘不一定会重排，比如背景颜色改变
44 | - 重排和重绘代价很高，所以浏览器并不会一有信息改变就去执行重排和重绘，而是会将多个可能的重排和重绘一次执行。
45 | - 有两个css属性，display: none和visibility: hidden，前者会导致重排和重绘，后者会导致重绘。这是后者的优点，但缺点是此节点一直保存在内存中，占用资源。
46 |
47 |
--------------------------------------------------------------------------------
/docs/Vue/vue-ts项目中Emit的用法.md:
--------------------------------------------------------------------------------
1 | > 点击勘误[issues](https://github.com/webVueBlog/learn-web/issues)，哪吒感谢大家的阅读
2 |
3 | 要使vue支持ts写法，我们需要用到vue-property-decorator，这个组件完全依赖于vue-class-componet
4 |
5 | 首先安装：
6 |
7 | ```js
8 | npm i -D vue-property-decorator
9 | ```
10 |
11 | > @Emit(event?: string)
12 |
13 | @Emit装饰器接收一个可选参数，作为事件名；如果没有提供这个参数，$emit会将回调函数的camelCase(驼峰式)转为kebab-case（短横线命名），并将其作为事件名；
14 |
15 | @Emit会将回调函数的返回值作为第二个参数，如果返回值是一个Promise对象，$emit会将Promise对象状态为resolved之后触发；
16 |
17 | @Emit的回调函数的参数，会放在其返回值之后，一起被$emit当作参数使用；
18 |
19 | 看下面例子：
20 |
21 | ```js
22 | import { Vue, Component, Emit } from 'vue-property-decorator'
23 |
24 | @Component
25 | export default class YourComponent extends Vue {
26 | count = 0
27 |
28 | @Emit()
29 | addToCount(n: number) {
30 | this.count += n
31 | }
32 |
33 | @Emit('reset')
34 | resetCount() {
35 | this.count = 0
36 | }
37 |
38 | @Emit()
39 | returnValue() {
40 | return 10
41 | }
42 |
43 | @Emit()
44 | onInputChange(e) {
45 | return e.target.value
46 | }
47 |
48 | @Emit()
49 | promise() {
50 | return new Promise((resolve) => {
51 | setTimeout(() => {
52 | resolve(20)
53 | }, 0)
54 | })
55 | }
56 | }
57 | ```
58 |
59 | 以上代码等同于：
60 |
61 | ```js
62 | export default {
63 | data() {
64 | return {
65 | count: 0,
66 | }
67 | },
68 | methods: {
69 | addToCount(n) {
70 | this.count += n
71 | // 将addToCount转成add-to-count
72 | this.$emit('add-to-count', n)
73 | },
74 | resetCount() {
75 | this.count = 0
76 | this.$emit('reset')
77 | },
78 | returnValue() {
79 | this.$emit('return-value', 10)
80 | },
81 | onInputChange(e) {
82 | this.$emit('on-input-change', e.target.value, e)
83 | },
84 | promise() {
85 | const promise = new Promise((resolve) => {
86 | setTimeout(() => {
87 | resolve(20)
88 | }, 0)
89 | })
90 |
91 | promise.then((value) => {
92 | this.$emit('promise', value)
93 | })
94 | },
95 | },
96 | }
97 | ```
98 |
--------------------------------------------------------------------------------
/docs/Vue/vue-ts项目中Model的用法.md:
--------------------------------------------------------------------------------
1 | > 点击勘误[issues](https://github.com/webVueBlog/learn-web/issues)，哪吒感谢大家的阅读
2 |
3 | 要使vue支持ts写法，我们需要用到vue-property-decorator，这个组件完全依赖于vue-class-componet
4 |
5 | 首先安装：
6 |
7 | ```js
8 | npm i -D vue-property-decorator
9 | ```
10 |
11 | @Model(event?: string, options: (PropOptions | Constructor[] | Constructor) = {})
12 |
13 | > @Model装饰器允许我们在一个组件上自定义v-model，接受两个参数:
14 |
15 | 1. event: string类型，表示事件名；
16 | 2. options: PropOptions | Constructor[] | Constructor与@Prop的第一个参数一致；
17 |
18 | 看下面例子：
19 |
20 | ```js
21 | import { Vue, Component, Model } from 'vue-property-decorator'
22 |
23 | @Component
24 | export default class YourComponent extends Vue {
25 | @Model('change', { type: Boolean }) readonly checked!: boolean
26 | }
27 | ```
28 |
29 | 等同于以下代码：
30 |
31 | ```js
32 | export default {
33 | model: {
34 | prop: 'checked',
35 | event: 'change',
36 | },
37 | props: {
38 | checked: {
39 | type: Boolean,
40 | },
41 | },
42 | }
43 | ```
44 |
45 | 看下面父子组件例子：
46 |
47 | ```js
48 | // 父组件
49 |
50 | 
) 来请求域名 B (http://domainb.foo/) 上的图片资源。这在当今的 Web 页面上是很常见的 —— 加载跨站点资源，包括 CSS 样式表，图片，脚本和其他资源。CORS 允许 Web 开发人员控制其站点对跨站点请求的反应。
22 |
23 | ## HTTP 的演变
24 |
25 | 简单描述了从早期版本的 HTTP 到现代 HTTP/2，新兴的 HTTP/3 以及未来版本的 HTTP 这个过程中发生的变更。
26 |
27 | ## Mozilla Web 安全准则
28 |
29 | 一系列用于帮助运营团队创建安全的 Web 应用程序的技巧。
30 |
31 | ## HTTP 消息
32 |
33 | 描述了 HTTP/1.x 和 HTTP/2 中不同种类消息的类型和结构。
34 |
35 | ## 典型的 HTTP 会话
36 |
37 | 展现并解释了一个常见 HTTP 会话的流程。
38 |
39 | ## HTTP/1.x 中的连接管理
40 |
41 | 描述了在 HTTP/1.x 中的三种连接管理模型，以及它们的优点和缺点。
42 |
43 | ## HTTP 头
44 |
45 | HTTP 消息头用于描述资源或服务器或客户端的行为。可以使用 `X-` 前缀添加自定义专有头。其他的可以在 `IANA registry` 中找到，其原始定义在 `RFC 4229`。`IANA` 同时也维护着一份 `registry of proposed new HTTP message headers`。
46 |
47 | ## HTTP 请求方式
48 |
49 | 可以使用 `HTTP`: `GET`，`POST` 方式来完成不同操作，或是一些不太常见的请求方式，像是： `OPTIONS`，`DELETE` 和 `TRACE`。
50 |
51 | ## HTTP 状态码
52 |
53 | `HTTP` 状态码用来表示特定的 `HTTP` 请求是否已成功完成。响应分为五类：消息响应，成功响应，重定向，客户端错误和服务器错误。
54 |
55 | ## CSP 指令
56 |
57 | `Content-Security-Policy` 响应报头字段允许网站管理员控制页面上哪些资源能够被用户代理程序加载。除了少数例外，此策略主要涉及指定服务器来源和脚本终端。
58 |
59 | ## Firefox 开发者工具
60 |
61 | 网络监视器
62 |
63 | ## Mozilla Observatory
64 |
65 | 一个旨在帮助开发人员，系统管理员和安全专业人员安全地配置其站点的项目。
66 |
67 | ## RedBot
68 |
69 | 用于检查与缓存相关的 HTTP 头的工具。
70 |
71 | ## 浏览器的工作原理
72 |
73 | 一篇非常全面的关于浏览器内部实现与通过 HTTP 协议的请求流的文章。可以说是所有 Web 开发者的必读内容。
74 |
75 | - [HTTP](https://developer.mozilla.org/zh-CN/docs/Web/HTTP)
--------------------------------------------------------------------------------
/docs/JavaScript/创建您自己的函数.md:
--------------------------------------------------------------------------------
1 |
2 | > 点击勘误[issues](https://github.com/webVueBlog/learn-web/issues)，哪吒感谢大家的阅读
3 |
4 | [[toc]]
5 |
6 | 让我们来组织一个基本的函数。
7 |
8 | :::tip
9 | 注：对于函数命名约定，应遵循与变量命名约定相同的规则。 这很好，尽你所能理解它们之间的区别 - 函数名称后带有括号，而变量则没有。
10 | :::
11 |
12 | ```js
13 | const html = document.querySelector('html');
14 |
15 | const panel = document.createElement('div');
16 | panel.setAttribute('class', 'msgBox');
17 | html.appendChild(panel);
18 |
19 | const msg = document.createElement('p');
20 | msg.textContent = 'This is a message box';
21 | panel.appendChild(msg);
22 |
23 | const closeBtn = document.createElement('button');
24 | closeBtn.textContent = 'x';
25 | panel.appendChild(closeBtn);
26 |
27 | closeBtn.onclick = function() {
28 | panel.parentNode.removeChild(panel);
29 | }
30 | ```
31 |
32 | 第一行代码使用了一个DOM（文档对象模型）的内置方法 document.querySelector() 来选择`` 元素并且把它存放在一个叫 html的常量中, 这样方便我们接下来使用这个元素:
33 |
34 | ```js
35 | const html = document.querySelector('html');
36 | ```
37 |
38 | 一个名字叫做 Document.createElement() 的DOM方法，用来创建 `
64 |
68 |
69 |
70 |
79 |
80 | // 子组件
81 |
82 | 父组件
65 |{{name}}
66 |
83 |
87 |
88 |
89 |
101 | ```
--------------------------------------------------------------------------------
/docs/coding/切片上传和断点续传.md:
--------------------------------------------------------------------------------
1 | > 点击勘误[issues](https://github.com/webVueBlog/learn-web/issues)，哪吒感谢大家的阅读
2 |
3 | [[toc]]
4 |
5 | ## 一、计算文件MD5
6 |
7 | 在计算文件MD5之前写过的判断文件类型：文件上传判断文件格式，计算文件的MD5就是为了传值给后端比较文件的准确性和完整性，可以使用spark-md5插件，但是我们需要考虑的是大文件上传，需要把文件切片后再进行MD5计算。
8 |
9 | 安装语法：
10 |
11 | `npm install --save spark-md5`
12 |
13 | ```js
14 | async calculateHashWorker() {
15 | return new Promise(resolve => {
16 | this.worker = new Worker('./hash.js');
17 | this.worker.postMessage({chunks: this.chunks});//文件通过hash通过标识，用来区分唯一性
18 | this.worker.onMessage = e => {
19 | const {progress,hash} = e.data;
20 | this.hashProgress = Number(progress.toFixed(2));//展示计算hash进度条
21 | if(hash) {
22 | resolve(hash);
23 | }
24 | }
25 | })
26 | },
27 | async uploadFile() {
28 | this.chunks = this.createFileChunk(this.file);//拿到文件切片后的数组
29 | const hash = await this.calculateHashWorker();//计算md5
30 | }
31 | ```
32 |
33 | ## 二、切片上传
34 |
35 | 前端把文件切片成很多块，成为文件切片数组，并且可以固定成每一块的大小，限制大小例如1M这样。等文件上传完成后再合并成一个文件，这样就实现了大文件切片上传功能，如果上传过程中出现网络中断或其他问题，下次继续上传时就可以使用下面的断点续传。
36 |
37 | ```js
38 | //把文件切片，生成文件块
39 | createFileChunk(file) {
40 | const chunks = [];
41 | let cur = 0;
42 | const CHUNK_SIZE = 1 * 1024 * 1024;//把文件分块指定成1M大小
43 | while(cur < file.size) {
44 | chunks.push({
45 | index: cur,
46 | file: file.slice(cur,cur + CHUNK_SIZE)
47 | });
48 | cur += size;
49 | }
50 | return chunks;
51 | }
52 | ```
53 |
54 | 把文件分块上传，如果上传了一半网络断了或者用户进行浏览器刷新，就不会继续上传，这时候只有一半到了服务器，这时候可以进行断点续传，后面有网络了只传分片剩下了的部分，然后后端进行合并。这里需要考虑的是把每个切片保存唯一性标识，根据唯一性标识判断文件上传进度，直到文件全部上传完成为止。
55 |
56 | 上传到后端后需要进行文件合并，文件合并按什么顺序呢？这里是后端需要在服务器搭建一个单独临时的文件夹保存所有的切片，切片上传的时候给每个切片加一个索引，这样后端在合并的时候进行索引排序。
57 |
58 | ## 断点续传
59 |
60 | 查询服务器看哪些数据已经传成功标记一下，表示已经上传成功，只需要传剩下的部分。断点续传还需要实现文件覆盖功能，所以如果文件已经有了完整的大文件就要进行删除，上传完成后还要进行文件校验，比较上传前和上传成功后的文件大小。
61 |
62 | ```js
63 | async uploadChunks(uploadedList = []) {
64 | const list = this.chunks.filter(chunks => uploadedList.indexOf(chunk.hash) == -1).map(({chunk,hash,index},i) => {
65 | const form = new FormData();
66 | form.append('chunk',chunk);
67 | form.append('hash',hash);
68 | form.append('filename',this.container.file.name);
69 | form.append('fileHash',this.container.hash);
70 | return {form,index,status: Status.wait}
71 | }).map(({form,index}) => {
72 | request({
73 | url: '/upload',
74 | data: form,
75 | onProgress: this.createProgresshandler(this.chunks[index]),
76 | requestList: this.requestList
77 | })
78 | })
79 | await Promise.all(list);
80 | }
81 | ```
82 |
--------------------------------------------------------------------------------
/docs/Java/1-11-34.md:
--------------------------------------------------------------------------------
1 | > 点击勘误[issues](https://github.com/webVueBlog/learn-web/issues)，哪吒感谢大家的阅读
2 |
3 | # 变量 📝
4 |
5 | ```js
6 | package 包名
7 | public class TestHelloWorld { // 类体
8 | // main 方法： main方法作为程序的入口
9 | public static void main(String[] args) {
10 | // 变量的使用：声明，初始化，使用
11 | // 声明：类型 变量名
12 | }
13 | }
14 | ```
15 |
16 | # Scanner的使用
17 |
18 | ```js
19 | package ...;
20 | import java.util.Scanner;
21 |
22 | // Scanner: 扫描器
23 | public class TestScanner {
24 | public static void main(String[] args) {
25 | // 1.创建一个扫描器
26 | Scanner scan = new Scanner(System.in);
27 | // 2.接收用户输入的字符串内容
28 | String s = scan.next(); // 方法就是一个功能
29 | System.out.println("您输入的内容为" + s);
30 | }
31 | }
32 | ```
33 |
34 | ```js
35 | public class TestDesc {
36 | public static void main(String[] args) {
37 | // 1.创建一个扫描器
38 | Scanner scan = new Scanner(System.in);
39 | System.out.println("请输入您的姓名");
40 | String name = scan.next();
41 | System.out.println("请输入您的年龄：");
42 | int age = scan.nextInt();
43 | ...
44 | }
45 | }
46 | ```
47 |
48 | # for 循环使用 if 分支的使用
49 |
50 | # break 和 continue
51 |
52 | break: 结束for循环
53 |
54 | continue: 结束本次循环，进入下次循环
55 |
56 | # 模拟聊天室 Scanner
57 |
58 | # switch while
59 |
60 | # 数组
61 |
62 | 1. 默认的初始化
63 | 2. 动态初始化
64 | 3. 静态初始化
65 |
66 | ```js
67 | import java.util.Arrays;
68 | import java.util.Scanner;
69 | public class TestArray {
70 | public static void main(String[] args) {
71 | int num = 3;
72 | String[] nameArr = new String[num];
73 | int[] scoreArr = new int[num];
74 | Scanner scan = new Scanner(System.in);
75 | // 循环录入姓名和分数，完成两个数组元素的初始化
76 | for(int i=0; i子组件:
84 |syncedName:{{ syncedName }}
85 | 86 |
10 |
11 | 选择器可以被分为以下类别：
12 |
13 | - 简单选择器（Simple selectors）：通过元素类型、class 或 id 匹配一个或多个元素。
14 | - 属性选择器（Attribute selectors）：通过 属性 / 属性值 匹配一个或多个元素。
15 | - 伪类（Pseudo-classes）：匹配处于确定状态的一个或多个元素，比如被鼠标指针悬停的元素，或当前被选中或未选中的复选框，或元素是 DOM 树中一父节点的第一个子节点。
16 | - 伪元素（Pseudo-elements）:匹配处于相关的确定位置的一个或多个元素，例如每个段落的第一个字，或者某个元素之前生成的内容。
17 | - 组合器（Combinators）：这里不仅仅是选择器本身，还有以有效的方式组合两个或更多的选择器用于非常特定的选择的方法。例如，你可以只选择 divs 的直系子节点的段落，或者直接跟在 headings 后面的段落。
18 | - 多用选择器（Multiple selectors）：这些也不是单独的选择器；这个思路是将以逗号分隔开的多个选择器放在一个 CSS 规则下面， 以将一组声明应用于由这些选择器选择的所有元素。
19 |
20 | ## 简单选择器
21 |
22 | ### 类型选择器（又名：元素选择器）
23 |
24 | 此选择器只是一个选择器名和指定的HTML元素名的不区分大小写的匹配。这是选择所有指定类型的最简单方式。
25 |
26 | ### 类选择器（Class selectors）
27 |
28 | 类选择器由一个点“.”以及类后面的类名组成。类名是在HTML class文档元素属性中没有空格的任何值。由你自己选择一个名字。同样值得一提的是，文档中的多个元素可以具有相同的类名，而单个元素可以有多个类名(以空格分开多个类名的形式书写)。
29 |
30 | ### ID 选择器
31 |
32 | ID选择器由哈希/磅符号 (#)组成，后面是给定元素的ID名称。 任何元素都可以使用id属性设置唯一的ID名称。 由你自己选择的ID是什么。 这是选择单个元素的最有效的方式。
33 |
34 | :::tip
35 | 重要提示：一个ID名称必须在文件中是唯一的。关于重复ID的行为是不可预测的，比如在一些浏览器只是第一个实例计算，其余的将被忽略。
36 | :::
37 |
38 | ### 通用选择器（Universal selector）
39 |
40 | 通用选择（`*`）是最终的王牌。它允许选择在一个页面中的所有元素。由于给每个元素应用同样的规则几乎没有什么实际价值，更常见的做法是与其他选择器结合使用。
41 |
42 | :::tip
43 | 重要提示：使用通用选择时小心。因为它适用于所有的元素，在大型网页利用它可以对性能有明显的影响：网页可以显示比预期要慢。不会有太多的情况下，您想使用此选择。
44 | :::
45 |
46 | ### 组合器（Combinators）
47 |
48 | 在CSS中，组合器允许您将多个选择器组合在一起，这允许您在其他元素中选择元素，或者与其他元素相邻。四种可用的类型是：
49 |
50 | - 后代选择器——（空格键）——允许您选择嵌套在另一个元素中的某个元素（不一定是直接的后代;例如，它可以是一个孙子）。
51 | - 子选择器—— > ——允许您选择一个元素，该元素是另一个元素的直接子元素。
52 | - 相邻兄弟选择器—— + ——允许您选择一个元素，它是另一个元素的直接兄弟元素(也就是说，在它的旁边，在层次结构的同一层)。
53 | - 通用兄弟选择器—— ~ — —允许您选择其他元素的兄弟元素(例如，在层次结构中的相同级别，但不一定就在它的旁边)。
54 |
55 | ```js
56 | Combinators Select
57 | A,B 匹配满足A（和/或）B的任意元素.
58 | A B 匹配任意元素，满足条件：B是A的后代结点（B是A的子节点，或者A的子节点的子节点）
59 | A > B 匹配任意元素，满足条件：B是A的直接子节点
60 | A + B 匹配任意元素，满足条件：B是A的下一个兄弟节点（AB有相同的父结点，并且B紧跟在A的后面）
61 | A ~ B 匹配任意元素，满足条件：B是A之后的兄弟节点中的任意一个（AB有相同的父节点，B在A之后，但不一定是紧挨着A）
62 | ```
63 |
64 | ## 伪类和伪元素
65 |
66 | ### 伪类（Pseudo-class）
67 |
68 | 一个 CSS 伪类（pseudo-class） 是一个以冒号`(:)`作为前缀的关键字，当你希望样式在特定状态下才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类（pseudo-class）。你可能希望某个元素在处于某种状态下呈现另一种样式，例如当鼠标悬停在元素上面时，或者当一个 `checkbox` 被禁用或被勾选时，又或者当一个元素是它在 DOM 树中父元素的第一个孩子元素时。
69 |
70 | ```js
71 | :active
72 | :any
73 | :checked
74 | :default
75 | :dir()
76 | :disabled
77 | :empty
78 | :enabled
79 | :first
80 | :first-child
81 | :first-of-type
82 | :fullscreen
83 | :focus
84 | :hover
85 | :indeterminate
86 | :in-range
87 | :invalid
88 | :lang()
89 | :last-child
90 | :last-of-type
91 | :left
92 | :link
93 | :not()
94 | :nth-child()
95 | :nth-last-child()
96 | :nth-last-of-type()
97 | :nth-of-type()
98 | :only-child
99 | :only-of-type
100 | :optional
101 | :out-of-range
102 | :read-only
103 | :read-write
104 | :required
105 | :right
106 | :root
107 | :scope
108 | :target
109 | :valid
110 | :visited
111 | ```
112 |
113 | ### 伪元素
114 |
115 | 伪元素（`Pseudo-element`）跟伪类很像，但它们又有不同的地方。它们都是关键字 —— 但这次伪元素前缀是两个冒号 `(::)` —— 同样是添加到选择器后面达到指定某个元素的某个部分。
116 |
117 | ```js
118 | ::after
119 | ::before
120 | ::first-letter
121 | ::first-line
122 | ::selection
123 | ::backdrop
124 | ```
125 |
126 | - [CSS选择器](https://segmentfault.com/a/1190000013424772)
--------------------------------------------------------------------------------
/docs/JavaScript/执行上下文栈.md:
--------------------------------------------------------------------------------
1 | > 点击勘误[issues](https://github.com/webVueBlog/learn-web/issues)，哪吒感谢大家的阅读
2 |
3 | [[toc]]
4 |
5 | ## 顺序执行？
6 |
7 | 如果要问到 JavaScript 代码执行顺序的话，想必写过 JavaScript 的开发者都会有个直观的印象，那就是顺序执行，毕竟：
8 |
9 | ```js
10 | var foo = function () {
11 |
12 | console.log('foo1');
13 |
14 | }
15 |
16 | foo(); // foo1
17 |
18 | var foo = function () {
19 |
20 | console.log('foo2');
21 |
22 | }
23 |
24 | foo(); // foo2
25 | ```
26 |
27 | 然而去看这段代码：
28 |
29 | ```js
30 | function foo() {
31 |
32 | console.log('foo1');
33 |
34 | }
35 |
36 | foo(); // foo2
37 |
38 | function foo() {
39 |
40 | console.log('foo2');
41 |
42 | }
43 |
44 | foo(); // foo2
45 | ```
46 |
47 | 打印的结果却是两个 foo2。
48 |
49 | JavaScript 引擎并非一行一行地分析和执行程序，而是一段一段地分析执行。当执行一段代码的时候，会进行一个“准备工作”，比如第一个例子中的变量提升，和第二个例子中的函数提升。
50 |
51 | 但是本文真正想让大家思考的是：这个“一段一段”中的“段”究竟是怎么划分的呢？
52 |
53 | 到底JavaScript引擎遇到一段怎样的代码时才会做“准备工作”呢？
54 |
55 | ## 可执行代码
56 |
57 | 这就要说到 JavaScript 的可执行代码(executable code)的类型有哪些了？
58 |
59 | 其实很简单，就三种，全局代码、函数代码、eval代码。
60 |
61 | 举个例子，当执行到一个函数的时候，就会进行准备工作，这里的“准备工作”，让我们用个更专业一点的说法，就叫做"执行上下文(execution context)"。
62 |
63 | ## 执行上下文栈
64 |
65 | 接下来问题来了，我们写的函数多了去了，如何管理创建的那么多执行上下文呢？
66 |
67 | 所以 JavaScript 引擎创建了执行上下文栈（Execution context stack，ECS）来管理执行上下文
68 |
69 | 为了模拟执行上下文栈的行为，让我们定义执行上下文栈是一个数组：
70 |
71 | ```js
72 | ECStack = [];
73 | ```
74 |
75 | 试想当 JavaScript 开始要解释执行代码的时候，最先遇到的就是全局代码，所以初始化的时候首先就会向执行上下文栈压入一个全局执行上下文，我们用 globalContext 表示它，并且只有当整个应用程序结束的时候，ECStack 才会被清空，所以程序结束之前， ECStack 最底部永远有个 globalContext：
76 |
77 | ```js
78 | ECStack = [
79 | globalContext
80 | ];
81 | ```
82 |
83 | 现在 JavaScript 遇到下面的这段代码了：
84 |
85 | ```js
86 | function fun3() {
87 | console.log('fun3')
88 | }
89 |
90 | function fun2() {
91 | fun3();
92 | }
93 |
94 | function fun1() {
95 | fun2();
96 | }
97 |
98 | fun1();
99 | ```
100 |
101 | 当执行一个函数的时候，就会创建一个执行上下文，并且压入执行上下文栈，当函数执行完毕的时候，就会将函数的执行上下文从栈中弹出。知道了这样的工作原理，让我们来看看如何处理上面这段代码：
102 |
103 | ```js
104 | // 伪代码
105 |
106 | // fun1()
107 | ECStack.push(
21 |
22 | 以下是一段代码，及其对应的 AST
23 |
24 | ```js
25 | // Code
26 | const a = 4
27 |
28 | // AST
29 | {
30 | "type": "Program",
31 | "start": 0,
32 | "end": 11,
33 | "body": [
34 | {
35 | "type": "VariableDeclaration",
36 | "start": 0,
37 | "end": 11,
38 | "declarations": [
39 | {
40 | "type": "VariableDeclarator",
41 | "start": 6,
42 | "end": 11,
43 | "id": {
44 | "type": "Identifier",
45 | "start": 6,
46 | "end": 7,
47 | "name": "a"
48 | },
49 | "init": {
50 | "type": "Literal",
51 | "start": 10,
52 | "end": 11,
53 | "value": 4,
54 | "raw": "4"
55 | }
56 | }
57 | ],
58 | "kind": "const"
59 | }
60 | ],
61 | "sourceType": "module"
62 | }
63 | ```
64 |
65 | 不同的语言拥有不同的解析器，比如 Javascript 的解析器和 CSS 的解析器就完全不同。
66 |
67 | 对相同的语言，也存在诸多的解析器，也就会生成多种 AST，如 babel 与 espree。
68 |
69 | 在 AST Explorer 中，列举了诸多语言的解析器(Parser)，及转化器(Transformer)。
70 |
71 | 
72 |
73 | ## AST 的生成
74 |
75 | AST 的生成这一步骤被称为「解析(Parser)」，而该步骤也有两个阶段: 词法分析(Lexical Analysis)和语法分析(Syntactic Analysis)
76 |
77 | ## 词法分析 (Lexical Analysis)
78 |
79 | 词法分析用以将代码转化为 Token 流，维护一个关于 Token 的数组
80 |
81 | 
82 |
83 | ```js
84 | // Code
85 | a = 3
86 |
87 | // Token
88 | [
89 | { type: { ... }, value: "a", start: 0, end: 1, loc: { ... } },
90 | { type: { ... }, value: "=", start: 2, end: 3, loc: { ... } },
91 | { type: { ... }, value: "3", start: 4, end: 5, loc: { ... } },
92 | ...
93 | ]
94 | ```
95 |
96 | 词法分析后的 Token 流也有诸多应用，如:
97 |
98 | 1. 代码检查，如 eslint 判断是否以分号结尾，判断是否含有分号的 token
99 | 2. 语法高亮，如 highlight/prism 使之代码高亮
100 | 3. 模板语法，如 ejs 等模板也离不开
101 |
102 | ## 语法分析 (Syntactic Analysis)
103 |
104 | 语法分析将 Token 流转化为结构化的 AST，方便操作
105 |
106 | ```js
107 | {
108 | "type": "Program",
109 | "start": 0,
110 | "end": 5,
111 | "body": [
112 | {
113 | "type": "ExpressionStatement",
114 | "start": 0,
115 | "end": 5,
116 | "expression": {
117 | "type": "AssignmentExpression",
118 | "start": 0,
119 | "end": 5,
120 | "operator": "=",
121 | "left": {
122 | "type": "Identifier",
123 | "start": 0,
124 | "end": 1,
125 | "name": "a"
126 | },
127 | "right": {
128 | "type": "Literal",
129 | "start": 4,
130 | "end": 5,
131 | "value": 3,
132 | "raw": "3"
133 | }
134 | }
135 | }
136 | ],
137 | "sourceType": "module"
138 | }
139 | ```
140 |
141 | ## 实践
142 |
143 | 可通过自己写一个解析器，将语言 (DSL) 解析为 AST 进行练手，以下两个示例是不错的选择
144 |
145 | 1. 解析简单的 HTML 为 AST
146 | 2. 解析 Marktodwn List 为 AST
--------------------------------------------------------------------------------
/docs/DataStructure/栈-队列-堆.md:
--------------------------------------------------------------------------------
1 | > 点击勘误[issues](https://github.com/webVueBlog/learn-web/issues)，哪吒感谢大家的阅读
2 |
3 | [[toc]]
4 |
5 | 1. 使用队列实现栈 （栈，队列）
6 | 2. 使用栈实现队列 （栈，队列）
7 | 3. 包含min函数的栈
8 | 4. 合法的出栈序列
9 | 5. 简单的计算器
10 | 6. 寻找中位数
11 |
12 | 栈，先进后出的线性表。
13 |
14 | - 1，2，3 按顺序压入栈中（push操作） 栈
15 | - 按照栈顶栈低3，2，1的顺序出栈（pop操作）
16 |
17 | 队列，先进先出的线性表。
18 |
19 | - 1，2，3按照顺序压入队列中（push操作）
20 | - 按照队列头部到尾部1，2，3的顺序出队列（pop操作）
21 |
22 | 
23 |
24 | ## 栈
25 |
26 | ```js
27 | s.top(): 取出栈顶
28 | s.empty(): 判断栈是否为空
29 | s.push(x): 将x添加至栈
30 | s.pop(): 弹出栈顶
31 | s.size(): 栈的存储元素个数
32 | ```
33 |
34 | 
35 |
36 | ```js
37 | int main() {
38 | std::stack
50 |
51 | ```js
52 | q.empty(): 判断队列是否为空
53 | q.front(): 返回队列头部元素
54 | q.back(): 返回队列尾部元素
55 | q.pop(): 弹出队列头部元素
56 | q.push(x): 将x添加至队列
57 | q.size(): 返回队列的存储元素的个数
58 | ```
59 |
60 | ## 使用队列实现栈
61 |
62 | 设计一个栈，支持基本的栈操作，这个栈的内部存储数据的结构为队列，队列的方法只能包含push,peek(front),pop,size,empty等标准的队列方法
63 |
64 | 1. push(x): 将元素x压入栈中
65 | 2. pop(): 弹出（移除）栈顶元素
66 | 3. top(): 返回栈顶元素
67 | 4. empty(): 判断栈是否是空
68 |
69 | ```js
70 | class MyStack {
71 | public:
72 | MyStack() {
73 | }
74 | void push(int x) {
75 | }
76 | int pop() {}
77 | int top() {}
78 | bool empty() {}
79 | j}
80 | ```
81 |
82 | 
83 |
84 | 
85 |
86 | 
87 |
88 | 
89 |
90 |
91 |
92 | 
93 |
94 | 
95 |
96 | ## 包含min函数的栈
97 |
98 | 设计一个栈，支持如下操作，这些操作的算法复杂度需要是常数级：
99 |
100 | 1. push(x): 将元素x压入栈中
101 | 2. pop(): 弹出（移除）栈顶元素
102 | 3. top(): 返回栈顶元素
103 | 4. getMin(): 返回栈内最小元素
104 |
105 | ```js
106 | class MinStack {
107 | public:
108 | MinStack() {
109 | // 构造函数
110 | }
111 | void push(int x) {}
112 | void pop() {}
113 | int top() {}
114 | int getMin() {}
115 | }
116 | ```
117 |
118 | 
119 |
120 | ## 用另一个栈，存储各个状态最小值
121 |
122 | 
123 |
124 | ## 合法的出栈序列
125 |
126 | 
127 |
128 | 
129 |
130 | 
131 |
132 | 
133 |
134 | 
135 |
136 | 
137 |
138 | 
139 |
140 |
--------------------------------------------------------------------------------
/docs/JavaScript/执行上下文.md:
--------------------------------------------------------------------------------
1 | > 点击勘误[issues](https://github.com/webVueBlog/learn-web/issues)，哪吒感谢大家的阅读
2 |
3 | [[toc]]
4 |
5 | 当 JavaScript 代码执行一段可执行代码(executable code)时，会创建对应的执行上下文(execution context)。
6 |
7 | 对于每个执行上下文，都有三个重要属性：
8 |
9 | - 变量对象(Variable object，VO)
10 | - 作用域链(Scope chain)
11 | - this
12 |
13 | ## 思考题
14 |
15 | ```js
16 | var scope = "global scope";
17 | function checkscope(){
18 | var scope = "local scope";
19 | function f(){
20 | return scope;
21 | }
22 | return f();
23 | }
24 | checkscope();
25 | ```
26 |
27 | ```js
28 | var scope = "global scope";
29 | function checkscope(){
30 | var scope = "local scope";
31 | function f(){
32 | return scope;
33 | }
34 | return f;
35 | }
36 | checkscope()();
37 | ```
38 |
39 | 两段代码都会打印'local scope'。虽然两段代码执行的结果一样，但是两段代码究竟有哪些不同呢？
40 |
41 | ## 具体执行分析
42 |
43 | 我们分析第一段代码：
44 |
45 | ```js
46 | var scope = "global scope";
47 | function checkscope(){
48 | var scope = "local scope";
49 | function f(){
50 | return scope;
51 | }
52 | return f();
53 | }
54 | checkscope();
55 | ```
56 |
57 | 执行过程如下：
58 |
59 | 1.执行全局代码，创建全局执行上下文，全局上下文被压入执行上下文栈
60 |
61 | ```js
62 | ECStack = [
63 | globalContext
64 | ];
65 | ```
66 |
67 | 2.全局上下文初始化
68 |
69 | ```js
70 | globalContext = {
71 | VO: [global],
72 | Scope: [globalContext.VO],
73 | this: globalContext.VO
74 | }
75 | ```
76 |
77 | 2.初始化的同时，checkscope 函数被创建，保存作用域链到函数的内部属性[[scope]]
78 |
79 | ```js
80 | checkscope.[[scope]] = [
81 | globalContext.VO
82 | ];
83 | ```
84 |
85 | 3.执行 checkscope 函数，创建 checkscope 函数执行上下文，checkscope 函数执行上下文被压入执行上下文栈
86 |
87 | ```js
88 | ECStack = [
89 | checkscopeContext,
90 | globalContext
91 | ];
92 | ```
93 |
94 | 4.checkscope 函数执行上下文初始化：
95 |
96 | 1. 复制函数 [[scope]] 属性创建作用域链，
97 | 2. 用 arguments 创建活动对象，
98 | 3. 初始化活动对象，即加入形参、函数声明、变量声明，
99 | 4. 将活动对象压入 checkscope 作用域链顶端。
100 |
101 | 同时 f 函数被创建，保存作用域链到 f 函数的内部属性[[scope]]
102 |
103 | ```js
104 | checkscopeContext = {
105 | AO: {
106 | arguments: {
107 | length: 0
108 | },
109 | scope: undefined,
110 | f: reference to function f(){}
111 | },
112 | Scope: [AO, globalContext.VO],
113 | this: undefined
114 | }
115 | ```
116 |
117 | 5.执行 f 函数，创建 f 函数执行上下文，f 函数执行上下文被压入执行上下文栈
118 |
119 | ```js
120 | ECStack = [
121 | fContext,
122 | checkscopeContext,
123 | globalContext
124 | ];
125 | ```
126 |
127 | 6.f 函数执行上下文初始化, 以下跟第 4 步相同：
128 |
129 | 1. 复制函数 [[scope]] 属性创建作用域链
130 | 2. 用 arguments 创建活动对象
131 | 3. 初始化活动对象，即加入形参、函数声明、变量声明
132 | 4. 将活动对象压入 f 作用域链顶端
133 |
134 | ```js
135 | fContext = {
136 | AO: {
137 | arguments: {
138 | length: 0
139 | }
140 | },
141 | Scope: [AO, checkscopeContext.AO, globalContext.VO],
142 | this: undefined
143 | }
144 | ```
145 |
146 | 7.f 函数执行，沿着作用域链查找 scope 值，返回 scope 值
147 |
148 | 8.f 函数执行完毕，f 函数上下文从执行上下文栈中弹出
149 |
150 | ```js
151 | ECStack = [
152 | checkscopeContext,
153 | globalContext
154 | ];
155 | ```
156 |
157 | 9.checkscope 函数执行完毕，checkscope 执行上下文从执行上下文栈中弹出
158 |
159 | ```js
160 | ECStack = [
161 | globalContext
162 | ];
163 | ```
164 |
165 | 第二段代码就留给大家去尝试模拟它的执行过程。
166 |
167 | ```js
168 | var scope = "global scope";
169 | function checkscope(){
170 | var scope = "local scope";
171 | function f(){
172 | return scope;
173 | }
174 | return f;
175 | }
176 | checkscope()();
177 | ```
178 |
179 |
180 |
181 |
182 |
--------------------------------------------------------------------------------
/docs/ALG/3-无重复字符的最长子串.md:
--------------------------------------------------------------------------------
1 | > 点击勘误[issues](https://github.com/webVueBlog/learn-web/issues)，哪吒感谢大家的阅读
2 |
3 | [[toc]]
4 |
5 | ## 1. 题目描述（中等难度）
6 |
7 | 
8 |
9 | 给定一个字符串，找到没有重复字符的最长子串，返回它的长度。
10 |
11 | ```js
12 | 给定一个字符串，请你找出其中不含有重复字符的 最长子串 的长度。
13 |
14 | 示例 1:
15 |
16 | 输入: "abcabcbb"
17 | 输出: 3
18 | 解释: 因为无重复字符的最长子串是 "abc"，所以其长度为 3。
19 | 示例 2:
20 |
21 | 输入: "bbbbb"
22 | 输出: 1
23 | 解释: 因为无重复字符的最长子串是 "b"，所以其长度为 1。
24 | 示例 3:
25 |
26 | 输入: "pwwkew"
27 | 输出: 3
28 | 解释: 因为无重复字符的最长子串是 "wke"，所以其长度为 3。
29 | 请注意，你的答案必须是 子串 的长度，"pwke" 是一个子序列，不是子串。
30 | ```
31 |
32 | 对原数组进行判断，是否在arr里 如果在就将arr字符串之前的全部去除，不在就直接push，最后判断长度
33 |
34 | ```js
35 | var lengthOfLongestSubstring = function(s) {
36 | let arr = [];
37 | let length = 0；
38 | for(let item of s) {
39 | if(arr.includes(item)) {
40 | let index = arr.indexOf(item);
41 | arr.splice(0, index+1);
42 | }
43 | arr.push(item);
44 | length = length > arr.length ? length : arr.length;
45 | }
46 | return length;
47 | };
48 | ```
49 |
50 | ## 复杂度分析
51 |
52 | - 时间复杂度：$O(N)$
53 | - 空间复杂度：$O(N)$
54 |
55 | 
56 |
57 | ```js
58 | /**
59 | * @param {string} s
60 | * @return {number}
61 | */
62 | var lengthOfLongestSubstring = function(s) {
63 | var str="" //存放无重复子串
64 | var size=0 //当前最长无重复子串的长度
65 | for(var i=0,len=s.length;i
19 |
20 | 由于IE盒模型的怪异模式，IE模型和标准模型的内容计算方式不同。
21 |
22 | ## 二、标准模型和IE模型的区别
23 |
24 | IE模型和标准模型唯一的区别是内容计算方式的不同，如下图所示：
25 |
26 | 
27 |
28 | IE模型元素宽度width=content+padding+border，高度计算相同
29 |
30 | 
31 |
32 | 标准模型元素宽度width=content，高度计算相同
33 |
34 | ## 三、css如何设置获取这两种模型的宽和高
35 |
36 | 通过css3新增的属性 `box-sizing: content-box` | `border-box`分别设置盒模型为标准模型（`content-box`）和IE模型（`border-box`）。
37 |
38 | ```js
39 | .content-box {
40 | box-sizing:content-box;
41 | width: 100px;
42 | height: 50px;
43 | padding: 10px;
44 | border: 5px solid red;
45 | margin: 15px;
46 | }
47 | ```
48 |
49 | 
50 |
51 | .content-box设置为标准模型，它的元素宽度width=100px。
52 |
53 | ```js
54 | .border-box {
55 | box-sizing: border-box;
56 | width: 100px;
57 | height: 50px;
58 | padding: 10px;
59 | border: 5px solid red;
60 | margin: 15px;
61 | }
62 | ```
63 |
64 | 
65 |
66 | .border-box设置为IE模型，它的元素宽度width=content + 2 padding + 2 border = 70px + 2 10px + 2 5px = 100px。
67 |
68 | ## 四、javascript如何设置获取盒模型对应的宽和高
69 |
70 | 1. `dom.style.width/height` 只能取到行内样式的宽和高，style标签中和link外链的样式取不到。
71 | 2. `dom.currentStyle.width/height` 取到的是最终渲染后的宽和高，只有IE支持此属性。
72 | 3. `window.getComputedStyle(dom).width/height` 同（2）但是多浏览器支持，IE9以上支持。
73 | 4. `dom.getBoundingClientRect().width/height` 也是得到渲染后的宽和高，大多浏览器支持。IE9以上支持，除此外还可以取到相对于视窗的上下左右的距离
74 |
75 | ## 五、外边距重叠
76 |
77 | 当两个垂直外边距相遇时，他们将形成一个外边距，合并后的外边距高度等于两个发生合并的外边距的高度中的较大者。注意：只有普通文档流中块框的垂直外边距才会发生外边距合并，行内框、浮动框或绝对定位之间的外边距不会合并。
78 |
79 | 
80 |
81 | 这里父元素section的高度是多少呢，100px，但是我们给section设置overflow:hidden后高度就变成110px，这是为什么呢，其实这里我们给父元素创建了BFC。，什么是BFC,请看下面的介绍。
82 |
83 | ## 六 、BFC
84 |
85 | BFC(Block Formatting Context)：块级格式化上下文。
86 |
87 | BFC决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当设计到可视化布局的时候，BFC提供了一个环境，HTML元素在这个环境中按照一定的规则进行布局。一个环境中的元素不会影响到其他环境中的布局。
88 |
89 | ### BFC的原理（渲染规则）
90 |
91 | 1. BFC元素垂直方向的边距会发生重叠。属于不同BFC外边距不会发生重叠
92 | 2. BFC的区域不会与浮动元素的布局重叠。
93 | 3. BFC元素是一个独立的容器，外面的元素不会影响里面的元素。里面的元素也不会影响外面的元素。
94 | 4. 计算BFC高度的时候，浮动元素也会参与计算(清除浮动)
95 |
96 | #### 如何创建BFC
97 |
98 | 1. overflow不为visible;
99 | 2. float的值不为none；
100 | 3. position的值不为static或relative；
101 | 4. display属性为inline-blocks,table,table-cell,table-caption,flex,inline-flex;
102 |
103 | 说了这么多规则，放几个实类出来看看。
104 |
105 | ```js
106 | 1
122 | 125 |3
126 |4
127 |2
`他被一个父元素包裹，并且父元素有 overflow:hidden 样式，前面的如何创建BFC的第一条就说了 overflow:hidden 可以创建一个BFC。结果如下图所示。 131 | 132 |
133 |
134 | 我们看这里的2，它的上下外边距都没有与1和3发生重叠，但3与4外边距发生了重叠。这就解释了BFC创建了一个独立的环境，这个环境中的元素不会影响到其他环境中的布局，所以BFC内的外边距不与外部的外边距发生重叠。
135 |
136 | 再看看下面的列子：
137 |
138 | ```js
139 | 
163 |
164 | 写过前端页面的我们肯定遇到过这种情况，这里其实是浮动元素叠在 .right 元素的上面，如果我们想让.right元素不会延伸到 float元素怎么办,其实我们在.right元素上加 overflow:hidden （用其他的方式创建BFC也可以）创建BFC就可以解决。因为BFC不会与浮动元素发生重叠。
165 |
166 | 
167 |
168 | 还有一种情况很常见，就是由于子元素浮动，导致父元素的高度不会把浮动元素算在内，那么我们在父元素创建BFC就可以让可以让浮动元素也参与高度计算。
169 |
170 | IFC这里就不介绍，大家可以自行搜索。
171 |
--------------------------------------------------------------------------------
/docs/JavaScript/原型链.md:
--------------------------------------------------------------------------------
1 | > 点击勘误[issues](https://github.com/webVueBlog/learn-web/issues)，哪吒感谢大家的阅读
2 |
3 | [[toc]]
4 |
5 | ## 构造函数创建对象
6 |
7 | 我们先使用构造函数创建一个对象：
8 |
9 | ```js
10 | function Person() {
11 |
12 | }
13 | var person = new Person();
14 | person.name = '哪吒';
15 | console.log(person.name) // 哪吒
16 | ```
17 |
18 | 在这个例子中，Person 就是一个构造函数，我们使用 new 创建了一个实例对象 person。
19 |
20 | ## prototype
21 |
22 | 每个函数都有一个 `prototype` 属性，就是我们经常在各种例子中看到的那个 `prototype` ，比如：
23 |
24 | ```js
25 | function Person() {
26 |
27 | }
28 | // 虽然写在注释里，但是你要注意：
29 | // prototype是函数才会有的属性
30 | Person.prototype.name = '哪吒';
31 | var person1 = new Person();
32 | var person2 = new Person();
33 | console.log(person1.name) // 哪吒
34 | console.log(person2.name) // 哪吒
35 | ```
36 |
37 | 那这个函数的 prototype 属性到底指向的是什么呢？是这个函数的原型吗？
38 |
39 | 其实，函数的 prototype 属性指向了一个对象，这个对象正是调用该构造函数而创建的实例的原型，也就是这个例子中的 person1 和 person2 的原型。
40 |
41 | 那什么是原型呢？你可以这样理解：每一个JavaScript对象(null除外)在创建的时候就会与之关联另一个对象，这个对象就是我们所说的原型，每一个对象都会从原型"继承"属性。
42 |
43 | 让我们用一张图表示构造函数和实例原型之间的关系：
44 |
45 | 
46 |
47 | 在这张图中我们用 Object.prototype 表示实例原型。
48 |
49 | 那么我们该怎么表示实例与实例原型，也就是 person 和 Person.prototype 之间的关系呢，这时候我们就要讲到第二个属性：
50 |
51 | ## `__proto__`
52 |
53 | 这是每一个JavaScript对象(除了 null )都具有的一个属性，叫`__proto__`，这个属性会指向该对象的原型。
54 |
55 | 为了证明这一点,我们可以在火狐或者谷歌中输入：
56 |
57 | ```js
58 | function Person() {
59 |
60 | }
61 | var person = new Person();
62 | console.log(person.__proto__ === Person.prototype); // true
63 | ```
64 |
65 | 于是我们更新下关系图：
66 |
67 | 
68 |
69 | 既然实例对象和构造函数都可以指向原型，那么原型是否有属性指向构造函数或者实例呢？
70 |
71 | ## constructor
72 |
73 | 指向实例倒是没有，因为一个构造函数可以生成多个实例，但是原型指向构造函数倒是有的，这就要讲到第三个属性：`constructor`，每个原型都有一个 `constructor` 属性指向关联的构造函数。
74 |
75 | 为了验证这一点，我们可以尝试：
76 |
77 | ```js
78 | function Person() {
79 |
80 | }
81 | console.log(Person === Person.prototype.constructor); // true
82 | ```
83 |
84 | 所以再更新下关系图：
85 |
86 | 
87 |
88 | 综上我们已经得出：
89 |
90 | ```js
91 | function Person() {
92 |
93 | }
94 |
95 | var person = new Person();
96 |
97 | console.log(person.__proto__ == Person.prototype) // true
98 | console.log(Person.prototype.constructor == Person) // true
99 | // 顺便学习一个ES5的方法,可以获得对象的原型
100 | console.log(Object.getPrototypeOf(person) === Person.prototype) // true
101 | ```
102 |
103 | 了解了构造函数、实例原型、和实例之间的关系，接下来我们讲讲实例和原型的关系：
104 |
105 | ## 实例与原型
106 |
107 | 当读取实例的属性时，如果找不到，就会查找与对象关联的原型中的属性，如果还查不到，就去找原型的原型，一直找到最顶层为止。
108 |
109 | 举个例子：
110 |
111 | ```js
112 | function Person() {
113 |
114 | }
115 |
116 | Person.prototype.name = 'Kevin';
117 |
118 | var person = new Person();
119 |
120 | person.name = 'Daisy';
121 | console.log(person.name) // Daisy
122 |
123 | delete person.name;
124 | console.log(person.name) // Kevin
125 | ```
126 |
127 | 在这个例子中，我们给实例对象 `person` 添加了 `name` 属性，当我们打印 `person.name` 的时候，结果自然为 `Daisy。`
128 |
129 | 但是当我们删除了 `person` 的 `name` 属性时，读取 `person.name`，从 `person` 对象中找不到 name 属性就会从 person 的原型也就是 `person.__proto__`，也就是 `Person.prototype`中查找，幸运的是我们找到了 `name` 属性，结果为 `Kevin。`
130 |
131 | 但是万一还没有找到呢？原型的原型又是什么呢？
132 |
133 | ## 原型的原型
134 |
135 | 在前面，我们已经讲了原型也是一个对象，既然是对象，我们就可以用最原始的方式创建它，那就是：
136 |
137 | ```js
138 | var obj = new Object();
139 | obj.name = 'Kevin'
140 | console.log(obj.name) // Kevin
141 | ```
142 |
143 | 其实原型对象就是通过 `Object` 构造函数生成的，结合之前所讲，实例的 `__proto__` 指向构造函数的 `prototype` ，所以我们再更新下关系图：
144 |
145 | 
146 |
147 | ## 原型链
148 |
149 | 那 `Object.prototype` 的原型呢？
150 |
151 | `null`，我们可以打印：
152 |
153 | ```js
154 | console.log(Object.prototype.__proto__ === null) // true
155 | ```
156 |
157 | 然而 `null` 究竟代表了什么呢？
158 |
159 | 引用阮一峰老师的 《`undefined与null的区别`》 就是：
160 |
161 | :::tip
162 | `null` 表示“没有对象”，即该处不应该有值。
163 | :::
164 |
165 | 所以 `Object.prototype.__proto__` 的值为 `null` 跟 `Object.prototype` 没有原型，其实表达了一个意思。
166 |
167 | 所以查找属性的时候查到 `Object.prototype` 就可以停止查找了。
168 |
169 | 最后一张关系图也可以更新为：
170 |
171 | 
172 |
173 | 顺便还要说一下，图中由相互关联的原型组成的链状结构就是原型链，也就是蓝色的这条线。
174 |
175 | ## 补充
176 |
177 | ### constructor
178 |
179 | 首先是 `constructor` 属性，我们看个例子：
180 |
181 | ```js
182 | function Person() {
183 |
184 | }
185 | var person = new Person();
186 | console.log(person.constructor === Person); // true
187 | ```
188 |
189 | 当获取 `person.constructor` 时，其实 `person` 中并没有 `constructor` 属性,当不能读取到`constructor` 属性时，会从 `person` 的原型也就是 `Person`.`prototype` 中读取，正好原型中有该属性，所以：
190 |
191 | ```js
192 | person.constructor === Person.prototype.constructor
193 | ```
194 |
195 | ## `__proto__`
196 |
197 | 其次是 `__proto__` ，绝大部分浏览器都支持这个非标准的方法访问原型，然而它并不存在于 `Person.prototype` 中，实际上，它是来自于 `Object.prototype` ，与其说是一个属性，不如说是一个 `getter/setter`，当使用 `obj.__proto__` 时，可以理解成返回了 `Object.getPrototypeOf(obj)。`
198 |
199 | ## 真的是继承吗？
200 |
201 | 最后是关于继承，前面我们讲到“每一个对象都会从原型‘继承’属性”，实际上，继承是一个十分具有迷惑性的说法，引用《你不知道的JavaScript》中的话，就是：
202 |
203 | 继承意味着复制操作，然而 JavaScript 默认并不会复制对象的属性，相反，JavaScript 只是在两个对象之间创建一个关联，这样，一个对象就可以通过委托访问另一个对象的属性和函数，所以与其叫继承，委托的说法反而更准确些。
204 |
205 | `Function`作为一个内置对象，是运行前就已经存在的东西，所以根本就不会根据自己生成自己，所以就没有什么鸡生蛋蛋生鸡，就是鸡生蛋。至于为什么`Function.__proto__ === Function.prototype`，我认为有两种可能：一是为了保持与其他函数一致，二是就是表明一种关系而已。
206 |
207 | 简单的说，我认为：就是先有的`Function`，然后实现上把原型指向了`Function.prototype`，但是我们不能倒过来推测因为`Function.__proto__ === Function.prototype`，所以`Function`调用了自己生成了自己。
208 |
209 | 函数的`prototype`属性指向原型，说`prototype`是原型略显不严谨，原型链通过`__proto__`链接起来，这个是可以的。
210 |
--------------------------------------------------------------------------------
/docs/HTML/HTML基础.md:
--------------------------------------------------------------------------------
1 | > 点击勘误[issues](https://github.com/webVueBlog/learn-web/issues)，哪吒感谢大家的阅读
2 |
3 | [[toc]]
4 |
5 | ## div
6 |
7 | div标签用于组合其他HTML元素，本身无实在意义。常用于页面的布局，比如一个展开式的广告页面框架大致如下：
8 |
9 | ```html
10 |
11 |
12 |
13 |
14 |
15 |
16 | ```
17 |
18 | ## h1~h6, p, span, strong, em...
19 |
20 | 此类标签用于设置文本，常见的使用方式是填充段落，比如弹出的legal框文字HTML结构如下:
21 |
22 | ```html
23 |
24 | 
26 |
28 | ```
29 |
30 | ## ul, li, ol, dl, dt, dd
31 |
32 | 此类标签用于设置带有列表内容的，比如导航栏的下拉菜单，多视频的缩略图等：
33 |
34 | ```
35 | LEGAL
25 |
26 | *Requires a system with Intel® Turbo Boost Technology. Intel® Turbo Boost Technology and Intel® Turbo Boost Technology 2.0 are only available on select Intel® processors. Consult your PC manufacturer. Performance varies depending on hardware, software, and system configuration. For more information, visit http://www.intel.com/go/turbo. Copyright © 2014 Intel Corporation. All rights reserved. Intel, the Intel logo, Intel Core, Look Inside, Intel Inside, and Pentium are trademarks of Intel Corporation in the U.S. and/or other countries. Other names and brands may be claimed as the property of others.
27 |-
36 |
-
37 | 38 |41 |
39 | Build & Price
40 |
42 | -
43 | 44 |47 |
45 | Incentives & Offers
46 |
48 | -
49 | 50 |53 |
51 | Request a Local Quote
52 |
54 | -
55 | 56 |59 |
57 | Search Dealer Inventory
58 |
60 |
172 | 
176 | 
180 | 
184 | 
188 | 
192 | 
196 |
197 |
214 |
215 |
216 | ```
--------------------------------------------------------------------------------
/docs/JavaScript/继承.md:
--------------------------------------------------------------------------------
1 | > 点击勘误[issues](https://github.com/webVueBlog/learn-web/issues)，哪吒感谢大家的阅读
2 |
3 | [[toc]]
4 |
5 | ## 1.原型链继承
6 |
7 | ```js
8 | function Parent() {
9 | this.name = 'x';
10 | }
11 |
12 | Parent.prototype.getName = function () {
13 | console.log(this.name);
14 | }
15 |
16 | function Child() {
17 |
18 | }
19 |
20 | Child.prototype = new Parent();
21 |
22 | var child1 = new Child();
23 | console.log(child1.getName()) // x
24 | ```
25 |
26 | 问题：
27 |
28 | 1.引用类型的属性被所有实例共享，举个例子：
29 |
30 | ```js
31 | function Parent () {
32 | this.names = ['a', 'f'];
33 | }
34 |
35 | function Child () {
36 |
37 | }
38 |
39 | Child.prototype = new Parent();
40 |
41 | var child1 = new Child();
42 |
43 | child1.names.push('xx');
44 |
45 | console.log(child1.names); // ["a", "f", "xx"]
46 |
47 | var child2 = new Child();
48 |
49 | console.log(child2.names); // ["a", "f", "xx"]
50 | ```
51 |
52 | 2.在创建 Child 的实例时，不能向Parent传参
53 |
54 | ## 2.借用构造函数(经典继承)
55 |
56 | ```js
57 | function Parent () {
58 | this.names = ['a', 'f'];
59 | }
60 |
61 | function Child () {
62 | Parent.call(this);
63 | }
64 |
65 | var child1 = new Child();
66 |
67 | child1.names.push('s');
68 |
69 | console.log(child1.names); // ["a", "f", "s"]
70 |
71 | var child2 = new Child();
72 |
73 | console.log(child2.names); // ["a", "f"]
74 | ```
75 |
76 | 优点：
77 |
78 | 1.避免了引用类型的属性被所有实例共享
79 |
80 | 2.可以在 Child 中向 Parent 传参
81 |
82 | 举个例子：
83 |
84 | ```js
85 | function Parent (name) {
86 | this.name = name;
87 | }
88 |
89 | function Child (name) {
90 | Parent.call(this, name);
91 | }
92 |
93 | var child1 = new Child('a');
94 |
95 | console.log(child1.name); // a
96 |
97 | var child2 = new Child('s');
98 |
99 | console.log(child2.name); // s
100 | ```
101 |
102 | 缺点：
103 |
104 | 方法都在构造函数中定义，每次创建实例都会创建一遍方法。
105 |
106 | ## 3.组合继承
107 |
108 | 原型链继承和经典继承双剑合璧。
109 |
110 | ```js
111 | function Parent (name) {
112 | this.name = name;
113 | this.colors = ['red', 'blue', 'green'];
114 | }
115 |
116 | Parent.prototype.getName = function () {
117 | console.log(this.name)
118 | }
119 |
120 | function Child (name, age) {
121 |
122 | Parent.call(this, name);
123 |
124 | this.age = age;
125 |
126 | }
127 |
128 | Child.prototype = new Parent();
129 | Child.prototype.constructor = Child;
130 |
131 | var child1 = new Child('kevin', '18');
132 |
133 | child1.colors.push('black');
134 |
135 | console.log(child1.name); // kevin
136 | console.log(child1.age); // 18
137 | console.log(child1.colors); // ["red", "blue", "green", "black"]
138 |
139 | var child2 = new Child('daisy', '20');
140 |
141 | console.log(child2.name); // daisy
142 | console.log(child2.age); // 20
143 | console.log(child2.colors); // ["red", "blue", "green"]
144 | ```
145 |
146 | 优点：融合原型链继承和构造函数的优点，是 JavaScript 中最常用的继承模式。
147 |
148 | ## 4.原型式继承
149 |
150 | ```js
151 | function createObj(o) {
152 | function F(){}
153 | F.prototype = o;
154 | return new F();
155 | }
156 | ```
157 |
158 | 就是 `ES5 Object.create` 的模拟实现，将传入的对象作为创建的对象的原型。
159 |
160 | 缺点：
161 |
162 | 包含引用类型的属性值始终都会共享相应的值，这点跟原型链继承一样。
163 |
164 | ```js
165 | var person = {
166 | name: 'kevin',
167 | friends: ['daisy', 'kelly']
168 | }
169 |
170 | var person1 = createObj(person);
171 | var person2 = createObj(person);
172 |
173 | person1.name = 'person1';
174 | console.log(person2.name); // kevin
175 |
176 | person1.friends.push('taylor');
177 | console.log(person2.friends); // ["daisy", "kelly", "taylor"]
178 | ```
179 |
180 | 注意：修改person1.name的值，person2.name的值并未发生改变，并不是因为person1和person2有独立的 name 值，而是因为person1.name = 'person1'，给person1添加了 name 值，并非修改了原型上的 name 值。
181 |
182 | ## 5. 寄生式继承
183 |
184 | 创建一个仅用于封装继承过程的函数，该函数在内部以某种形式来做增强对象，最后返回对象。
185 |
186 | ```js
187 | function createObj (o) {
188 | var clone = Object.create(o);
189 | clone.sayName = function () {
190 | console.log('hi');
191 | }
192 | return clone;
193 | }
194 | ```
195 |
196 | 缺点：跟借用构造函数模式一样，每次创建对象都会创建一遍方法。
197 |
198 | ## 6. 寄生组合式继承
199 |
200 | 为了方便大家阅读，在这里重复一下组合继承的代码：
201 |
202 | ```js
203 | function Parent (name) {
204 | this.name = name;
205 | this.colors = ['red', 'blue', 'green'];
206 | }
207 |
208 | Parent.prototype.getName = function () {
209 | console.log(this.name)
210 | }
211 |
212 | function Child (name, age) {
213 | Parent.call(this, name);
214 | this.age = age;
215 | }
216 |
217 | Child.prototype = new Parent();
218 |
219 | var child1 = new Child('kevin', '18');
220 |
221 | console.log(child1)
222 | ```
223 |
224 | 组合继承最大的缺点是会调用两次父构造函数。
225 |
226 | 一次是设置子类型实例的原型的时候：
227 |
228 | ```js
229 | Child.prototype = new Parent();
230 | ```
231 |
232 | 一次在创建子类型实例的时候：
233 |
234 | ```js
235 | var child1 = new Child('kevin', '18');
236 | ```
237 |
238 | 回想下 new 的模拟实现，其实在这句中，我们会执行：
239 |
240 | ```js
241 | Parent.call(this, name);
242 | ```
243 |
244 | 在这里，我们又会调用了一次 Parent 构造函数。
245 |
246 | 所以，在这个例子中，如果我们打印 child1 对象，我们会发现 Child.prototype 和 child1 都有一个属性为colors，属性值为['red', 'blue', 'green']。
247 |
248 | 那么我们该如何精益求精，避免这一次重复调用呢？
249 |
250 | 如果我们不使用 Child.prototype = new Parent() ，而是间接的让 Child.prototype 访问到 Parent.prototype 呢？
251 |
252 | 看看如何实现：
253 |
254 | ```js
255 | function Parent (name) {
256 | this.name = name;
257 | this.colors = ['red', 'blue', 'green'];
258 | }
259 |
260 | Parent.prototype.getName = function () {
261 | console.log(this.name)
262 | }
263 |
264 | function Child (name, age) {
265 | Parent.call(this, name);
266 | this.age = age;
267 | }
268 |
269 | // 关键的三步
270 | var F = function () {};
271 |
272 | F.prototype = Parent.prototype;
273 |
274 | Child.prototype = new F();
275 |
276 |
277 | var child1 = new Child('kevin', '18');
278 |
279 | console.log(child1);
280 | ```
281 |
282 | 最后我们封装一下这个继承方法：
283 |
284 | ```js
285 | function object(o) {
286 | function F() {}
287 | F.prototype = o;
288 | return new F();
289 | }
290 |
291 | function prototype(child, parent) {
292 | var prototype = object(parent.prototype);
293 | prototype.constructor = child;
294 | child.prototype = prototype;
295 | }
296 |
297 | // 当我们使用的时候：
298 | prototype(Child, Parent);
299 | ```
300 |
301 | 引用《JavaScript高级程序设计》中对寄生组合式继承的夸赞就是：
302 |
303 | 这种方式的高效率体现它只调用了一次 Parent 构造函数，并且因此避免了在 Parent.prototype 上面创建不必要的、多余的属性。与此同时，原型链还能保持不变；因此，还能够正常使用 instanceof 和 isPrototypeOf。开发人员普遍认为寄生组合式继承是引用类型最理想的继承范式。
304 |
305 |
--------------------------------------------------------------------------------
/docs/JavaScript/函数-可复用代码块.md:
--------------------------------------------------------------------------------
1 |
2 | > 点击勘误[issues](https://github.com/webVueBlog/learn-web/issues)，哪吒感谢大家的阅读
3 |
4 | [[toc]]
5 |
6 | 在JavaScript中另一个基本概念是函数, 它允许你在一个代码块中存储一段用于处理单任务的代码，然后在任何你需要的时候用一个简短的命令来调用，而不是把相同的代码写很多次。
7 | 在本文中，我们将探索函数的基本概念，如基本语法、如何定义和调用、范围和参数。
8 |
9 | ## 我能在哪找到函数?
10 |
11 | 在 JavaScript中, 你将发现函数无处不在 。事实上, 到目前为止，我们一直在使用函数，只是我们还没很好的讨论它们。然而现在是时候了，让我们开始聊聊函数，并探索它们的语法。
12 |
13 | 几乎任何时候，只要你使用一个带有一对圆括号（）的JavaScript结构，并且你不是在使用一个常见的比如for for循环，while或do…while循环，或者if语句这样的内置语言结构时，那么您就正在使用函数。
14 |
15 | ## 浏览器内置函数
16 |
17 | 当我们操作一个字符串的时候，例如：
18 |
19 | ```js
20 | var myText = 'I am a string';
21 | var newString = myText.replace('string', 'sausage');
22 | console.log(newString);
23 | // the replace() string function takes a string,
24 | // replaces one substring with another, and returns
25 | // a new string with the replacement made
26 | ```
27 |
28 | 或者当我们操作一个数组的时候：
29 |
30 | ```js
31 | var myArray = ['I', 'love', 'chocolate', 'frogs'];
32 | var madeAString = myArray.join(' ');
33 | console.log(madeAString);
34 | // the join() function takes an array, joins
35 | // all the array items together into a single
36 | // string, and returns this new string
37 | ```
38 |
39 | 或者当我们生成一个随机数时：
40 |
41 | ```js
42 | var myNumber = Math.random()
43 | // the random() function generates a random
44 | // number between 0 and 1, and returns that
45 | // number
46 | ```
47 |
48 | JavaScript有许多内置的函数，可以让您做很多有用的事情，而无需自己编写所有的代码。事实上, 许多你调用（运行或者执行的专业词语）浏览器内置函数时调用的代码并不是使用JavaScript来编写——大多数调用浏览器后台的函数的代码，是使用像C++这样更低级的系统语言编写的，而不是像JavaScript这样的web编程语言。
49 |
50 | 请记住，这些内置浏览器函数不是核心JavaScript语言的一部分——被定义为浏览器API的一部分，它建立在默认语言之上，以提供更多的功能（请参阅本课程的早期部分以获得更多的描述）。我们将在以后的模块中更详细地使用浏览器API。
51 |
52 | ## 函数与方法
53 |
54 | 程序员把函数称为对象方法（method）的一部分。你还不必了解JavaScript中已建构的对象在更深层次上是如何运作的——你可以等到下一小节，我们会教给你有关对象运作方式的一切。在我们继续前进之前，我们需要澄清一些有关方法和函数概念之间可能存在的误会——当你在网络上浏览相关信息的时候，你很可能会碰上这两个术语。
55 |
56 | 到目前为止我们所使用的内置代码同属于这两种形式：函数和方法。你可以在这里查看内置函数，内置对象以及其相关方法的完整列表。
57 |
58 | 严格说来，内置浏览器函数并不是函数——它们是方法。这听起来有点可怕和令人困惑，但不要担心 ——函数和方法在很大程度上是可互换的，至少在我们的学习阶段是这样的。
59 |
60 | 二者区别在于方法是在对象内定义的函数。浏览器内置函数（方法）和变量（称为属性）存储在结构化对象内，以使代码更加高效，易于处理。
61 |
62 | ## 自定义函数
63 |
64 | 您在过去的课程中还看到很多定制功能 - 在代码中定义的功能，而不是在浏览器中。每当您看到一个自定义名称后面都带有括号，那么您使用的是自定义函数.
65 |
66 | 自定义函数：draw()
67 |
68 | ```js
69 | function draw() {
70 | ctx.clearRect(0,0,WIDTH,HEIGHT);
71 | for (var i = 0; i < 100; i++) {
72 | ctx.beginPath();
73 | ctx.fillStyle = 'rgba(255,0,0,0.5)';
74 | ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
75 | ctx.fill();
76 | }
77 | }
78 | ```
79 |
80 | 该函数在`