4 | 
5 | 
6 | 
7 | 
8 | 
9 | 
10 |
52 |
53 | ---
54 |
55 | ## 💌 致谢
56 |
57 | 致谢所有 star 和 关注我的 朋友们，多谢你们的鼓励和支持。
--------------------------------------------------------------------------------
/docs/.vuepress/components/About.vue:
--------------------------------------------------------------------------------
1 |
2 | 16 | {{ data.tagline || $description || 'Welcome to your VuePress site' }} 17 |
18 | 19 | 28 |{{ feature.details }}
47 |{{ getMsg() }}6 |
27 |
28 | ---
29 |
30 | ### 2.单元测试工具对比
31 |
32 | **按照npm下载排名来排列 ---> npm trends**
33 |
34 | - jest
35 | - mocha + chai
36 | - jasmine
37 | - ava
38 |
39 |
40 | ---
41 |
42 | ### 3.e2e测试工具对比
43 |
44 | **按照npm下载排名来排列**
45 |
46 | - cypress
47 | - webdriverio
48 | - nightwatch
49 | - nightmare
50 | - testcafe
51 |
52 |
53 | ---
54 |
55 | ## 三.单元测试Jest
56 |
57 | ### 1.Jest简介
58 |
59 | - 支持 babel, webpack, Typescript
60 |
61 | ---
62 |
63 | ### 2.Jest安装和babel支持
64 |
65 | - npm install --save-dev jest
66 | - npm i --dev babel-jest @babel/core @babel/preset-env
67 |
68 | ```js
69 | // babel.config.js
70 | module.exports = {
71 | presets: [
72 | [
73 | '@babel/preset-env',
74 | {
75 | targets: {
76 | node: 'current',
77 | },
78 | },
79 | ],
80 | ],
81 | };
82 | ```
83 |
84 | ---
85 |
86 | ### 3.第一个Jest测试用例
87 |
88 | **文件（根据测试用例修改之后的代码）**
89 |
90 | ```js
91 | export const add = (a = 0, b = 0) => {
92 |
93 | if (typeof a !== 'number') {
94 | a = 0
95 | }
96 |
97 | if (typeof b !== 'number') {
98 | b = 0
99 | }
100 |
101 | return a + b
102 | }
103 | ```
104 |
105 | **测试代码**
106 |
107 | ```js
108 | // 引入待测试的功能模块
109 | import { add } from './math'
110 |
111 | // test suite
112 | describe('测试 math.js 功能模块', () => {
113 |
114 | it ('等于加法函数是否正常', () => {
115 | expect(add(1,2)).toEqual(3)
116 | expect(add(1,-2)).toEqual(-1)
117 | expect(add(1, )).toEqual(1)
118 | expect(add(1,'')).toEqual(1)
119 | expect(add('你好',)).toEqual(0)
120 | })
121 |
122 | })
123 |
124 | ```
125 |
126 |
127 | ---
128 |
129 | ### 4.杀手锏功能 Mock & Spy（没懂，来日再说吧）
130 |
131 | - Mock测试就是在测试过程中，对于某些不容易构造或者不容易获取的对象，用一个虚拟的对象来创建，以便测试的一种方法
132 |
133 | ---
134 |
135 | ### 5.jest cli 功能
136 |
137 | - jest --coverage 生成测试覆盖率
138 | - jest --verbose 详细打印
139 | - jest --watchAll 启动监听,执行所有测试用例（我们可以选择）
140 | - ...
141 |
142 | ---
143 |
144 | ### 6.Vue-Cli快速创建单元
145 |
146 |
147 | ---
148 |
149 | ## TravisCI
150 |
151 | ### 1.使用简介
152 |
153 | > TravisCI 只支持GitHub，不支持其他代码托管服务
154 |
155 | **使用步骤**
156 |
157 | - [进入到官方网站](http://travis-ci.org/)，并使用GitHub授权
158 | - 获取GitHub的Tokens
159 | - 配置项目 .taravis.yml
160 | - Node项目
161 | - Script脚本
162 | - 部署到 github pages
163 | - 钩子
164 | - 其他
165 |
166 | ---
167 |
168 | ## CircleCI
169 |
170 |
--------------------------------------------------------------------------------
/docs/blog/12.前端代码质量/5.项目质量监测.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 5.项目质量监测
3 | date: 2020-01-30 00:00:00
4 | permalink:
5 | tag:
6 | - blog
7 | - 12.前端代码质量
8 | ---
9 |
10 | > 注意：此篇文章未来可能要和其他文章进行合并，或者重构... 目前结构混乱，无法阅读
11 |
12 | ### 简介
13 |
14 | **🔥通常来说，项目的质量决定了 软件项目的命运，软件项目的可维护性，软件项目的运维成本，软件项目的拓展性**
15 |
16 | **为什么要进行代码检查**
17 |
18 | - 避免低级BUG
19 | - 统一代码习惯
20 | - 保证线上代码质量
21 |
22 | **如何让一个团队的人产出的代码都在一个基本水平底线之上呢?**
23 |
24 | 最初是靠制订规范。要确保规范得以执行只能靠人，所以文字规范成了code review的公共参照标准。单纯靠人的事最终都容易流于形式，
25 |
26 | 🔥所以需要工具加以保证。虽说工具并不能完全实现规范中的规则，但至少能够在一定程度 上缓解代码不统一一的局面
27 |
28 |
29 | **从哪几个方面可以让项目质量有所提高呢？**
30 |
31 | - 代码Lint：告别低级错误，简单的配置让程序来自动检查
32 | - e2e test：e2e测试，黑盒测试，如何用e2e进行端到端的测试
33 | - 开源测试平台：codecov介绍（配合CI工具，让测试过程自动化）
34 |
35 | ---
36 |
37 | ### 2.日常写代码中遇到的问题
38 |
39 | **代码风格**
40 |
41 | **代码规范**
42 |
43 | 这里使用 Typescript 能提高代码质量
44 |
45 | **设计思路**
46 |
47 | 有的人写的程序就是高度耦合的，几十个函数，很难调用，没办法维护，这就和思路有关系了，要设计一些设计模式，设计一些模块化的东西，来规避这点
48 |
49 | ---
50 |
51 | ### 3.代码质量检测 Lint
52 |
53 | **Lint：是一款分析源码以及标记编程过程中（代码，样式，构建）书写的错误的工具**
54 |
55 | 常见的3个JS检测工具对比
56 |
57 | - JSLint（2012年出现）：
58 | - 优点：参数配置完成，可以直接使用
59 | - 缺点：有限的配置选项，不能增加个性化的规则等等
60 | - JSHint
61 | - 优点：可配置，可以写配置文件
62 | - 缺点：难于知道那个规则产生的错误，不能自定义规则等等
63 | - 🔥ESLint（比较新的工具，JSCS已经合并到ESLint）
64 | - 优点：高度可配置
65 | - 缺点：需要一些配置，速度慢
66 |
67 | ---
68 |
69 | ### 4.Lint工具介绍（4个核心概念）
70 |
71 | **核心是配置文件，规则是写到里面的：.eslintrc.js**
72 |
73 | **常见规则**
74 |
75 | - off && 0：关闭规则
76 | - warn && 1：开启规则，使用警告级别错误（不会导致程序退出）
77 | - error && 2：开启规则，使用错误级别错误（程序会退出）
78 |
79 | ```js
80 | // 例如
81 | {
82 | "rules": {
83 | "semi": ["error", "never"]
84 | }
85 | }
86 | ```
87 |
88 | **Extends：使用别人的包（使用别人的规则）**
89 |
90 | ```js
91 | {
92 | "extends": "google"
93 | }
94 | ```
95 |
96 | **🔥Plugins：插件系统**
97 |
98 | 我们有时候可能有一些特殊的应用场景，例如Vue的语法，例如less，sass等这些的语法，可能 使用别人的包里面也没有这些配置，我们就需要自己配置了（针对特定的语法结构进行Lint）
99 |
100 | ---
101 |
102 | ### 5.ESLint初始化
103 |
104 | - 安排：npm install eslint --save-dev
105 | - 使用
106 |
107 | ```js
108 | //
109 | "scripts": {
110 | "lint": "eslint app.js",
111 | "lint:create": "eslint --init",
112 | },
113 | ```
114 |
115 | **使用 eslint --init创建一个ESLint配置文件**
116 |
117 | - 第一个问题：检查代码规范 | 🔥检查代码规范并查找一些问题 | 强制使用某些规范
118 | - 第二个问题（你使用哪种模块方式）：🔥ESM | COM | 不使用
119 | - 第三个问题（选择常见的框架）
120 | - 第四个问题（你的代码会在哪里运行）：🔥浏览器 | 🔥Node
121 | - 第五个问题（你想把这些配置放到什么文件中）
122 |
123 | ```js
124 | module.exports = {
125 | "env": { // 运行环境
126 | "browser": true,
127 | "es6": true,
128 | "node": true
129 | },
130 | "extends": "eslint:recommended", // 拓展规则
131 | "globals": { // 执行代码时脚本需要访问额外全局变量
132 | "Atomics": "readonly",
133 | "SharedArrayBuffer": "readonly"
134 | },
135 | "parserOptions": { // 用于指定想要支持的JS语言
136 | "ecmaVersion": 2018,
137 | "sourceType": "module"
138 | },
139 | "rules": { // 开启某些规则，设置规则登记
140 | }
141 | };
142 | ```
143 |
144 | **❣️注意，有时候也要写另一个文件.eslintignore，用于告诉ESLint忽略某些文件或者目录**
145 |
146 |
147 | ---
148 |
149 |
150 | >
--------------------------------------------------------------------------------
/docs/blog/12.前端代码质量/6.如何写一个不错的代码.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 6.如何写一个不错的代码
3 | date: 2020-01-30 00:00:00
4 | permalink:
5 | tag:
6 | - blog
7 | - 12.前端代码质量
8 | ---
9 |
10 | > 注意：此文章位置未来可能会变化，因为未来 8.4前端代码质量 可能会进行合并重组
11 |
12 | > 在我的认知了，好的代码不在于用了多么高级的算法，多么深奥的设计模式
13 |
14 | > 而是在于 方便清晰的去写代码，并在此过程中逐渐优化“套路”，也是为了更好的拓展和维护（因为自己代码如何瞎写的话，回过头维护是看不懂的）
15 |
16 | > 目前总结的是
17 |
18 | ---
19 |
20 | ## 第一部分：代码书写技巧
21 |
22 | ### 1.命名
23 |
24 | > 我这块命名不说啥，我想说一下 函数的后缀命名法，规则就是，将函数分为不同性质，加上后缀，以后非常的好找和区分
25 |
26 | > 正常流程函数：正常流程的函数，没法解释，除了下面几种之外的函数吧 | Fn
27 |
28 | > 事件触发函数：因为事件触发调用的函数 | Event
29 |
30 | > 接口类函数：请求数据接口的（可能有时候会调用工具类函数来洗一遍） | Api
31 |
32 | > 工具类函数：处理一些非核心逻辑的处理函数 | Tool
33 |
34 | ```js
35 | // 初始化代码
36 | function initFn() {
37 | initStateFn()
38 |
39 | }
40 | // 初始化状态
41 | function initStateFn() {
42 | let name = '朱昆鹏';
43 | }
44 |
45 | // 点击事件
46 | function clickButtonEvent() {
47 | console.log('点击按钮获取女朋友')
48 | }
49 |
50 | // 请求女朋友 接口
51 | function getGirlFriendApi() {
52 | console.log('请求上帝赐个女朋友')
53 | }
54 |
55 | // 数据处理函数
56 | function dataHandleTool() {
57 | console.log('上帝没有给你女朋友，你在处理函数里面自己加一个吧...')
58 | }
59 | ```
60 |
61 | ---
62 |
63 | ### 2.注释
64 |
65 | 关键变量要注释是干什么的，函数要解释这个函数是干什么用的，别吝啬注释
66 |
67 | ---
68 |
69 | ### 3.函数
70 |
--------------------------------------------------------------------------------
/docs/blog/13. 前端安全/1.前端安全绪论.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 1.前端安全绪论
3 | date: 2020-01-30 00:00:00
4 | permalink:
5 | tag:
6 | - blog
7 | - 13. 前端安全
8 | ---
9 |
10 | > 等待书写中...
--------------------------------------------------------------------------------
/docs/blog/13. 前端安全/3.渗透攻防.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 3.渗透攻防
3 | date: 2020-01-30 00:00:00
4 | permalink:
5 | tag:
6 | - blog
7 | - 13. 前端安全
8 | ---
9 |
10 | > 等待书写中...
11 |
12 | ## 第一部分：信息收集
13 |
14 | ### 1.子域名爆破
15 |
16 | - [安装Python](https://www.python.org/downloads/release/python-2710/)
17 |
18 |
19 |
--------------------------------------------------------------------------------
/docs/blog/14.前端架构/1.前端架构.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 1.前端架构
3 | date: 2020-01-30 00:00:00
4 | permalink:
5 | tag:
6 | - blog
7 | - 14.前端架构
8 | ---
9 |
10 | > 这里目录内容我不会，但我会在三四个月内实践好的，先定个目录结构
11 |
12 | ## 🌽第一部分：Cli全栈化
13 |
14 | > 如果要把这块写成文章，我估计我还要几个月，我先写一下，我基于这个原则做的一些产品
15 |
16 | - npm包：[vuepress-es](https://www.npmjs.com/package/vuepress-es)
17 |
18 | ---
19 |
20 | ## 🥐第二部分：智能容灾
21 |
22 | ---
23 |
24 | ## 🍯第三部分：多端统一框架
25 |
26 | ---
27 |
28 | ## 🌮第四部分：大中台
29 |
30 | ---
31 |
32 | ## 🍳第五部分：智能部署，智能发布
33 |
34 | ---
35 |
36 | ## 🍔第六部分：无痕埋点
37 |
38 | ---
39 |
40 | ## 🥑第七部分：可视化搭建
41 |
42 |
--------------------------------------------------------------------------------
/docs/blog/14.前端架构/2.前端国际化方案（Vue项目）.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 2.前端国际化方案（Vue项目）
3 | date: 2020-01-30 00:00:00
4 | permalink:
5 | tag:
6 | - blog
7 | - 14.前端架构
8 | ---
9 |
10 | > 此篇文章放到这里可能不是很合理，但是没别的地方放了，以后我再抽离一个目录吧...
11 |
12 | ## 第一部分：
13 |
14 | 编译期间转换：i18n-webpack-plugin
15 |
16 | ---
17 |
18 | ## 第二部分：实际操作
19 |
20 | ### 1.提取方案
--------------------------------------------------------------------------------
/docs/blog/15.运维/1.Linux知识.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 1.Linux知识
3 | date: 2020-01-30 00:00:00
4 | permalink:
5 | tag:
6 | - blog
7 | - 15.运维
8 | ---
9 |
10 | > 等待书写中...
--------------------------------------------------------------------------------
/docs/blog/15.运维/2.容器化.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 2.容器化
3 | date: 2020-01-30 00:00:00
4 | permalink:
5 | tag:
6 | - blog
7 | - 15.运维
8 | ---
9 |
10 | > 等待书写中...
--------------------------------------------------------------------------------
/docs/blog/15.运维/3.持续集成.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 3.持续集成
3 | date: 2020-01-30 00:00:00
4 | permalink:
5 | tag:
6 | - blog
7 | - 15.运维
8 | ---
9 |
10 | > 等待书写中...
--------------------------------------------------------------------------------
/docs/blog/16.网络/1.前端网络基础.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 1.前端网络基础
3 | date: 2020-01-30 00:00:00
4 | permalink:
5 | tag:
6 | - blog
7 | - 16.网络
8 | ---
9 |
10 | ::: warning
11 | 注意此处：内容不全，结构完整...
12 | :::
13 |
14 | ::: tip
15 | 在我看来这里的重要性简直是太高了，相当一人体的脊柱一样，这块搞不明白，你就高不起来。
16 |
17 | 因为有一些名词是需要有一定的网络基础的，例如 CDN， 缓存，cookie，session，token，TCP/IP，HTTP，请求响应报文... 这些都是至关重要，所以我也在思考，如何将这个重要的一块好好的写一下
18 |
19 | 我之前的书写时基于 HTTP，缓存，等等一块块零散的知识点进行，最后感觉起来，并不是很好，于是最后准备换一条路，从源头来一步一步进行分析，看看是否对理解前端中需要用到的网络知识有所帮助。
20 | :::
21 |
22 | ---
23 |
24 | ## 🥚第一部分：计算机网络概述
25 |
26 | ### 1.互联网结构发展的三个历史
27 |
28 | ::: tip
29 | 第一阶段：从单网络 ARPANET 向互联网发展的过程
30 | :::
31 |
32 | 1969年美国国防部建立的 第一个分组交换网 ARPANET 最初只是一个单个的分组交换网，后来发现单个网络并不能满足使用
33 |
34 | 于是 ARPA 开始研究多种网络（分组无线电网络）互联的技术，这就导致了互联网络的出现，也是现在互联网的雏形
35 |
36 | 1983年 TCP/IP 协议成为 ARPANET 上的标准协议，使得使用 **TCP/IP协议** 的计算机都能利用互联网相互通信，因此人们就把 1983年定义为互联网的诞生时间
37 |
38 | ---
39 |
40 | ::: tip
41 | 第二阶段：构建三级结构的互联网
42 | :::
43 |
44 | 1985年起，美国国家科学基金会 NSF 就围绕留个大型计算机中心 建设计算机网络（NSFNET）
45 |
46 | 这是一个三级计算机网络，分为 主干网，地域网，校园网（或企业网）
47 |
48 | 1991年，NSF 和 美国其他部门认识到，互联网必将扩大使用范围，不再仅限于大学和研究机构，于是美国政府决定将互联网的主干网交给私人公司来经营，并且开始对接入互联网的单位进行收费
49 |
50 | ---
51 |
52 | ::: tip
53 | 第三阶段：形成 多层次ISP结构的互联网
54 | :::
55 |
56 | ISP 就是一个进行商业活动的公司（互联网服务提供者），中国电信，中国联通，中国移动等公司都是我国有名的 ISP
57 |
58 | ISP 可以从互联网管理机构申请到很多IP地址，同时拥有通信线路，以及路由器等联网设备
59 |
60 | 根据提供服务的覆盖面积，ISP也被分为：主干IPS，地区IPS，本地IPS
61 |
62 | 从原理上讲，只要每个本地IPS都按照了路由器，连接到了某个地区的IPS，而每个地区的IPS也有路由器连接到主干IPS，那么就能完成互联网中的所有的分组转发任务
63 |
64 | 随着互联网上数据流量的急剧增长，人们开始研究如何更快的转发分组，于是 **互联网交换点 IXP 就应用而生了（了解）**
65 |
66 | 
67 |
68 | ---
69 |
70 | ### 2.路由器（实现分组交换的关键构件）
71 |
72 | ::: tip
73 | 分组交换则采用了 **存储转发技术**，通常我们把要发送的整块数据成为一个报文，而分组交换技术 就是把一个报文划分为几个分组后再进行发送。
74 | :::
75 |
76 | 把较长的报文划分为一个个更小的等长数据段，并且在每一个数据段的前面，加上一些由必要的控制信息组成的首部（Header）之后，就构成了一个分组（分组又称之为包，不知道大家听没听过抓包）
77 |
78 | 分组是互联网中传送的数据单元，分组的首部是非常重要的，正是由于分组的首部包含了诸如目的地址和源地址等重要控制信息，每一个分组才能在互联网中独立的进行传输路径，并正确的交付到分组传输的终点。
79 |
80 | 
81 |
82 | ---
83 |
84 | ::: tip
85 | 路由器是一种专用计算器（不叫主机），是实现分组交换的关键构件，其任务是 转发收到的分组。
86 | :::
87 |
88 | 主机是为用户进行信息处理的，路由器是用来转发分组的
89 |
90 | 路由器收到一个分组，会暂时存储一下，检查其首部，查找转发表，按照首部中的目的地址，找到合适的接口转发出去，把分组交给下一个路由器
91 |
92 | 这样一步一步的（可能会经过十几个路由器）以存储转发的方式，把分组交付给最终的目的主机
93 |
94 | 各路由器之间必须经常交换彼此掌握的路由信息，以便创建和动态维护路由器中的转发表，使得转发表能够在整个网络拓扑发生改变的时候，及时更新
95 |
96 | 
97 |
98 | ---
99 |
100 | ### 3.计算机网络体系结构
101 |
102 | ::: tip
103 | 主要有三种划分方式，分别是 OSI的七层协议（国际标准），TCP/IP四层协议，五层协议（广泛使用）
104 |
105 | 而我也主要是以五层协议为根本，接下里的内容也是以五层协议模型为核心书写的
106 | :::
107 |
108 | 
109 |
110 | ---
111 |
112 | ::: tip
113 | 应用层 的任务是 通过应用进程间的交互来完成特定网络应用（没太懂）
114 | :::
115 |
116 | 应用层协议定义的是 应用进程间通信和交互的规则（这里进程就是指正在运行的程序）
117 |
118 | 对于不同的应用程序需要有不同的应用层协议，例如域名系统DNS，万维网应用 HTTP协议，电子邮件 SMTP协议等等
119 |
120 | 我们把应用层交互的数据单元称为报文
121 |
122 | ---
123 |
124 | ::: tip
125 | 传输层 的任务是 负责向两台主机中进程之间的通信 提供通用的数据传输服务
126 | :::
127 |
128 | 传输层主要使用两种协议
129 |
130 | - **传输控制协议 TCP**，提供面向连接的，可靠的数据传输服务，数据传输单位是报文段
131 | - **用户数据报协议 UDP**，提供无连接的，尽最大努力的数据传输服务（不保证数据传输的可靠性），数据传输单位是用户数据报
132 |
133 | 
134 |
135 | ---
136 |
137 | ::: tip
138 | 网络层 的任务是 为分组交换网上的不同主机提供通信服务
139 | :::
140 |
141 | 在发送数据的时候，网络层把传输层产生的报文段（或用户数据报）封装成分组或包的形式传送
142 |
143 | 
144 |
145 | ---
146 |
147 | > 数据链路层，物理层，省略...
148 |
149 | ---
150 |
151 |
152 | ## 🍖第二部分：应用层
153 |
154 | > 书写中...
155 |
156 | ## 🥞第三部分：运输层
157 |
158 | > 书写中...
159 |
160 | ## 🧀第四部分：网络层
161 |
162 | > 书写中...
163 |
164 | ## 📚参考列表（致敬）
165 |
166 | - 《计算机网络》（第七版）谢希仁 编著
--------------------------------------------------------------------------------
/docs/blog/18.其他/1.爬虫.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 1.爬虫
3 | date: 2020-05-06 00:00:00
4 | permalink:
5 | tag:
6 | - blog
7 | - 18.其他
8 | ---
9 |
10 | ## 🐛 1.爬取内容
11 |
12 | 爬虫的几种方式
13 |
14 | - 1.通过API获取信息
15 | - 2.通过获取网页源码（通过 require 获取网页返回体 body，然后用正则提取 (.+?) ），但是现在网站越来越复杂，有的还需要登录，甚至还有防护
16 | - 3.目前主流的是：puppeteer控制chromium来进行抓取数据（这个工具可以通过api来操作浏览器行为，通过这个工具，可以用来写爬虫，自动签到，网页截图，生成paf，自动化测试等）
17 |
18 | ```js
19 | // 示例一：博客截图
20 |
21 | let puppeteer = require('puppeteer'); // 记住这里一定要加 ;
22 |
23 | (async function() {
24 | const browser = await puppeteer.launch({
25 | headless: false // 是否打开一个无页面浏览器
26 | });
27 | const page = await browser.newPage(); // 打开一个空白页面
28 | await page.goto('https://notes.itzkp.com'); // 在地址栏中输入博客地址
29 | await page.screenshot({path: 'zkp.png'}); // 把当前页面截图，保存到zkp.png中
30 | await browser.close(); // 关闭浏览器
31 | })();
32 | ```
33 |
34 | ```js
35 | // 示例二：掘金文章内容获取
36 |
37 | let puppeteer = require('puppeteer');
38 | let url = 'https://juejin.cn/user/2788017219055175/posts';
39 |
40 | (async function() {
41 | const browser = await puppeteer.launch({
42 | headless: false // 是否打开一个无页面浏览器
43 | });
44 |
45 | const page = await browser.newPage(); // 打开一个空白页面
46 |
47 | // 在地址栏中输入博客地址
48 | await page.goto(url, {
49 | waitUntil: 'networkidle2'
50 | });
51 |
52 | // 获取指定节点属性
53 | const titles = await page.$$eval('a.title', element => {
54 | return element.map(item => item.innerHTML)
55 | })
56 |
57 | await browser.close(); // 关闭浏览器
58 | })();
59 | ```
60 |
61 | ---
62 |
63 | ## 🐒 2.数据持久化
64 |
65 | > 抓的数据不进行持久化就没有意思
66 |
67 | - 根据爬取的规则和策略，把爬取到的数据存到数据库中
68 | - 如果要兼容不同的来源，需要对数据进行格式化
69 | - 为不同的数据建立索引方便检索
70 |
71 | ---
72 |
73 | ## 🐣 3.数据订阅
74 |
75 | > 用户可以按照自己的兴趣和需要进行定制内容
76 |
77 | ---
78 |
79 | ## 🦑 4.分发
80 |
81 | 有新数据的时候
82 |
83 | - 可以使用邮件推送到订阅者
84 | - 可以使用极光推送等推送服务
85 | - 可以使用即时通信服务向客户端推送
86 |
87 | ---
88 |
89 | ## 5.小项目一：掘金爬虫
90 |
91 | 核心步骤
92 |
93 | 1. 发起HTTP请求获取网页内容
94 | 1. 使用类似jQuery的语法来操作页面提取需要的数据
95 | 1. 把数据保存在数据库中以供查询
96 | 1. 建立一个服务器来显示这些数据
97 | 1. 可以定时爬取数据
98 | 1. 可让程序稳定运行
99 | 1. 对编码进行转换
100 |
101 |
102 |
103 |
104 |
105 |
106 |
--------------------------------------------------------------------------------
/docs/blog/3.CSS/1.CSS基础.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 1.CSS基础
3 | date: 2020-01-30 00:00:00
4 | permalink:
5 | tag:
6 | - blog
7 | - 3.CSS
8 | ---
9 |
10 | > 注意此处：内容不全，结构完整...
11 |
12 | > 前端几乎所有的展示都是用 CSS来写的，你甚至可以 只精通CSS，就能有一个好工作
13 |
14 | > 但是注意，CSS的水很深，这里只是最基础的整理，里面的内容 几乎5天就能学会，总之就是无论何时，对CSS这个技术要保持敬畏
15 |
16 | ## 🌎第一部分：CSS入门
17 |
18 | ### 0.CSS的发展历史
19 |
20 | [CSS的发展历史](https://www.jianshu.com/p/4257a6f40c28)
21 |
22 | ### 1.CSS样式表的使用
23 |
24 | **行内式（内联样式）**
25 |
26 | ```html
27 |
28 | ```
29 |
30 | **内部样式表**
31 |
32 | ```html
33 |
34 |
37 |
38 | ```
39 |
40 | **外部样式**
41 |
42 | ```html
43 |
44 |
45 |
46 | ```
47 |
48 | **❣️ 备注：因为CSS发展了很多年，人们越来越想省事，所以出了预处理器，前处理器，后处理器都有 | 还有CSS命名也是个玄学**
49 |
50 | ---
51 |
52 | ### 2.CSS基础选择器
53 |
54 | > CSS选择器就是 把我们想要的标签选择出来的
55 |
56 | - 标签选择器 标签名
57 | - id选择器 #id名称
58 | - 类选择器 .类名
59 | - 通配符选择器 *
60 |
61 | **拓展：突然想到一个道题（一个BUG），就是多少个类选择器权重 可以覆盖掉 id选择器的权重**
62 |
63 | ---
64 |
65 | ### 3.CSS复合选择器
66 |
67 | - 后代选择器：父级 子级（#father .chilren）
68 | - 子元素选择器：父级>子级（只选离父级最近的一级，孙级之后都不选中）
69 | - 交集选择器：div#app 既是div标签，id又是app的标签（既是 又是 的关系）
70 | - 并集选择器：a, p, div, span, #app（一下选择多个，一起设置的选择器）
71 | - 伪类选择器：用于对某些选择器添加特殊的效果
72 | - 链接伪类
73 | - a:link：未访问的链接
74 | - a:visited：已访问的链接
75 | - a:hover：鼠标移动到链接上
76 | - a:active：选定的链接
77 | - 结构伪类
78 |
79 | ---
80 |
81 | ### 4.font字体
82 |
83 | ```css
84 | /* 字体大小 | px单位，像素 | em单位，相当于当前对象内文本的字体尺寸 | ... */
85 | font-size: 16px;
86 |
87 | /* 字体 | 多个字体会一个个找，前面的没有，就应用下一个，都没有就走系统默认的 */
88 | font-family: '宋体', Arial, '微软雅黑';
89 |
90 | /* 字体粗细 | normal 默认不加粗 | bold 加粗 | 400以下等同于normal | 700以上等同于 bold */
91 | font-weight: 500;
92 |
93 | /* 字体风格 | normal 默认值 | italic 倾斜 */
94 | font-style: italic
95 |
96 | /* 字体综合写法（不能更改顺序）：font: font-style font-weight font-size/line-height font-family */
97 | font: normal 500 20px '微软雅黑'
98 | /* 有一些可以省略，但是 字体 和 字体大小 不能省略 */
99 | ```
100 |
101 | ---
102 |
103 | ## 🌝第二部分：CSS外观样式
104 |
105 | ### 1.color（文本颜色）
106 |
107 | > 主要用于定义文本的颜色
108 |
109 | ```html
110 |
119 | ```
120 |
121 | ---
122 |
123 | ### 2.line-height（行间距）
124 |
125 | ```html
126 |
132 | ```
133 |
134 | ---
135 |
136 | ### 3.text-align（文本水平对齐方式）
137 |
138 | ```html
139 |
147 | ```
148 |
149 | ---
150 |
151 | ### 4.text-indent（首行缩进）
152 |
153 | ```html
154 |
160 | ```
161 |
162 | ---
163 |
164 | ### 5.text-decoration（文本装饰，通常给a链接修改装饰效果）
165 |
166 | ```html
167 |
177 | ```
178 |
179 | ---
180 |
181 | ## 🌛第三部分：CSS背景及应用
182 |
183 | ### 1.背景颜色
184 |
185 | ---
186 |
187 | ### 2.背景图片
188 |
189 | ---
190 |
191 | ### 3.背景平铺
192 |
193 | ---
194 |
195 | ### 4.背景位置
196 |
197 | ---
198 |
199 | ## 🌙第四部分：标签显示模式 & CSS盒模型
200 |
201 | > 标签的显示模式（display）主要有，行内，块级，行内块
202 |
203 | - 块级：独占一行，高度，宽度，内外边距都可以控制（常见的有h1~h6, div, ul, ol, li, p）
204 | - 行内：一行显示多个，高宽直接设置无效，默认宽度是它自身内容的宽度，行内元素只能容纳文本或者行内元素（常见的有 a, span, em, s, ...）
205 | - 行内块：一行可以显示多个，可以设置宽高（常见的有 img, input, td）
206 | - 相互转换：display: block, inline, inline-block
207 |
208 | ---
209 |
210 | ## ⭐️第五部分：CSS三大特性
211 |
212 | ---
213 |
214 | ## 🌟第六部分：浮动 & 清除浮动
215 |
216 | ---
217 |
218 | ## 💫第七部分：定位
219 |
220 | ---
221 |
222 | ## ✨第八部分：其他
223 |
224 | ## 📚参考列表（致敬）
225 |
226 | - [博学谷](https://www.boxuegu.com/)
227 |
--------------------------------------------------------------------------------
/docs/blog/3.CSS/2.CSS3.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 2.CSS3
3 | date: 2020-01-30 00:00:00
4 | permalink:
5 | tag:
6 | - blog
7 | - 3.CSS
8 | ---
9 |
10 | > CSS3不和HTML5一样是一个生态，而是 拓展了CSS的基础，使其更加的好用，但是还不具有现代化的特性
11 |
12 | > 但是不要担心，一些预处理器和后处理器 弥补了 CSS不现代化的一些问题
13 |
14 | ## 🥟第一部分：新增选择器
15 |
16 | > 前言：新增的选择器真是好用，不用多谢一些类名了，起名字我可真是难受
17 |
18 | **备注：类选择器，属性选择器，伪类选择器，权重都是10**
19 |
20 | ### 1.属性选择器
21 |
22 | ```html
23 |
24 |
25 | ```
26 |
27 | ```css
28 | /* 属性选择器 */
29 | button[disabled] { }
30 |
31 | /* 两个按钮都能选中 */
32 | button[class^="btn"] { }
33 |
34 | /* att$='' 具有att属性，并且以...结尾的 */
35 | /* att*='' 具有att属性，并且含有...的 */
36 | ```
37 |
38 | ### 2.结构伪类选择器
39 |
40 | > 所谓结构，就是指，是第几个
41 |
42 | ```html
43 | 1
45 |2
46 |3
47 |4
48 |5
49 |
28 |
29 | ---
30 |
31 | ### 2.BEM
32 |
33 | ---
34 |
35 | ### 3.ACSS（原子CSS）
36 |
37 | ---
38 |
39 | ### 4.其他分层思想
40 |
41 | ---
42 |
43 |
44 | ## 🎋第二部分：CSS Houdini
45 |
46 | ---
47 |
48 | ### 1.CSS Houdini介绍（现在还是没有应用上，了解的还是少）
49 |
50 | **CSS Houdini 提供了API, 能让程序员控制浏览器的重绘重排过程**
51 |
52 | 
53 |
54 |
55 | 
56 |
57 | ---
58 |
59 | ## 🌱第三部分：CSS与数学
60 |
61 | ---
62 |
63 | ### 1.CSS矩阵
64 |
65 | **概念（了解概念就行了，我现在也是不懂）**
66 |
67 | 
68 |
69 |
70 | **学习矩阵有什么用么？**
71 |
72 | - 粗浅的举一个例子：transform 实现的原理，在浏览器中就是矩阵的应用
73 |
74 | 
75 |
76 |
77 | ---
78 |
79 | ### 2.一些工具网站
80 |
81 | **2D矩阵 转 3D矩阵，可以开启硬件加速，调用GPU，提高性能，让GPU直接合成层，节省了重绘和重排（还是不太懂）**
82 |
83 | 
84 |
85 | ## 📚参考列表（致敬）
86 |
87 | - [腾讯课堂](https://ke.qq.com)
88 |
--------------------------------------------------------------------------------
/docs/blog/4.JavaScript/5.Underscore库源码分析.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 5.Underscore库源码分析
3 | date: 2020-01-30 00:00:00
4 | permalink:
5 | tag:
6 | - blog
7 | - 4.JavaScript
8 | ---
9 |
10 | > 等待书写中...
11 |
12 | **[网址](https://www.html.cn/doc/underscore/)**
--------------------------------------------------------------------------------
/docs/blog/4.JavaScript/6.Lodashjs库源码分析.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 6.Lodashjs库源码分析
3 | date: 2020-01-30 00:00:00
4 | permalink:
5 | tag:
6 | - blog
7 | - 4.JavaScript
8 | ---
9 |
10 | > 等待书写中...
11 |
12 | **[网址](https://www.lodashjs.com/)**
--------------------------------------------------------------------------------
/docs/blog/4.JavaScript/7.函数式编程.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 7.函数式编程
3 | date: 2020-01-30 00:00:00
4 | permalink:
5 | tag:
6 | - blog
7 | - 4.JavaScript
8 | ---
9 |
10 | > 等待书写中...
11 |
12 | ---
13 |
14 | ## 第一部分：函数式编程基础
15 |
16 | > **函数式编程不是用函数来编程，也不是传统的面向过程编程。** 主要是将复杂的函数 符合成简单的函数（计算理论，递归论，或者拉姆达演算）。运算过程尽量写成一系列嵌套的函数调用
17 |
18 | > 举例：React高阶组件
19 |
20 | ---
21 |
22 | ### 函数编程的基本概念
23 |
24 | - 函数是第一等公民
25 | - 只用表达式，不用语句
26 | - 没有副作用
27 | - 不修改状态
28 | - 引用透明（函数运行只靠参数）
29 |
30 | ---
31 |
32 | ### 核心概念
33 |
34 | - 纯函数
35 | - 函数的柯里化
36 | - 函数组合
37 | - Point Free
38 | - 声明式与命令式代码
39 | - 惰性求值
40 |
41 | ---
42 |
43 | ### 纯函数
44 |
45 | 对于相同的输入，永远会得到相同的输出，而且没有任何可观察的副作用，也不依赖外部环境的状态
46 |
47 | 鉴于这个特性能做什么？
48 |
49 | - 可以做缓存，因为第一次，我知道输入什么了，第二次就不用计算了，提高性能
50 | - 纯函数不仅可以有效降低系统的复杂度，还有很多很棒的特性，例如可缓存性
51 |
52 | ---
53 |
54 | ### 函数的柯里化
55 |
56 | - 传递给函数一部分参数来调用它，让它返回一个函数去处理剩下的参数
57 | - 作用就是解决了函数不纯的问题，将函数依赖的变量以参数的形式组合成 新的函数
58 | - 好处：事实上柯里化是一种预加载函数的方法，通过传递较少的参数，得到一个已经记住了这些参数的新函数。某种意义上讲，这是一种对参数的缓存，是一种非常高效的编写函数的方式
59 |
60 | ---
61 |
62 | ### 函数组合
63 |
64 | - 将需要层层嵌套的函数 通过一个组合函数包一层，使其使用起来更舒适
65 |
66 | ---
67 |
68 | ### Point Free
69 |
70 | - 把一些对象自带的方法转化成纯函数，不要命名转瞬即逝的中间变量
71 | - 例如：const f = str => str.toString().split('')
72 |
73 | ```js
74 | // 解决
75 | let toString = str => str.toString();
76 | let split = str => str.split();
77 |
78 | let fn = compost(split(' '), toString)
79 |
80 | fn(123) // [1, 2, 3]
81 |
82 | // 这种风格能帮助我们减少不必要的命名，让代码保持简洁和通用
83 | ```
84 |
85 | ---
86 |
87 | ### 声明式与命令式代码
88 |
89 | - 命令式代码：我们通过编写一条又一条指令去让计算机执行一些动作，这其中会涉及到很多繁杂的细节
90 | - 声明式代码：通过写表达式的方式来声明我们想干什么，而不是通过一步一步的指示
91 | - 优缺点：
92 | - 函数式编程这种声明式的代码，对于无副作用的纯函数，我们完全可以不考虑函数内部是如何实现的，专注于编写业务代码，优化代码时，目光只需要集中在这些稳定坚固的函数内部即可
93 | - 不纯的函数式代码会产生副作用，或者依赖外部系统环境，使用他们的时候总要考虑这些不干净的副作用。在复杂的系统中，这对于程序员的心智来说是极大的负担
94 |
95 | ---
96 |
97 | ### 惰性求值，惰性函数
98 |
99 | - 在指令式语言中以下代码会按顺序执行，由于每个函数都有可能改动或者依赖于其内部的状态。因此必须顺序执行
100 |
101 |
102 | ```js
103 | // 求累加的函数（未使用惰性函数）
104 | function add(num) {
105 | let addVale = 0;
106 | for (let i = 0; i <= num; i++) {
107 | addVale += i
108 | }
109 | return addVale
110 | }
111 |
112 | add(2000000000) // 1s
113 | add(2000000000) // 1s
114 | add(2000000000) // 1s
115 | add(2000000000) // 1s
116 |
117 | // 总共4s
118 | ```
119 |
120 | ```js
121 | // 求累加的函数（使用 惰性函数）
122 | function add(num) {
123 | let addVale = 0;
124 | for (let i = 0; i <= num; i++) {
125 | addVale += i
126 | }
127 | // 函数函数
128 | add = function () {
129 | addVale
130 | }
131 | return addVale
132 | }
133 |
134 | add(2000000000) // 1s
135 | add(2000000000) // 0s
136 | add(2000000000) // 0s
137 | add(2000000000) // 0s
138 |
139 | // 总共1s
140 | ```
141 |
142 | ---
143 |
144 | ## 第二部分：更加专业的术语
145 |
146 | - 高阶函数
147 | - 尾递归优化
148 | - 闭包
149 | - 容器，Functor
150 | - 错误处理，Either，AP
151 | - IO
152 | - Monad
153 |
154 | ---
155 |
156 | ### 高阶函数
157 |
158 | - 本来我函数不能做很复杂的事情，你给我传过来一个复杂的函数，我一组合就能干很复杂的事情了
159 | - 将函数当参数，把传入的函数做一个封装，然后返回这个封装函数，达到更高程度的抽象。
160 |
161 | ---
162 |
163 | ### 尾递归优化
164 |
165 | ---
166 |
167 | ### 闭包
168 |
169 | - 在函数里面返回一个函数就会造成闭包，更深层次的我好像也知道，给忘了
170 |
171 | ---
172 |
173 | ## 第三部分：流行的函数式编程库
174 |
175 | - RxJS
176 | - cycleJs
177 | - **lodash.js**, lazy（惰性求值）
178 | - underscoreJS
179 | - ramadjs
180 |
181 | ---
182 |
183 | ### 1.RxJS（必学）
184 |
185 | - 诞生以来一直不温不火，单它的函数响应式编程（FRP）理念非常先进（函数式编程 FP）
186 | - 在RxJS中，所有的外部输入（用户输入，网络请求等等）都被试做一种事件流（这种机制特别适合处理游戏，上上下下）
187 |
188 | ---
189 |
190 | ### 2.lodash
191 |
192 | ---
193 |
194 | ### 3.underscoreJS（以后学）
195 |
--------------------------------------------------------------------------------
/docs/blog/4.JavaScript/8.TypeScript.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 8.TypeScript
3 | date: 2020-01-30 00:00:00
4 | permalink:
5 | tag:
6 | - blog
7 | - 4.JavaScript
8 | ---
9 |
10 | > 注意此处：内容不全，待完善...
11 |
12 | > TypeScript 是 JavaScript 的超集 [中文网站...](https://www.tslang.cn/)
13 |
14 | ---
15 |
16 | ## 🐬第一部分：TypeScript介绍
17 |
18 | ### 1.安装
19 |
20 | - 前置：需要Node环境
21 | - 安装：npm i -g typescript
22 | - 验证：tsc -v（tsc是ts的编译器）
23 |
24 | ```sh
25 | # 生成package.json
26 | npm init
27 |
28 | # 生成配置信息（生成 tsconfig.json）
29 | tsc --init
30 |
31 | # 工程化（自动化的帮你buid ts 项目，方便学习）
32 | npm install webpack webpack-cli webpack-dev-server ts-loader typescript html-webpack-plugin
33 | ```
34 |
35 | ---
36 |
37 | ## 🐌第二部分：TypeScript数据类型
38 |
39 | ### 1.基本数据类型
40 |
41 | ```js
42 | // JavaScript中也有的
43 | let age: Number = 10;
44 | let myName: String = '朱昆鹏';
45 | let married: Boolean = true;
46 | let arr1: number[] = [1, 2, 3]
47 | let arr2: Array
21 |
22 | 安装其他内容：npm i ant-design-vue moment
23 |
24 | ```js
25 | import Antd from "ant-design-vue";
26 | import "ant-design-vue/dist/antd.less";
27 | Vue.use(Antd);
28 |
29 | // 这里会报一个错，说的是引入 .less 的文件还需要一些配置啥的吧，这样就引出了下面要整的 自定义webpack配置
30 | ```
31 |
32 | ---
33 |
34 | ### 2.如何自定义Webpack和Babel配置
35 |
36 | **自定义webpack配置（vue.config.js）**
37 |
38 | ```js
39 | // 新建 vue.config.js
40 | module.exports = {
41 | css: {
42 | loaderOptions: {
43 | less: {
44 | javascriptEnabled: true,
45 | },
46 | css: {
47 | // 这里的选项会传递给 css-loader
48 | },
49 | postcss: {
50 | // 这里的选项会传递给 postcss-loader
51 | }
52 | }
53 | }
54 | }
55 | ```
56 |
57 | - [本问题 vue-cli 自定义配置网址](https://cli.vuejs.org/zh/config/#css-loaderoptions)
58 | - [问题解决方案地址](https://github.com/ant-design/ant-motion/issues/44)
59 |
60 | ---
61 |
62 | **Babel配置**
63 |
64 | - 我们可以通过 .babel 来转义ES6中识别不了的语法，也可以 通过一个插件来实现 UI组件的按需加载
65 |
66 | - 安装：npm i babel-plugin-import --dev
67 |
68 | ```js
69 | module.exports = {
70 | presets: ["@vue/app"],
71 | plugins: [
72 | [
73 | "import",
74 | { libraryName: "ant-design-vue", libraryDirectory: "es", style: true }
75 | ]
76 | ]
77 | };
78 |
79 | ```
80 |
81 | - [babel按需加载 配置](https://vue.ant.design/docs/vue/use-with-vue-cli-cn/)
82 |
83 | ```js
84 | // 按需加载 代码效果 示例（不用引入CSS了，因为这个插件帮忙引入了）
85 | import { Button, Switch } from "ant-design-vue";
86 | Vue.use(Button);
87 | Vue.use(Switch);
88 |
89 | ```
90 |
91 | ---
92 |
93 | **拓展：使用 Prettier格式化代码，例如 给我们自动双引号变单引号，等操作**
94 |
95 |
96 | - [学习笔记](https://www.jianshu.com/p/5f7dbffc257e)
97 | - [官网](https://prettier.io/docs/en/options.html?spm=a2c4e.11153940.blogcont422690.11.5d0b5721zZ3CkZ)
98 |
99 | ---
100 |
101 | ### 3.如何设计一个高拓展性的路由？
102 |
103 | **示例路由**
104 |
105 | ```js
106 |
107 | import Vue from "vue";
108 | import Router from "vue-router";
109 |
110 | Vue.use(Router);
111 |
112 | export default new Router({
113 | mode: "history",
114 | base: process.env.BASE_URL,
115 | routes: [
116 | {
117 | path: "/user", // 用户相关的路由
118 | children: [
119 | {
120 | path: '/user/login', // 登录
121 | name: 'login',
122 | component: () => {
123 | import(/* webpackChunkName: "user" */ "./views/User/Login.vue")
124 | }
125 | },
126 | {
127 | path: '/user/register', // 注册
128 | name: 'register',
129 | component: () => {
130 | import(/* webpackChunkName: "user" */ "./views/User/Register.vue")
131 | }
132 | }
133 | ]
134 | }
135 | ]
136 | });
137 |
138 | ```
139 |
140 | ---
141 |
142 | **🔥加载提示库（防止路由切换白屏时间太长的问题，增加友好提示）**
143 |
144 | - 安装：npm i nprogress
145 |
146 | ```js
147 | import NProgress from 'nprogress'
148 | import 'nprogress/nprogress.css'
149 |
150 | // Vue路由守卫
151 | router.beforeEach( (to, form, next) => {
152 | NProgress.start()
153 | next()
154 | })
155 |
156 | router.afterEach( () => {
157 | NProgress.done()
158 | })
159 |
160 | ```
161 |
162 |
--------------------------------------------------------------------------------
/docs/blog/7.React/1.React基础.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 1.React基础
3 | date: 2020-01-30 00:00:00
4 | permalink:
5 | tag:
6 | - blog
7 | - 7.React
8 | ---
9 |
10 | > 等待书写中...
11 | ## 🍡第一部分：React初探
12 |
13 | ### 1.React简介
14 |
15 | - react是由Facebook在2013年5月推出的一个前端框架，带来一种函数式编程风格
16 | - react比vue更灵活一些，Vue比react多一些api，使用起来更简单
17 |
18 | ---
19 |
20 | ### 2.React开发环境搭建
21 |
22 | **使用脚手架工具来生成**
23 |
24 | - 前置条件：有Node环境
25 | - 安装React脚手架：npm i create-react-app -g
26 | - 生成工程：create-react-app my-app
27 |
28 | ---
29 |
30 | ### 3.工程目录文件简介
31 |
32 | - public
33 | - manifest.json 给PWA使用
34 | - src 工程文件夹
35 | - index.js 程序入口文件
36 | - App.js 组件
37 | - App.test.js: 测试文件
38 |
39 | ---
40 |
41 | ### 4.React中的组件
42 |
43 | ```js
44 | // 这就是一个组件，为什么要引入 React呢，因为下面的 div 是JSX的标签，需要引入react进行编译
45 | import React from 'react';
46 |
47 | function App() {
48 | return (
49 | 
78 |
79 | ---
80 |
81 | ### webpack postcss 插件 high-pxtorem【🔥 推荐】
82 |
83 | 这个可以在webpack编译的时候，将 px 转为 rem，我可以像写普通代码一样，不用太关心适配问题了。
84 |
85 | 我现在在用这个，但是需要你有一定的 webpack 基础才行，但是用起来就没事了，要是没有一定的基础，可能都配置不起来
86 |
87 | [high-pxtorem npm地址](https://www.npmjs.com/package/high-pxtorem)
88 |
--------------------------------------------------------------------------------
/docs/blog/8.移动端/2.移动端H5手机内调试.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 2.移动端H5手机内调试
3 | date: 2020-01-30 00:00:00
4 | permalink:
5 | tag:
6 | - blog
7 | - 8.移动端
8 | ---
9 |
10 | > 移动端H5手机内调试 神器：vconsole
11 |
12 | ## 🥞第一部分：vconsole使用
13 |
14 | ### 基本使用
15 |
16 | ```html
17 |
18 |
19 |
22 | ```
23 |
24 | - [vcondole npm 地址](https://www.npmjs.com/package/vconsole)
25 |
26 | **功能：**
27 |
28 | - 查看 console 日志
29 | - 查看网络请求
30 | - 查看页面 element 结构
31 | - 查看 Cookies、localStorage 和 SessionStorage
32 | - 手动执行 JS 命令行
33 | - 自定义插件
34 |
35 | ---
36 |
37 | ### 效果展示（点击 右下角 绿色按钮 👀）
38 |
39 |
42 |
43 | ---
--------------------------------------------------------------------------------
/docs/blog/8.移动端/3.Flutter.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 3.Flutter
3 | date: 2020-01-30 00:00:00
4 | permalink:
5 | tag:
6 | - blog
7 | - 8.移动端
8 | ---
9 |
10 | > 等待书写中...
--------------------------------------------------------------------------------
/docs/blog/8.移动端/4.React-Native.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 4.React-Native
3 | date: 2020-01-30 00:00:00
4 | permalink:
5 | tag:
6 | - blog
7 | - 8.移动端
8 | ---
9 |
10 | > 等待书写中...
--------------------------------------------------------------------------------
/docs/blog/8.移动端/5.移动端原生开发/img/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhukunpenglinyutong/notes/16be24eb6144963fdce7809ffed2d7fbd124350b/docs/blog/8.移动端/5.移动端原生开发/img/1.png
--------------------------------------------------------------------------------
/docs/blog/8.移动端/5.移动端原生开发/img/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhukunpenglinyutong/notes/16be24eb6144963fdce7809ffed2d7fbd124350b/docs/blog/8.移动端/5.移动端原生开发/img/2.png
--------------------------------------------------------------------------------
/docs/blog/8.移动端/5.移动端原生开发/img/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhukunpenglinyutong/notes/16be24eb6144963fdce7809ffed2d7fbd124350b/docs/blog/8.移动端/5.移动端原生开发/img/3.png
--------------------------------------------------------------------------------
/docs/blog/8.移动端/6.Weex.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 6.Weex
3 | date: 2020-01-30 00:00:00
4 | permalink:
5 | tag:
6 | - blog
7 | - 8.移动端
8 | ---
9 |
10 | ## 第一部分：
11 |
12 | ### 1.weex环境搭建
13 |
14 | 1.安装Node
15 | 2.npm install -g weex-toolkit
16 | 3.weex init 项目名称
17 |
18 | ---
19 |
20 | ### 2.
21 |
22 | ---
23 |
24 | ## 第二部分：weex内建组件
25 |
26 | ### 1.a组件
27 |
28 | > weex中a组件定义了指向weex页面打包后的一个JS地址
29 |
30 | > a组件中无法添加文本，需要在其中加上test组件才能添加文本
31 |
32 | > a组件支持除了自己外的所有weex组件作为子组件
33 |
34 | > a组件支持所有通用样式
35 |
36 | > 请不要为a组件添加click事件
37 |
38 | ---
39 |
40 | ### 2.web组件
41 |
42 | > web组件用于在页面中嵌入一张页面，src用以指定资源地址
43 |
44 | > 不支持任何子组件
45 |
46 | > pagestart web组件开始加载时执行
47 | > pagefinsh web组件完成加载时执行
48 | > error web组件加载错误时执行
49 |
50 | ---
51 |
52 | ### 3.webview组件
53 |
54 | > 一系列web组件的操作接口，可以通过调用this.$refs.el 来获取元素的引用
55 |
56 | > goBack(webElement) 加载历史记录里的前一个资源地址
57 | > goForward(webElement) 加载历史记录里的下一个资源地址
58 | > reload(webElement) 刷新当前页面
59 |
60 | ---
61 |
62 | ### 4.list组件
63 |
64 | > list组件是垂直列表功能的核心组件
65 |
66 | > cell组件 列表中的子项，类似于HTML中的ul和li的关系
67 |
68 | > refresh组件 给列表添加下拉刷新的功能
69 |
70 | > loadmore事件 loadmoreoffset{number} 触发事件所需距离
71 |
72 |
73 | ---
74 |
75 | ## 第三部分：
76 |
77 | ---
78 |
79 | ## 第四部分：自己写的一些组件
80 |
81 | ### 1.iOS滑动删除组件（方案）
82 |
83 | > 这里原来打算抽离成组件的，但是发现不好拓展，因为每个人要求滑动的情况可能不同，所以这里抽离成方案更为合适
84 |
85 | ```html
86 | 🕓 {{ item.date }}
21 |
29 |
30 | ---
31 |
32 | ## 2.南北差距超过东西差距
33 |
--------------------------------------------------------------------------------
/docs/pages/github-open/github-open.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "开源项目"
3 | permalink: "github-open"
4 | hideLastUpdated: True
5 | categories: noRight
6 | ---
7 |
8 | ---
9 |
10 | ## 图片压缩客户端（Electron）
11 |
12 | ---
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/docs/pages/my/img/hbgy.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhukunpenglinyutong/notes/16be24eb6144963fdce7809ffed2d7fbd124350b/docs/pages/my/img/hbgy.png
--------------------------------------------------------------------------------
/docs/pages/my/img/iit.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhukunpenglinyutong/notes/16be24eb6144963fdce7809ffed2d7fbd124350b/docs/pages/my/img/iit.png
--------------------------------------------------------------------------------
/docs/pages/my/img/ming.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhukunpenglinyutong/notes/16be24eb6144963fdce7809ffed2d7fbd124350b/docs/pages/my/img/ming.jpg
--------------------------------------------------------------------------------
/docs/pages/my/img/rm.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhukunpenglinyutong/notes/16be24eb6144963fdce7809ffed2d7fbd124350b/docs/pages/my/img/rm.png
--------------------------------------------------------------------------------
/docs/pages/my/img/wb.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhukunpenglinyutong/notes/16be24eb6144963fdce7809ffed2d7fbd124350b/docs/pages/my/img/wb.png
--------------------------------------------------------------------------------
/docs/pages/my/img/zywl.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhukunpenglinyutong/notes/16be24eb6144963fdce7809ffed2d7fbd124350b/docs/pages/my/img/zywl.png
--------------------------------------------------------------------------------
/docs/pages/plan/2021/2021-list.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "2021年度计划"
3 | permalink: "2021-plan"
4 | hideLastUpdated: True
5 | categories: noRight
6 | ---
7 |
8 | 2021年度计划
--------------------------------------------------------------------------------
/docs/pages/plan/plan-list.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "年度计划"
3 | permalink: "plan-list"
4 | hideLastUpdated: True
5 | categories: noRight
6 | ---
7 |
8 | 年度列表
--------------------------------------------------------------------------------
/docs/pages/update/README.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "网站更新"
3 | permalink: "update"
4 | categories: noRight
5 | ---
6 |
7 |
8 | bug: 修复友链移动端适配问题
14 |doc: 新增两个友链（开心）
15 |bug: 修复icon window 展示的问题（直接取消了icon）
21 |bug: 解决暗黑模式插件点击第一次失效问题
22 |doc: 增加网站更新栏目，调整友链位置
23 |style: 优化友链展示效果
24 |delete: 暂时取消网站介绍，个人计划两个栏目（因为没啥内容，所以需要先想一下）
25 |
18 | 
19 | 
20 |
21 |
22 | - 之后还需要进行配置：https://cloud.tencent.com/document/product/400/35244
23 |
24 |
25 |
26 | - 🔥注意：主域名申请的单域名证书，二级域名不在https加密保护内，所以 notes.itzkp.com 还是 http协议，而通配符证书可以保护主域名下所有的二级子域名
27 |
28 | 于是乎我又申请了：notes.itzkp.com 和 jl.itzkp.com 的ssl证书，难点就是 二级域名的解析我是放到了，conf.d 文件夹下，我这怎么设置 ssl呢？
29 |
30 | ```sh
31 | # 示例：在conf.d 下面的 notes.conf下
32 |
33 | server {
34 | listen 443;
35 | server_name notes.itzkp.com; #填写绑定证书的域名
36 | ssl on;
37 | ssl_certificate 1_notes.itzkp.com_bundle.crt;#证书文件名称
38 | ssl_certificate_key 2_notes.itzkp.com.key;#私钥文件名称
39 | ssl_session_timeout 5m;
40 | ssl_protocols TLSv1 TLSv1.1 TLSv1.2; #请按照这个协议配置
41 | ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;#请按照这个套件配置
42 | ssl_prefer_server_ciphers on;
43 |
44 | location / {
45 |
46 | proxy_pass http://140.143.3.244:9998;
47 | proxy_set_header X-Real-IP $remote_addr;
48 | proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
49 | proxy_set_header Host $http_host;
50 | proxy_set_header X-Nginx-Proxy true;
51 | proxy_redirect off;
52 | }
53 | }
54 |
55 | server {
56 | listen 80;
57 | server_name notes.itzkp.com; #填写绑定证书的域名
58 | rewrite ^(.*)$ https://$host$1 permanent; #把http的域名请求转成https
59 | }
60 |
61 | ```
62 |
63 | ---
64 |
65 | ## 2.ssh免密登录
66 |
67 | ```js
68 | ①：生成秘钥：ssh-keygen -t rsa（这会在 ~/.ssh下生成两个文件）(后面还可以加参数例如：-f 'zhu_key' 这是生成秘钥名称，就会生成 zhu_key 和 zhu_key.pub)
69 | id_rea：私钥（不规定名称，名称默认就是id_rea，这个留在主服务器上，这样主服务器就能访问具有公钥的服务器就不用密码了）
70 | id_rea.pub：公钥（不规定名称，名称默认就是id_rea.pub，这个传到目标服务器上，这样会使具有私钥的服务器不用密码就能连接）
71 |
72 | ②：把公钥传到目标服务器上：scp ~/.ssh/id_rsa.pub root@目标服务器ip地址:/root/.ssh
73 |
74 | ③：登录目标服务器：cat ~/.ssh/id_rsa.pub >> ~/.ssh/authorized_keys （注意：> 是覆盖，>> 是追加）
75 |
76 | ④：在主服务器验证是否可以登录目标服务器：ssh root@目标服务器
77 | ```
78 |
79 | **❗️有些情况下这种方法不管用，一个就是名称改为自定义的就不行，还有就是如果一台计算机是另一个的免密登录，这台想成为别的计算机的免密登录就不行，具体是什么问题，还需要继续研究**
80 |
81 | ---
82 |
83 | ## 3.Jenkins配置
84 |
85 | ### 1.Jenkins Github hook 触发实现
86 |
87 | [材料](https://www.cnblogs.com/weschen/p/6867885.html)
88 |
89 | - Jenkins钩子函数hook只有一个，然后可以绑定很多个项目，只要一个项目触发了push，或者其他操作就会被这个钩子监听到，然后执行一些命令
90 |
91 | ---
92 |
93 | ## 4.CDN缓存配置（腾讯云）
94 |
95 | - 主要是进入 腾讯云安装指引进行配置
96 |
97 | ## 📚参考列表（致敬）
--------------------------------------------------------------------------------
/docs/quickcheck/4.其他/1.正则表达式速查.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 1.正则表达式·速查
3 | date: 2020-01-30 00:00:00
4 | permalink: quickcheck/4-1
5 | ---
6 |
7 | # 1.正则表达式·速查
8 |
9 | ---
10 |
11 | ## 🛴第一部分：创建正则表达式
12 |
13 | ```javascript
14 | // 你可以使用以下两种方法之一构建一个正则表达式
15 |
16 | const regex1 = /ab+c/gi;
17 | const regex2 = new RegExp("ab+c", "gi");
18 |
19 | ```
20 |
21 | ---
22 |
23 | ## 🛵第二部分：JS正则表达式的方法
24 |
25 | ### 1. test：一个在字符串中测试是否匹配的RegExp方法，它返回true或false
26 |
27 | ```javascript
28 | let str = 'hello world';
29 | /world/.test(str); // true
30 | / /.test(str); // true
31 | /good/.test(str); // false
32 | ```
33 |
34 | ---
35 |
36 |
37 | ### 2. replace：一个在字符串中执行查找匹配的String方法，并且使用替换字符串替换掉匹配到的子字符串
38 |
39 | ```javascript
40 | let str = 'hello world'
41 | let repStr = str.replace('world', 'replace') // 注意不会改变原内容
42 | console.log(repStr) // "hello replace"
43 | ```
44 |
45 | ---
46 |
47 | ### 3. split：使用正则表达式 或 一个固定字符串分隔 一个字符串，返回 分隔后的子字符串数组
48 |
49 | ```javascript
50 | // 这个大部分我都是 字符串.split(' ') 以空格分开来用的 😁
51 |
52 | let str = 'hello RegExp';
53 | str.split(' '); // ["hello", "RegExp"]
54 | str.split('hello'); // ["", "RegExp"]
55 | str.split('l'); // ["he", "", "o RegExp"]
56 | str.split('good') // ["hello RegExp"]
57 | ```
58 |
59 | ---
60 |
61 | ### 4. exec：一个在字符串中执行查找匹配的RegExp方法，它返回一个数组（未匹配到则返回null）
62 |
63 | ::: tip
64 | 直接挂一个解释吧，返回的内容是一个对象有点多：[链接](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec)
65 | :::
66 |
67 | ---
68 |
69 | ### 5. search：一个在字符串中测试匹配的String方法，它返回匹配到的位置索引，或者在失败时返回-1（略）
70 |
71 | ---
72 |
73 | ### 6. match：一个在字符串中执行查找匹配的String方法，它返回一个数组或者在未匹配到时返回null（略）
74 |
75 |
76 | ---
77 |
78 | ## 🚃第三部分：正则表达式的简单规则
79 |
80 | 
81 |
82 | ---
83 |
84 | ## 🚅第四部分：常用正则表达式·速查
85 |
86 | ---
87 |
88 | ## 📚参考列表（致敬）
89 |
90 | - MDN：[正则表达式](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions)
--------------------------------------------------------------------------------
/docs/quickcheck/4.其他/2.好的网站推荐.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 2.好的网站推荐
3 | date: 2020-01-30 00:00:00
4 | permalink: quickcheck/4-2
5 | ---
6 |
7 | # 2.好的网站推荐
8 |
9 | ## 🐳资料类
10 |
11 | - [MDN](https://developer.mozilla.org/zh-CN/)
12 | - [Vue官网](https://cn.vuejs.org/)
13 | - [Vue-Cli](https://cli.vuejs.org/zh/)
14 | - [Vue-Router](https://router.vuejs.org/zh/)
15 | - [Vuex](https://vuex.vuejs.org/zh/)
16 | - [Vue.js 服务器端渲染指南](https://ssr.vuejs.org/zh/)
17 | - [lodash.js官网](https://www.lodashjs.com/)
18 | - ...
19 |
20 | ---
21 |
22 | ## 🐬工具类
23 |
24 | - [在线格式化json](http://www.bejson.com/)
25 | - [代码生成好看的图片，可以给别人演示代码片段用](https://codeimg.io/)
26 | - [自动生成NGINX配置](https://nginxconfig.io/)
27 | - [alcss艺术字](https://www.bootschool.net/ascii-art)
28 | - [具有炫酷动画的网站](https://cssfx.dev/)
29 | - [各种文件相互转换的网站](https://smallpdf.com/cn)
30 | - [给变量命名的网站](https://unbug.github.io/codelf/)
31 | - [babel官网](https://www.babeljs.cn/)
32 | - [在线录屏软件](https://www.apowersoft.cn/free-online-screen-recorder)
33 | - ...
34 |
35 | ---
36 |
37 | ## 🦋社区类
38 |
39 | - [掘金](https://juejin.im/timeline)
40 | - [思否](https://segmentfault.com/)
41 | - ...
42 |
43 |
--------------------------------------------------------------------------------
/docs/quickcheck/README.md:
--------------------------------------------------------------------------------
1 | ## 前端
2 |
3 | [1.HTML和HTML5](./1-1/)