\n ![\"LICENSE\"](\"https://img.shields.io/github/license/zhukunpenglinyutong/notes.svg\")
\n ![\"repo-size\"](\"https://img.shields.io/github/repo-size/zhukunpenglinyutong/notes.svg\")
\n ![\"CodeTriage\"](\"https://www.codetriage.com/zhukunpenglinyutong/notes/badges/users.svg\")
\n ![\"提交活动\"](\"https://img.shields.io/github/commit-activity/m/zhukunpenglinyutong/notes.svg\")
\n ![\"最后一次提交\"](\"https://img.shields.io/github/last-commit/zhukunpenglinyutong/notes.svg\")
\n ![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/zkp-blog-bg.png\")
\n
![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/zkp.png\")
\n\n---\n\n## 💌 致谢\n\n致谢所有 star 和 关注我的 朋友们，多谢你们的鼓励和支持。"
},
{
"path": "docs/.vuepress/components/About.vue",
"content": "\n \n {{ data.tagline || $description || 'Welcome to your VuePress site' }}\n
\n\n \n{{ feature.details }}
\n\n \n ←\n
{{ getMsg() }}\n
![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/2.notes/8.4%E5%89%8D%E7%AB%AF%E4%BB%A3%E7%A0%81%E8%B4%A8%E9%87%8F/5.%E5%89%8D%E7%AB%AF%E6%B5%8B%E8%AF%95%E6%A1%86%E6%9E%B6Jest/1.%E6%B2%A1%E6%9C%89%E6%B5%8B%E8%AF%95%E6%A1%86%E6%9E%B6%E7%9A%84%E6%97%B6%E5%80%99%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E6%B5%8B%E8%AF%95.png\")
\n\n---\n\n### 2.Jest的简单配置\n\n**基础安装，运行**\n\n- 安装：npm i jest -D\n- 使用的时候，必须要用 模块化（就是要导出，导入，可以使用 commn.js 规范 或者 es module 格式）\n- Jest主要做 集成测试，和单元测试\n- 我们使用模块化的语法，我们浏览器正常就无法访问了，这时候就需要和 webpack 就行配合了，这就是一整个的工程流\n- 运行测试 npx test\n\n---\n\n**简单配置**\n\n- npx jest --init 初始化项目\n- 配置完成之后 会多一个 jest.config.js\n\n```js\n// For a detailed explanation regarding each configuration property, visit:\n// https://jestjs.io/docs/en/configuration.html\n\nmodule.exports = {\n // All imported modules in your tests should be mocked automatically\n // automock: false,\n\n // Stop running tests after `n` failures\n // bail: 0,\n\n // Respect \"browser\" field in package.json when resolving modules\n // browser: false,\n\n // The directory where Jest should store its cached dependency information\n // cacheDirectory: \"/private/var/folders/4h/ykg022694sn1pw91fxq30xwc0000gn/T/jest_dx\",\n\n // Automatically clear mock calls and instances between every test\n // clearMocks: false,\n\n // Indicates whether the coverage information should be collected while executing the test\n // collectCoverage: false,\n\n // An array of glob patterns indicating a set of files for which coverage information should be collected\n // collectCoverageFrom: null,\n\n // The directory where Jest should output its coverage files\n // coverageDirectory: null,\n\n // An array of regexp pattern strings used to skip coverage collection\n // coveragePathIgnorePatterns: [\n // \"/node_modules/\"\n // ],\n\n // A list of reporter names that Jest uses when writing coverage reports\n // coverageReporters: [\n // \"json\",\n // \"text\",\n // \"lcov\",\n // \"clover\"\n // ],\n\n // An object that configures minimum threshold enforcement for coverage results\n // coverageThreshold: null,\n\n // A path to a custom dependency extractor\n // dependencyExtractor: null,\n\n // Make calling deprecated APIs throw helpful error messages\n // errorOnDeprecated: false,\n\n // Force coverage collection from ignored files using an array of glob patterns\n // forceCoverageMatch: [],\n\n // A path to a module which exports an async function that is triggered once before all test suites\n // globalSetup: null,\n\n // A path to a module which exports an async function that is triggered once after all test suites\n // globalTeardown: null,\n\n // A set of global variables that need to be available in all test environments\n // globals: {},\n\n // An array of directory names to be searched recursively up from the requiring module's location\n // moduleDirectories: [\n // \"node_modules\"\n // ],\n\n // An array of file extensions your modules use\n // moduleFileExtensions: [\n // \"js\",\n // \"json\",\n // \"jsx\",\n // \"ts\",\n // \"tsx\",\n // \"node\"\n // ],\n\n // A map from regular expressions to module names that allow to stub out resources with a single module\n // moduleNameMapper: {},\n\n // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader\n // modulePathIgnorePatterns: [],\n\n // Activates notifications for test results\n // notify: false,\n\n // An enum that specifies notification mode. Requires { notify: true }\n // notifyMode: \"failure-change\",\n\n // A preset that is used as a base for Jest's configuration\n // preset: null,\n\n // Run tests from one or more projects\n // projects: null,\n\n // Use this configuration option to add custom reporters to Jest\n // reporters: undefined,\n\n // Automatically reset mock state between every test\n // resetMocks: false,\n\n // Reset the module registry before running each individual test\n // resetModules: false,\n\n // A path to a custom resolver\n // resolver: null,\n\n // Automatically restore mock state between every test\n // restoreMocks: false,\n\n // The root directory that Jest should scan for tests and modules within\n // rootDir: null,\n\n // A list of paths to directories that Jest should use to search for files in\n // roots: [\n // \"![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/2.notes/8.4%E5%89%8D%E7%AB%AF%E4%BB%A3%E7%A0%81%E8%B4%A8%E9%87%8F/3.%E8%87%AA%E5%8A%A8%E5%8C%96%E6%B5%8B%E8%AF%95/1.%E6%B5%8B%E8%AF%95%E6%A1%86%E6%9E%B6%E5%88%86%E7%B1%BB.png\")
\n\n---\n\n### 2.单元测试工具对比\n\n**按照npm下载排名来排列 ---> npm trends**\n\n- jest\n- mocha + chai \n- jasmine\n- ava\n\n\n---\n\n### 3.e2e测试工具对比\n\n**按照npm下载排名来排列**\n\n- cypress\n- webdriverio\n- nightwatch\n- nightmare\n- testcafe\n\n\n---\n\n## 三.单元测试Jest\n\n### 1.Jest简介\n\n- 支持 babel, webpack, Typescript\n\n---\n\n### 2.Jest安装和babel支持\n\n- npm install --save-dev jest\n- npm i --dev babel-jest @babel/core @babel/preset-env\n\n```js\n// babel.config.js\nmodule.exports = {\n presets: [\n [\n '@babel/preset-env',\n {\n targets: {\n node: 'current',\n },\n },\n ],\n ],\n};\n```\n\n---\n\n### 3.第一个Jest测试用例\n\n**文件（根据测试用例修改之后的代码）**\n\n```js\nexport const add = (a = 0, b = 0) => {\n\n if (typeof a !== 'number') {\n a = 0\n }\n\n if (typeof b !== 'number') {\n b = 0\n }\n\n return a + b\n}\n```\n\n**测试代码**\n\n```js\n// 引入待测试的功能模块\nimport { add } from './math'\n\n// test suite\ndescribe('测试 math.js 功能模块', () => {\n \n it ('等于加法函数是否正常', () => {\n expect(add(1,2)).toEqual(3)\n expect(add(1,-2)).toEqual(-1)\n expect(add(1, )).toEqual(1)\n expect(add(1,'')).toEqual(1)\n expect(add('你好',)).toEqual(0)\n })\n\n})\n\n```\n\n\n---\n\n### 4.杀手锏功能 Mock & Spy（没懂，来日再说吧）\n\n- Mock测试就是在测试过程中，对于某些不容易构造或者不容易获取的对象，用一个虚拟的对象来创建，以便测试的一种方法\n\n---\n\n### 5.jest cli 功能\n\n- jest --coverage 生成测试覆盖率\n- jest --verbose 详细打印\n- jest --watchAll 启动监听,执行所有测试用例（我们可以选择）\n- ...\n\n--- \n\n### 6.Vue-Cli快速创建单元\n\n\n---\n\n## TravisCI\n\n### 1.使用简介\n\n> TravisCI 只支持GitHub，不支持其他代码托管服务\n\n**使用步骤**\n\n- [进入到官方网站](http://travis-ci.org/)，并使用GitHub授权\n- 获取GitHub的Tokens\n- 配置项目 .taravis.yml\n - Node项目\n - Script脚本\n - 部署到 github pages\n - 钩子\n- 其他\n\n---\n\n## CircleCI\n\n"
},
{
"path": "docs/blog/12.前端代码质量/5.项目质量监测.md",
"content": "---\ntitle: 5.项目质量监测\ndate: 2020-01-30 00:00:00\npermalink: \ntag: \n - blog\n - 12.前端代码质量\n---\n\n> 注意：此篇文章未来可能要和其他文章进行合并，或者重构... 目前结构混乱，无法阅读\n\n### 简介\n\n**🔥通常来说，项目的质量决定了 软件项目的命运，软件项目的可维护性，软件项目的运维成本，软件项目的拓展性**\n\n**为什么要进行代码检查**\n\n- 避免低级BUG\n- 统一代码习惯\n- 保证线上代码质量\n\n**如何让一个团队的人产出的代码都在一个基本水平底线之上呢?**\n\n最初是靠制订规范。要确保规范得以执行只能靠人，所以文字规范成了code review的公共参照标准。单纯靠人的事最终都容易流于形式，\n\n🔥所以需要工具加以保证。虽说工具并不能完全实现规范中的规则，但至少能够在一定程度 上缓解代码不统一一的局面\n\n\n**从哪几个方面可以让项目质量有所提高呢？**\n\n- 代码Lint：告别低级错误，简单的配置让程序来自动检查\n- e2e test：e2e测试，黑盒测试，如何用e2e进行端到端的测试\n- 开源测试平台：codecov介绍（配合CI工具，让测试过程自动化）\n\n---\n\n### 2.日常写代码中遇到的问题\n\n**代码风格**\n\n**代码规范**\n\n这里使用 Typescript 能提高代码质量\n\n**设计思路**\n\n有的人写的程序就是高度耦合的，几十个函数，很难调用，没办法维护，这就和思路有关系了，要设计一些设计模式，设计一些模块化的东西，来规避这点\n\n---\n\n### 3.代码质量检测 Lint\n\n**Lint：是一款分析源码以及标记编程过程中（代码，样式，构建）书写的错误的工具**\n\n常见的3个JS检测工具对比\n\n- JSLint（2012年出现）：\n - 优点：参数配置完成，可以直接使用\n - 缺点：有限的配置选项，不能增加个性化的规则等等\n- JSHint\n - 优点：可配置，可以写配置文件\n - 缺点：难于知道那个规则产生的错误，不能自定义规则等等\n- 🔥ESLint（比较新的工具，JSCS已经合并到ESLint）\n - 优点：高度可配置\n - 缺点：需要一些配置，速度慢\n\n---\n\n### 4.Lint工具介绍（4个核心概念）\n\n**核心是配置文件，规则是写到里面的：.eslintrc.js**\n\n**常见规则**\n\n- off && 0：关闭规则\n- warn && 1：开启规则，使用警告级别错误（不会导致程序退出）\n- error && 2：开启规则，使用错误级别错误（程序会退出）\n\n```js\n// 例如\n{\n \"rules\": {\n \"semi\": [\"error\", \"never\"]\n }\n}\n```\n\n**Extends：使用别人的包（使用别人的规则）**\n\n```js\n{\n \"extends\": \"google\"\n}\n```\n\n**🔥Plugins：插件系统**\n\n我们有时候可能有一些特殊的应用场景，例如Vue的语法，例如less，sass等这些的语法，可能 使用别人的包里面也没有这些配置，我们就需要自己配置了（针对特定的语法结构进行Lint）\n\n---\n\n### 5.ESLint初始化\n\n- 安排：npm install eslint --save-dev\n- 使用\n\n```js\n// \n\"scripts\": {\n \"lint\": \"eslint app.js\",\n \"lint:create\": \"eslint --init\",\n},\n```\n\n**使用 eslint --init创建一个ESLint配置文件**\n\n- 第一个问题：检查代码规范 | 🔥检查代码规范并查找一些问题 | 强制使用某些规范\n- 第二个问题（你使用哪种模块方式）：🔥ESM | COM | 不使用\n- 第三个问题（选择常见的框架）\n- 第四个问题（你的代码会在哪里运行）：🔥浏览器 | 🔥Node\n- 第五个问题（你想把这些配置放到什么文件中）\n\n```js\nmodule.exports = {\n \"env\": { // 运行环境\n \"browser\": true,\n \"es6\": true,\n \"node\": true\n },\n \"extends\": \"eslint:recommended\", // 拓展规则\n \"globals\": { // 执行代码时脚本需要访问额外全局变量\n \"Atomics\": \"readonly\",\n \"SharedArrayBuffer\": \"readonly\"\n },\n \"parserOptions\": { // 用于指定想要支持的JS语言\n \"ecmaVersion\": 2018,\n \"sourceType\": \"module\"\n },\n \"rules\": { // 开启某些规则，设置规则登记\n }\n};\n```\n\n**❣️注意，有时候也要写另一个文件.eslintignore，用于告诉ESLint忽略某些文件或者目录**\n\n\n---\n\n\n> "
},
{
"path": "docs/blog/12.前端代码质量/6.如何写一个不错的代码.md",
"content": "---\ntitle: 6.如何写一个不错的代码\ndate: 2020-01-30 00:00:00\npermalink: \ntag: \n - blog\n - 12.前端代码质量\n---\n\n> 注意：此文章位置未来可能会变化，因为未来 8.4前端代码质量 可能会进行合并重组\n\n> 在我的认知了，好的代码不在于用了多么高级的算法，多么深奥的设计模式\n\n> 而是在于 方便清晰的去写代码，并在此过程中逐渐优化“套路”，也是为了更好的拓展和维护（因为自己代码如何瞎写的话，回过头维护是看不懂的）\n\n> 目前总结的是\n\n---\n\n## 第一部分：代码书写技巧\n\n### 1.命名\n\n> 我这块命名不说啥，我想说一下 函数的后缀命名法，规则就是，将函数分为不同性质，加上后缀，以后非常的好找和区分\n\n> 正常流程函数：正常流程的函数，没法解释，除了下面几种之外的函数吧 | Fn\n\n> 事件触发函数：因为事件触发调用的函数 | Event\n\n> 接口类函数：请求数据接口的（可能有时候会调用工具类函数来洗一遍） | Api\n\n> 工具类函数：处理一些非核心逻辑的处理函数 | Tool\n\n```js\n// 初始化代码\nfunction initFn() {\n initStateFn()\n\n}\n// 初始化状态\nfunction initStateFn() {\n let name = '朱昆鹏';\n}\n\n// 点击事件\nfunction clickButtonEvent() {\n console.log('点击按钮获取女朋友')\n}\n\n// 请求女朋友 接口\nfunction getGirlFriendApi() {\n console.log('请求上帝赐个女朋友')\n}\n\n// 数据处理函数 \nfunction dataHandleTool() {\n console.log('上帝没有给你女朋友，你在处理函数里面自己加一个吧...')\n}\n```\n\n---\n\n### 2.注释\n\n关键变量要注释是干什么的，函数要解释这个函数是干什么用的，别吝啬注释\n\n---\n\n### 3.函数\n"
},
{
"path": "docs/blog/13. 前端安全/1.前端安全绪论.md",
"content": "---\ntitle: 1.前端安全绪论\ndate: 2020-01-30 00:00:00\npermalink: \ntag: \n - blog\n - 13. 前端安全\n---\n\n> 等待书写中..."
},
{
"path": "docs/blog/13. 前端安全/2.前端基本防护.md",
"content": "---\ntitle: 2.前端基本防护\ndate: 2020-01-30 00:00:00\npermalink: \ntag: \n - blog\n - 13. 前端安全\n---\n\n> web安全很重要，因为浏览器能做的事情越来越多了，而传统的攻击手段因为经过了很长的时间，所以黑客们也就越来越难攻克，但是黑客如果可以通过网站，攻克你的浏览器，也就能获取到你的root权限，然后控制你的整个电脑，所以web安全很重要，我这里讲到是比较浅的网站级别防护\n\n## 🍏第一种：SQL注入\n\n### 1.SQL注入基础防护\n\n在服务端进行防范的，很多服务器的框架都已经防范的很好了\n\n例如前端可以向后端提交表单数据，这个非常的常见，但是如果用户恶意的在表单中填写sql代码，例如\n\n```js\n\n';select * from 某某表'\n\n后台一般都是拼接字符串，进行数据库的执行，遇到上面的这个，代码一拼接，遇到 ';' ，就会执行后面的，这就很危险了，也就是说用户可以恶意的删除你的数据库\n\n现在一般的框架都有转义的功能，将敏感的语句进行转义，防止对服务器进行伤害，这个问题一般都不算是大的问题了，服务器都会进行防护的\n\n```\n\n---\n\n## 🍐第二种：XSS\n\n**如果了解前端和后端是如何做的，你就能很清晰的看到XSS的产生原因了**\n\n### 1.XSS简介\n\nXSS（跨站脚本攻击 Cross-Site Script）是一种通过往网页里注入恶意脚本代码，然后用户访问到网页，肯定也就把恶意脚本代码下载下来了，这时候黑客通过恶意脚本，获取和控制用户的信息\n\n根据上面的意思，我们可以感觉到 XSS 是一种注入性攻击手段，而根据注入的不同，我们可以细分为 三种，分别是\n\n- 反射型（非持久性型）XSS\n- 存储型（持久型）XSS\n- DOM-Based型 XSS\n\n---\n\n### 2.反射性（非持久型）XSS\n\n诱导用户点击恶意链接来造成一次性攻击（原理是在链接上执行JS代码）\n\n```js\n// 示例\nhttps://xxx.xxx/\n```\n\n**❣️ 产生原因： 服务器直接获取请求参数，并直接使用，这个是导致产生这个的主要原因，和SQL注入很类似**\n\n**🔥 防范：对敏感词汇进行转义**\n\n---\n\n### 3.存储型（持久型）XSS\n\n将恶意代码存储到漏洞服务器中，用户浏览相关页面时候就会被攻击（恶意代码执行）\n\n经常发生在评论这种场景下\n\n```js\n// 例如注入 console.log(document.cookie)\n```\n\n**❣️ 产生原因：还是服务器端没有处理用户提交的信息，就直接使用，导致产生了问题**\n\n**🔥 防范：对用户提交的内容，敏感部分进行转义**\n\n---\n\n### 4.DOM-Based型 XSS\n\n基于浏览器 DOM解析的 攻击方式（不需要后端参与）\n\n常见的触发场景：需要 innerHtml ,outHtml, document.write 改变的时候，可能会受到 DOM-Based型 XSS 攻击\n\n一般可以查看JS代码，看看有没有使用 innerHTML 等等方法，来看是否可以进行攻击\n\n```js\n\n// 一种攻击代码: 借助 img标签，不写 src 报错的机制，执行 onerror 事件中的代码，从而发动XSS攻击\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/2.notes/8.0%E7%BD%91%E7%BB%9C/1.%E5%89%8D%E7%AB%AF%E7%BD%91%E7%BB%9C%E5%9F%BA%E7%A1%80/2.jpg\")
\n\n---\n\n### 2.路由器（实现分组交换的关键构件）\n\n::: tip\n分组交换则采用了 **存储转发技术**，通常我们把要发送的整块数据成为一个报文，而分组交换技术 就是把一个报文划分为几个分组后再进行发送。\n:::\n\n把较长的报文划分为一个个更小的等长数据段，并且在每一个数据段的前面，加上一些由必要的控制信息组成的首部（Header）之后，就构成了一个分组（分组又称之为包，不知道大家听没听过抓包）\n\n分组是互联网中传送的数据单元，分组的首部是非常重要的，正是由于分组的首部包含了诸如目的地址和源地址等重要控制信息，每一个分组才能在互联网中独立的进行传输路径，并正确的交付到分组传输的终点。\n\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/2.notes/8.0%E7%BD%91%E7%BB%9C/1.%E5%89%8D%E7%AB%AF%E7%BD%91%E7%BB%9C%E5%9F%BA%E7%A1%80/3.jpg\")
\n\n---\n\n::: tip\n路由器是一种专用计算器（不叫主机），是实现分组交换的关键构件，其任务是 转发收到的分组。\n:::\n\n主机是为用户进行信息处理的，路由器是用来转发分组的\n\n路由器收到一个分组，会暂时存储一下，检查其首部，查找转发表，按照首部中的目的地址，找到合适的接口转发出去，把分组交给下一个路由器\n\n这样一步一步的（可能会经过十几个路由器）以存储转发的方式，把分组交付给最终的目的主机\n\n各路由器之间必须经常交换彼此掌握的路由信息，以便创建和动态维护路由器中的转发表，使得转发表能够在整个网络拓扑发生改变的时候，及时更新\n\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/2.notes/8.0%E7%BD%91%E7%BB%9C/1.%E5%89%8D%E7%AB%AF%E7%BD%91%E7%BB%9C%E5%9F%BA%E7%A1%80/4.jpg\")
\n\n---\n\n### 3.计算机网络体系结构\n\n::: tip\n主要有三种划分方式，分别是 OSI的七层协议（国际标准），TCP/IP四层协议，五层协议（广泛使用）\n\n而我也主要是以五层协议为根本，接下里的内容也是以五层协议模型为核心书写的\n:::\n\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/2.notes/8.0%E7%BD%91%E7%BB%9C/1.%E5%89%8D%E7%AB%AF%E7%BD%91%E7%BB%9C%E5%9F%BA%E7%A1%80/5.jpg\")
\n\n---\n\n::: tip\n应用层 的任务是 通过应用进程间的交互来完成特定网络应用（没太懂）\n:::\n\n应用层协议定义的是 应用进程间通信和交互的规则（这里进程就是指正在运行的程序）\n\n对于不同的应用程序需要有不同的应用层协议，例如域名系统DNS，万维网应用 HTTP协议，电子邮件 SMTP协议等等\n\n我们把应用层交互的数据单元称为报文\n\n---\n\n::: tip\n传输层 的任务是 负责向两台主机中进程之间的通信 提供通用的数据传输服务\n:::\n\n传输层主要使用两种协议\n\n- **传输控制协议 TCP**，提供面向连接的，可靠的数据传输服务，数据传输单位是报文段\n- **用户数据报协议 UDP**，提供无连接的，尽最大努力的数据传输服务（不保证数据传输的可靠性），数据传输单位是用户数据报\n\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/2.notes/8.0%E7%BD%91%E7%BB%9C/1.%E5%89%8D%E7%AB%AF%E7%BD%91%E7%BB%9C%E5%9F%BA%E7%A1%80/7.jpg\")
\n\n---\n\n::: tip\n网络层 的任务是 为分组交换网上的不同主机提供通信服务\n:::\n\n在发送数据的时候，网络层把传输层产生的报文段（或用户数据报）封装成分组或包的形式传送\n\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/2.notes/8.0%E7%BD%91%E7%BB%9C/1.%E5%89%8D%E7%AB%AF%E7%BD%91%E7%BB%9C%E5%9F%BA%E7%A1%80/6.jpg\")
\n\n---\n\n> 数据链路层，物理层，省略...\n\n---\n\n\n## 🍖第二部分：应用层\n\n> 书写中...\n\n## 🥞第三部分：运输层\n\n> 书写中...\n\n## 🧀第四部分：网络层\n\n> 书写中...\n\n## 📚参考列表（致敬）\n\n- 《计算机网络》（第七版）谢希仁 编著"
},
{
"path": "docs/blog/16.网络/2.前端网络应用.md",
"content": "---\ntitle: 2.前端网络应用\ndate: 2020-01-30 00:00:00\npermalink: \ntag: \n - blog\n - 16.网络\n---\n\n> 此处结构混乱，内容不全，完善中...\n\n## 🥔第一部分：HTTP协议\n\n> 之前总是听一些名词，http，tcp/ip，*层网络模型，报头，报文，三次握手，五次挥手，HTTPS...等等名词，这些到底是什么，有什么关系，我要搞懂\n\n### 1.网络模型\n\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/2.notes/8.0%E7%BD%91%E7%BB%9C/1.%E5%89%8D%E7%AB%AF%E7%BD%91%E7%BB%9C%E5%9F%BA%E7%A1%80/1.%E4%BA%94%E5%B1%82%E6%A8%A1%E5%9E%8B.png\")
\n\n- 应用层（HTTP,FTP）：为应用软件提供了很多服务，\n- 传输层（TCP/IP，UDP）：向用户提供可靠的端到端服务（如何分包数据，如何拼装等等）\n- 网络层：数据在节点之间传输创建逻辑链路（听不懂啥意思，举个例子，我要是访问百度，这一层就规定了，我应该怎么去找，这个逻辑关系就是网络层帮我们去创建的）\n- 数据链路层：在通信实体之间建立数据链路连接\n- 物理层：定义物理设备如何传输设备（电脑硬件，网卡端口，网线...）\n\n### 2.HTTP发展历史\n\n- HTTP/0.9：只有一个命令GET，没有header等描述数据的信息，服务器发送完毕，就关闭TCP连接\n- HTTP/1.0：增加了很多命令（POST...等等），增加了 status code（状态码） 和 header（请求头，或者返回头，返回体的数据），还增加了多字符集支持，多部分内容发送，权限，缓存等\n- HTTP/1.1：支持持久连接（TCP不立刻关闭 keep-live），pipeline（在一个链接里面发送多个请求），增加host和其他一些命令\n- HTTP/2.0：所有数据以二进制进行传输，并行效率更高，增加头信息压缩以及主动推送\n\n---\n\n### 3.HTTP的三次握手\n\n> HTTP只有请求和响应，不存在连接这个概念 TPC的连接进行的（请求和响应都是数据包，他们之间传输需要一个通道 TCP）\n\n**HTTP创建之前TCP链接会有三次握手（为什么要有三次握手呢？为了防止无用的链接）**\n\n- 客户端会发送一个数据包（SYN=1,Seq=X）给服务器端\n- 服务器端收到这个数据包，就会开启一个TCP的端口，并返回给客户端一个数据包（SYN=1,ACK=X+1,Seq=Y），表示服务器端允许你创建链接了\n- 客户端收到服务器端的数据包，然后返回数据包 (ACK=Y+1,Seq=Z)，表示我也收到了，可以发给我数据了（这时候才发送数据）\n\n**HTTP关闭之前 TCP链接会有一个四次挥手的过程**\n\n由于Tcp连接是进行全双工工作的，因此每个方向都必须单独进行关闭，这个原则是当一方完成他的数据发送的时候就发送一个FIN来终止这个方向的连接，收到这个FIN意味着这个方向上没有数据的流动，一个TCP连接在收到这个FIN之后还能发送消息，首先执行关闭的一方进行主动的关闭，而另一方进行被动的关闭\n\n- TCP发送一个FIN，用来关闭客户到服务端的连接\n- 服务端收到这个FIN，他发回一个ACK，确认收到序号为收到序号+1，和SYN一样，一个FIN将占用一个序号\n- 服务端发送一个FIN到客户端，服务端关闭客户端的连接\n- 客户端发送ACK报文确认，并将确认的序号+1，这样关闭完成\n\n---\n\n\n### 🔥4.HTT协议详解\n\n**请求报文（请求行，请求头，请求体）**\n\n- 起始行（General）：GET 资源 HTTP/1.1\n - Request URL：请求地址\n - Request Method：请求类型（GET,POST...）\n - Status Code：请求状态（状态码）\n - Referrer Policy：\n - ...\n- 请求头（请求报文）\n - Accept：我这个浏览器能够接收什么资源\n - Accept-Encoding: 浏览器接受数据的格式是什么？可以设置支不支持gzip格式（压缩格式）等\n - Accept-Language：接收的语言\n - Coche-Control：缓存相关\n - 🔥Connetion：keep-alive（http的一种 连接模式，最常用的是长连接 keep-alive）\n - 短连接：每一次http的请求和响应，都会反复建立和断开TCP连接，占用服务器IO操作\n - 长连接：建立一个TCP链接，然后进行多次HTTP通信\n - Cookie：\n - Host：访问的网站\n - User-Agent：包含浏览器的一些信息，电脑系统等，就是浏览器向服务器介绍自己的一个（做爬虫的时候能用到，因为反爬虫的一个就是判断你是不是浏览器）\n - ...\n\n---\n\n**响应报文（响应行，响应头，响应体）**\n\n- 响应行\n- 响应头（响应报文）\n - Coche-Control：缓存相关\n - Connetion：keep-alive（返回形式是长连接）\n - Content-Encoding: gzip（返回的格式）\n - Content-Type: text/html（返回的类型）\n - Date: 缓存相关（时间戳）\n - Expires：缓存相关\n - Sever：服务器（例如 NGINX）\n - ...\n\n\n---\n\n**响应状态码**\n\n- 1xx：指示信息 - 表示请求已接收，继续处理（用到异步处理上，后端常用，前端很少见）\n- 2xx：成功 - 表示请求被成功接收，理解，接受\n- 3xx：重定向 - 要完成请求必须进行更近一步的操作（服务器让你读本地缓存的时候可以用到，服务器端也能能用）\n- 4xx：客户端错误 - 请求有语法错误或请求无法实现\n- 5xx：服务器端发生错误 - 服务器未能实现合法的请求（后端程序出错，网络出错，服务器服务错误）\n\n---\n\n**请求方法**\n\n- GET\n- POST\n- PUT\n- DELETE\n- HEAD\n- TRACE\n- CONNECT\n- OPTIONS: 请求查询服务器性能或者查询与资源相关的选项和需求\n\n---\n\n### 5.CORS跨域请求和限制与解决\n\n一句话点醒了我，让我知道什么是跨域，\n\n当你发送一个 跨域请求的时候，其实服务器已经返回给了你想要的内容，但是，但是，这时候，浏览器会审视返回的数据是否满足同源策略（同端口，同协议，同IP）规则，不满足而且返回的数据有没有设置 \"Access-Control-Allow-Origin\": \"*\"，允许跨域，这时候就会浏览器忽略掉，注意是被浏览器忽略掉。也就是跨步跨域，是浏览器的规则\n\n这也就解释了为什么，img 标签没有跨域，因为这是浏览器的规则，浏览器规定了 img 跨域不准守跨域\n\n---\n\n> 什么是跨域（我个人的观点）\n\n上网访问资源走的是HTTP协议，HTTP协议只有请求和响应，而数据传输是TCP协议，在网页上报的那些跨域，其实并不是后端没发给你，而是浏览器的同源策略规则导致的，其实只要是你请求的数据，服务器端都会给你，浏览器有跨域，是浏览器的规则而已\n\n这也就解释了服务器端为什么没有跨域...因为跨域是浏览器的限制规则\n还有为什么 img script link等标签能跨域...因为还是浏览器的规则，反正数据都拿到了，能不能显示，报不报跨域，还是浏览器说的算\n\n---\n\n**JSONP实现跨域（浏览器允许，link，img，srcipt标签 允许跨域）**\n\n---\n\n### 6.CORS跨域限制以及预请求验证\n\n---\n\n### 7.HTTP长连接\n\n所谓的长连接就是，HTTP请求和响应，是建立在TCP连接之上的（TCP是桥梁），在一个HTTP完成之后，如果不想断开 TCP 连接，还想接着用 HTTP ，那么就需要使用长连接，返回头中具有 Connection: keep-alive\n\n为了提高性能，我们需要并发HTTP连接\n\n---\n\n### 8.数据协商\n\n> 规定客户端发送什么格式的数据，服务器端返回什么格式的数据\n\n**客户端请求的时候**\n\n- Accept：我想要是数据格式\n- Accept-Encoding：我想要的编码方式（使用哪种数据压缩）\n- Accept-Language：展示的语言\n- User-Agent：表示浏览器的一些信息（根据这个我们就能返回移动端的网页，或者PC端的网页）\n\n**服务器端返回的时候**\n\n- Content-Type：\n- Content-Encoding：\n- Content-Language：\n\n\n---\n\n### 9.URI-URL和URN\n\n**URI：统一资源标识符（找资源的一种规则）**\n\n用来唯一标识互联网上的信息资源，包括URL和URN\n\n**URL：统一资源定位器**\n\n格式：http[s]://user:pass@host.com:80/path?query=string#hash\n\n**URN：永久统一资源定位符**\n\n在资源移动之后还能被找到，目前还没有非常成熟的使用方案\n\n\n---\n\n### 10.从输入网址到展示页面，这里面经历了什么？\n\n- 用户输入网址 按下回车\n- 浏览器第一件事：先看网络通不通（再深一层就是路由器，网关）（浏览器如何判断网络通不通）\n- 网络通的话，浏览器操作 计算机底层发送网络请求的API，向DNS发送解析（因为浏览器不认识域名）\n- DNS服务器给浏览器返回了 IP地址，浏览器继续 通过这个IP地址继续发送（因为浏览器和目标地址之间，不可能一条线通着的，中间还有很多透明设备（对于用户是不可见的），网关，路由器等等），经过一些列的转发之后，到达目的地（唯一的服务器）\n- 服务器接收到请求之后，经过一些处理，把响应结果返回（字符串）\n- 返回过程也经过一些路由，最终返回到 用户浏览器中\n\n**猫 和 路由器**，猫：是和 各个通信商之间的一条链路，路由器：路铺好了，路由器就是告诉怎么走的，就是告诉 DNS服务器\n\n---\n\n### 11.Redirect\n\n你要请求的资源换地方了，如果资源搬到别的地方了，如果之前的链接还在用的话，直接访问会报 404，为了防止这个，可以设置Redirect（状态码报302 临时跳转）\n\n---\n\n### 12.CSP（内容安全策略）\n\n> 内容安全策略（CSP）用于检测和减轻用于 Web 站点的特定类型的攻击，例如 XSS 和数据注入等。该安全策略的实现基于一个称作 Content-Security-Policy 的 HTTP 首部。\n\n- 限制资源获取\n- 报告资源获取越权\n- default-src 限制全局\n- 制定资源类型\n- 例如设置返回头：\"Content-Security-Policy\": \"default-src http: https:\" 就可以使网站不能加载内嵌式脚本，只能加载外部脚本链接，防止了XSS攻击\n- \"Content-Security-Policy\": \"default-src \\'self'\\\" 限制只能加载自己网址下的 外部脚本连接，当然还有其他的设置\n- 如果发现了非法请求的话，怎么提醒我们呢：\"Content-Security-Policy\": \"default-src \\'self'\\; report-url /接口\" 如果触发了这个策略，就会调用 /接口，这时候监听这个接口就行\n- 更多去MDN上看吧\n\n---\n\n## 🥝第二部分：缓存\n\n> 缓存机制：浏览器 ---》 无缓存 ---》请求服务器 ---》请求响应，协商缓存\n\n### 缓存头Cache-Control的含义和使用\n\n- 其他\n - no-store\n - no-transform\n\n---\n\n\n\n\n---\n\n### 缓存验证Last-Modified && Etag\n\n**Last-Modified 上次修改时间**\n\n配合 If-Modified-Since 或者 If-Unmodified-Since 使用（对比上次修改时间以验证资源是否需要更新）\n\n**Etag**\n\n数据签名（对hash计算）\n\n配合 If-Match 或者 If-Non-Match 使用\n\n对比资源的签名判断是否使用缓存\n\n\n---\n\n## 🍈第三部分：cookie & session & token\n\ncookie 是 服务器返回内容的时候，通过Set-Cookie 这个属性，设置到浏览器中一个字符串的内容，设置了cookie，下次请求就会自动带上，是键值对的属性，可以设置多个\n\ncookie的属性\n\n- max-age和expires设置过期时间\n- Secure只在https的时候发送\n- HttpOnly 无法通过 document.cookie 访问 cookie\n\n---\n\n**cookies和session**\n\n- cookies 是保存在客户端的小段文本 一般都是服务器端生成返回给客户端浏览器\n- session 保存在服务器端，通过唯一的值sessionID来区分每一个用户，sessionID随每个连接请求发送到服务器，服务器更具sessionID来识别客户端，再通过session 的key值 获取 session 值\n- 因为http是无状态的（这里的状态不是状态码那些东西，而是指的是服务器端不知道某个请求是哪个浏览器发的这类信息）\n\n---\n\n**token**\n\n- 要下发到你的客户端，也要和\n- 验证流程上和session不一样，是一个安全性更高的机制\n\n---\n\n## 🍓第四部分：HTTP2\n\n优势：\n- 信道复用：只建立一个TCP就行（可以并发很多HTTP）\n- 使用二进制格式进行传输（不是传纯文本了，更加高效，紧凑）\n- 对报头压缩，降低开销\n- 多路复用，一个网络连接实现并行请求\n- 服务器主动推送，减少请求的延迟（跟ajax，websocket）\n\n---\n\n## 🍎第五部分：Nginx\n\n### 1.NGINX基础配置\n\n> 纯粹的HTTP服务\n\n- [Centos7.* 下安装NGINX](https://zhukunpenglinyutong.github.io/1.quickcheck/3.%E8%BF%90%E7%BB%B4/1.%E5%90%84%E7%A7%8D%E8%BD%AF%E4%BB%B6%E5%AE%89%E8%A3%85%E9%80%9F%E6%9F%A5.html#%F0%9F%94%A5centos7-%E4%B8%8B%E5%AE%89%E8%A3%85%E8%BD%AF%E4%BB%B6)\n\n\n### 2.NGINX代理配置和代理缓存\n\n---\n\n## 🍇第六部分：Notes网站优化\n\n> 先上来三板斧：gzip + CDN + HTTP2\n\n我的网站访问速度，一度的飙升到1分半，这对于一个速查网站来说是致命的\n\n经过我的分析，我发现是我的文件数量太多（130个左右），导致触及到了并发的最大数（谷歌浏览器只能并发6个TCP连接），于是我调整NGINX配置，使其变成 HTTP2 协议\n\n呦，速度变成了1分钟，不错，咦不对，一分钟还是很慢，我接着分析返回的面板发现，并发数解决了，但是返回的网速依旧很慢，于是我查看服务器，发现我的服务器是 1MB/s ，哦，原来是网速限制了网站的速度呀，于是我准备替换成 CDN 静态加速\n\n配置完成CDN + HTTP2，可以了，3s之内访问正常，先这样凑活用吧\n\n\n---\n\n## 📚参考列表（致敬）\n\n- 《图解HTTP协议》\n- [慕课网课程...HTTP协议原理+实践Web开发工程师必学](https://coding.imooc.com/learn/list/225.html)\n- [腾讯课堂...前端全栈工程师精英班，个人强烈推荐...](https://ke.qq.com/course/220822)\n- [腾讯课堂...前端next学位课程](https://ke.qq.com/course/233919)\n- [HTTP报文分析](https://blog.csdn.net/qq_26565861/article/details/80969960)"
},
{
"path": "docs/blog/17.项目/1.Node项目仿知乎API.md",
"content": "---\ntitle: 1.前端代码质量绪论\ndate: 2020-01-30 00:00:00\npermalink: \ntag: \n - blog\n - 17.项目\n---\n\n# 1.Node项目仿知乎API.md\n\n> 注意此处：此处内容需要重新梳理\n\n---\n\n## 🔥序章\n\n**本项目采用 Koa2 + mongoose 作为基础，采用JWT做鉴权（Token），是我熟悉Koa2 + MongoDB开发的入门项目**\n\n- 收获一：抽离出一个 Koa + mongoose 的MVC简单项目 [项目地址](https://github.com/zhukunpenglinyutong/Koa-api-template)\n- 收获二：加深了 RESTful API 的规范认知，见下面的笔记\n\n---\n\n## 🌴第一章：认识RESTful API\n\n---\n\n### 1.REST是什么以及它的6个限制\n\n- **什么是REST**：REST是一种架构风格，用来创建网络服务\n- **为何叫REST**：英语全称是 Representational State Transfer\n - Representational：数据表示形式，可以用很多种，一般用JSON\n - State：当前状态或者数据\n - Transfer：数据传输\n\n**通过字面意思来看是不好理解的，或者说不全面的，但是我们可以通过REST的六个限制来更深刻的认识REST**\n\n- 客户-服务器（Clent-Server）（这个解释非常的好🔥）\n - 关注点分离（服务端关注数据存储，提升了简单性；前端专注用户界面，提高了可移植性）\n - 简单性解释：过去服务端端还需要渲染页面，现在只需要写好数据存储就好了\n - 可移植性解释：调用接口，渲染平台的能力，很多平台都支持这种操作\n- 无状态（Stateless）\n - 所有用户会话信息都保存在客户端\n - 每次去请求必须包括所有信息，不能依赖上下文信息（例如小说翻页，你想请求下一页，服务器不知道下一页是啥，需要你确定的请求第几页才行）\n - 🔥无状态的好处：服务端不用保存会话信息，提升了简单性，可靠性，可见性\n- 缓存（Cache）\n - 所有服务端响应都要标记可缓存或者不可缓存\n - 缓存的好处：减少前后端交互，提升了性能\n- 统一接口（Uniform Interface）🔥\n - 接口设计尽可能统一通用，提升了简单性，可见性\n - 接口与实现解耦，使前后端可以独立开发迭代（接口定好之后，前端可以自己mock数据，不用等后端开发完成）\n- 分层系统（Layered System）\n - 每层只知道相邻的一层，后面隐藏的就不知道了\n - 客户端不知道是在和代理还是真正的服务器通信\n - 其他层：安全层，负载均衡层，缓存层等（阿里巴巴有个机构专门做这种层的，不用关系业务逻辑）\n- 按需代码（Code-On-Demand可选）（不是很重要）\n - 客户端可以下载运行服务端传过来代码（例如JS）\n - 减少一些功能，简化客户端\n\n---\n\n### 2.统一接口限制（接口需要统一成什么样子？）\n\n- 资源的标识\n - 资源是任何可以命名的的事物，比如用户，评论等\n - 每个资源通过URL被统一的标识（例如：https://api.github.com/users）\n- 通过表述来操作资源（这个我懂，我就是这样用的）\n - 客户端不能直接操作（比如SQL）服务端资源\n - 客户端应该通过表述（比如JSON）来操作资源\n- 自描述信息\n - 每个消息（请求或者响应）必须踢狗足够的信息让接受者理解\n - 例如：你可以需要传媒体类型（application/json,application/xml）\n - 例如：你需要规定请求类型：GET,POST,DELETE\n - 例如：响应是否被缓存：Cache-Control\n- 超媒体作为应用状态引擎（没懂）\n - ...\n\n后记：GitHub api 有 v3，也就是 REST API,还有 v4 GraphQL api 学完v3可以看下v4\n\n---\n\n### 3.RESTful API简介\n\n- 字面解释是：符合REST架构风格的API\n- RESTful API 具体长什么样子呢？\n - 基本的URL，例如:https//api.github.com/users\n - 标准HTTP方法，例如 GET,POST,PUT,PATCH,DELETE\n - 传输的数据媒体类型，如JSON，XML\n- 现实举例\n - GET /users | 获取user列表\n - GET /users/12 | 查看某个具体的user\n - POST /users | 创建一个user\n - PUT /users/12 | 更新user为12的用户\n - DELETE /users/12 | 删除user为12的用户\n\n---\n\n### 4.RESTful API设计最佳实践（规范化，对我很重要）🔥\n\n- 请求设计规范 ✅\n - URL要使用名词，尽量用复数，如 /users\n - URL使用嵌套表示关联关系，如 /users/12/repos/5\n - 使用正确的HTTP方法，如 GET/POST/PUT/DELETE\n - 不符合增删改查的情况下：POST/...\n- 响应设计规范 ✅\n - 查询（每一个返回值都是可以被查询的，也就是我们加上返回条件，就能筛选我们想要的结果）\n - 分页\n - 字段过滤（完整的字段假如有十个，这个可以规定我想要的字段）\n - 状态码\n - 错误处理（如果错了，要规范化的返回错误信息）\n- 安全（这个也是有收获的）✅\n - 使用HTTPS（使用HTTP容易被篡改，加上一些广告什么的，很烦）\n - 鉴权（需要登录才能请求某些接口）\n - 限流（防止某些坏人刻意占用接口）\n- 开发者优化\n - 文档\n - 超媒体\n\n---\n\n## 🌳第二章：用Koa 说 Hello World\n\n### 1.Koa简介\n\n- 一句话简介：基于Node.js的下一代web框架\n - 基于Node.js：说明koa是一个Node.js模块\n - 下一代：蚕食第一代Express市场\n - web框架：不是命令行工具，不是算法\n- 官网详细介绍\n - 由Experss幕后人原班人马打造\n - Web应用和API开发领域\n - 更小，更富有表现力，更健壮\n - 利用async函数，丢弃回调函数\n - 增强错误处理：try catch\n - 没有捆绑任何中间件\n - 快速而愉快的编写程序（画的一个大饼）\n\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/2.note/5.%E5%85%B6%E4%BB%96%E9%9B%B6%E6%95%A3%E7%AC%94%E8%AE%B0/%E6%85%95%E8%AF%BE%E7%BD%91%E8%AF%BE%E7%A8%8BRESTful%20API/1.png\")
\n\n---\n\n### 2.安装搭建第一个Koa程序\n\n- 初始化目录：npm i koa --save\n- 使用：建立 app.js，让koa返回一个 hello world\n\n```js\nconst Koa = require('koa');\nconst app = new Koa();\n\n//use() 方法里面可以传递函数，这个函数就是我们说的中间件\napp.use( ctx => {\n ctx.body = \"Hello World\";\n});\n\napp.listen(3000)\n```\n\n---\n\n### 3.Koa中间件与洋葱模型\n\n- async/await 示例（当一个请求依赖上个请求完成的情况下，需要用嵌套，这个非常的不优雅）\n\n```js\n// 这个可是解决了我不能在任何地方用 async 的方法\n(async () => {\n const res1 = await fetch('...') // 嵌套一\n const res2 = await fetch('...') // 嵌套二\n})\n```\n\n- **学习编写Koa中间件**\n\n```js\nconst Koa = require('koa');\nconst app = new Koa();\n\n//use() 方法里面可以传递函数，这个函数就是我们说的中间件,这是一个中间件，执行多个中间件，必须要写 next 参数 🔥🔥🔥\napp.use( async (ctx, next) => {\n await next();\n ctx.body = \"Hello World\";\n});\n\napp.use( ctx => {\n console.log('我也是中间件，我要先执行')\n});\n\napp.listen(3000)\n\n```\n\n**洋葱模型**\n\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/2.note/5.%E5%85%B6%E4%BB%96%E9%9B%B6%E6%95%A3%E7%AC%94%E8%AE%B0/%E6%85%95%E8%AF%BE%E7%BD%91%E8%AF%BE%E7%A8%8BRESTful%20API/2.png\")
\n\n---\n\n## 🎄第三章：Koa 和 RESTful API 的最佳实践\n\n### 1.路由简介\n\n- 路由决定了不同的URL是如何被 不同执行的\n- 在Koa中，路由的本质是一个中间件\n- 思考，如果没有路由会怎么样？请求和响应都没法 差异化，请求和返回的结果都一样，就跟上面我们返回的 Hello World一样，这.....是不行的\n- 路由存在的意义：处理不同的URL，处理不同的http请求，解析URL上的参数\n\n---\n\n### 2.自己编写Koa路由中间件\n\n- 目标实现功能：处理不同的URL，处理不同的http方法，解析URL上的参数\n\n```js\nconst Koa = require('koa');\nconst app = new Koa();\n\n//use() 方法里面可以传递函数，这个函数就是我们说的中间件,这是一个中间件，执行多个中间件，必须要写 next 参数\napp.use( ctx => {\n // ① 处理不同的URL：ctx.url 表示上下文的URL，ctx表示上下文\n // ② 处理不同的http方法：ctx.method\n // ③ 解析URL上的参数 \n ctx.body = `路径：${ctx.url}，请求类型：${ctx.method}, 参数：${getURLParameters(ctx.url)}`\n \n});\n\n// 获取url中的参数\nfunction getURLParameters(url) {\n const params = url.match(/([^?=&]+)(=([^&]*))/g)\n return params?params.reduce(\n (a, v) => (a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1), a), {}\n ):[]\n}\n\napp.listen(3000)\n```\n\n---\n\n### 3.使用Koa-router实现路由\n\n- 安装：npm i koa-router --save\n\n**基本使用**\n\n```js\nconst Koa = require('koa');\nconst app = new Koa();\nconst Router = require('koa-router');\nconst router = new Router;\n\n// 注册路由\nrouter.get('/', ctx => {\n ctx.body = '这是首页'\n})\n\n// 解析URL参数\nrouter.get('/user/:id', ctx => {\n ctx.body = `这是用户${ctx.params.id}`\n})\n\n// 注册router中间件（要用router中的routes()方法）\napp.use(router.routes())\n\napp.listen(3000)\n```\n\n**路由前缀和多中间件使用（这里使用不规范，整理以后比较规范的结构）**\n\n---\n\n### 4.HTTP options 方法的用（额，对我目前没太大用，就是增加些知识广度）\n\n- 🔥options 是HTTP请求类型中的一种（GET,POST......）\n- 这是一道常考面试题，还可以帮助理解 koa-router 的 allowedMethods 的作用\n- **🔥options 作用**\n - 检测服务器所支持的请求方法\n - CORS中的预见请求\n- **allowedMethods 作用**\n - 响应 options 方法，告诉所支持的请求方法\n - 相应的返回 405（不允许）和 501（没实现）\n\n---\n\n### 🔥5.增删改查应该返回什么响应？\n\n**这里听说是最佳实践，但是我观点是，我再看看，选择适合自己的**\n\n```js\nconst Koa = require('koa');\nconst app = new Koa();\nconst Router = require('koa-router');\nconst router = new Router;\n\n// 增\nrouter.post('/', ctx => {\n ctx.body = [{}] // 返回新建的数据\n})\n\n// 删\nrouter.delete('/user', ctx => {\n ctx.status = 204 // 返回状态码 204，表示没有内容，但是成功了\n})\n\n// 改\nrouter.put('/user', ctx => {\n ctx.body = [{}] // 返回修改后的数据\n})\n\n// 查\nrouter.get('/user', ctx => {\n ctx.body = [{},{},{}] // 返回数据列表\n})\n\n\n// 注册router中间件（要用router中的routes()方法）\napp.use(router.routes())\napp.listen(3000)\n```\n\n---\n\n## 🌵第四章：koa框架的控制器以及设计更合理的目录结构\n\n### 1.控制器简介\n\n- 什么是控制器？拿到路由分配的任务，并执行\n- 在Koa中，控制器是一个中间节\n- 为什么要用控制器\n - 获取http请求参数\n - 处理业务逻辑（获取数据，处理数据，存储数据...）\n - 根据情况发送http响应\n- 获取http请求参数\n - （查询字符串）Query String，例如 ?q=keyword\n - （路由参数）Router Params，如 /users/:id （这个一般是必选的，而且可能有多个路由参数，我们公司也差不多是这样的）\n - 🔥（请求体）Body，如 { name: '朱昆鹏' }（一般用json）（From也是很常用的请求体）\n - （请求头）Header，如 Accept,Cookie\n\n---\n\n**🔥编写控制器最佳实践**\n\n- 每个资源的控制器放到不同的文件夹下\n- 尽量使用类+类方法的形式编写控制器（我是一个接口就是一个函数，他这个的思想是，写成一个类，然后我的这些接口都是类方法，这样这些接口可以使用类的公共内容）\n- 严谨的错误处理\n\n---\n\n### 2.获取http请求参数\n\n- 请求参数有：获取 query,获取 router params，获取 body, 获取 header\n- 通过断点调试，我发现 ctx 这个上下文上挂载的是我需要好好看看的各种东西，http参数都在这里面写着呢，名字也是通俗易懂\n- 🔥body这是个请求体，但是 koa是没有解析请求体的功能的（ctx上没有解析body的内容，ctx.body 是设置返回的，和这个没关系），需要加一个中间件\n- 安装解析请求体中间件：npm i koa-bodyparser --save\n\n```js\nconst bodyparser = require('koa-bodyparser')\n// ......\napp.use(bodyparser())\n\n// 🔥使用：ctx.request.boay\n```\n\n---\n\n### 3.发送HTTP响应\n\n- 如何发送status，body，header\n\n```js\n// ......\nrouter.get('/user', ctx => {\n ctx.status = 200 // 设置 status\n ctx.body = '...' // 设置 body\n ctx.set('Allow', 'GET,POST') // 设置响应头\n})\n```\n\n---\n\n### 🔥4.更合理的目录结构\n\n- 路由，控制器都放在一个目录里\n\n```js\n// 🇨🇳 routes 文件夹 /users.js文件\nconst Router = require('koa-router');\nconst router = new Router; // new Router({prefix:'user'}) 这样可以设置路由前缀，也是实用的\n\n// 查\nrouter.get('/user', ctx => {\n ctx.body = [{},{},{}] // 一般返回数据列表\n})\n\nmodule.exports = router // 导出\n\n\n// 🇨🇳 写一个 routes/index.j 用来批量注册路由\nconst fs = require('fs')\nmodule.exports = app => {\n fs.readdirSync(__dirname).forEach(file => {\n if (file === 'index.js') {return;}\n const route = require(`./${file}`)\n app.use(route.routes()).use(route.allowedMethods())\n })\n}\n\n// 🇨🇳 app.js 中使用批量注册\nconst routing = require('./app/routes')\nrouting(app)\n\n// 🇨🇳 建立 controllers 文件夹，在里面建立 users.js 🔥🔥🔥（这个定义类和使用类的方式，我喜欢，GET到了，确实比我写的Express正规）\nclass Users {\n // 获取用户列表\n getUsers (ctx) {\n ctx.body = '获取了用户列表'\n }\n}\nmodule.exports = new Users()\n\n// 🇨🇳在路由中使用\nconst { getUsers } = require('../controller/users') // 这是ES6语法，更简单\n// 获取所有列表\nrouter.get('/users', getUsers)\nmodule.exports = router // 导出\n```\n\n---\n\n## 🌱第五章：多种方案实现错误处理机制\n\n### 1.错误处理简介\n\n- 什么是错误处理？错误处理是编程语言或计算机硬件中的一种机制，用于处理软件或信息系统中出现的异常状况\n- 异常状况有哪些？\n - 运行时错误：都返回500（代表服务器内部错误）\n - 逻辑错误：找不多（404），先决条件失败（412），无法处理的\n- 为什么要用错误处理？\n - 防止程序挂掉\n - 告诉用户错误信息\n\n---\n\n### 2.koa自带的错误处理\n\n- 如果请求的接口不存在的话，就会返回 404\n- 如果服务器内部语法错误，或者其他错误，就会返回 500\n\n```js\n// 手动抛出\nctx.throw(404, '返回报错文本信息')\n```\n\n**❣️但是这里返回的都是文字，我们想返回JSON，这样才格式统一**\n\n---\n\n### 3.自己编写错误处理中间件\n\n- 写到所有中间件的最前面\n\n```js\n// 原理就是捕捉下一个中间件的报错，然后返回状态码和内容（JSON格式）\napp.use(async (ctx, next) => {\n try {\n await next()\n } catch (err) {\n ctx.status = err.status || err.statusCode\n ctx.body = {\n message: err.message\n }\n }\n})\n```\n\n---\n\n### 4.使用 koa-json-error进行错误处理\n\n- 安装：npm i koa-json-error --save\n\n```js\n// app.js\nconst error = require('koa-json-error')\napp.use(error())\n\n// 堆栈信息都返回了，这里可以配置\n// {\n// \"message\": \"Not Found\",\n// \"name\": \"NotFoundError\",\n// \"stack\": \"NotFoundError: Not Found\\n at Object.throw (/Users/zhukunpeng/Desktop/RESU ful API/node_modules/koa/lib/context.js:97:11)\\n at /Users/zhukunpeng/Desktop/RESU ful API/node_modules/koa-json-error/lib/middleware.js:52:58\\n at processTicksAndRejections (internal/process/task_queues.js:89:5)\",\n// \"status\": 404\n// }\n```\n\n**🔥设置环境变量，让我们在开发时候错误处理返回堆栈信息，生产环境不返回（未完成）**\n\n- 安装：npm i cross-env --save-dev\n\n---\n\n### 5.使用koa-parameter进行参数校验\n\n- 安装：npm i koa-parameter --save\n\n```js\n// app.js\n// 这个通常是校验请求体\nconst parameter = require('koa-parameter')\napp.use(parameter(app)) // 参数校验，加入app的话，就能在全局使用了\n\n// controller/users.js\n\n// 新建用户\nasync createUser(ctx) {\n \n ctx.verifyParams({\n name: {type: 'string'}\n })\n const { name } = ctx.request.body\n const user = await new User(ctx.request.body).save()\n ctx.body = user\n}\n\n```\n\n**如果错了的话**\n\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/2.note/5.%E5%85%B6%E4%BB%96%E9%9B%B6%E6%95%A3%E7%AC%94%E8%AE%B0/%E6%85%95%E8%AF%BE%E7%BD%91%E8%AF%BE%E7%A8%8BRESTful%20API/10.png\")
\n\n**还有更多的限制条件，例如必选，例如什么类型，这个都可以查阅**\n\n---\n\n## 🌿第六章：koa + MongoDB 实现增删改查\n\n### 1.NoSQL简介\n\n- 不属于关系型数据库的哪一类 被称为 NoSQL\n- NoSQL数据库的分类\n - 列存储（HBase）\n - 🔥文档存储（MongoDB）（所谓文档存储就是按照JSON存储）\n - key-value 存储（Redis）(通常用于缓存和消息通信)\n - ......\n- 为什么要用 NoSQL\n - 简单（没有原子性，一致性，隔离性等复杂规范）（关系型数据库要多个机器协同工作，必须要符合这些规范，这样就增加了很多通信）\n - 便于横向拓展（因为简单，没有规范，所以便于拓展）\n - 适合超大规模的数据存储（还是因为拓展）\n - 很灵活的存储复杂结构的数据\n\n---\n\n### 🔥2.mongoose 连接 MongoDB\n\n- 安装：npm install mongoose --save\n\n```js\n// 引入\nconst mongoose = require('mongoose')\n\n// 使用\nmongoose.connect('mongodb://47.95.0.108:27017/test', {useNewUrlParser: true}, () => {\n console.log('连接成功')\n})\nmongoose.connection.on('error', console.error);\n\n```\n\n---\n\n### 3.设计用户模块的Schema\n\n- 这里的Schema是JSON的，写完之后，我们生成一个 Model\n\n```js\n// 我们在 /app/model/users.js 建立一个model文件夹，在里面建立users.js\nconst mongoose = require('mongoose')\nconst { Schema, model } = mongoose;\n\nconst userSchema = new Schema({\n name: { type: String, required: true }, // 第一个表示是字符串这没啥，第二个意思是必写项,当然还有很多设置，例如 default: ** 这是设置默认值的，当用户没传的时候，这个就生效，更多请看百度\n})\n\nmodule.exports = model('User', userSchema); // 前面User会在MongoDB里面建立一个集合\n```\n\n---\n\n### 🔥4.MongoDB实现用户的增删改查\n\n```js\n// 引入\nconst User = require('../model/users')\n\nclass UsersCtl {\n\n // 查询所有用户（find里面也能传正则哦）\n async findUser(ctx) {\n ctx.body = await User.find()\n\n }\n\n // 根据ID查询特定用户（findById）\n async findById(ctx) {\n const user = await User.findById(ctx.params.id)\n if (!user) { ctx.throw(404, '用户不存在')}\n ctx.body = user\n }\n\n // 新建用户（new + save()）\n async createUser(ctx) {\n const user = await new User(ctx.request.body).save() // 这里有两个细节，一个是需要 new，另一个是需要 .save()\n ctx.body = user\n }\n\n // 修改（findByIdAndUpdate）\n async updateUser(ctx) {\n const user = await User.findByIdAndUpdate(ctx.params.id, ctx.request.body)\n if (!user) { ctx.throw(404, '用户不存在')}\n ctx.body = user // 注意：这里修改的是返回之前的信息\n }\n\n // 删除（findByIdAndRemove）\n async deleteUser(ctx) {\n const user = await User.findByIdAndRemove(ctx.params.id)\n if (!user) { ctx.throw(404, '用户不存在')}\n ctx.status = 204 // RESUful API 规范\n }\n\n}\n\nmodule.exports = new UsersCtl()\n```\n\n\n---\n\n## 🎋第七章：JWT在Koa框架中实现用户的认证与授权\n\n### 1.session简介\n\n- session是一种非常重要，常见的，用户认证与授权\n\n**session工作原理**\n\n- 先登录，然后后端返回一个session id，然后前端再请求非登录的一些信息的时候都需要带上这个，否者报错\n\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/2.note/5.%E5%85%B6%E4%BB%96%E9%9B%B6%E6%95%A3%E7%AC%94%E8%AE%B0/%E6%85%95%E8%AF%BE%E7%BD%91%E8%AF%BE%E7%A8%8BRESTful%20API/3.png\")
\n\n- session的优势\n - 相比 JWT，最大的优势就在于可以主动清除session\n - session保存在服务器端，相对较为安全\n - 结合 cookie 使用，较为灵活，兼容性较好\n- session的劣势\n - cookie + session 在跨域场景下表现并不好\n - 如果是分布式部署，需要做多机共享session机制 🔥\n - 基于cookie的机制很容易被CSRF\n - 查询 session 信息可能会有数据库查询操作\n- session相关概念介绍\n - 主要放到服务器端，相对于安全\n - cookie 主要放到客户端，并不是很安全\n - sessionStronge：仅在当前会话下有效，关闭页面或者浏览器后被清除\n - localstorage：除非被清除，否者永久保存\n\n\n---\n\n### 2.JWT简介\n\n- 什么是JWT？（JSON Web Token 是一个开放标准（RFC 7519））\n- 定义了一种紧凑且独立的方式，可以将各方之间的信息作为JSON对象进行安全传输\n- 该信息可以验证和信任，因为是经过数字签名的\n- JWT的构成：头部（Header）, 有效载荷（Payload）,签名（Signature）\n\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/2.note/5.%E5%85%B6%E4%BB%96%E9%9B%B6%E6%95%A3%E7%AC%94%E8%AE%B0/%E6%85%95%E8%AF%BE%E7%BD%91%E8%AF%BE%E7%A8%8BRESTful%20API/4.png\")
\n\n**有效载荷介绍（这个挺重要的）**\n\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/2.note/5.%E5%85%B6%E4%BB%96%E9%9B%B6%E6%95%A3%E7%AC%94%E8%AE%B0/%E6%85%95%E8%AF%BE%E7%BD%91%E8%AF%BE%E7%A8%8BRESTful%20API/5.png\")
\n\n\n**JWT原理**\n\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/2.note/5.%E5%85%B6%E4%BB%96%E9%9B%B6%E6%95%A3%E7%AC%94%E8%AE%B0/%E6%85%95%E8%AF%BE%E7%BD%91%E8%AF%BE%E7%A8%8BRESTful%20API/6.png\")
\n\n---\n\n### 3. JWT vs session\n\n- 可拓展性\n - session 一般都是存到 redis 这种数据库中，你可以需要做一个中心式的session存储系统才行，否则没办法共享\n - 基于 token 基于 令牌的这种方式是无状态的，我们可以轻松的拓展（听着怎么感觉这个很溜 🔥）\n- 安全性（...讲了四个，有空看下吧）\n- RESTful API（要求是无状态的，这就用JWT）\n- 性能（各有利弊）\n - JWT可能性能不好，因为 session 更小\n - session 毕竟放到客户端的是一段 id，传到服务器端，服务器端还要根据这个id拿真正的 session 数据，也是有性能消耗的\n- 时效性\n - JWT 必须等到过期才更新，不能主动销毁\n - session 可以主动销毁\n\n---\n\n### 4.在 Node.js 中使用 JWT\n\n- 安装：npm i jsonwebtoken\n- 签名：\n- 逆向验证：\n\n```js\nconst jwt = require('jsonwebtoken');\n\n// 签名（参数一，就是传过来的参数，参数二 是秘钥）\ntoken = jwt.sign({name: 'zhu'}, 'test')\n// 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoiemh1IiwiaWF0IjoxNTYxNzI0NTUzfQ.-JVehTSs3neUbRzF__9lTsXEul_rvA5WYNbpx702Eo4'\n\n// 验证（参数一，前端传过来的token，参数二 秘钥）\njwt.verify(token, 'test')\n```\n\n---\n\n### 5.实现用户注册\n\n- 设计用户 Schema\n- 编写保证唯一性的逻辑\n\n```js\n// 设计用户 Schema\nconst userSchema = new Schema({\n // 这个是自动生成的，但是每次都返回不好，所以我们这里给他设置下，让它不返回\n __v: {type: Number, select: false},\n name: { type: String, required: true }, // 第一个表示是字符串这没啥，第二个意思是必写项\n // select 的意思是不返回，这是密码，如果能被请求到，那是不是很恐怖🙀\n password: {type: String, required: true, select: false}\n})\n\n// 新建用户（有个查询用户名是否重复）\nasync createUser(ctx) {\n const { name } = ctx.request.body\n const repeatedUser = await User.findOne({ name }); // 查询是否有这个用户了\n\n if (repeatedUser) ctx.throw(409, '用户已经存在');\n const user = await new User(ctx.request.body).save()\n ctx.body = user\n}\n```\n\n---\n\n### 6.实现登录并获取 Token\n\n- 登录接口的设计（因为它不属于用户增删改查中的一种）\n- 使用 jsonwebtoken 生成 token\n\n```js\n// 登录\nasync login(ctx) {\n // 校验用户名和密码\n const user = await User.findOne(ctx.request.body)\n if (!user) { ctx.throw(401, '用户名或者密码不正确')}\n // 登录正确，生成token\n const { _id, name } = user;\n const token = josnwebtoken.sign({ _id, name }, key, {expiresIn: '1d'}) // 参数一 账号密码，参数二 秘钥，参数三 配置，这里配置的是过期时间 1d 1天\n ctx.body = { token }\n}\n```\n\n---\n\n### 7.自己编写中间件实现用户的认证和授权\n\n---\n\n### 8.用koa-jwt中间件实现用户的认证和授权\n\n- 安装：npm i koa-jwt --save\n\n```js\n// 在路由 /routes/users.js\nconst jwt = require('koa-jwt');\nconst auth = jwt({ secret: 'zhukunpeng'}) // 传入秘钥\n\nrouter.post('/user/:id', auth, checkOwner, findUserId) // 根据ID 查询特定用户 数据\n\n// /controller/users.js\n// 权限校验\nasync checkOwner(ctx, next) {\n if (ctx.params.id !== ctx.state.user._id) {ctx.throw(403, '没有权限查看')}\n await next();\n}\n```\n\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/2.note/5.%E5%85%B6%E4%BB%96%E9%9B%B6%E6%95%A3%E7%AC%94%E8%AE%B0/%E6%85%95%E8%AF%BE%E7%BD%91%E8%AF%BE%E7%A8%8BRESTful%20API/7.png\")
\n\n\n---\n\n## 🐲第八章：上传图片模块\n\n### 1.上传图片需求分析\n\n- 用户头像\n- 封面图片\n- 问题和回答中的图片\n- 话题图片\n\n---\n\n- 基础功能：上传图片，生成图片链接\n- 附加功能：限制上传图片的大小和类型，生成高中低三种分辨率的图片链接，生成CDN\n- 上传图片的技术方案\n - 阿里云OSS等云服务，推荐生成环境下使用\n - 直接上传到服务器，不推荐在生产环境下使用，因为不稳定\n\n---\n\n### 2.使用 koa-body 中间件获取上传的文件\n\n- 之前我们用的是 koa-bodyparser ，但是这个不支持文件，只支持 JSON 和... ，所以我们用 koa-body 这个中间件\n- 安装：npm i koa-body --save\n\n```js\n// app.js && 建立 public/uploads 用来盛放上传文件\nconst bodyBody = require('koa-body')\napp.use(bodyBody({\n multipart: true, // 启用文件传输\n formidable: {\n uploadDir: path.join(__dirname, 'app/public/uploads'), // 文件上传路径\n keepExtensions: true, // 保留拓展名\n }\n})) // 解析 请求body中的 JSON\n\n// 建立 controller/home.js\nclass HomeCtl {\n\n // 上传文件\n upload(ctx) {\n const file = ctx.request.files;\n ctx.body = {\n message: '上传成功'\n } \n }\n}\n\nmodule.exports = new HomeCtl()\n\n// 建立 router/home.js\nconst Router = require('koa-router');\nconst router = new Router; // new Router({prefix:'user'}) 这样可以设置路由前缀，也是实用的\nconst { upload } = require('../controller/home');\n\nrouter.post('/upload', upload)\n\nmodule.exports = router\n\n```\n\n---\n\n### 3.使用 koa-static 中间件生成图片链接\n\n- 安装：npm i koa-static --save\n\n```js\n// app.js\nconst koaStatic = require('koa-static')\napp.use(koaStatic(path.join(__dirname, 'app/public/'))) // 生成上传图片链接，这里还启动了静态服务，直接代理我们设置的文件路径\n\n\n// controller/home.js\nconst path = require('path')\nclass HomeCtl {\n // 上传文件\n upload(ctx) {\n const file = ctx.request.files.file;\n const basename = path.basename(file.path)\n ctx.body = { url: `${ctx.origin}/uploads/${basename}`}\n }\n}\nmodule.exports = new HomeCtl()\n\n```\n\n---\n\n### 4.编写前端页面上传文件\n\n```html\n\n```\n\n**返回结果**\n\n```js\n{\n \"url\": \"http://localhost:3000/uploads/upload_34ca030139713427223a1c8b604b603a.jpg\"\n}\n```\n\n---\n\n## 🍀第九章：个人资料模块\n\n---\n\n### 1.个人资料的 schema 设计\n\n```js\n// module/users.js\nconst mongoose = require('mongoose');\nconst { Schema, model } = mongoose;\n\nconst userSchema = new Schema({\n __v: {type: Number, select: false},\n name: { type: String, required: true }, // 第一个表示是字符串这没啥，第二个意思是必写项\n password: {type: String, required: true, select: false},\n avatar_url: { type: String }, // 头像的URL\n gender: { type: String, enum: ['male', 'famale'], default: 'male' }, // 性别，这里后面 enum 是mongoose的可枚举类型，枚举的值是那两个, 后面的是默认值 male\n handline: { type: String }, // 一句话介绍\n loacations: { type: [{type: String}]}, // 居住地，类型是字符串数组\n employments: { // 职业经历\n type: {\n company: { type: String }, // 公司\n job: { type: String } // 职位\n }\n }\n})\n\nmodule.exports = model('User', userSchema); // 前面User会在MongoDB里面建立一个集合\n\n```\n\n---\n\n### 2.个人资料的参数校验\n\n```js\n// 还是有一些和 mongoose 不一样的地方，这里要注意\nctx.verifyParams({\n name: { type: 'string' },\n avatar_url: { type: 'string', required: false }, // required: false表示非必选\n gender: { type: 'string', required: false },\n handline: { type: 'string', required: false },\n loacations: { type: 'array', itemType: 'string', required: false }, // itemType这是表示数组里面的项是字符串类型，这和mongoose不一样\n employments: { type:'array', itemType: 'object', required: false }\n})\n```\n\n---\n\n### 🔥3.RESTful API 最佳实践 - 字段过滤\n\n- 有哪些字段显示，哪些字段不显示，有种GrhpQL的感觉\n\n```js\n// 通过 select: false 我们可以隐藏一些返回字段\nconst userSchema = new Schema({\n __v: {type: Number, select: false},\n name: { type: String, required: true }, // 第一个表示是字符串这没啥，第二个意思是必写项\n password: {type: String, required: true, select: false},\n avatar_url: { type: String }, // 头像的URL\n gender: { type: String, enum: ['male', 'famale'], default: 'male' }, // 性别，这里后面 enum 是mongoose的可枚举类型，枚举的值是那两个, 后面的是默认值 male\n handline: { type: String, select: false}, // 一句话介绍\n loacations: { type: [{type: String}], select: false}, // 居住地，类型是字符串数组\n employments: { // 职业经历\n type: {\n company: { type: String }, // 公司\n job: { type: String } // 职位\n },\n select: false\n }\n})\n\n// /controller/users.js（主要就是借助mongoose 的 select方法，拼接成 +...+...这种形式）\n\n// 问题就是 现在一个可以，但是两个就不行了\n\n// 查询用户\nasync findUser(ctx) {\n const { fields } = ctx.query; // 这是以分号隔开的\n let selectFidlds = null;\n // 将分号隔开的转为 +...+ 这种形式\n if (fields) selectFidlds = fields.split(';').filter(f => f).map(f => '+' + f).join('');\n ctx.body = await User.find().select(`${selectFidlds}`)\n}\n```\n\n---\n\n## 🌳第十章：关注与粉丝模块\n\n### 1.关注与粉丝的 schema 设计\n\n**功能点**\n\n- 关注，取消关注\n- 获取关注人，粉丝列表（用户-用户 多对多关系）\n\n---\n\n```js\nconst userSchema = new Schema({\n // ......\n following: { // 关注\n type: [ { type: Schema.Types.ObjectId, ref: 'User' } ], // 非常好的一个技巧，但是我不太懂\n select: false\n }\n})\n\n```\n\n\n---\n\n### 2.RESTful API 风格的关注与粉丝接口\n\n```js\n// controller/users.js\n// 获取用户的关注者\nasync listFollowing(ctx) {\n const user = await User.findById(ctx.params.id).select('+following').populate('+following')\n // 获取的关注者是用户的ID，我们正常来说需要遍历这个ID，才能拿到每个关注者的头像和其他信息\n // 但是 model/users.js 里面的结构那么写，让我们可以使用 populate() 这个快捷方法了\n if (!user) {ctx.throw(404, '用户不存在')}\n ctx.body = user.following\n}\n// 用户-关注用户\nasync follow(ctx) {\n const me = await User.findById(ctx.state.user._id).select('+following')\n if (!me.following.map(id => id.toString()).includes(ctx.params.id)) {\n me.following.push(ctx.params.id) // 把数组放到的ID放到里面\n me.save()\n }\n ctx.status = 204\n}\n// 用户-取消关注\nasync unfollow(ctx) {\n const me = await User.findById(ctx.state.user._id).select('+following')\n const index = me.following.map(id => id.toString()).indexOf(ctx.params.id)\n if (index > -1) {\n me.following.splice(index, 1)\n me.save()\n }\n ctx.status = 204\n}\n// 用户-获取粉丝\nasync listFollowers(ctx) {\n const users = await User.find({following: ctx.params.id})\n ctx.body = users\n}\n\n\n// routes/users.js\nrouter.get('/user/:id/following', listFollowing) // 获取某个用户 关注了谁\nrouter.get('/user/:id/followers', listFollowers) // 获取某个用户 关注了谁\nrouter.put('/user/following/:id', auth, follow) // 用户-关注用户\nrouter.delete('/user/following/:id', auth, unfollow) // 用户-取消关注\n```\n\n---\n\n### 3.编写校验用户存在与否的中间件\n\n**在关注，和取消关注之前，校验一下用户存在与否**\n\n```js\n// controller/users.js\n// 检测用户是否存在（中间件）\nasync checkUserExist(ctx, next) {\n const user = await User.findById(ctx.params.id)\n if (!user) { ctx.throw(404, '用户不存在')}\n await next()\n}\n\n// routes/users.js（添加）\nrouter.put('/user/following/:id', auth, checkUserExist, follow) // 用户-关注用户\nrouter.delete('/user/following/:id', auth, checkUserExist, unfollow) // 用户-取消关注\n```\n\n---\n\n## 🌴第十一章：话题模块\n\n### 1.话题增改查接口\n\n**功能模块功能点**\n\n- 话题的增改查（没有删，因为话题关联太多）\n- 分页，模糊查询\n- 用户属性中的话题引用\n- 关注/取消关注话题，用户关注的话题列表\n\n**设计Schema**\n\n```js\n// 建立新文件 modle/topics.js\nconst mongoose = require('mongoose');\nconst { Schema, model } = mongoose;\n\nconst topicSchema = new Schema({\n __v: {type: Number, select: false},\n name: { type: String, required: true }, // 话题名称\n avatar_url: { type: String }, // 话题图片\n introduction: { type: String, select: false}, // 话题简介\n})\n\nmodule.exports = model('Topic', topicSchema);\n```\n\n**写Controller**\n\n```js\n// 建立新文件 controller/topics.js\nconst Topic = require('../model/topics')\n\nclass TopicsCtl {\n \n // 获取话题列表\n async find(ctx) {\n ctx.body = await Topic.find();\n }\n\n // 查询特定话题\n async findById(ctx) {\n // const { fields } = ctx.query\n // const selectFields = fields.split(';').filter(f => f).map(f => ' +' + f).join('')\n // const topic = await Topic.findById(ctx.params.id).select(selectFields)\n const topic = await Topic.findById(ctx.params.id)\n ctx.body = topic\n }\n\n // 创建话题\n async create(ctx) {\n ctx.verifyParams({\n name: { type: 'string', required: true },\n avatar_url: { type: 'string', required: false },\n introduction: { type: 'string', required: false }\n })\n\n const topic = await new Topic(ctx.request.body).save()\n ctx.body = topic\n }\n\n // 修改话题\n async update(ctx) {\n ctx.verifyParams({\n name: { type: 'string', required: false },\n avatar_url: { type: 'string', required: false },\n introduction: { type: 'string', required: false }\n })\n\n const topic = await Topic.findByIdAndUpdate(ctx.params.id, ctx.request.body)\n ctx.body = topic\n }\n}\n\nmodule.exports = new TopicsCtl()\n```\n\n**写Routes**\n\n```js\n// 建立文件 routes/topics.js\nconst Router = require('koa-router');\nconst router = new Router; // new Router({prefix:'user'}) 这样可以设置路由前缀，也是实用的\nconst { find, findById, create, update } = require('../controller/topics');\nconst jwt = require('koa-jwt');\nconst auth = jwt({ secret: 'zhukunpeng'}) // 传入秘钥\n\nrouter.get('/topics', find) // 查询所有话题\nrouter.post('/topics', auth, create) // 创建话题\nrouter.get('/topics/:id', findById) // 获取特定话题\nrouter.patch('/topics/:id', auth, update) // 修改特定话题\n\nmodule.exports = router\n```\n\n---\n\n### 🔥2.分页实现\n\n**根据查询字符串来限制列表的返回值**\n\n```js\n// 获取话题列表 的分页逻辑（主要是算法）\nasync find(ctx) {\n const { per_page = 10 } = ctx.query\n const page = Math.max(ctx.query.page * 1, 1) - 1 // 当前是第几页\n const perPage = Math.max(per_page * 1, 1) // 每页显示几条\n // mongoose limit() 可以获取几个，skip() 可以从第几个开始，虽然没有 limit(x, y) 这种好，但是也行\n ctx.body = await Topic.find().limit(perPage).skip(page * perPage);\n}\n\n// 示例：http://localhost:3000/topics?page=1&per_page=2\n```\n\n---\n\n### 🔥3.模糊搜索（关键词搜索）\n\n**借助mongoose语法糖，一行代码就能实现：在find() 里面写正则**\n\n```js\n// ......\nctx.body = await Topic\n .find({ name: new RegExp(ctx.query.q) })\n .limit(perPage).skip(page * perPage);\n\n// mongoose使用多个字段的模糊\n// .find({ $or: [{name: ...}, {...}] })\n```\n\n---\n\n### ❣️4.用户属性中的话题引用\n\n**没太懂，但是这里 type: Schema.Types.ObjectId, ref: 'Topic' 方法是一种引用，类似于MySQL的外链，多表查询用的那种**\n\n---\n\n### 5.关注话题接口（略...）\n\n---\n\n## 🌱第十二章：问题模块\n\n### 1.问题的增删改查，用户的问题列表（用户-问题 一对多关系）\n\n一个用户可以提多个问题，但是一个问题只属于一个用户\n\n**建立 Schema**\n\n```js\nconst mongoose = require('mongoose');\nconst { Schema, model } = mongoose;\n\nconst questionSchema = new Schema({\n __v: {type: Number, select: false},\n title: { type: String, required: true }, // 问题标题\n description: { type: String }, // 描述\n questioner: { type: Schema.Types.ObjectId, ref: 'User', required: true, select: false}, // 提问者，这个设计是实现 一对多的核心\n})\n\nmodule.exports = model('Question', questionSchema);\n```\n\n**实现 Controller**\n\n```js\n\n```\n\n**❣️这里我突然有一个想法，就是 可以抽象出一个基本类，上面挂载分页方法，模糊查询方法等，甚至增删改查接口也能抽离成公共的，下面的类谁想用了，就直接用继承，然后使用了**\n\n---\n\n### 2.话题-问题 多对多关系\n\n- 思路：两个列表，就是这两个列表都能成为对方的列表\n\n---\n\n## 🌿第十三章：答案模块\n\n### 1.答案模块二级嵌套的增删改查接口\n\n\n---\n\n## 🌾第十四章：评论模块\n\n---\n\n## 🌿第十五章：项目上线，部署\n\n\n### 1.用NGINX实现端口转发\n\n**一般服务器很多端口都没开，一般80端口开了，NGINX 就可以代理80端口，然后访问到内网的具体端口上**\n\n- 语法检查：nginx -t（主要修改nginx.conf）\n- 重启：service nginx restart\n\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/2.note/5.%E5%85%B6%E4%BB%96%E9%9B%B6%E6%95%A3%E7%AC%94%E8%AE%B0/%E6%85%95%E8%AF%BE%E7%BD%91%E8%AF%BE%E7%A8%8BRESTful%20API/8.png\")
\n\n**Postman生成文档**\n\n- 还是很漂亮的\n\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/2.note/5.%E5%85%B6%E4%BB%96%E9%9B%B6%E6%95%A3%E7%AC%94%E8%AE%B0/%E6%85%95%E8%AF%BE%E7%BD%91%E8%AF%BE%E7%A8%8BRESTful%20API/9.png\")
\n\n---\n\n## 📚参考列表（最后更新2019.6.23 23:23）\n\n- [慕课网课程-Node.js开发仿知乎服务端 深入理解RESTful API](https://coding.imooc.com/learn/list/354.html)"
},
{
"path": "docs/blog/18.其他/1.爬虫.md",
"content": "---\ntitle: 1.爬虫\ndate: 2020-05-06 00:00:00\npermalink: \ntag: \n - blog\n - 18.其他\n---\n\n## 🐛 1.爬取内容\n\n爬虫的几种方式\n\n- 1.通过API获取信息\n- 2.通过获取网页源码（通过 require 获取网页返回体 body，然后用正则提取 (.+?) ），但是现在网站越来越复杂，有的还需要登录，甚至还有防护\n- 3.目前主流的是：puppeteer控制chromium来进行抓取数据（这个工具可以通过api来操作浏览器行为，通过这个工具，可以用来写爬虫，自动签到，网页截图，生成paf，自动化测试等）\n\n```js\n// 示例一：博客截图\n\nlet puppeteer = require('puppeteer'); // 记住这里一定要加 ; \n\n(async function() {\n const browser = await puppeteer.launch({\n headless: false // 是否打开一个无页面浏览器\n });\n const page = await browser.newPage(); // 打开一个空白页面\n await page.goto('https://notes.itzkp.com'); // 在地址栏中输入博客地址\n await page.screenshot({path: 'zkp.png'}); // 把当前页面截图，保存到zkp.png中\n await browser.close(); // 关闭浏览器\n})();\n```\n\n```js\n// 示例二：掘金文章内容获取\n\nlet puppeteer = require('puppeteer');\nlet url = 'https://juejin.cn/user/2788017219055175/posts';\n\n(async function() {\n const browser = await puppeteer.launch({\n headless: false // 是否打开一个无页面浏览器\n });\n\n const page = await browser.newPage(); // 打开一个空白页面\n\n // 在地址栏中输入博客地址\n await page.goto(url, {\n waitUntil: 'networkidle2'\n });\n\n // 获取指定节点属性\n const titles = await page.$$eval('a.title', element => {\n return element.map(item => item.innerHTML)\n })\n \n await browser.close(); // 关闭浏览器\n})();\n```\n\n---\n\n## 🐒 2.数据持久化\n\n> 抓的数据不进行持久化就没有意思\n\n- 根据爬取的规则和策略，把爬取到的数据存到数据库中\n- 如果要兼容不同的来源，需要对数据进行格式化\n- 为不同的数据建立索引方便检索\n\n---\n\n## 🐣 3.数据订阅\n\n> 用户可以按照自己的兴趣和需要进行定制内容\n\n---\n\n## 🦑 4.分发\n\n有新数据的时候\n\n- 可以使用邮件推送到订阅者\n- 可以使用极光推送等推送服务\n- 可以使用即时通信服务向客户端推送\n\n---\n\n## 5.小项目一：掘金爬虫\n\n核心步骤\n\n1. 发起HTTP请求获取网页内容\n1. 使用类似jQuery的语法来操作页面提取需要的数据\n1. 把数据保存在数据库中以供查询\n1. 建立一个服务器来显示这些数据\n1. 可以定时爬取数据\n1. 可让程序稳定运行\n1. 对编码进行转换\n\n\n\n\n\n\n"
},
{
"path": "docs/blog/2.HTML/1.HTML基础.md",
"content": "---\ntitle: 1.HTML基础\ndate: 2020-01-30 00:00:00\npermalink: \ntag: \n - blog\n - 2.HTML\n---\n\n> HTML真的是入门前端的第一个课程，说实话，这里的东西2天就能熟练的掌握，但是不要骄傲呦，因为这只是前端的1%\n\n> 也是基础中的基础，也是根基，要打扎实。\n\n---\n\n## 🍚第一部分：HTML基本结构\n\n### 1.HTML初识\n\n- HTML（超文本标记语言 Hyper Text Markup Language）, 是一种用来描述网页的语言\n- HTML 不是编程语言，而是一种标记语言（相似的还有MD语言，JSX语言，WXML语言，等等都是一种规则而已）\n- 标记语言是一套标记标签\n\n---\n\n### 2.HTML骨架标签\n\n```html\n\n\n\n \n \n \n 第一段
\n第二段
\n第三段
\n```\n\n> 水平线标签 hr：一条分割线（单标签，块级元素）\n\n```html\n\n 床前明月光，\n 疑是地上霜。\n 举头望明月，\n 低头思故乡。\n\n```\n\n> 有一些特殊符号，在HTML中很难，或者很不方便直接使用，HTML为特殊字符 制定了对应的代替代码\n\n[HTML特殊字符编码对照表](https://www.jb51.net/onlineread/htmlchar.htm)\n\n---\n\n## 🍪第四部分：表格 & 列表\n\n### 1.表格基础\n\n**表格基础标签**\n\n```html\n\n
| 第一行1 | \n第一行2 | \n第一行3 | \n
| 第二行1 | \n第二行2 | \n第二行3 | \n
| 表头1 | \n表头2 | \n表头3 | \n
|---|---|---|
| 第二行1 | \n第二行2 | \n第二行3 | \n
| 表头1 | \n表头2 | \n表头3 | \n
|---|---|---|
| 第一行1 | \n第一行2 | \n第一行3 | \n
| 对比 | \n1 | \n2 | \n
|---|---|---|
| 个人介绍 | \n个人介绍... | \n|
| 个人作品 | \n个人作品... | \n
| 表头1 | \n表头2 | \n表头3 | \n
|---|---|---|
| 第一行1 | \n第一行2 | \n第一行3 | \n
| 第二行1 | \n第二行2 | \n第二行3 | \n
| 备注： | \n
![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/2.notes/1.HTML/HTML5/1.canvas%E5%9D%90%E6%A0%87%E7%B3%BB.png\")
\n\n---\n\n### 2.画线\n\n> 画线 要有一个起点和终点\n\n```js\nlet canvas = document.getElementById('canvas')\nlet ctx = canvas.getContext('2d')\n\nctx.moveTo(100, 100) // 起点\nctx.lineTo(100, 200) // 终点\nctx.stroke()\n\n// 线端样式（线的两端）\nctx.lineCap = 'butt' // square 给线的两端 添加两个小方块 | round 给线的两端 添加圆角\nctx.lineJoin = 'mitter' // round bevel miter(miterLimit)\n```\n\n---\n\n### 3.画矩形\n\n> 用线也能画矩形，但是麻烦，用 ctx.rect() 更快\n\n```js\nctx.rect(x, y, 宽度, 高度) // 画矩形\nctx.strokeRect(x, y, 宽度, 高度) // 直接画出来了，都不用写构建路径\nctx.fillRect(x, y, 宽度, 高度) // 直接画出来了，都不用写填充路径\n\n\n// 例如：一个一直往下落的矩形\nlet canvas = document.getElementById('canvas')\nlet ctx = canvas.getContext('2d') \nlet height = 0\n\nlet timer = setInterval(() => {\n ctx.clearRect(0, 0, 500, 500)\n ctx.strokeRect(100, height, 50, 50)\n if (height === 450) clearInterval(timer);\n height += 10;\n}, 50);\n```\n\n---\n\n### 4.画圆\n\n> 需要知道 圆心（x, y），半径（r），弧度（需要用Math.PI表示：起始弧度，结束弧度），方向（顺时针0，逆时针-1）\n\n```js\nlet canvas = document.getElementById('canvas')\nlet ctx = canvas.getContext('2d') \n\n// 基础圆形（扇形，半圆，圆形）\nctx.arc(100, 100, 50, 0, Math.PI, 0)\nctx.fill()\n\n// 圆角矩形\nctx.moveTo(100, 110) // y轴多了10，是一个小技巧\nctx.arcTo(100, 200, 200, 200, 10)\nctx.arcTo(200, 200, 200, 100, 10)\nctx.arcTo(200, 100, 100, 100, 10)\nctx.arcTo(100, 100, 100, 200, 10)\nctx.stroke()\n```\n\n---\n\n### 5.贝塞尔曲线\n\n[贝塞尔曲线，百度百科](https://baike.baidu.com/item/%E8%B4%9D%E5%A1%9E%E5%B0%94%E6%9B%B2%E7%BA%BF/1091769)\n\n```js\n// 二次贝塞尔曲线\nctx.moveTo(100, 100) // 起点\nctx.quadraticCurveTo(200, 200, 300, 100); // 除了起点，还需要另外两个点\n\n// 三次贝塞尔曲线\nctx.moveTo(100, 100) // 起点\nctx.bezierCurveTo(200, 200, 300, 100, 400, 200); // 除了起点，还需要三个点\nctx.stroke()\n\n// 案例：模拟一个波浪\n```\n\n---\n\n### 6.坐标平移 && 旋转 && 缩放\n\n```js\nctx.translate(100, 100) // 修改坐标原点（坐标平移）\nctx.rotate(Math.PI / 6) // 是根据坐标原点进行的旋转\nctx.moveTo(0, 0) // 原来是 100, 100\nctx.lineTo(100, 0)\nctx.stroke()\n\n// 缩放（所有点，都放大scale里面的倍数）\nctx.scale(2, 2)\nctx.strokeRect(100, 100, 100, 100)\n```\n\n---\n\n### 7.save && restore\n\n> canvas的平移和旋转是对于全局来说的，如果想旋转之后的，还按照之前的用，需要先保存之前的，再回复\n\n```js\nctx.save() // 保存之前坐标系（可以保存坐标系的平移数据，缩放数据，旋转数据）\n\nctx.translate(100, 100) // 修改坐标原点（坐标平移）\nctx.rotate(Math.PI / 6) // 是根据坐标原点进行的旋转\nctx.moveTo(0, 0) // 原来是 100, 100\nctx.lineTo(100, 0)\nctx.stroke()\n\nctx.restore() // 恢复之前的坐标系\n```\n\n---\n\n### 8.背景填充\n\n```js\n// 填充颜色\nctx.fillStyle = 'red'\nctx.fillRect(100, 100, 100, 100)\n\n// 填充图片（纹理的填充是以坐标系原点进行填充的）\nlet img = new Image()\nimg.src = 'https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/github%E5%9B%BE%E7%89%87/notes/3.png'\nimg.onload = function () {\n ctx.translate(100, 100)\n ctx.fillStyle = ctx.createPattern(img, 'no-repeat')\n ctx.fillRect(0, 0, 100, 100)\n}\n\n// 线性渐变填充\nlet bg = ctx.createLinearGradient(100, 100, 200, 200);\nbg.addColorStop(0, 'white'); // 渐变起点\nbg.addColorStop(1, 'black'); // 渐变终点（当然中间也能写多个阶段的值）\nctx.fillStyle = bg\nctx.fillRect(100, 100, 100, 100)\n\n// 辐射渐变\nlet bg = ctx.createRadialGradient(150, 150, 0, 180, 180, 180)\nbg.addColorStop(0, 'white'); // 渐变起点\nbg.addColorStop(1, 'black'); // 渐变终点（当然中间也能写多个阶段的值）\nctx.fillStyle = bg\nctx.fillRect(100, 100, 100, 100)\n```\n\n---\n\n### 9.阴影\n\n```js\nctx.shadowColor = 'red'\nctx.shadowBlur = 10;\nctx.fillRect(100, 100, 100, 100)\n```\n\n---\n\n### 10.文字\n\n```js\nctx.fillText('实体文字', 100, 100);\nctx.font = '24px 黑体'\nctx.strokeStyle = 'red'\nctx.strokeText('空心文字', 100, 200);\n```\n\n---\n\n### 11.requestAnimationFrame动画\n\n**动画原理简介**\n\n> 动画的基本原理是依靠人类具有视觉暂留的特性人的眼睛看到一幅画或一个物体后，在 1/24 秒内不会消失（即每秒钟至少更换24张画面）。利用这一原理，在一幅画（一帧）还没消失前播放下一幅画（下一帧），就会给人造成流畅的视觉变化效果。\n\n我们在实现动画的时候，经常用定时器，但是定时器有时候并不精确\n\n**requestAnimationFrame**\n\n> 由于 setTimeout 和 setInterval 的不精准问题，促使了 requestAnimationFrame 的诞生。 requestAnimationFrame 是专门为实现高性能的帧动画而设计的一个API，目前已在多个浏览器得到了支持，你可以把它用在 DOM 上的效果切换或者 Canvas 画布动画中。 requestAnimationFrame 并不是定时器，但和 setTimeout 很相似，在没有 requestAnimationFrame 的浏览器一般都是用setTimeout模拟。 requestAnimationFrame 跟屏幕刷新同步（大多数是 60Hz ）。如果浏览器支持 requestAnimationFrame , 则不建议使用 setTimeout 来做动画。\n\n**requestAnimationFrame 的兼容使用**\n\n```js\n// 下面是我们常规使用 requestAnimationFrame 的兼容写法，当浏览器不兼容的 requestAnimationFrame 时则通过使用 setTimeout 来模拟实现,且设定渲染间隔为 1000ms/60。\n\n// 判断是否有 requestAnimationFrame 方法，如果有则模拟实现\nwindow.requestAnimFrame =\nwindow.requestAnimationFrame ||\nwindow.webkitRequestAnimationFrame ||\nwindow.mozRequestAnimationFrame ||\nwindow.oRequestAnimationFrame ||\nwindow.msRequestAnimationFrame ||\nfunction(callback) {\n window.setTimeout(callback, 1000 / 30);\n};\n```\n\n**使用 requestAnimationFrame 实现动画**\n\n![](\"https://coding.imweb.io/img/p5/requestAnimationFrame.gif\")
\n\n```html\n\n\n\n \n ![](\"https://coding.imweb.io/img/p5/keycode.png\")
\n\n**简单实现键盘控制物体移动**\n\n![](\"https://coding.imweb.io/img/p5/keyboard.gif\")
\n\n```html\n\n\n\n \n ![](\"https://coding.imweb.io/img/p5/crash-rect.png\")
\n\n```js\n// 判断四边是否都没有空隙\nif (!(rect2.x + rect2.width < rect1.x) &&\n !(rect1.x + rect1.width < rect2.x) &&\n !(rect2.y + rect2.height < rect1.y) &&\n !(rect1.y + rect1.height < rect2.y)) {\n // 物体碰撞了\n}\n```\n\n**圆形物体碰撞检测**\n\n![](\"https://coding.imweb.io/img/p5/crash-distance.png\")
\n\n```js\nvar dx = circle2.x - circle1.x;\nvar dy = circle2.y - circle1.y;\nvar distance = Math.sqrt((dx * dx) + (dy * dy));\nif (distance < circle1.radius + circle2.radius) {\n // 两个圆形碰撞了\n}\n```\n\n---\n\n## 🍚第五部分：存储\n\n---\n\n## 🍢第六部分：交流\n\n---\n\n## 🍧第七部分：工作线程\n\n---\n\n## 🍩第八部分：位置感知\n\n---\n\n## 📚参考列表（致敬）\n\n- 《Head First HTML5 Programming》\n- [腾讯课堂](https://ke.qq.com)"
},
{
"path": "docs/blog/3.CSS/1.CSS基础.md",
"content": "---\ntitle: 1.CSS基础\ndate: 2020-01-30 00:00:00\npermalink: \ntag: \n - blog\n - 3.CSS\n---\n\n> 注意此处：内容不全，结构完整...\n\n> 前端几乎所有的展示都是用 CSS来写的，你甚至可以 只精通CSS，就能有一个好工作\n\n> 但是注意，CSS的水很深，这里只是最基础的整理，里面的内容 几乎5天就能学会，总之就是无论何时，对CSS这个技术要保持敬畏\n\n## 🌎第一部分：CSS入门\n\n### 0.CSS的发展历史\n\n[CSS的发展历史](https://www.jianshu.com/p/4257a6f40c28)\n\n### 1.CSS样式表的使用\n\n**行内式（内联样式）**\n\n```html\n\n```\n\n**内部样式表**\n\n```html\n\n \n\n```\n\n**外部样式**\n\n```html\n\n \n\n```\n\n**❣️ 备注：因为CSS发展了很多年，人们越来越想省事，所以出了预处理器，前处理器，后处理器都有 | 还有CSS命名也是个玄学**\n\n---\n\n### 2.CSS基础选择器\n\n> CSS选择器就是 把我们想要的标签选择出来的\n\n- 标签选择器 标签名\n- id选择器 #id名称\n- 类选择器 .类名\n- 通配符选择器 *\n\n**拓展：突然想到一个道题（一个BUG），就是多少个类选择器权重 可以覆盖掉 id选择器的权重**\n\n---\n\n### 3.CSS复合选择器\n\n- 后代选择器：父级 子级（#father .chilren）\n- 子元素选择器：父级>子级（只选离父级最近的一级，孙级之后都不选中）\n- 交集选择器：div#app 既是div标签，id又是app的标签（既是 又是 的关系）\n- 并集选择器：a, p, div, span, #app（一下选择多个，一起设置的选择器）\n- 伪类选择器：用于对某些选择器添加特殊的效果\n - 链接伪类\n - a:link：未访问的链接\n - a:visited：已访问的链接\n - a:hover：鼠标移动到链接上\n - a:active：选定的链接\n - 结构伪类\n\n---\n\n### 4.font字体\n\n```css\n/* 字体大小 | px单位，像素 | em单位，相当于当前对象内文本的字体尺寸 | ... */\nfont-size: 16px;\n\n/* 字体 | 多个字体会一个个找，前面的没有，就应用下一个，都没有就走系统默认的 */\nfont-family: '宋体', Arial, '微软雅黑';\n\n/* 字体粗细 | normal 默认不加粗 | bold 加粗 | 400以下等同于normal | 700以上等同于 bold */\nfont-weight: 500;\n\n/* 字体风格 | normal 默认值 | italic 倾斜 */\nfont-style: italic\n\n/* 字体综合写法（不能更改顺序）：font: font-style font-weight font-size/line-height font-family */\nfont: normal 500 20px '微软雅黑'\n/* 有一些可以省略，但是 字体 和 字体大小 不能省略 */\n```\n\n---\n\n## 🌝第二部分：CSS外观样式\n\n### 1.color（文本颜色）\n\n> 主要用于定义文本的颜色\n\n```html\n\n```\n\n---\n\n### 2.line-height（行间距）\n\n```html\n\n```\n\n---\n\n### 3.text-align（文本水平对齐方式）\n\n```html\n\n```\n\n---\n\n### 4.text-indent（首行缩进）\n\n```html\n\n```\n\n---\n\n### 5.text-decoration（文本装饰，通常给a链接修改装饰效果）\n\n```html\n\n```\n\n---\n\n## 🌛第三部分：CSS背景及应用\n\n### 1.背景颜色\n\n---\n\n### 2.背景图片\n\n---\n\n### 3.背景平铺\n\n---\n\n### 4.背景位置\n\n---\n\n## 🌙第四部分：标签显示模式 & CSS盒模型\n\n> 标签的显示模式（display）主要有，行内，块级，行内块\n\n- 块级：独占一行，高度，宽度，内外边距都可以控制（常见的有h1~h6, div, ul, ol, li, p）\n- 行内：一行显示多个，高宽直接设置无效，默认宽度是它自身内容的宽度，行内元素只能容纳文本或者行内元素（常见的有 a, span, em, s, ...）\n- 行内块：一行可以显示多个，可以设置宽高（常见的有 img, input, td）\n- 相互转换：display: block, inline, inline-block\n\n---\n\n## ⭐️第五部分：CSS三大特性\n\n---\n\n## 🌟第六部分：浮动 & 清除浮动\n\n---\n\n## 💫第七部分：定位\n\n---\n\n## ✨第八部分：其他\n\n## 📚参考列表（致敬）\n\n- [博学谷](https://www.boxuegu.com/)\n"
},
{
"path": "docs/blog/3.CSS/2.CSS3.md",
"content": "---\ntitle: 2.CSS3\ndate: 2020-01-30 00:00:00\npermalink: \ntag: \n - blog\n - 3.CSS\n---\n\n> CSS3不和HTML5一样是一个生态，而是 拓展了CSS的基础，使其更加的好用，但是还不具有现代化的特性\n\n> 但是不要担心，一些预处理器和后处理器 弥补了 CSS不现代化的一些问题\n\n## 🥟第一部分：新增选择器\n\n> 前言：新增的选择器真是好用，不用多谢一些类名了，起名字我可真是难受\n\n**备注：类选择器，属性选择器，伪类选择器，权重都是10**\n\n### 1.属性选择器\n\n```html\n\n\n```\n\n```css\n/* 属性选择器 */\nbutton[disabled] { }\n\n/* 两个按钮都能选中 */\nbutton[class^=\"btn\"] { }\n\n/* att$='' 具有att属性，并且以...结尾的 */\n/* att*='' 具有att属性，并且含有...的 */\n```\n\n### 2.结构伪类选择器\n\n> 所谓结构，就是指，是第几个\n\n```html\n1
\n2
\n3
\n4
\n5
\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/2.notes/2.CSS/CSS%E6%B7%B1%E5%85%A5%E5%BA%94%E7%94%A8/4.CSS%E4%B8%BA%E4%BB%80%E4%B9%88%E8%A6%81%E5%88%86%E5%B1%82.png\")
\n\n---\n\n### 2.BEM\n\n---\n\n### 3.ACSS（原子CSS）\n\n---\n\n### 4.其他分层思想\n\n---\n\n\n## 🎋第二部分：CSS Houdini\n\n---\n\n### 1.CSS Houdini介绍（现在还是没有应用上，了解的还是少）\n\n**CSS Houdini 提供了API, 能让程序员控制浏览器的重绘重排过程**\n\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/2.notes/2.CSS/CSS%E6%B7%B1%E5%85%A5%E5%BA%94%E7%94%A8/5.CSS%20H%E4%BB%8B%E7%BB%8D.png\")
\n\n\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/2.notes/2.CSS/CSS%E6%B7%B1%E5%85%A5%E5%BA%94%E7%94%A8/6.CSS%20H%20API.png\")
\n\n---\n\n## 🌱第三部分：CSS与数学\n\n---\n\n### 1.CSS矩阵\n\n**概念（了解概念就行了，我现在也是不懂）**\n\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/2.notes/2.CSS/CSS%E6%B7%B1%E5%85%A5%E5%BA%94%E7%94%A8/1.css%E7%9F%A9%E9%98%B5%E6%A6%82%E5%BF%B5.png\")
\n\n\n**学习矩阵有什么用么？**\n\n- 粗浅的举一个例子：transform 实现的原理，在浏览器中就是矩阵的应用\n\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/2.notes/2.CSS/CSS%E6%B7%B1%E5%85%A5%E5%BA%94%E7%94%A8/2.%E7%9F%A9%E9%98%B5%E5%BA%94%E7%94%A8.png\")
\n\n\n---\n\n### 2.一些工具网站\n\n**2D矩阵 转 3D矩阵，可以开启硬件加速，调用GPU，提高性能，让GPU直接合成层，节省了重绘和重排（还是不太懂）**\n\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/2.notes/2.CSS/CSS%E6%B7%B1%E5%85%A5%E5%BA%94%E7%94%A8/3.css%E5%B7%A5%E5%85%B7.png\")
\n\n## 📚参考列表（致敬）\n\n- [腾讯课堂](https://ke.qq.com)\n"
},
{
"path": "docs/blog/4.JavaScript/1.JavaScript根基.md",
"content": "---\ntitle: 1.JavaScript根基\ndate: 2020-01-30 00:00:00\npermalink: \ntag: \n - blog\n - 4.JavaScript\n---\n\n> 注意此处：内容不全，结构完整，等待完善...\n\n> JavaScript的基础 决定了你的高度，建议熟读 红宝石 和 绿犀牛🦏\n\n## 🐲第零章：JavaScript简介\n\n### 1.什么是JavaScript\n\n- JavaScript是世界上最流行的脚本语言（不需要编译，边运行边解析）\n- JavaScript可以增强浏览器交互\n- JavaScript可以运行在服务端（Node.js）\n- 移动端JavaScript（HTML5让JavaScript赋予了神一般的能力，穿透了所有的端 iOS，android,window, mac, linux）\n\n---\n\n### 2.JavaScript的历史\n\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/2.note/4.%E6%8A%80%E6%9C%AF%E6%A0%B9%E5%9F%BA%E7%AC%94%E8%AE%B0/JS%E6%A0%B9%E5%9F%BA/8.png\")
\n\n---\n\n### 3.JavaScript的组成\n\n- ECMAScript: JavaScript用法\n- DOM：JavaScript操作网页上的元素的API\n- BOM：JavaScript操作浏览器的部分功能的API\n\n---\n\n### 4.引入JavaScript\n\n```html\n\n\n\n\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/2.note/4.%E6%8A%80%E6%9C%AF%E6%A0%B9%E5%9F%BA%E7%AC%94%E8%AE%B0/JS%E6%A0%B9%E5%9F%BA/3.png\")
\n\n\n\n---\n\n## 🍀第八章：对象（Object）\n\n**对象是引用类型**\n\n### 1.对象的基本使用\n\n```js\n\n// 对象定义（对象字面量 推荐）\nlet me = {\n\n name: '朱昆鹏',\n age: 20,\n\n // 方法\n say: function () {\n console.log(me.age) // 20\n console.log(this.age) // 20，this 其实就是 AO 里面的一个属性，具体可以看3.JavaScript深入\n },\n\n // 方法的另一种写法（ES6）\n look () {}\n\n}\n\n\n// 对象属性的增删改查\nme.test = '测试属性' // 增\ndelete me.test // 删 | 后期可以知道 一个对象的对象，能不能被删除其实都可以控制的（Object.defineProperties)\nme.age = 21 // 改\nme.age // 21 查\n\n\n// 其他定义对象的方式\n\n// 1.构造函数创建对象（需要new）\nlet obj1 = new Object() // 系统自带的构造函数 Object()\nlet obj2 = new Zhu() // 自己写的一个构造函数\n\n// 2.\nlet obj = Object.create(null)\n\n```\n\n---\n\n### 2.构造函数示例\n\n**这里面就涉及到this，具体请看3.JavaScript深入 this解释**\n\n```js\n\nfunction Car (carName) {\n\n // 属性\n this.name = carName || 'BMW'\n \n // 方法\n this.run = function () {\n console.log(this.name + '跑了起来')\n }\n}\n\nlet byd = new Car('byd')\nlet dz = new Car('dz')\n\nbyd.run() // byd跑了起来\ndz.run() // dz跑了起来\n\n```\n\n---\n\n### 3.new 操作符做了什么（构造函数内部原理）\n\n- 第一步：在函数体最前面隐式的加上 this = {}\n- 第二步：执行 this.xxx = xxx\n- 第三步：隐式的返回this\n\n**我们根据这三步，来写一个显示的函数，不用new，看看是否能达到上面的效果**\n\n```js\n\nfunction Car (carName) {\n\n let that = {} // this 是关键字，不行，所以，我们用 that 代替，效果是一样的\n\n // 属性\n that.name = carName || 'BMW'\n \n // 方法\n that.run = function () {\n console.log(that.name + '跑了起来')\n }\n\n return that\n}\n\nlet byd = Car('byd')\nlet dz = Car('dz')\n\nbyd.run() // byd跑了起来\ndz.run() // dz跑了起来\n\n```\n\n---\n\n**❣️❣️❣️ 因为new 最后隐式的返回了对象，这个对象中如果有 函数的话，就会形成闭包，也就是这个函数具有 构造函数的作用域**\n\n```js\n\nfunction Zhu () {\n \n this.age = 20,\n\n this.addAge = function () {\n this.age += 1\n }\n\n}\n\nlet zhu1 = new Zhu() // 产生 Zhu 的 AO 和 addAge的 AO \nlet zhu2 = new Zhu() // 产生 Zhu 的 AO 和 addAge 的 AO ，注意 这里面的\n\nzhu1.addAge() // 这里的 addAge 里面有三个作用域：0 addAge的AO，1 Zhu的AO，和GO\nzhu1.age // 21\n\nzhu2.addAge() // 这里的 addAge 里面有三个作用域：0 addAge的AO，1 Zhu的AO，和GO，但是其中的 Zhu的AO 和 上面的不一样，虽然内容一样，但是相互独立的\nzhu2.age // 21\n\n// ❓ 在运用我发现，Zhu 和 zhu1.addAge 都只有两个作用域 Script 和 Global 这是为什么\n\n```\n\n**❣️如果使用了new关键字的话，因为有隐式返回，所以就算在函数中写返回，还是会被忽略**\n\n---\n\n### 4.原型，原型链\n\n**首先要明确：函数也是对象，是对象都有 __proto__ 和 constructor，函数有特定的属性 prototype**\n\n- 原型（prototype）：是function对象的一个属性，它定义了构造函数制造出来的对象的公共祖先\n - 通过该构造函数产生的对象，可以继承该原型的属性和方法，原型也是一个对象，利用原型的特点和概念，可以提取公共属性\n - 对象查看原型 __ proto __\n - 拓展：对象如何查看 对象的构造函数 --> constructor\n- 原型链：\n\n```js\n\nfunction Zhu () { }\nZhu.prototype.say = function () {\n console.log('我会说话')\n}\n\nlet zhu1 = new Zhu()\nlet zhu2 = new Zhu()\n\n```\n\n**啥都不说，补一张图，什么都明白了（有空话一张）**\n \n\n---\n\n### 5.继承实现\n\n- 继承需要满足两个，一个是继承属性，一个是继承方法\n - 继承属性：父.call(this, ...)\n - 继承方法：将父的prototype给 子类，并且让 子类的 constructor 保持正常（一般是写一个方法做这个事情）\n\n```js\n// 最佳实践\nfunction Father (name) {\n this.name = name\n}\nFather.prototype.say = funciton () { }\n\n// 如何让 Son 继承 Father\nfunction Son (name) {\n Father.call(this, name) // 继承属性\n}\n\ninheritPropertype(Father, Son)\n\n// 继承方法的函数（可能还有其他的版本，但是大致意思是 将父的prototype给 子类，并且让 子类的 constructor保持正常）\nfunciton inheritPropertype(father, son) {\n let protoType = Object.create(father.prototype)\n prototype.constructor = son\n son.prototype = protoType\n}\n\n```\n\n**❣️ ES6 有了 Class之后，继承方便了很多，所以上面那种方式，一般感觉只有面试可以用到**\n\n---\n\n### 6.包装类\n\n我们知道在JavaScript中有原始值和引用值，原始值是没有属性和方法的，但是包装类产生的原始值是有的\n\n- new String()\n- new Boolean()\n- new Number()\n\n```js\n\nlet num1 = 100;\nnum1 // 100 是没有属性和方法的\n\nlet num2 = new Number(100)\nnum2 // Number {100} 是有属性和方法的\nnum2 + 1 // 101 可以参与运算，运算之后就变为了原始值\n\n// 解释一个匪夷所思的问题\nnum1.length = 1\nconsole.log(num1.length) // undefined，为什么不报错？，因为先隐式的调用了 包装类\n\n\n\n// ******* 试题一 *******\nlet str = 'zhu'\nstr = str + 1\nlet test = typeof str // 'string'\nif (test.length == 6) { // test.length // undefined\n test.sign = '返回'\n}\nconsole.log(test.sign) // undefined\n```\n\n---\n\n### 7.命名空间,对象枚举\n\n**对象枚举（又叫对象属性遍历）**\n\n- 我们的数组很好遍历，for 循环就可以搞定，但是 你的对象怎么遍历呢 ？\n- for in 循环 ：实现对象的遍历\n\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/2.note/4.%E6%8A%80%E6%9C%AF%E6%A0%B9%E5%9F%BA%E7%AC%94%E8%AE%B0/JS%E6%A0%B9%E5%9F%BA/5.png\")
\n\n**但是这个有个问题，就是通过 for in 遍历对象，也可以把对象的原型链上的属性遍历出来，怎么办呢？ -----> hasOwnProperty() 参数传入字符串类型的属性名，返回布尔值，表示是否是自己的属性**\n\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/2.note/4.%E6%8A%80%E6%9C%AF%E6%A0%B9%E5%9F%BA%E7%AC%94%E8%AE%B0/JS%E6%A0%B9%E5%9F%BA/6.png\")
\n\n**拓展 ：in 操作符 ：判断你是否可以访问到某个属性（和 hasOwnProperty() 的功能不同哦）（基本用不到，了解就可以）**\n\n- 重点拓展 ：instanceof \n - a instanceof A // 判断 a对象 是否是 A构造函数构造出来的 （当然这个用法没有想象的那么简单）（ a instanceof Object 也会返回 true）\n - 其实根本的理解应该是 ：判断a对象的原型链上 有没有 A的原型\n- 这个instanceof解决了一个很重要的问题，就是之前，typeof [ ] typeof { } 返回的都是 object 没办法区分\n - 第一种方法 ：constraint\n - 第二种方法 ：instanceof\n - 第三种方法 ：Object.prototype.toString.call(里面写需要判断的)\n\n---\n\n### undefined类型及null区别\n\n---\n\n## 🎋第九章：日期（Data）\n\n### 1.日期对象基础\n\n---\n\n### 2.Date 常用API\n\n```js\nnew Date() // 创建一个时间对象 Fri Jul 12 2019 19:59:59 GMT+0800 (中国标准时间)\n\n// 返回自1970年1月1日 00:00:00 UTC到当前时间的毫秒数。\nDate.now(); // 1562932828164\n\n// 解析一个表示某个日期的字符串，并返回从1970-1-1 00:00:00 UTC 到该日期对象（该日期对象的UTC时间）的毫秒数\nDate.parse('2019.7.12') // 1562860800000\n\n// 年月日时分秒 获取\nlet dateMe = new Date()\n\ndateMe.getFullYear() // 2019 | 根据本地时间返回指定日期的年份\ndateMe.getMonth() // 6 | 根据本地时间，返回一个指定的日期对象的月份，为基于0的值（0表示一年中的第一月）。\ndateMe.getDate() // 12 | 根据本地时间，返回一个指定的日期对象为一个月中的哪一日（从1--31）\ndateMe.getHours() // 20 |根据本地时间，返回一个指定的日期对象的小时。\ndateMe.getMinutes() // 11 | 根据本地时间，返回一个指定的日期对象的分钟数。\ndateMe.getSeconds() // 29 | 方法根据本地时间，返回一个指定的日期对象的秒数\ndateMe.getMilliseconds() // 363 | 根据本地时间，返回一个指定的日期对象的毫秒数。\n\ndateMe.toJSON() // 🔥 \"2019-07-12T12:05:15.363Z\" | 返回 Date 对象的字符串形式\ndateMe.getDay() // 5 | 根据本地时间，返回一个具体日期中一周的第几天，0 表示星期天（0 - 6）\ndateMe.getTime() // 1562933115363 | 方法返回一个时间的格林威治时间数值。\ndateMe.toString() // \"Fri Jul 12 2019 20:05:15 GMT+0800 (中国标准时间)\" | 返回一个字符串，表示该Date对象\ndateMe.getTimezoneOffset() // -480（说明比正常时区慢480分钟，所以要加480分钟才对） | 返回协调世界时（UTC）相对于当前时区的时间差值，单位为分钟。\ndateMe.toDateString() // \"Fri Jul 12 2019\" | 以美式英语和人类易读的形式返回一个日期对象日期部分的字符串。\n\n```\n\n[MDN 更多详细](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date)\n\n---\n\n### 3.定时器\n\n```js\n\n// 定时循环器（一直循环执行），会返回一个数字，作为唯一标识，可以用于清除定时器\nlet timer = setInterval( () => {\n}, 1000)\n\n// 清空定时器\nclearInterval(timer)\n\n// 定时器（推迟一段时间执行）\nlet timer = setTimeout( () => {\n}, 1000)\n\n// 清除定时器\nclearTimeout(timer)\n\n// ❣️是全局window上的方法，内部的this指向window\n\n```\n\n---\n\n## 🍄第十章：正则（Regex）\n\n### 1.正则基础\n\n```js\n\n// 🔥 创建一个正则表达式\nconst regex1 = /ab+c/gi;\nconst regex2 = new RegExp(\"ab+c\", \"gi\");\n\n// 🔥 JS正则表达式的方法 \n\n//【判断】test：一个在字符串中测试是否匹配的RegExp方法，它返回true或false\nlet str = 'hello world';\n/world/.test(str); // true\n/ /.test(str); // true\n/good/.test(str); // false\n\n//【替换】replace：一个在字符串中执行查找匹配的String方法，并且使用替换字符串替换掉匹配到的子字符串\nlet str = 'hello world'\nlet repStr = str.replace('world', 'replace') // 注意不会改变原内容\nconsole.log(repStr) // \"hello replace\"\n\n//【分隔】split 使用正则表达式 或 一个固定字符串分隔 一个字符串，返回 分隔后的子字符串数组\nlet str = 'hello RegExp';\nstr.split(' '); // [\"hello\", \"RegExp\"]\nstr.split('hello'); // [\"\", \"RegExp\"]\nstr.split('l'); // [\"he\", \"\", \"o RegExp\"]\nstr.split('good') // [\"hello RegExp\"]\n\n// exec：一个在字符串中执行查找匹配的RegExp方法，它返回一个数组（未匹配到则返回null）\n\n// search：一个在字符串中测试匹配的String方法，它返回匹配到的位置索引，或者在失败时返回-1（略）\n\n// match：一个在字符串中执行查找匹配的String方法，它返回一个数组或者在未匹配到时返回null（略）\n\n\n```\n\n**正则匹配规则速查**\n\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/1.quickcheck/4.%E5%85%B6%E4%BB%96/1.png\")
\n\n---\n\n## 🌾第十一章：其他内置对象\n\n---\n\n## 🌻第十二章：DOM\n\n### 1.DOM基本解释\n\n**什么是DOM**\n\nDOM（document object model） 文档对象模型，定义了表示和修改文档的方法，DOM对象既为宿主对象，由浏览器厂商定义，用来操作HTML和XML功能的一类对象的集合（web标准编程接口）\n\nDOM结构树（先用网上的图，后期自己画一下）\n\n![](\"https://upload-images.jianshu.io/upload_images/10312944-e129b1a7aaf0a987.png\")
\n\n---\n\n### 2.常用DOM接口\n\n```js\n\n// 获取DOM节点\ndocument.getElementById() // 通过ID获取\ndocument.getElementsByTagName() // 标签名\ndocument.getElementsByClassName() // 类名\ndocument.querySelector() // 通过选择器获取一个元素\ndocument.querySelectorAll() // 通过选择器获取一组元素\ndocument.body // 获取body的方法\ndocument.getElementsByName(name) // 通过name属性查找元素节点\ndocument.documentElement // 获取html的方法\n\n// 节点类型\n元素节点（标签） // 属性nodeType返回值1\n属性节点（标签里的属性）// 返回值2\n文本节点 // 返回值3\n注释节点（comment） // 返回值8\ndocument // 返回值9\nDocumentFragment // 返回值11\n\n// 节点接口\ndom元素.parentNode // 返回当前元素的父节点\ndom元素.childNodes // 子节点们\ndom元素.firstChild // 第一个子节点\ndom元素.lastChild // 最后一个子节点\ndom元素.nextSibling // 后一个兄弟节点 previousSibling -> 前一个兄弟节点\n\n// 元素节点接口\ndom元素.parentElement // 返回当前元素的父元素节点\ndom元素.children // 返回当前元素的元素子节点\ndom元素.firstElementChild // 第一个元素子节点（IE不兼容）\ndom元素.lastElementChild // 最后一个元素子节点（IE不兼容）\ndom元素.nextElementSibling // 返回后一个兄弟元素节点\ndom元素.previousElementSibling // 返回前一个兄弟元素节点\n\n// 节点的四个属性和一个方法\n节点.nodeName // 元素的标签名，以大写形式表示（只读）\n节点.nodeValue // Text节点或者Comment节点的文本内容，（读写）\n节点.nodeType // 该节点的类型（只读）\n节点.attributes // Element节点的属性集合\n节点.hasChildNodes() // 判断节点 是否有子节点\n\n// Element节点的 属性和方法\ndom元素.innerHtml\ndom元素.innerText\ndom元素.attributes // 获取元素身上所有属性构成的集合\ndom元素.setAttribute(\"属性名\",\"属性值\")// 给元素设置属性和属性值\ndom元素.getAttribute(\"属性名\")// 获取属性值的方法\ndom元素.removerAttribute(\"属性\") // 删除属性\n\n\n// ============== 操作接口 ==================\n\n// 增\ndocument.createElement() // 创建元素节点\ndocument.createTextNode() // 创建文本节点\ndocument.creaetComment() //创建注释节点\ndocument.createDocumentFragment() // 创建文档碎片节点\n\n// 插\n父元素节点.appendChild(子元素对象) // 在元素节点的子元素最后插入子元素\n父元素节点.insertBefore(父元素中的子元素a, 需要插入的子元素b) // 最后的结果是，父元素节点中 b元素插入到了 a的前面\n\n\n// 删\n元素节点.remove() // 删除DOM元素（自己）\n父元素节点.removeChild(子元素节点) // 删除子元素\n\n// 替换\n父元素节点.replaceChild(新的节点, 需要被替换的子节点)\n\n// 复制\n元素节点.cloneChild() // 返回值是 复制出来的节点\n\n// 查看滚动条的滚动距离\nwindow.pageXOffset // x轴滚动距离\nwindow.pageYOffset // y轴滚动距离\ndocument.body.scrollLeft // x轴滚动距离（兼容低版本IE）\ndocument.body.scrollTop // y轴滚动距离（兼容低版本IE）\n// 如何兼容，因为如果有 pageXOffset，那么另一个兼容性的结果就是0，所以相加就能解决兼容性问题了\n\n// 让滚动条滚动\nwindow.scroll(x, y) // 滚动到某个位置\nwindow.scrollTo(x, y) // 滚动到某个位置\nwindow.scrollBy(x, y) // 累加滚动，就是每执行一次，就滚动多少位置\n\n// 查看视口的尺寸\nwindow.innerWidth // 视口的宽度\nwindow.innerHeight // 视口的高度\ndocument.documentElement.clientWidth // 兼容低版本IE\ndocument.documentElement.clientHeight // 兼容低版本IE\ndocument.body.clientWidth // 兼容怪异模式\ndocument.body.clientHeight //兼容怪异模式\ndocument.compatMode // 查看渲染模式 | 'CSS1Compat' 标准模式 | 'BackCompat' 怪异模式\n\n// 查看元素的几何尺寸\ndom元素.offsetWidth // 元素的宽度\ndom元素.offsetHeight // 元素的高度\ndom元素.offsetLeft // 元素相当于父级的位置（如果父级有定位的话，如果没有就是相对于文档的距离）\ndom元素.offsetTop // 元素相对于父级的位置（如果父级有定位的话，如果没有就是相对于文档的距离）\ndom元素.offsetParent // 返回最近有定位的父级DOM节点\n\n// 脚本化css\ndom元素.style // 查看所有样式表接口（内容可读可写）\ndom元素.style. = ... // 碰到float这样的保留字，前面加css，例如 cssFloat\ndom元素.style.width = ...\ndom元素.style.backgroundColor = ...\ndom元素.className = ...\n\nwindow.getComputedStyle(ele, null) // 返回某个元素，最后展示效果的 样式表对象（CSSStyleDeclaration）| 只读 | IE8以下不兼容\n\n```\n\n---\n\n### 3.DOM继承树\n\n![](\"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567450094844&di=b6a47996f4baad433acfd0ec74d4d2eb&imgtype=0&src=http%3A%2F%2Faliyunzixunbucket.oss-cn-beijing.aliyuncs.com%2Fjpg%2Fdcef2cf7735f46627c7d9dfec51d1caa.jpg%3Fx-oss-process%3Dimage%2Fresize%2Cp_100%2Fauto-orient%2C1%2Fquality%2Cq_90%2Fformat%2Cjpg%2Fwatermark%2Cimage_eXVuY2VzaGk%3D%2Ct_100\")
\n\n**有那么几点需要注意❣️**\n\n- getElementById 方法定义在 Document.prototype 上（Element节点不能使用）（感觉这点面试的时候可以问，可以问出来面试者的DOM节点基础）\n- getElementsByName 方法定义在HTMLDocument.prototype上（非document节点不能使用）\n- getElementsByTagName 方法定义在 Document.prototype 和 Element.prototype\n- HTMLDocument.prototype定义了一些常用属性，body, head分别指代HTML文档中的 body 和 head 标签\n- Document.prototype 上定义了documentElement属性，指代元素的根元素，在HTML文档中，他总是指代 html 元素\n- getElementsByClassName,querySelectAll,querySelector在 Document.prototype, Element.prototype类中均有定义\n\n---\n\n### 4.试题\n\n**遍历某元素节点树（在原型链上编程）**\n\n```js\n\n```\n\n**封装函数，返回某元素的第n层祖先元素节点**\n\n```html\n\n ![](\"https://pic1.zhimg.com/80/v2-9c8c4a0a3ce5402b1a74f488d79c74d0_hd.jpg\")
\n\n[原文链接](https://zhuanlan.zhihu.com/p/28140450)\n\n---\n\n**模板字符串**\n\n```js\n\n// 实现这个效果\n// 你好世界!\n// 早上好\n\n// ES5\nlet str = '世界'\nlet str = '你好' + str + '!\\n' + '早上好'\n\n// ES6\nlet strEs6 = `\n你好${str}!\n早上好\n`\n\n```\n\n---\n\n### 2.数组拓展\n\n**拓展运算符**\n\n```js\n// 求数组这里面最大的值\nlet arr = [1,2,34,5,6,9]\n\n// 原生API Math.max(1,2,34,5,6,9) 接收的是一组数，所以还需要转一下\nMath.max.apply(null, arr) //ES5 34\nMath.max(...arr) // ES6 34\n\n```\n\n**❣️注意：数组的拓展运算符是浅拷贝**\n\n---\n\n**解构赋值：本质是模式匹配**\n\n```js\n\nlet arr = [1,2,3]\nlet { x, y, z } = arr\nx // 1\ny // 2\nz // 3\n\n```\n\n---\n\n**ES6新增的静态方法：Array.from() && Array.of()**\n\n```js\n// Array.from() 将类数组或者具有迭代器接口的 转为 真正数组\nArray.from(arguments)\n\n// Array.of() 传入参数，创建一个数组（对标 new Array() 创建一个时候有问题的，用of更规范）\nArray.of(13) // [13]\nArray.of(13, 14) // [13, 14]\n\nnew Array(13) // 会创建一个长度 13的数组\nnew Array(13, 14) // [13, 14]\n```\n\n---\n\n**ES6新增原型上的方法：**\n\n- Array.prototype.find() 找数组中是否有满足条件的内容，返回 true/false\n- Array.prototype.findIndex() 找数组中是否有满足条件的内容，返回 坐标/-1\n- Array.prototype.includes() 找数组中是否有满足条件的内容（❣️和find不一样的是，这个内部判断依据是 ==，而 find判断依据是 ===）\n - 也就是这个可以判断是否存在 NaN\n- Array.prototype.fill() 传入一个数，这个数组每一项 都会变成这个数\n- Array.prototype.flat() 降纬数组，参数如果是Infinity可以把任意纬度，降到一维\n- Array.prototype.\n\n```js\n\n// 做个题吧 [1,2,3] 变成 [1,0,2,0,0,3,0,0,0] （1后面加上1个0，2后面加上2个0，3后面加上3个0）\nlet arr = [1,2,3]\narr.map( item => [item, ...new Array(item).fill(0)]).flat() // [1, 0, 2, 0, 0, 3, 0, 0, 0]\n\n```\n\n---\n\n### 3.解构赋值详解\n\n我看着这个功能，看不到底层，只能看这个的规则\n\n```js\n\n// 结构对象\nlet obj = {\n name: '朱昆鹏',\n age: 21\n}\n\n{ name, age } = obj // name = '朱昆鹏', age = 20\n{ name: onName, age: onAge } = obj // onName = '朱昆鹏', onAge = 20\n{ name: onName, age: onAge, sex = 'man' } = obj // onName = '朱昆鹏', onAge = 20, sex = 'man'\n\n\n// 解构数组\nlet arr = [1, 2, 3]\n{x , y, z} = arr // undefined\n{0: x , 1: y, 2: z} = arr // x = 1, y = 2, z = 3\n[x, y, z] = arr // x = 1, y = 2, z = 3\n{ length } = arr // length = 3\n\n```\n\n---\n\n**❣️本质上是模式匹配，主要是为了让你更方便的拿到数据，简化代码**\n\n```js\n// 示例\nlet obj = {\n data: {\n name: '朱昆鹏',\n age: 21\n }\n}\n\n// 不用解构赋值的时候\nlet name = obj.data.name\nlet age = obj.data.age\n\n// 使用解构赋值\nlet { name, age } = obj.data\n\n```\n\n---\n\n### 4.箭头函数\n\n**特点**\n\n- 不用写function关键字\n- 可以不写return（如果不是一样的话，不写的话，就会在最后一样返回 return undefined）\n- 参数不能重复\n- 只能作为函数，不能 new ，没有原型\n- ❣️内部的 this 由定义时外围最接近一层的非箭头函数的 this 组成（箭头函数外层没有包着function，那么恒为this）\n- ❣️箭头函数没有 arguments，但是有拓展参数，是ES6用来取代 arguments的\n\n\n```js\n\nconst sum = (num1, num2) => num1 + num2;\nconst sum = (num1, num2) => ({num1 + num2}); // ❣️返回的如果是一行，并且是对象的时候，语法可能会报错，这时候，就要加一个 () 在外面了\n\nconst fn1 = () => {\n console.log(arguments, this) // arguments 没定义 | this 是 window\n}\n\nlet obj = {\n fn2 () {\n const fn1 = () => {\n console.log(arguments, this) // fn2 的 arguments | this 是 obj（因为箭头函数外层有 function 函数 🔥）\n }\n }\n}\n\n```\n\n---\n\n**拓展参数**\n\n```js\n// 注意事项，...args 必须放到尾部才行，后面不能跟任何参数（前面可以加，这样拓展参数就是剩下的参数）\nconst sum = (...args) => {\n\n // args是一个真正的数组，而arguments是类数组\n args.forEach( item => { \n console.log(item)\n })\n\n}\n\nsum(1,2,3,4,5)\n```\n\n---\n\n**babel编译之后的箭头函数（箭头函数就就是一个语法糖）**\n\n---\n\n### 5.对象的拓展\n\n**Object新增的静态方法**\n\n```js\nlet obj1 = { a: 1, b: 2 }\nlet obj2 = { c: 3, d: 4 }\n\n// Object.assign() 浅拷贝\nObject.assign(obj1, obj2) // 和拓展运算符写法基本一样，不一样的在于，这个会改变参数一的值\nobj1 // { a: 1, b: 2, c: 3, d: 4 } | Object.assign({}, obj1, obj2) 这样写\n\nObject.keys(obj1) // [a, b]\nObject.values(obj1) // [1, 2]\nObject.entries(obj1) // [ ['a', 1], ['b', 2] ]\n\nObject.is(NaN, NaN) // true | Number.isNaN()也能判断\nObject.is(0, -1) // false | \n```\n\n---\n\n### 🔥6.Object.defineProperty\n\n- 简介：ES5规范开始，后续版本迭代，致力于做一件事情，就是把JS底层的功能提供给开发者使用。\n- Object.defineProperty 就是其中的一个（之前是浏览器内部使用的，开发者没办法使用），此方法会直接在一个对象上定义一个新的具有详细描述的属性，或者修改一个对象的现有属性，并返回这个对象\n- 使用\n - 数据描述符\n - value: 'xxx' 属性值 | 默认 ''\n - writable: true 是否可写 | 默认 false\n - configurable: true 是否可配置 | 默认 false\n - enumerable: true 是否可枚举 | 默认 false\n - 存取描述符\n - set: function () {} 属性访问器 进行写操作时调用该方法\n - get: function () {} 属性访问器 进行读操作时调用该方法\n\n---\n\n**之前浏览器 内部使用 Object.defineProperty 的示例**\n\n```js\n// 不可写的案例\nFunction.prototype = '不可写'\nconsole.log(Function.prototype) // ƒ () { [native code] } | 没变\n\n// 不可配置案例\nwindow.a = 10\ndelete window.a // false\n\n// 可枚举案例\nlet obj = {\n name: '朱昆鹏',\n __proto__: {\n age: 20\n }\n}\nfor (let prop in obj) {\n console.log(prop) // name age\n}\n\n// 不可枚举的案例\nfor (let prop in Object.prototype) {\n console.log(prop) // 虽然 Object.prototype 上有很多对象 ，但是结果是 无\n}\n\n```\n\n---\n\n**Object.defineProperty 数据描述符**\n\n```js\nlet obj = {\n // name: '朱昆鹏' // 如果写上的话，默认配置都是 true\n}\n\n// 参数一：对象 | 参数二：属性名 | 参数三：对这个属性的 配置\nObject.defineProperty(obj, 'name', {\n value: '朱昆鹏',\n writable: false, // 是否可写 | 默认 false\n configurable: true, //是否可配置 | 默认 false\n enumerable: true // 是否可枚举 | 默认 false\n})\n\nobj.name = 1\nobj.name // 朱昆鹏\n\ndelete obj.name // true\nobj.name // {}\n```\n\n---\n\n**Object.defineProperty 存取描述符**\n\n```js\nlet obj = {\n // name: '朱昆鹏' // 如果写上的话，默认配置都是 true\n}\n\nlet tempValue = '朱昆鹏 get'\n// 参数一：对象 | 参数二：属性名 | 参数三：对这个属性的 配置\nObject.defineProperty(obj, 'name', {\n // value: '朱昆鹏',\n // writable: false, // 是否可写 | 默认 false\n configurable: true, //是否可配置 | 默认 false\n enumerable: true // 是否可枚举 | 默认 false\n\n // set , get 和 value writable 不能共存（会报错）\n set(newValue) {\n tempValue = newValue\n },\n get() {\n return tempValue\n }\n})\n\n\n// 另一种写法\nlet obj1 = {\n tempValue: '朱昆鹏',\n get name () {\n return this.tempValue\n },\n set name (newValue) {\n this.tempValue = newValue\n }\n}\n\nobj1.name = '测试'\nobj1 // {tempValue: '测试', name: '测试'}\n```\n\n**❣️我觉得这个写法定义了一个多余的变量，不是很好，肯定有更好的方法，我还是多学习一下吧**\n\n---\n\n### 🔥7.数据劫持\n\n- Vue双向数据绑定核心功能是由 Observer, Compile, Watcher 三部分实现\n- 其中 Observer（监听数据变化进行相应的回调 - 数据劫持） 部分功能就是用 Object.defineProperty 来实现的（Vue2.x之后用 Proxy&Reflect 重构了）\n\n**我们来做一个案例：当我们的数据改变的时候，让视图（页面）也随之改变**\n\n```html\n\n\n\n \n \n \n ![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/2.notes/3.JavaScript/ES6%E4%BB%A5%E5%8F%8AJS%E5%86%85%E7%BD%AE%E6%96%B9%E6%B3%95%E6%A2%B3%E7%90%86/1Object.defineProperty%E5%AE%9E%E7%8E%B0%E5%8F%8C%E5%90%91%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A.gif\")
\n\n---\n\n**思考：Vue是怎么监听到 数组中改变的呢？**\n\n```js\n// 在Vue中 数组中改变想要监听，需要用特定的方法，例如 push pop unshift shift...等等\n// 原理是 Vue 重写了这些方法\nObject.defineProperty(Array.property, 'push', {\n\n})\n```\n\n---\n\n### 🔥8.Proxy & Reflect\n\n- 这个东西有兼容性问题，你可能会想了，可以通过 babel 进行编译，编译成ES5不就可以了么，但是 babel 编译本质上是将 ES6语法糖编成 ES5代码，但是 Proxy 和 Reflect 不是语法糖，这是浏览器内部实现的东西，编译之后其实还是他们本身\n\n**Proxy（代理）**\n\n- 植入代理模式的思想，以简洁易懂的方式控制对外部对象的访问\n- 利用内置的 set, get 方法控制属性的读写功能用处比较大，其余 has, delePropery...等方法不太在工作开发中使用，有兴趣可以了解下\n\n```html\n\n\n\n \n \n \n ![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/2.notes/3.JavaScript/ES6%E4%BB%A5%E5%8F%8AJS%E5%86%85%E7%BD%AE%E6%96%B9%E6%B3%95%E6%A2%B3%E7%90%86/clipboard_20200906100429.png\")
\n\n---\n\n或者举个生活中的例子：租房\n\n- 发布订阅模式，就相当于，租户的，和房东 不认识，租户租房要找中介，房东先把房子租出去，也要找房东，租户通知中介要租房了，中介找到合适的了，就通知房东签合同\n- 观察订阅模式，相当于，租户和房东 认识，租户想租房直接找房东租就行了，租户这里存放这 房东租房的方法，少了一个中介的\n\n---\n\n### 发布订阅\n\n> 其实对这里我还是不太理解，感觉还有更好的示例\n\n```js\nconst eventObj = {\n _arr: [], // 中介存放，订阅事件\n \n on(fn) {\n this._arr.push(fn)\n },\n\n emit() {\n this._arr.forEach(fn => fn())\n }\n}\n\nfunction fn1() {\n console.log('租房1')\n}\n\nfunction fn2() {\n console.log('租房1')\n}\n\neventObj.on(fn1) // 订阅\neventObj.on(fn2) // 订阅\n\neventObj.emit() // 执行所有的订阅事件\n```\n\n---\n\n### 观察者模式\n\n```js\n/**\n * 观察者模式\n */\n\nclass Subject {\n constructor(name) {\n this.name = name\n this.Observers = []\n this.state = '玩'\n }\n\n // 被观察者中要存放所有的观察者\n attach(o) {\n this.Observers.push(o)\n }\n\n setState(newState) {\n this.state = newState\n this.Observers.forEach(o => o.update(this))\n }\n}\n\nclass Observer {\n constructor(name) {\n this.name = name\n }\n\n update(body) {\n console.log(`${body.name}跟${this.name}说${body.state}`)\n }\n}\n\n// 小宝宝\n\nlet body = new Subject('小宝宝')\nlet o1 = new Observer('爸爸')\nlet o2 = new Observer('妈妈')\n\nbody.attach(o1)\nbody.attach(o2)\n\nbody.setState('有人打我')\n\n// 小宝宝跟爸爸说有人打我\n// 小宝宝跟妈妈说有人打我\n```\n\n---\n\n### 简单版本\n\n```js\nclass MyPromise{\n\n constructor(executor) {\n this.status = 'pending' // pending Fulfilled Rejected\n this.value = undefined; // 正确返回信息\n this.reason = undefined; // 错误返回信息\n \n this.resovleArr = [] // resovle\n this.rejectArr = [] // reject \n\n\n // 成功\n const resolve = (val) => {\n if (this.status === 'pending') {\n this.status = 'Fulfilled';\n this.value = val;\n this.resovleArr.forEach(fn => fn(this.val));\n }\n }\n\n // 失败\n const reject = (reason) => {\n if (this.status === 'pending') {\n this.status = 'Rejected';\n this.reason = reason;\n this.resovleArr.forEach(fn => fn(this.reason));\n }\n }\n\n try {\n executor(resolve, reject)\n } catch (error) {\n reject(e)\n }\n }\n\n then(onFulfilled, onRejected) {\n \n if (this.status == 'Fulfilled') {\n onFulfilled(this.value)\n }\n\n if (this.status == 'Rejected') {\n onRejected(this.reason)\n }\n\n if (this.status == 'pending') {\n \n this.resovleArr.push(() => {\n onFulfilled(this.value)\n })\n\n this.rejectArr.push(() => {\n onRejected(this.reason)\n })\n }\n }\n}\n\n\nconst promise = new MyPromise((resovle, reject) => {\n setTimeout(() => {\n resovle('成功')\n }, 1000);\n})\n\npromise.then(res => {\n console.log('res', res);\n})\n\n// 问题1：.then 是怎么链式调用的\n```\n\n---\n\n### 传统实现\n\n```js\n// 实现的原理\n\n// promise是一个状态机，能根据不同的状态 触发不同的回调\n// Pending 等待 | Fulfilled 成功 | Rejected 失败\n\n// 参数传一个函数，\nfunction MyPromise (fn) {\n\n // promise是一个状态机，能根据不同的状态 触发不同的回调\n // pending 等待 | Fulfilled 成功 | Rejected 失败\n\n let that = this\n that.status = 'pending';\n that.resolveValue = null;\n that.rejectValue = null;\n \n // 如何解决异步呢？我们执行的时候先不执行，等到res() 触发的时候才触发，我们先记录下\n that.ResoveCallBackLisst = []\n that.RejctCallBackList = []\n\n // 成功\n function resolve (val) {\n if (that.status === 'pending') {\n that.status = 'Fulfilled'\n that.resolveValue = val\n that.ResoveCallBackLisst.forEach(ele => ele())\n } \n }\n\n // 失败\n function reject (val) {\n if (that.status === 'pending') {\n that.status = 'Rejected'\n that.rejectValue = val\n that.RejctCallBackList.forEach(ele => ele())\n }\n }\n\n try {\n fn(resolve, reject)\n } catch(e) {\n reject(e)\n }\n \n}\n\nMyPromise.prototype.then = function (onFulfilled, onRejected) {\n var that = this\n\n if (that.status === 'pending') {\n \n that.ResoveCallBackLisst.push(() => {\n onFulfilled(that.resolveValue)\n })\n\n that.RejctCallBackList.push(() => {\n onRejected(that.rejectValue)\n })\n\n }\n\n if (that.status === 'Fulfilled') {\n onFulfilled(that.resolveValue);\n }\n\n if (that.status === 'Rejected') {\n onRejected(that.rejectValue);\n }\n\n}\n\n\nlet promise = new MyPromise( ( res, rej) => {\n // setTimeout( () => {\n // res('你好世界')\n // }, 3000)\n res('你好世界')\n})\n\npromise.then( res => {\n console.log(res)\n})\n```\n\n"
},
{
"path": "docs/blog/4.JavaScript/5.Underscore库源码分析.md",
"content": "---\ntitle: 5.Underscore库源码分析\ndate: 2020-01-30 00:00:00\npermalink: \ntag: \n - blog\n - 4.JavaScript\n---\n\n> 等待书写中...\n\n**[网址](https://www.html.cn/doc/underscore/)**"
},
{
"path": "docs/blog/4.JavaScript/6.Lodashjs库源码分析.md",
"content": "---\ntitle: 6.Lodashjs库源码分析\ndate: 2020-01-30 00:00:00\npermalink: \ntag: \n - blog\n - 4.JavaScript\n---\n\n> 等待书写中...\n\n**[网址](https://www.lodashjs.com/)**"
},
{
"path": "docs/blog/4.JavaScript/7.函数式编程.md",
"content": "---\ntitle: 7.函数式编程\ndate: 2020-01-30 00:00:00\npermalink: \ntag: \n - blog\n - 4.JavaScript\n---\n\n> 等待书写中...\n\n---\n\n## 第一部分：函数式编程基础\n\n> **函数式编程不是用函数来编程，也不是传统的面向过程编程。** 主要是将复杂的函数 符合成简单的函数（计算理论，递归论，或者拉姆达演算）。运算过程尽量写成一系列嵌套的函数调用\n\n> 举例：React高阶组件\n\n---\n\n### 函数编程的基本概念\n\n- 函数是第一等公民\n- 只用表达式，不用语句\n- 没有副作用\n- 不修改状态\n- 引用透明（函数运行只靠参数）\n\n---\n\n### 核心概念\n\n- 纯函数\n- 函数的柯里化\n- 函数组合\n- Point Free\n- 声明式与命令式代码\n- 惰性求值\n\n---\n\n### 纯函数\n\n对于相同的输入，永远会得到相同的输出，而且没有任何可观察的副作用，也不依赖外部环境的状态\n\n鉴于这个特性能做什么？\n\n- 可以做缓存，因为第一次，我知道输入什么了，第二次就不用计算了，提高性能\n- 纯函数不仅可以有效降低系统的复杂度，还有很多很棒的特性，例如可缓存性\n\n---\n\n### 函数的柯里化\n\n- 传递给函数一部分参数来调用它，让它返回一个函数去处理剩下的参数\n- 作用就是解决了函数不纯的问题，将函数依赖的变量以参数的形式组合成 新的函数\n- 好处：事实上柯里化是一种预加载函数的方法，通过传递较少的参数，得到一个已经记住了这些参数的新函数。某种意义上讲，这是一种对参数的缓存，是一种非常高效的编写函数的方式\n\n---\n\n### 函数组合\n\n- 将需要层层嵌套的函数 通过一个组合函数包一层，使其使用起来更舒适\n\n---\n\n### Point Free\n\n- 把一些对象自带的方法转化成纯函数，不要命名转瞬即逝的中间变量\n- 例如：const f = str => str.toString().split('')\n\n```js\n// 解决\nlet toString = str => str.toString();\nlet split = str => str.split();\n\nlet fn = compost(split(' '), toString)\n\nfn(123) // [1, 2, 3]\n\n// 这种风格能帮助我们减少不必要的命名，让代码保持简洁和通用\n```\n\n---\n\n### 声明式与命令式代码\n\n- 命令式代码：我们通过编写一条又一条指令去让计算机执行一些动作，这其中会涉及到很多繁杂的细节\n- 声明式代码：通过写表达式的方式来声明我们想干什么，而不是通过一步一步的指示\n- 优缺点：\n - 函数式编程这种声明式的代码，对于无副作用的纯函数，我们完全可以不考虑函数内部是如何实现的，专注于编写业务代码，优化代码时，目光只需要集中在这些稳定坚固的函数内部即可\n - 不纯的函数式代码会产生副作用，或者依赖外部系统环境，使用他们的时候总要考虑这些不干净的副作用。在复杂的系统中，这对于程序员的心智来说是极大的负担\n\n---\n\n### 惰性求值，惰性函数\n\n- 在指令式语言中以下代码会按顺序执行，由于每个函数都有可能改动或者依赖于其内部的状态。因此必须顺序执行\n\n\n```js\n// 求累加的函数（未使用惰性函数）\nfunction add(num) {\n let addVale = 0;\n for (let i = 0; i <= num; i++) {\n addVale += i\n }\n return addVale\n}\n\nadd(2000000000) // 1s\nadd(2000000000) // 1s\nadd(2000000000) // 1s\nadd(2000000000) // 1s\n\n// 总共4s\n```\n\n```js\n// 求累加的函数（使用 惰性函数）\nfunction add(num) {\n let addVale = 0;\n for (let i = 0; i <= num; i++) {\n addVale += i\n }\n // 函数函数\n \tadd = function () {\n addVale\n }\n return addVale\n}\n\nadd(2000000000) // 1s\nadd(2000000000) // 0s\nadd(2000000000) // 0s\nadd(2000000000) // 0s\n\n// 总共1s\n```\n\n---\n\n## 第二部分：更加专业的术语\n\n- 高阶函数\n- 尾递归优化\n- 闭包\n- 容器，Functor\n- 错误处理，Either，AP\n- IO\n- Monad\n\n---\n\n### 高阶函数\n\n- 本来我函数不能做很复杂的事情，你给我传过来一个复杂的函数，我一组合就能干很复杂的事情了\n- 将函数当参数，把传入的函数做一个封装，然后返回这个封装函数，达到更高程度的抽象。\n\n---\n\n### 尾递归优化\n\n---\n\n### 闭包\n\n- 在函数里面返回一个函数就会造成闭包，更深层次的我好像也知道，给忘了\n\n---\n\n## 第三部分：流行的函数式编程库\n\n- RxJS\n- cycleJs\n- **lodash.js**, lazy（惰性求值）\n- underscoreJS\n- ramadjs\n\n---\n\n### 1.RxJS（必学）\n\n- 诞生以来一直不温不火，单它的函数响应式编程（FRP）理念非常先进（函数式编程 FP）\n- 在RxJS中，所有的外部输入（用户输入，网络请求等等）都被试做一种事件流（这种机制特别适合处理游戏，上上下下）\n\n---\n\n### 2.lodash\n\n---\n\n### 3.underscoreJS（以后学）\n"
},
{
"path": "docs/blog/4.JavaScript/8.TypeScript.md",
"content": "---\ntitle: 8.TypeScript\ndate: 2020-01-30 00:00:00\npermalink: \ntag: \n - blog\n - 4.JavaScript\n---\n\n> 注意此处：内容不全，待完善...\n\n> TypeScript 是 JavaScript 的超集 [中文网站...](https://www.tslang.cn/)\n\n---\n\n## 🐬第一部分：TypeScript介绍\n\n### 1.安装\n\n- 前置：需要Node环境\n- 安装：npm i -g typescript\n- 验证：tsc -v（tsc是ts的编译器）\n\n```sh\n# 生成package.json\nnpm init\n\n# 生成配置信息（生成 tsconfig.json）\ntsc --init\n\n# 工程化（自动化的帮你buid ts 项目，方便学习）\nnpm install webpack webpack-cli webpack-dev-server ts-loader typescript html-webpack-plugin\n```\n\n---\n\n## 🐌第二部分：TypeScript数据类型\n\n### 1.基本数据类型\n\n```js\n// JavaScript中也有的\nlet age: Number = 10;\nlet myName: String = '朱昆鹏';\nlet married: Boolean = true;\nlet arr1: number[] = [1, 2, 3]\nlet arr2: Array姓名：{{my.name}}
\n年龄：{{my.age}}
\n数组：{{my.arrTest}}
\n{{ index }} : {{ item }}
\n\n\n// 拓展：还能遍历数字，字符串\n{{item}} // 1 2 3 4 5\n{{ item }} // z h u\n```\n\n---\n\n### v-model（双向数据绑定）\n\n**主要用于输入框，做了一层简单的优化，使之有双向绑定的效果，效果就是，输入框内数据改变，data中的数据也一起改变**\n\n原理解析：监听 input 值改变事件，将改变的值，赋予 v-model 绑定的 属性，本质上是 input + value 语法糖\n\n```js\n // 普通输入框\n\n\n // 单选框\n// 多选框也可以，多选框 v-model 应该绑定数组格式\n// 单选框也可以\n\n// select也可以（多选将数据格式调成数组就行）\n\n```\n\n---\n\n### 单向数据流 和 双向数据绑定原理探索以及实现\n\n---\n\n### 修饰符\n\n---\n\n### 写一个todoList\n\n```html\n\n\n\n \n \n \n正在添加的任务：{{task}}
\n{{ name }}
\n![](\"https://cn.vuejs.org/images/lifecycle.png\")
\n\n---\n\n### 7.计算属性和侦听器\n\n\n```html\n\n {{ helloName }}
\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/2.notes/5.MVVM%E6%A1%86%E6%9E%B6%EF%BC%88Vue%EF%BC%89/Vue%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8/%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1.png\")
\n\n**App.vue**\n\n```html\n\n ![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/2.notes/5.MVVM%E6%A1%86%E6%9E%B6%EF%BC%88Vue%EF%BC%89/VueSSR/1.png\")
\n\n---\n\n### 2.后端模板阶段\n\n> ajax出现，页面可以局部刷新\n\n> 那个时代微软IE一家独大，Node虽然也能做后端模板渲染，但是当时Node还未出现，当时有的就是 Java，PHP，C#，Python...\n\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/2.notes/5.MVVM%E6%A1%86%E6%9E%B6%EF%BC%88Vue%EF%BC%89/VueSSR/2.png\")
\n\n---\n\n### 3.前后端分离阶段\n\n> 这时候客户端的能力越来越强，前端能做到事情越来越多（谷歌浏览器开发 v8引擎，使js的执行效率提升很多，并且浏览器市场微软节节败退）\n\n> 前后端分离的好处：后端可以专注的处理数据以及业务逻辑，前端专注制作样式和逻辑交互\n\n> 前后端分离的坏处：首屏加载慢（需要等JS解析好，页面才能出来），不好的SEO\n\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/2.notes/5.MVVM%E6%A1%86%E6%9E%B6%EF%BC%88Vue%EF%BC%89/VueSSR/3.png\")
\n\n---\n\n### 4.Node中间层\n\n> Node作为中间层 拼接数据和HTML，返回新的HTML（Vue SSR就是在此基础上演进的）\n\n> 这里实现的原理主要是使用模板引擎，例如Node自带的 Ejs\n\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/2.notes/5.MVVM%E6%A1%86%E6%9E%B6%EF%BC%88Vue%EF%BC%89/VueSSR/4.png\")
\n\n\n---\n\n### 5.Vue SSR\n\n> 在Node中间层这个思想的基础上，为了能使用Vue全家桶，所以就演进了Vue SSR 的模式\n\n> 将Node代替PHP，JSP，ASP 作为服务端渲染语言，就能使用Node的生态链，如webpack等工具，通过一系列的套路，就能实现Vue SSR\n\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/2.notes/5.MVVM%E6%A1%86%E6%9E%B6%EF%BC%88Vue%EF%BC%89/VueSSR/5.png\")
\n\n---\n\n### 6.总结\n\n> 前端发展速度越来越快，现在 VR,人工智能，都可以在前端运行，以后5G普及之后，我们的技术会演变成什么样，我们也不清楚\n\n> 了解 Vue SSR 产生的历史背景，可以让我们应对未来 新的架构体系的时候，有一份 快速过渡到新体系的把握\n\n> 题外话：我觉得下一个阶段的架构，Serverless（无服务架构）会火起来\n\n- Faas 函数即服务\n- Baas 后端即服务\n\n[掘金文章：写给前端工程师的 Serverless 入门](https://juejin.im/post/5d9c47dce51d4578045a3569)\n\n---\n\n## 🍧第二部分：实现一个 Vue SSR\n\n[GitHub代码地址](https://github.com/zhukunpenglinyutong/vue-ssr-study)\n\n### 1.node-serve\n\n> 将Vue实例，通过Bundle Renderer 输出 HTML字符串\n\n> HTML字符串通过模板拼接成一个真实的HTML页面，返回给客户端\n\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/2.notes/5.MVVM%E6%A1%86%E6%9E%B6%EF%BC%88Vue%EF%BC%89/VueSSR/6.node-serve.png\")
\n\n---\n\n### 2.服务端渲染\n\n> 这里主要是对 Vue-SSR 中 服务端渲染部分的实践\n\n> 作用就是通过 webpack，使我们写的Vue代码，能够输出一个 Vue实例\n\n> 然后交给 Bundle Renderer 函数 输出 HTML字符串，通过Node将拼接好的HTML页面发送给客户端\n\n\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/2.notes/5.MVVM%E6%A1%86%E6%9E%B6%EF%BC%88Vue%EF%BC%89/VueSSR/7.%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%B8%B2%E6%9F%93.png\")
\n\n\n---\n\n### 3.客户端渲染\n\n> 上述通过服务端渲染，可以输出一个完整页面，但是不具有Vue的特性，于是还需要客户端渲染\n\n> 原理是：服务端渲染的页面会携带上特定的字段，例如 #app，并且页面解析到最后 会请求用于客户端渲染的 bunndle.client.js\n\n> 这个会文件 会将Vue实例 挂载到 #app 上，使客户端具有Vue的特性\n\n![](\"https://cloud.githubusercontent.com/assets/499550/17607895/786a415a-5fee-11e6-9c11-45a2cfdf085c.png\")
\n\n[Vue SSR 指南-源码结构](https://ssr.vuejs.org/zh/guide/structure.html#%E9%81%BF%E5%85%8D%E7%8A%B6%E6%80%81%E5%8D%95%E4%BE%8B)\n\n---\n\n## 🍭第三部分：Nuxt基础使用\n\n### 1.初始化项目和项目目录介绍\n\n- 安装：npx create-nuxt-app <项目名>\n - 备注：npx在NPM版本5.2.0默认安装了\n- 然后就让你选择一些配置\n\n---\n\n- assets：资源目录（用于组织未编译的静态资源如 LESS、SASS 或 JavaScript）\n- components：组件目录（用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件，即这些组件不会像页面组件那样有 asyncData 方法的特性）\n- layouts：布局目录（用于组织应用的布局组件）\n- middleware：中间件目录（用于存放应用的中间件）\n- pages：页面目录（用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。\n若无额外配置，该目录不能被重命名）\n- plugins：插件目录（用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件）\n- static：静态文件目录（用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。 服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下）\n- store：Store 目录（用于组织应用的 Vuex 状态树 文件。 Nuxt.js 框架集成了 Vuex 状态树 的相关功能配置，在 store 目录下创建一个 index.js 文件可激活这些配置）\n\n---\n\n### 2.基础路由\n\n> 路由规则是根据pages下的文件自动生成的\n\n**示例**\n\n```sh\n# 在 pages/test.vue \n访问 localhost:3000/test 可以\n\n# 建立 pages/test1/test1.vue\n访问 localhost:3000/test1 不行\n访问 localhost:3000/test1/test1 可以\n\n# 建立 pages/test1/index.vue\n访问 localhost:3000/test1 可以\n```\n\n---\n\n### 3.路由跳转\n\n```js\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/2.notes/5.MVVM%E6%A1%86%E6%9E%B6%EF%BC%88Vue%EF%BC%89/%E9%A1%B9%E7%9B%AE%E3%80%8Aant-design-vue-pro%E3%80%8B/1.Vuecli%E9%85%8D%E7%BD%AE.png\")
\n\n安装其他内容：npm i ant-design-vue moment\n\n```js\nimport Antd from \"ant-design-vue\";\nimport \"ant-design-vue/dist/antd.less\";\nVue.use(Antd);\n\n// 这里会报一个错，说的是引入 .less 的文件还需要一些配置啥的吧，这样就引出了下面要整的 自定义webpack配置\n```\n\n---\n\n### 2.如何自定义Webpack和Babel配置\n\n**自定义webpack配置（vue.config.js）**\n\n```js\n// 新建 vue.config.js\nmodule.exports = {\n css: {\n loaderOptions: {\n less: {\n javascriptEnabled: true,\n },\n css: {\n // 这里的选项会传递给 css-loader\n },\n postcss: {\n // 这里的选项会传递给 postcss-loader\n }\n }\n }\n}\n```\n\n- [本问题 vue-cli 自定义配置网址](https://cli.vuejs.org/zh/config/#css-loaderoptions)\n- [问题解决方案地址](https://github.com/ant-design/ant-motion/issues/44)\n\n---\n\n**Babel配置**\n\n- 我们可以通过 .babel 来转义ES6中识别不了的语法，也可以 通过一个插件来实现 UI组件的按需加载\n\n- 安装：npm i babel-plugin-import --dev\n\n```js\nmodule.exports = {\n presets: [\"@vue/app\"],\n plugins: [\n [\n \"import\",\n { libraryName: \"ant-design-vue\", libraryDirectory: \"es\", style: true }\n ]\n ]\n};\n\n```\n\n- [babel按需加载 配置](https://vue.ant.design/docs/vue/use-with-vue-cli-cn/)\n\n```js\n// 按需加载 代码效果 示例（不用引入CSS了，因为这个插件帮忙引入了）\nimport { Button, Switch } from \"ant-design-vue\";\nVue.use(Button);\nVue.use(Switch);\n\n```\n\n---\n\n**拓展：使用 Prettier格式化代码，例如 给我们自动双引号变单引号，等操作**\n\n\n- [学习笔记](https://www.jianshu.com/p/5f7dbffc257e)\n- [官网](https://prettier.io/docs/en/options.html?spm=a2c4e.11153940.blogcont422690.11.5d0b5721zZ3CkZ)\n\n---\n\n### 3.如何设计一个高拓展性的路由？\n\n**示例路由**\n\n```js\n\nimport Vue from \"vue\";\nimport Router from \"vue-router\";\n\nVue.use(Router);\n\nexport default new Router({\n mode: \"history\",\n base: process.env.BASE_URL,\n routes: [\n {\n path: \"/user\", // 用户相关的路由\n children: [\n {\n path: '/user/login', // 登录\n name: 'login',\n component: () => {\n import(/* webpackChunkName: \"user\" */ \"./views/User/Login.vue\")\n }\n },\n {\n path: '/user/register', // 注册\n name: 'register',\n component: () => {\n import(/* webpackChunkName: \"user\" */ \"./views/User/Register.vue\")\n }\n }\n ]\n }\n ]\n});\n\n```\n\n---\n\n**🔥加载提示库（防止路由切换白屏时间太长的问题，增加友好提示）**\n\n- 安装：npm i nprogress\n\n```js\nimport NProgress from 'nprogress'\nimport 'nprogress/nprogress.css'\n\n// Vue路由守卫\nrouter.beforeEach( (to, form, next) => {\n NProgress.start()\n next()\n})\n\nrouter.afterEach( () => {\n NProgress.done()\n})\n\n```\n\n"
},
{
"path": "docs/blog/7.React/1.React基础.md",
"content": "---\ntitle: 1.React基础\ndate: 2020-01-30 00:00:00\npermalink: \ntag: \n - blog\n - 7.React\n---\n\n> 等待书写中...\n## 🍡第一部分：React初探\n\n### 1.React简介\n\n- react是由Facebook在2013年5月推出的一个前端框架，带来一种函数式编程风格\n- react比vue更灵活一些，Vue比react多一些api，使用起来更简单\n\n---\n\n### 2.React开发环境搭建\n\n**使用脚手架工具来生成**\n\n- 前置条件：有Node环境\n- 安装React脚手架：npm i create-react-app -g\n- 生成工程：create-react-app my-app\n\n---\n\n### 3.工程目录文件简介\n\n- public\n - manifest.json 给PWA使用\n- src 工程文件夹\n - index.js 程序入口文件\n - App.js 组件\n - App.test.js: 测试文件\n\n---\n\n### 4.React中的组件\n\n```js\n// 这就是一个组件，为什么要引入 React呢，因为下面的 div 是JSX的标签，需要引入react进行编译\nimport React from 'react';\n\nfunction App() {\n return (\n ![](\"http://www.elecfans.com/uploads/allimg/180103/2755814-1P1031J241617.png\")
\n\n**电路结构**\n\n> 智能手机的电路是智能手机的核心，负责手机的供电、控制以及手机各种功能的实现。智能手机的电路主要包括：射频电路、语音电路、处理器及存储器电路、电源及充电电路、操作及屏显电路、接口电路，以及其他功能电路（如蓝牙、天线、收音、传感器、振动器、摄像头电路等）\n\n![](\"http://www.elecfans.com/uploads/allimg/180103/2755814-1P1031J3002U.png\")
\n\n---\n\n### 2.智能手机中的重要芯片\n\n**双处理器结构**\n\n![](\"http://www.elecfans.com/uploads/allimg/180103/2755814-1P1031J504304.png\")
\n\n双处理器结构智能手机主要包括：主处理器和从处理器\n\n- **主处理器（ApplicaTIonProcessor，应用处理器）**，运行开放式操作系统以及操作系统之上的各种应用，负责整个系统的控制\n- **从处理器（BasebandProcessor，基带处理器）**，负责基本无线通信，主要包括DBB（DigitalBaseband，数字基带芯片）和ABB（AnalogBaseband，模拟基带），完成语音信号和数字语音信号调制解调、信道编码解码和无线Modem控制\n\n备注：智能手机只是在传统手机的基本硬件结构中BP的部分增加一定的外围电路，如音频芯片、LCD控制、摄像机控制器、扬声器、天线等，就构成了一个完整的智能手机的硬件结构。\n\n---\n\n**单处理器结构**\n\n![](\"http://www.elecfans.com/uploads/allimg/180103/2755814-1P1031J51M12.png\")
\n\n单处理器智能手机只包括一个处理器，所谓的单处理器就是说智能手机的基本通信功能（通话、信息、GPRS等）和多媒体、应用软件的处理只用一个处理器来解决。这枚单处理器集成了数字基带、模拟基带、射频、电源管理、SRAM等功能\n\n---\n\n**中央处理器芯片**\n\n中央处理器（CenterProcessingUnit，CPU）芯片是智能手机的核心部件，手机中的微处理器类似计算机中的中央处理器，它是整台智能手机的控制中枢系统，也是逻辑部分的控制核心。微处理器通过运行存储器内的软件及调用存储器内的数据库，达到对手机整体监控的目的。凡是要处理的数据都要经过CPU来完成，手机各个部分的管理等都离不开微处理器这个司令部的统一、协调指挥。随着集成电路生产技术及工艺水平的不断提高，手机中微处理器的功能越来越强大，如在微处理器中集成先进的数字信号处理器（DSP）等。处理器的性能决定了整部手机的性能。目前智能手机处理器厂商主要有：德州仪器、Intel、高通、三星、Marvell、英伟达、华为等\n\n![](\"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568299815042&di=0df368955ea65f24a785f5a5aabdc3c9&imgtype=0&src=http%3A%2F%2Fimg.leikeji.com%2Fresource%2Fimg%2F1445a5fe0e964780b592b730e2500e5a.jpg\")
\n\n---\n\n**存储芯片（储存信息）**\n\n![](\"http://www.elecfans.com/uploads/allimg/180103/2755814-1P1031J625513.png\")
\n\n智能手机的存储器有多种：Flash存储器、RAM随机存储器、ROM只读存储器等，其中，手机存储器主要用来存储手机的主程序、字库、用户程序、用户数据等\n\n- RAM随机存储器主要用于存储智能手机运行时的程序和数据，需要执行的程序或者需要处理的数据都必须先装入RAM内。\n- ROM只读存储器是指只能从该设备中读取数据而不能往里面写数据的存储器。ROM中的数据是由手机制造商事先编好固化在里面的一些程序，使用者不能随意更改。ROM主要用于检查手机系统的配置情况，并提供最基本的输入输出（I/O）程序。\n- Flash存储器是一种长寿命的非易失性（在断电情况下仍能保持所存储的数据信息）存储器，数据删除不是以单个的字节为单位，而是以固定的区块为单位。由于Flash存储器断电时仍能保存数据，它通常被用来保存设置信息，如用户对手机的设置信息等\n\n\n---\n\n**射频芯片（负责调制和解调信号）**\n\n![](\"http://www.elecfans.com/uploads/allimg/180103/2755814-1P1031J530R4.png\")
\n\n在手机终端中，射频芯片负责射频收发、频率合成、功率放大；而基带芯片负责信号处理和协议处理。简单地说，射频芯片起到一个发射机和接收机的作用。有的射频芯片还为处理器芯片提供26MHz的系统时钟信号。\n\n---\n\n**放大器芯片（放大信号的射频功率）**\n\n![](\"http://www.elecfans.com/uploads/allimg/180103/2755814-1P1031J544237.png\")
\n\n智能手机中的射频功率放大器芯片的作用主要是对射频信号进行放大，使得有足够的功率发射给基站。射频功率放大器是智能手机中耗电量较大的元件之一，它内部主要集成了滤波器、放大器、匹配电路、功率检测、偏压控制等电路\n\n---\n\n**电源管理芯片（管理手机供电）**\n\n![](\"http://www.elecfans.com/uploads/allimg/180103/2755814-1P1031J610459.png\")
\n\n电源管理芯片（PowerManagemenTIntegratedCircuits）是在智能手机系统中承担对电能的变换、分配、检测及其他电能管理职责的芯片。同时，还可以对电池充电进行管理和控制\n\n---\n\n**音频处理器芯片（管理声音）**\n\n智能手机的音频处理器主要处理手机的声音信号，它主要负责接收和发射音频信号，是实现手机听见对方声音的关键元件。音频处理器对基带信号进行解码、D/A转换等处理后输出音频信号\n\n---\n\n## 📚参考列表（致敬）\n\n- [史上最全最详细手机发展史（绝对经典，收藏）](https://www.sohu.com/a/213599424_202311)\n- [移动开发的跨平台技术发展史 | 技术头条（CSDN）](https://blog.csdn.net/csdnnews/article/details/89629327)\n- [智能手机的硬件组成部分及结构图](http://www.elecfans.com/xinkeji/610458.html)\n\n"
},
{
"path": "docs/blog/8.移动端/1.移动端H5页面适配.md",
"content": "---\ntitle: 0.移动端开发绪论\ndate: 2020-01-30 00:00:00\npermalink: \ntag: \n - blog\n - 8.移动端\n---\n\n> 适配采用 rem 的方案\n\n## 🍇第一部分：rem代码 和 基础示例\n\n### rem.js\n\n```js\n!function(win, doc) {\n\tvar htmlDom = doc.getElementsByTagName(\"html\")[0];\n\tvar resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';\n\tvar recalc = function() {\n\t\tvar htmlWidth = doc.documentElement.clientWidth || doc.body.clientWidth;\n\t\thtmlDom.style.fontSize = htmlWidth / 10 + 'px';\n\t}\n\n\tif (!doc.addEventListener) return;\n win.addEventListener(resizeEvt, recalc, false);\n doc.addEventListener('DOMContentLoaded', recalc, false);\n}(window, document);\n```\n\n---\n\n### html示例\n\n```html\n\n\n\n \n \n \n ![](\"https://raw.githubusercontent.com/cipchk/vscode-cssrem/master/screenshots/cssrem.gif\")
\n\n---\n\n### webpack postcss 插件 high-pxtorem【🔥 推荐】\n\n这个可以在webpack编译的时候，将 px 转为 rem，我可以像写普通代码一样，不用太关心适配问题了。\n\n我现在在用这个，但是需要你有一定的 webpack 基础才行，但是用起来就没事了，要是没有一定的基础，可能都配置不起来\n\n[high-pxtorem npm地址](https://www.npmjs.com/package/high-pxtorem)\n"
},
{
"path": "docs/blog/8.移动端/2.移动端H5手机内调试.md",
"content": "---\ntitle: 2.移动端H5手机内调试\ndate: 2020-01-30 00:00:00\npermalink: \ntag: \n - blog\n - 8.移动端\n---\n\n> 移动端H5手机内调试 神器：vconsole\n\n## 🥞第一部分：vconsole使用\n\n### 基本使用\n\n```html\n\n\n\n```\n\n- [vcondole npm 地址](https://www.npmjs.com/package/vconsole)\n\n**功能：**\n\n- 查看 console 日志\n- 查看网络请求\n- 查看页面 element 结构\n- 查看 Cookies、localStorage 和 SessionStorage\n- 手动执行 JS 命令行\n- 自定义插件\n\n---\n\n### 效果展示（点击 右下角 绿色按钮 👀）\n\n\n\n---"
},
{
"path": "docs/blog/8.移动端/3.Flutter.md",
"content": "---\ntitle: 3.Flutter\ndate: 2020-01-30 00:00:00\npermalink: \ntag: \n - blog\n - 8.移动端\n---\n\n> 等待书写中..."
},
{
"path": "docs/blog/8.移动端/4.React-Native.md",
"content": "---\ntitle: 4.React-Native\ndate: 2020-01-30 00:00:00\npermalink: \ntag: \n - blog\n - 8.移动端\n---\n\n> 等待书写中..."
},
{
"path": "docs/blog/8.移动端/5.移动端原生开发/5.移动端原生开发.md",
"content": "---\ntitle: 5.移动端原生开发\ndate: 2020-01-30 00:00:00\npermalink: \ntag: \n - blog\n - 8.移动端\n---\n\n## 第一章：Android系统简介和环境搭建\n\n环境搭建是真的难...，我这里用的是 android Studio Mac 版本\n\n---\n\n## 第二章：Android基础UI使用\n\n> 布局管理器之间的继承关系：布局管理器都是以ViewGroup（视图组，这个是通过View继承来的）为基类派生出来的，使用布局管理器可以适配不同手机屏幕的分辨率，尺寸大小\n\n---\n\n### 🔥 第一节：Android布局（线性布局）\n\n> 线性布局（LinearLayout）：按照垂直或者水平方向布局的组件\n\n通过 android:orientation 属性设置线性布局方向\n\n通用属性（每个控件都要设置的）\n\n- android:layout_width=\"wrap_content\" 当前组件的宽度\n - 值：wrap_content：包裹内容\n - 值：match_parent：匹配父控件\n- android:layout_height=\"wrap_content\" 当前组件的高度\n - 值：wrap_content：包裹内容\n - 值：match_parent：匹配父控件\n- android:orientation 设置布局方向\n - horizontal：按照水平方向摆放\n - vertical：垂直摆放\n- android:gravity 用来控制组件的对齐方式\n- android:layout_gravity 设置的是本身的对齐方式\n- layout_weight 控制各个组件在布局中的相对大小\n- android:padding：内边距\n - android:paddingTop=\"50dp\" ：内边距（顶部）\n - ...\n - android：padding=\"\" ：内边距（四个方向，和css类似）\n- android:layout_margin：外边距\n - android:layout_marginTop=\"50dp\"：外边距（顶部）\n - ...\n - android:layout_margin（四个方向）\n\n---\n\n非通用布局\n\n- android:gravity：控制容器内子控件的方向\n - 值：left,right,top,bottom\n - top|right（两个属性一起加，右上）\n - center(垂直水平居中)，center_horizontal（水平居中），center_vertical（垂直居中）\n- android:layout_gravity：设置本身的方向（常用在子组件中，取值方向和android:gravity一样）\n- 权重布局：等分，类似于css栅格布局（值越大，占用的空间越大）\n - android:layout_weight=\"1\"\n - android:layout_height=\"1\"\n\n---\n\n常用单位\n\n- 设置长宽的时候，dp（dip）\n- 使用字体的时候，使用sp\n- in：表示英寸（屏幕物理尺寸）\n- mm：表示毫米（屏幕物理尺寸）\n- pt：表示一个点（屏幕物理尺寸）\n\n---\n\n```xml\n\n![](\"./img/1.png\")
\n\n---\n\n### 🔥 第二节：Android布局（相对布局）\n\n> 相对布局（RelativeLayout）：相对其他\n\n---\n\n### 🔥 第三节：Android布局（帧布局）\n\n> 帧布局（FrameLayout）：组件从屏幕左上方布局组件\n\n---\n\n### 第四节：Android布局（绝对布局）\n\n> 绝对布局（AbsoluteLayout）：按照绝对坐标来布局组件\n\n---\n\n\n### 第五节：Android布局（表格布局）\n\n> 表格布局（TableLayout）：按照行列方式布局组件\n\n---\n\n### 第六节：TextView（）\n\n---\n\n### 第七节：EditText（可编辑的文本框）\n\n```xml\n\n![](\"./img/3.png\")
\n\n```xml\n\n![](\"./img/2.png\")
\n\n```xml\n\n🕓 {{ item.date }}
\n![](\"./img/1.jpg\")
\n\n---\n\n## 2.南北差距超过东西差距\n"
},
{
"path": "docs/pages/github-open/github-open.md",
"content": "---\ntitle: \"开源项目\"\npermalink: \"github-open\"\nhideLastUpdated: True\ncategories: noRight\n---\n\n---\n\n## 图片压缩客户端（Electron）\n\n---\n\n\n\n"
},
{
"path": "docs/pages/guide.md",
"content": "---\ntitle: \"导航\"\npermalink: \"guide\"\nhideLastUpdated: True\ncategories: noRight\n---\n\n\n {{ item.name }}
\n{{ item.desc }}
\n![](\"./img/ming.jpg\")
\n ![](\"./img/wb.png\")
\n 负责日常业务开发，人员需求分配，团队协调，前端体系优化，产出效能工具等工作
\n2020年度玩吧大明星（名额是总人数的5%）
\n![](\"./img/zywl.png\")
\n 主要负责物联网可视化平台搭建工作，前端技术选型，前端体系搭建工作
\n![](\"./img/rm.png\")
\n 平均成绩：94/100，论文已过，英语已过，2022年3月拿到双证（学位证和学历证）
\n![](\"./img/hbgy.png\")
\n 分数只过了二本线，报不了本科计算机专业，最终选择报了专科学校学校里面计算机第一的（之前认为实力更重要，当然后来才发现学历是敲门砖 😢，但是我不会放弃努力的）
\n学校在2020年10月升为本科（河北工业职业技术大学），可见学校综合确实不错，符合当时的决定：放弃二本，选择学习技术，当然我后期也会为这个选择买单：1.报名非统本科，2.本科结束后，报名国外全日硕士（国家留服认证）补全学历短板
\n在校期间的表现：担任班长，软件社团社长，校级学生会干部，获得河北省大数据比赛三等奖，省级优秀毕业生，河北省优秀志愿者，互联网+创新创业大赛河北省二等奖，三级（高级）职业资格证书
\nbug: 修复友链移动端适配问题
\ndoc: 新增两个友链（开心）
\nbug: 修复icon window 展示的问题（直接取消了icon）
\nbug: 解决暗黑模式插件点击第一次失效问题
\ndoc: 增加网站更新栏目，调整友链位置
\nstyle: 优化友链展示效果
\ndelete: 暂时取消网站介绍，个人计划两个栏目（因为没啥内容，所以需要先想一下）
\n| 表头1 | \n表头2 | \n表头3 | \n
|---|---|---|
| 第一行1 | \n第一行2 | \n第一行3 | \n
| 第二行1 | \n第二行2 | \n第二行3 | \n
| 备注： | \n
![](\"https://www.runoob.com/wp-content/uploads/2015/07/3791e575c48b3698be6a94ae1dbff79d.png\")
\n\n- 🔥flex-direction（决定主轴方向）：row | row-reverse | column | column-reverse;\n - row（默认值）：主轴为水平方向，起点在左端。\n - row-reverse：主轴为水平方向，起点在右端。\n - column：主轴为垂直方向，起点在上沿。\n - column-reverse：主轴为垂直方向，起点在下沿\n- 🔥justify-content（项目在主轴上的对齐方式）：flex-start | flex-end | center | space-between | space-around;\n - flex-start（默认值）：左对齐\n - flex-end：右对齐\n - center： 居中\n - space-between：两端对齐，项目之间的间隔都相等。\n - space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍\n- 🔥align-items（项目在交叉轴上如何对齐）：flex-start | flex-end | center | baseline | stretch;\n - flex-start：交叉轴的起点对齐。\n - flex-end：交叉轴的终点对齐。\n - center：交叉轴的中点对齐。\n - baseline: 项目的第一行文字的基线对齐。\n - stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度\n- [更多访问](https://www.runoob.com/w3cnote/flex-grammar.html)\n\n\n---\n\n### 2.网格布局\n\n---\n\n### 3.圣杯布局\n\n---\n\n### 4.双飞翼布局\n\n---\n\n### 5.清除浮动（float）\n\n```html\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/1.quickcheck/1.%E5%89%8D%E7%AB%AF/1.%E5%B8%83%E5%B1%80%E4%B8%8E%E6%A0%B7%E5%BC%8F%E9%80%9F%E6%9F%A5/4.png\")
\n\n---\n\n### 6.子盒子撑开父盒子，让父盒子的高随内容自适应\n\n```css\nheight: auto\n```\n\n---\n\n### 7.将元素垂直居中于另一个元素\n\n```html\nVertically centered without changing the position property.
![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/1.quickcheck/1.%E5%89%8D%E7%AB%AF/1.%E5%B8%83%E5%B1%80%E4%B8%8E%E6%A0%B7%E5%BC%8F%E9%80%9F%E6%9F%A5/12.png\")
\n\n---\n\n### 8.恒定宽高比\n\n```html\n\n```\n\n```css\n.constant-width-to-height-ratio {\n background: #333;\n width: 50%;\n}\n.constant-width-to-height-ratio::before {\n content: '';\n padding-top: 100%;\n float: left;\n}\n.constant-width-to-height-ratio::after {\n content: '';\n display: block;\n clear: both;\n}\n```\n\n---\n\n## 🐑第二部分：常用样式\n\n### 1.重置样式\n\n**reset.css**\n\n```css\n/* http://meyerweb.com/eric/tools/css/reset/ \n v2.0 | 20110126\n License: none (public domain)\n*/\n\nhtml, body, div, span, applet, object, iframe,\nh1, h2, h3, h4, h5, h6, p, blockquote, pre,\na, abbr, acronym, address, big, cite, code,\ndel, dfn, em, img, ins, kbd, q, s, samp,\nsmall, strike, strong, sub, sup, tt, var,\nb, u, i, center,\ndl, dt, dd, ol, ul, li,\nfieldset, form, label, legend,\ntable, caption, tbody, tfoot, thead, tr, th, td,\narticle, aside, canvas, details, embed, \nfigure, figcaption, footer, header, hgroup, \nmenu, nav, output, ruby, section, summary,\ntime, mark, audio, video {\n\tmargin: 0;\n\tpadding: 0;\n\tborder: 0;\n\tfont-size: 100%;\n\tfont: inherit;\n\tvertical-align: baseline;\n}\n/* HTML5 display-role reset for older browsers */\narticle, aside, details, figcaption, figure, \nfooter, header, hgroup, menu, nav, section {\n\tdisplay: block;\n}\nbody {\n\tline-height: 1;\n}\nol, ul {\n\tlist-style: none;\n}\nblockquote, q {\n\tquotes: none;\n}\nblockquote:before, blockquote:after,\nq:before, q:after {\n\tcontent: '';\n\tcontent: none;\n}\ntable {\n\tborder-collapse: collapse;\n\tborder-spacing: 0;\n}\n```\n\n---\n\n**normalize.css**\n\n[内容太多不复制了，查看这个粘贴吧](https://necolas.github.io/normalize.css/latest/normalize.css)\n\n### 2.创建加载动画\n\n**加载动画一**\n\n```html\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/1.quickcheck/1.%E5%89%8D%E7%AB%AF/1.%E5%B8%83%E5%B1%80%E4%B8%8E%E6%A0%B7%E5%BC%8F%E9%80%9F%E6%9F%A5/1.gif\")
\n\n---\n\n**加载动画二**\n\n```html\n\n```\n\n```css\n@keyframes donut-spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n.donut {\n display: inline-block;\n border: 4px solid rgba(0, 0, 0, 0.1);\n border-left-color: #7983ff;\n border-radius: 50%;\n width: 30px;\n height: 30px;\n animation: donut-spin 1.2s linear infinite;\n}\n```\n\n**效果展示**\n\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/1.quickcheck/1.%E5%89%8D%E7%AB%AF/1.%E5%B8%83%E5%B1%80%E4%B8%8E%E6%A0%B7%E5%BC%8F%E9%80%9F%E6%9F%A5/10.gif\")
\n\n---\n\n### 3.按钮边框动画\n\n```html\n\n```\n\n```css\n.button {\n background-color: #c47135;\n border: none;\n color: #ffffff;\n outline: none;\n padding: 12px 40px 10px;\n position: relative;\n}\n.button:before,\n.button:after {\n border: 0 solid transparent;\n transition: all 0.25s;\n content: '';\n height: 24px;\n position: absolute;\n width: 24px;\n}\n.button:before {\n border-top: 2px solid #c47135;\n left: 0px;\n top: -5px;\n}\n.button:after {\n border-bottom: 2px solid #c47135;\n bottom: -5px;\n right: 0px;\n}\n.button:hover {\n background-color: #c47135;\n}\n.button:hover:before,\n.button:hover:after {\n height: 100%;\n width: 100%;\n}\n```\n\n**效果演示**\n\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/1.quickcheck/1.%E5%89%8D%E7%AB%AF/1.%E5%B8%83%E5%B1%80%E4%B8%8E%E6%A0%B7%E5%BC%8F%E9%80%9F%E6%9F%A5/2.gif\")
\n\n---\n\n### 4.使用CSS创建图形\n\n**圆形**\n\n```html\n\n```\n\n```css\n.circle {\n border-radius: 50%;\n width: 2rem;\n height: 2rem;\n background: #333;\n}\n```\n\n**效果演示**\n\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/1.quickcheck/1.%E5%89%8D%E7%AB%AF/1.%E5%B8%83%E5%B1%80%E4%B8%8E%E6%A0%B7%E5%BC%8F%E9%80%9F%E6%9F%A5/3.png\")
\n\n---\n\n**三角形**\n\n```html\n\n```\n\n```css\n.triangle {\n width: 0;\n height: 0;\n border-top: 20px solid #333;\n border-left: 20px solid transparent;\n border-right: 20px solid transparent;\n}\n```\n\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/1.quickcheck/1.%E5%89%8D%E7%AB%AF/1.%E5%B8%83%E5%B1%80%E4%B8%8E%E6%A0%B7%E5%BC%8F%E9%80%9F%E6%9F%A5/25.png\")
\n\n\n\n---\n\n### 5.li标签计数器\n\n```html\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/1.quickcheck/1.%E5%89%8D%E7%AB%AF/1.%E5%B8%83%E5%B1%80%E4%B8%8E%E6%A0%B7%E5%BC%8F%E9%80%9F%E6%9F%A5/5.png\")
\n\n---\n\n### 6.自定义滚动条\n\n```html\n\n```\n```css\n.custom-scrollbar {\n height: 70px;\n overflow-y: scroll;\n}\n/* To style the document scrollbar, remove `.custom-scrollbar` */\n.custom-scrollbar::-webkit-scrollbar {\n width: 8px;\n}\n.custom-scrollbar::-webkit-scrollbar-track {\n box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);\n border-radius: 10px;\n}\n.custom-scrollbar::-webkit-scrollbar-thumb {\n border-radius: 10px;\n box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);\n}\n```\n\n**效果展示**\n\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/1.quickcheck/1.%E5%89%8D%E7%AB%AF/1.%E5%B8%83%E5%B1%80%E4%B8%8E%E6%A0%B7%E5%BC%8F%E9%80%9F%E6%9F%A5/6.gif\")
\n\n---\n\n### 7.自定义文本选择效果\n\n```html\nSelect some of this text.
\n```\n\n```css\n::selection {\n background: aquamarine;\n color: black;\n}\n.custom-text-selection::selection {\n background: deeppink;\n color: white;\n}\n```\n\n**效果展示**\n\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/1.quickcheck/1.%E5%89%8D%E7%AB%AF/1.%E5%B8%83%E5%B1%80%E4%B8%8E%E6%A0%B7%E5%BC%8F%E9%80%9F%E6%9F%A5/7.gif\")
\n\n---\n\n### 8.使文本内容无法被选择\n\n```html\nYou can select me.
\nYou can't select me!
\n```\n\n```css\n.unselectable {\n user-select: none;\n}\n```\n\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/1.quickcheck/1.%E5%89%8D%E7%AB%AF/1.%E5%B8%83%E5%B1%80%E4%B8%8E%E6%A0%B7%E5%BC%8F%E9%80%9F%E6%9F%A5/9.gif\")
\n\n\n---\n\n### 9.自定义变量\n\n```html\nCSS is awesome!
\n```\n\n```css\n:root {\n /* 在此处放置变量以全局使用变量. */\n}\n.custom-variables {\n --some-color: #da7800;\n --some-keyword: italic;\n --some-size: 1.25em;\n --some-complex-value: 1px 1px 2px whitesmoke, 0 0 1em slategray, 0 0 0.2em slategray;\n color: var(--some-color);\n font-size: var(--some-size);\n font-style: var(--some-keyword);\n text-shadow: var(--some-complex-value);\n}\n```\n\n**效果展示**\n\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/1.quickcheck/1.%E5%89%8D%E7%AB%AF/1.%E5%B8%83%E5%B1%80%E4%B8%8E%E6%A0%B7%E5%BC%8F%E9%80%9F%E6%9F%A5/8.png\")
\n\n---\n\n### 10.动态阴影（基于元素本身颜色的阴影）\n\n```html\n\n```\n\n```css\n.dynamic-shadow {\n position: relative;\n width: 10rem;\n height: 10rem;\n background: linear-gradient(75deg, #6d78ff, #00ffb8);\n z-index: 1;\n}\n.dynamic-shadow::after {\n content: '';\n width: 100%;\n height: 100%;\n position: absolute;\n background: inherit;\n top: 0.5rem;\n filter: blur(0.4rem);\n opacity: 0.7;\n z-index: -1;\n}\n```\n\n**效果展示**\n\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/1.quickcheck/1.%E5%89%8D%E7%AB%AF/1.%E5%B8%83%E5%B1%80%E4%B8%8E%E6%A0%B7%E5%BC%8F%E9%80%9F%E6%9F%A5/11.png\")
\n\n---\n\n### 11.在容器中合适的展示图像\n\n更改图像在其容器内的适合度和位置，同时保留其纵横比。以前只能使用背景图像和background-size属性。\n\n```html\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/1.quickcheck/1.%E5%89%8D%E7%AB%AF/1.%E5%B8%83%E5%B1%80%E4%B8%8E%E6%A0%B7%E5%BC%8F%E9%80%9F%E6%9F%A5/13.png\")
\n\n---\n\n### 12.渐变文字\n\n```html\nGradient text
\n```\n\n```css\n.gradient-text {\n background: -webkit-linear-gradient(pink, red);\n -webkit-text-fill-color: transparent;\n -webkit-background-clip: text;\n}\n```\n\n**效果展示**\n\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/1.quickcheck/1.%E5%89%8D%E7%AB%AF/1.%E5%B8%83%E5%B1%80%E4%B8%8E%E6%A0%B7%E5%BC%8F%E9%80%9F%E6%9F%A5/14.png\")
\n\n---\n\n### 13.悬停效果动画\n\n**悬停阴影框动画**\n\n```html\nBox it!
\n```\n\n```css\n.hover-shadow-box-animation {\n display: inline-block;\n vertical-align: middle;\n transform: perspective(1px) translateZ(0);\n box-shadow: 0 0 1px transparent;\n margin: 10px;\n transition-duration: 0.3s;\n transition-property: box-shadow, transform;\n}\n.hover-shadow-box-animation:hover,\n.hover-shadow-box-animation:focus,\n.hover-shadow-box-animation:active {\n box-shadow: 1px 10px 10px -10px rgba(0, 0, 24, 0.5);\n transform: scale(1.2);\n}\n```\n\n**效果展示**\n\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/1.quickcheck/1.%E5%89%8D%E7%AB%AF/1.%E5%B8%83%E5%B1%80%E4%B8%8E%E6%A0%B7%E5%BC%8F%E9%80%9F%E6%9F%A5/15.gif\")
\n\n---\n\n**悬停下划线动画**\n\n```html\nHover this text to see the effect!
\n```\n\n```css\n.hover-underline-animation {\n display: inline-block;\n position: relative;\n color: #0087ca;\n}\n.hover-underline-animation::after {\n content: '';\n position: absolute;\n width: 100%;\n transform: scaleX(0);\n height: 2px;\n bottom: 0;\n left: 0;\n background-color: #0087ca;\n transform-origin: bottom right;\n transition: transform 0.25s ease-out;\n}\n.hover-underline-animation:hover::after {\n transform: scaleX(1);\n transform-origin: bottom left;\n}\n```\n\n**效果展示**\n\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/1.quickcheck/1.%E5%89%8D%E7%AB%AF/1.%E5%B8%83%E5%B1%80%E4%B8%8E%E6%A0%B7%E5%BC%8F%E9%80%9F%E6%9F%A5/16.gif\")
\n\n---\n\n**鼠标光标渐变跟踪**\n\n```html\n\n```\n\n```css\n.mouse-cursor-gradient-tracking {\n position: relative;\n background: #7983ff;\n padding: 0.5rem 1rem;\n font-size: 1.2rem;\n border: none;\n color: white;\n cursor: pointer;\n outline: none;\n overflow: hidden;\n}\n.mouse-cursor-gradient-tracking span {\n position: relative;\n}\n.mouse-cursor-gradient-tracking::before {\n --size: 0;\n content: '';\n position: absolute;\n left: var(--x);\n top: var(--y);\n width: var(--size);\n height: var(--size);\n background: radial-gradient(circle closest-side, pink, transparent);\n transform: translate(-50%, -50%);\n transition: width 0.2s ease, height 0.2s ease;\n}\n.mouse-cursor-gradient-tracking:hover::before {\n --size: 200px;\n}\n```\n\n```js\nvar btn = document.querySelector('.mouse-cursor-gradient-tracking')\nbtn.onmousemove = function(e) {\n var x = e.pageX - btn.offsetLeft - btn.offsetParent.offsetLeft\n var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop\n btn.style.setProperty('--x', x + 'px')\n btn.style.setProperty('--y', y + 'px')\n}\n```\n\n**效果展示**\n\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/1.quickcheck/1.%E5%89%8D%E7%AB%AF/1.%E5%B8%83%E5%B1%80%E4%B8%8E%E6%A0%B7%E5%BC%8F%E9%80%9F%E6%9F%A5/17.gif\")
\n\n---\n\n### 14.:not 创造元素\n\n```html\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/1.quickcheck/1.%E5%89%8D%E7%AB%AF/1.%E5%B8%83%E5%B1%80%E4%B8%8E%E6%A0%B7%E5%BC%8F%E9%80%9F%E6%9F%A5/18.png\")
\n\n---\n\n### 15.溢出滚动渐变\n\n```html\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/1.quickcheck/1.%E5%89%8D%E7%AB%AF/1.%E5%B8%83%E5%B1%80%E4%B8%8E%E6%A0%B7%E5%BC%8F%E9%80%9F%E6%9F%A5/19.gif\")
\n\n---\n\n### 16.漂亮的文字强调\n\n一个更好的替代方案text-decoration: underline或下降器不会削减下划线。本机实现，text-decoration-skip-ink: auto但它对下划线的控制较少。\n\n```html\nPretty text underline without clipping descending letters.
\n```\n\n```css\n.pretty-text-underline {\n display: inline;\n text-shadow: 1px 1px #f5f6f9, -1px 1px #f5f6f9, -1px -1px #f5f6f9, 1px -1px #f5f6f9;\n background-image: linear-gradient(90deg, currentColor 100%, transparent 100%);\n background-position: bottom;\n background-repeat: no-repeat;\n background-size: 100% 1px;\n}\n.pretty-text-underline::-moz-selection {\n background-color: rgba(0, 150, 255, 0.3);\n text-shadow: none;\n}\n.pretty-text-underline::selection {\n background-color: rgba(0, 150, 255, 0.3);\n text-shadow: none;\n}\n```\n\n**效果展示**\n\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/1.quickcheck/1.%E5%89%8D%E7%AB%AF/1.%E5%B8%83%E5%B1%80%E4%B8%8E%E6%A0%B7%E5%BC%8F%E9%80%9F%E6%9F%A5/20.png\")
\n\n---\n\n### 17.分割线\n\n**图形分割线**\n\n```html\n\n```\n\n```css\n.shape-separator {\n position: relative;\n height: 48px;\n background: #333;\n}\n.shape-separator::after {\n content: '';\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='m12 0l12 12h-24z' fill='%23fff'/%3E%3C/svg%3E\");\n position: absolute;\n width: 100%;\n height: 12px;\n bottom: 0;\n}\n```\n\n**效果展示**\n\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/1.quickcheck/1.%E5%89%8D%E7%AB%AF/1.%E5%B8%83%E5%B1%80%E4%B8%8E%E6%A0%B7%E5%BC%8F%E9%80%9F%E6%9F%A5/21.png\")
\n\n---\n\n**信封分割线**\n\n```js\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/1.quickcheck/1.%E5%89%8D%E7%AB%AF/1.%E5%B8%83%E5%B1%80%E4%B8%8E%E6%A0%B7%E5%BC%8F%E9%80%9F%E6%9F%A5/22.gif\")
\n\n---\n\n### 19.使用操作系统的本机字体\n\n```html\nThis text uses the system font.
\n```\n\n```css\n.system-font-stack {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,\n Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;\n}\n```\n\n**效果展示**\n\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/1.quickcheck/1.%E5%89%8D%E7%AB%AF/1.%E5%B8%83%E5%B1%80%E4%B8%8E%E6%A0%B7%E5%BC%8F%E9%80%9F%E6%9F%A5/23.png\")
\n\n---\n\n### 20.CSS创建切换开关\n\n```html\n \n```\n\n```css\n.switch {\n position: relative;\n display: inline-block;\n width: 40px;\n height: 20px;\n background-color: rgba(0, 0, 0, 0.25);\n border-radius: 20px;\n transition: all 0.3s;\n}\n.switch::after {\n content: '';\n position: absolute;\n width: 18px;\n height: 18px;\n border-radius: 18px;\n background-color: white;\n top: 1px;\n left: 1px;\n transition: all 0.3s;\n}\ninput[type='checkbox']:checked + .switch::after {\n transform: translateX(20px);\n}\ninput[type='checkbox']:checked + .switch {\n background-color: #7983ff;\n}\n.offscreen {\n position: absolute;\n left: -9999px;\n}\n```\n\n**效果展示**\n\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/1.quickcheck/1.%E5%89%8D%E7%AB%AF/1.%E5%B8%83%E5%B1%80%E4%B8%8E%E6%A0%B7%E5%BC%8F%E9%80%9F%E6%9F%A5/24.gif\")
\n\n---\n\n### 21.截断文本\n\n**以省略号结尾**\n\n```html\nIf I exceed one line's width, I will be truncated.
\n```\n\n```css\n.truncate-text {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n width: 200px;\n}\n```\n\n**效果展示**\n\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/1.quickcheck/1.%E5%89%8D%E7%AB%AF/1.%E5%B8%83%E5%B1%80%E4%B8%8E%E6%A0%B7%E5%BC%8F%E9%80%9F%E6%9F%A5/26.png\")
\n\n---\n\n**淡化结束**\n\n```html\n\n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut\n labore et.\n
\n```\n\n```css\n.truncate-text-multiline {\n overflow: hidden;\n display: block;\n height: 109.2px;\n margin: 0 auto;\n font-size: 26px;\n line-height: 1.4;\n width: 400px;\n position: relative;\n}\n.truncate-text-multiline:after {\n content: '';\n position: absolute;\n bottom: 0;\n right: 0;\n width: 150px;\n height: 36.4px;\n background: linear-gradient(to right, rgba(0, 0, 0, 0), #f5f6f9 50%);\n}\n```\n\n**效果展示**\n\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/1.quickcheck/1.%E5%89%8D%E7%AB%AF/1.%E5%B8%83%E5%B1%80%E4%B8%8E%E6%A0%B7%E5%BC%8F%E9%80%9F%E6%9F%A5/27.png\")
\n\n---\n\n### 22.斑马条纹列表\n\n```html\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/1.quickcheck/1.%E5%89%8D%E7%AB%AF/1.%E5%B8%83%E5%B1%80%E4%B8%8E%E6%A0%B7%E5%BC%8F%E9%80%9F%E6%9F%A5/28.png\")
\n\n---\n\n### 23.CSS抖动动画\n\n```css\n// 动画\nshake {\n transform-origin: center center;\n animation: shake 1.5s .2s ease-in-out both infinite;\n}\n\n@keyframes shake {\n 0%, 100% {\n transform: rotate(0deg);\n /* 这里可以设置中心点 */\n transform-origin: 50% 0;\n }\n\n 5% {\n transform: rotate(2deg);\n }\n\n 10%, 20%, 30% {\n transform: rotate(-4deg);\n }\n\n 15%, 25%, 35% {\n transform: rotate(4deg);\n }\n\n 40% {\n transform: rotate(-2deg);\n }\n\n 45% {\n transform: rotate(2deg);\n }\n\n 50% {\n transform: rotate(0deg);\n }\n}\n```\n\n---\n\n### 24.图片放大缩小动画\n\n```css\n.immediate-invitationd {\n position: relative;\n animation: mymove 2.5s infinite;\n animation-timing-function: ease-in-out; /* 动画的速度曲线 */\n animation-direction: alternate;/* 轮流反向播放动画。 */\n}\n\n@keyframes mymove {\n 0% {\n transform: scale(1); /* 开始为原始大小 */\n }\n\n 25% {\n transform: scale(.9); /* 0.9倍 */\n }\n\n 50% {\n transform: scale(1);\n }\n\n 75% {\n transform: scale(.9);\n }\n}\n```\n\n---\n\n## 📚参考列表（致敬）\n\n- [30sCSS](https://30-seconds.github.io/30-seconds-of-css/#box-sizing-reset)\n- [reset.css](https://meyerweb.com/eric/tools/css/reset/)\n- [normalize.css](http://necolas.github.io/normalize.css/)\n"
},
{
"path": "docs/quickcheck/1.前端/3.JS方法速查.md",
"content": "---\ntitle: 3.JS方法速查\ndate: 2020-01-30 00:00:00\npermalink: quickcheck/1-3\n---\n\n# 3.JS方法速查\n\n> 此文章是我用过最多的文章，需要进行重构（重构未完成...）\n\n## 🍥第一部分：数组\n\n### 1.数组去重\n\n```js\nlet arrs = [1,2,2,3,3,6,5,5];\n\n// ES6\n[...new Set(arr)] // [1,2,3,6,5]\n// 此方法也能去除字符串中重复的项：[...new Set('ababbc')].join('') // abc\n\n// 其他去重方法\nfunction uniq(array){\n let temp = [];\n let l = array.length;\n for(let i = 0; i < l; i++) {\n for(let j = i + 1; j < l; j++){\n if (array[i] === array[j]){\n i++;\n j = i;\n }\n }\n temp.push(array[i]);\n }\n return temp;\n}\nconsole.log(uniq(arrs)); // [1,2,3,6,5]\n```\n\n**数组去重拓展（传参数 指定去除哪个重复的，未完成）**\n\n---\n\n### 2.数组合并\n\n```js\nlet arr1 = [1,2,3]\nlet arr2 = [4,5,6]\n\n// ES6\n[...arr1, ...arr2] // [1, 2, 3, 4, 5, 6]\n\n\n// 方法2：concat方法（挂载Array原型链上）\nlet c = a.concat(b);\nconsole.log(c); // [1, 2, 3, 4, 5, 6]\nconsole.log(a); // [1, 2, 3] 不改变本身\n// 备注：看似concat似乎是 数组对象的深拷贝，其实，concat 只是对数组的第一层进行深拷贝\n\n// 方法3：apply方法\nArray.prototype.push.apply(a, b);\nconsole.log(a); // [1, 2, 3, 4, 5, 6] 改变原目标数组\nconsole.log(b); // [4, 5, 6]\n```\n\n---\n\n### 3.数组排序（sort）\n \n```js\nlet objArr = [\n {name: 'test1', age: 20},\n {name: 'test1', age: 22},\n {name: 'test1', age: 21}\n]\n\n// 第一参数a， 第二参数b ---> a-b升序（从小到大）;b-a降序（从大到小），原理就是 两数计算，如果返回的是负数，就保留前者（我可能说的不对，欢迎纠正）\nobjArr.sort((a, b) => {\n return a.age - b.age\n}) \n// 结果会按照年龄从小到大的顺序排列\n\n\n```\n\n---\n\n### 4.多维数组转一维数组（flat）\n\n```js\nlet arr = [1, [2], [[3], 4], 5];\n\n// ES6 数组的flat()\narr.flat() // [1, 2, Array(1), 4, 5] 如果这样写的话只能展开二维数组，但是可以加参数Infinity，就是能展开多维数组\narr.flat(Infinity) // [1, 2, 3, 4, 5] 注意如果原数组有空位，flat()方法会跳过空位\n\n// 其他方法\nconst deepFlatten = arr => [].concat(...arr.map(v => (Array.isArray(v) ? deepFlatten(v) : v)));\ndeepFlatten(arr); // [1,2,3,4,5]\n\n\n// 执行效率验证（拓展）\n// let start = new Date().getTime();\n// console.log('reduceDimension: ', deepFlatten([1, [2], [[3], 4], 5]);\n// console.log('耗时: ', new Date().getTime() - start); // *ms\n\n// ES6 数组的flatMap() 方法大家可以自行查阅一下，拓展下自己的知识面\n```\n\n---\n\n### 5.过滤数组（filter）\n\n```js\nlet json = [\n { id: 1, name: 'john', age: 24 },\n { id: 2, name: 'zkp', age: 21 },\n { id: 3, name: 'mike', age: 50 }\n];\n\n// ES6\njson.filter( item => item.age > 22) // [{id: 1, name: 'john', age: 24}, { id: 3, name: 'mike', age: 50 }]\n\n// ES5\n\n```\n\n---\n\n### 6.判断数组中的项是否满足于某个条件（some，every）\n\n```javascript\nlet arr = [4, 2, 3]\n\n// ES6 some方法（有符合）\narr.some( item => item > 1) // true\narr.some( item => item > 3) // true\n\n// ES5 every（全符合）\n\narr.every(item => item > 1) // true\narr.every(item => item > 3) // false\n\n// 注意：上面两个有不同哦，一个是有符合的判定，一个是全符合的判定\n```\n\n---\n\n### 7.操作数组中的每一项，并使其按照一定的逻辑返回（map）\n\n```js\nvar potatos = [\n { id: '1001', weight: 50 },\n { id: '1002', weight: 80 },\n { id: '1003', weight: 120 },\n { id: '1004', weight: 40 }\n]\n\n// ES6写法\nconst fn = (arr, key) => arr.map(arr => arr[key])\n\nfn(potatos, 'id') // [\"1001\", \"1002\", \"1003\", \"1004\"]\nfn(potatos, 'weight') // [50, 80, 120, 40]\n```\n\n\n---\n\n### 8.其他常用的ES6 Array方法\n\n```js\n// forEach() 遍历数组\n\n// pop() 删除数组中最后一个元素，并返回该元素的值。此方法更改数组的长度\n\n// shift() 删除数组中第一个元素，并返回该元素的值。此方法更改数组的长度\n\n// push() 将一个或多个元素添加到数组的末尾，并返回该数组的新长度\n\n// unshift() 将一个或多个元素添加到数组的开头，并返回该数组的新长度(该方法修改原有数组)\n\n// 🔥Array.prototype.filter() 创建一个新数组, 其包含通过所提供函数实现的测试的所有元素，不会改变原有值，如果没符合的返回[]\nlet arr = [1, 2, 3]\narr.filter( x => x > 1) // [2, 3]\n\n// Array.prototype.join() 将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串\n['Fire', 'Air', 'Water'].join() // \"Fire,Air,Water\"\n\n// Array.prototype.slice() 取出任意元素, | 参数一：从哪开始，参数二（可选）结束位置，不选的话 就节选到最后了\n[1, 2, 3].slice(0, 1) // [1]\n\n// Array.prototype.splice() 删除任意元素，操作任意元素 | 参数一：从哪开始 | 参数二：操作元素的个数 | 参数三：插入元素的值...（可以写多个参数三）\n[1, 2, 3].splice(0, 1) // 删除 [2, 3]\n\n// Array.prototype.includes() 用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false。\n[1, 2, 3].includes(1) // true\n\n// Array.prototype.reverse() 颠倒数组\n[1, 2, 3].reverse() // [3, 2, 1]\n\n```\n\n[点击此处，查看更详细链接](https://zhukunpenglinyutong.github.io/2.note/3.JavaScript/4.ES6%E4%BB%A5%E5%8F%8AJS%E5%86%85%E7%BD%AE%E6%96%B9%E6%B3%95%E6%A2%B3%E7%90%86.html#%F0%9F%8C%B2%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E6%A2%B3%E7%90%86)\n\n---\n\n### 9.获得数组最大最小值\n\n```js\n\n// 使用 Math 中的 max/min 方法\nlet arr = [22,13,6,55,30];\n\n// ES6\nMath.max(...arr); // 55\nMath.min(...arr); // 6\n\n// ES5\nMath.max.apply(null, arr); // 55\nMath.min.apply(null, arr); // 6\n\n```\n\n---\n\n### 10.获取数组交集\n\n```js\n// ES6 写法\nconst similarity = (arr1, arr2) => arr1.filter(v => arr2.includes(v));\nsimilarity([1, 2, 3], [1, 2, 4]); // [1,2]\n\n// ES5 写法\n// function similarity(arr1, arr2) {\n// return arr2.filter(function(v) {\n// return arr1.includes(v)\n// })\n// }\n```\n\n---\n\n### 11.数组对象去重\n \n```js\nlet arr = [\n {id: 1, name: 'Jhon1'},\n {id: 2, name: 'sss'},\n {id: 3, name: 'Jhon2'},\n {id: 4, name: 'Jhon3'}\n]\n\n// ES6\nconst uniqueElementsBy = (arr, fn) =>arr.reduce((acc, v) => {if (!acc.some(x => fn(v, x))) acc.push(v);return acc;}, []);\n\n// 下面的示例表示，去重依据是 id ，就是 id一样的，只留下一个\nuniqueElementsBy(arr, (a, b) => a.id === b.id) // [{id: 1, name: 'Jhon1'}, {id: 2, name: 'sss'}]\n\n```\n\n---\n\n### 12.数组乱序\n \n```js\nfunction shuffle(arr) {\n let array = arr\n let index = array.length\n\n while (index) {\n index -= 1\n let randomInedx = Math.floor(Math.random() * index)\n let middleware = array[index]\n array[index] = array[randomInedx]\n array[randomInedx] = middleware\n }\n\n return array\n}\n\nlet arr = [1,2,3,4,5]\nshuffle(arr) // [3, 4, 2, 5, 1] 结果不定\n```\n\n**还有更简单的方式，欢迎来撩**\n\n---\n\n### 13.检查数组中某元素出现的次数\n \n```js\nfunction countOccurrences(arr, value) {\n return arr.reduce((a, v) => v === value ? a + 1 : a + 0, 0);\n}\n\nlet arr = [1,2,3,4,1,2,4]\ncountOccurrences(arr, 1) // 2\n```\n\n---\n\n### 14.检查数组中的所有元素是否相等\n \n```javascript\nconst allEqual = arr => arr.every(val => val === arr[0]);\n\n// 示例\nallEqual([1, 2, 3, 4, 5, 6]); // false\nallEqual([1, 1, 1, 1]); // true\n```\n\n---\n\n### 15.数组对象，求某一列属性的总和\n\n```js\nvar potatos = [\n { id: '1001', weight: 50 },\n { id: '1002', weight: 80 },\n { id: '1003', weight: 120 },\n { id: '1004', weight: 40 }\n]\n\n// ES6写法\nconst fn = (arr, key) => arr.reduce((sum, p) => { return p[key] + sum },0)\n\nfn(potatos, 'weight') // 290\nfn(potatos, 'id') // \"10041003100210010\" 字符串相加就是这个结果，如果有各自的需求，可以自己加上\n```\n\n---\n\n### 16.分割数组，并操作数组每一项（函数）\n\n```js\n/**\n * 数组分隔方法，并且可以传入一个处理函数，用来分隔之前处理数组的每一项\n * \n * @category Array\n * @param {Array} array 需要处理的数组\n * @param {number} [size = 1] 每个数组区块的长度\n * @param {Function} [fn = item => item] 函数\n * @returns {Array} 返回一个包含拆分区块的新数组（相当于一个二维数组）。\n * @example\n *\n * chunk(['a', 'b', 'c', 'd'], 2)\n * // => [['a', 'b'], ['c', 'd']]\n *\n * chunk(['a', 'b', 'c', 'd'], 3)\n * // => [['a', 'b', 'c'], ['d']]\n *\n * chunk([1, 2, 3, 4], 3, item => item * 2)\n * // => [[2, 4, 6], [8]]\n */\n\nfunction chunk(array, size = 1, fn = item => item) {\n \n array = array.map(fn)\n\n size = Math.max(size, 0) // 这一句就很妙，当传入值小于0的时候，置为0，大于0的时候，不写，但不知道性能怎么样\n const length = array == null ? 0 : array.length\n if (!length || size < 1) {\n return []\n }\n let index = 0\n let resIndex = 0\n const result = new Array(Math.ceil(length / size))\n \n while (index < length) {\n result[resIndex++] = array.slice(index, (index += size))\n }\n return result\n}\n```\n\n---\n\n### 17.数组分页算法\n\n```js\ndata.slice([每页数据量 *（当前页码 - 1）, 每页数据量 *（当前页码 - 1） + 每页数据量])\n```\n\n---\n\n\n\n---\n\n## 🍡第二部分：对象\n\n### 1.对象合并\n\n\n```js\n\n// 1️⃣ ES6方法\n\nlet obj1 = {\n a:1,\n b:{ \n b1:2 \n }\n}\n\nlet obj2 = { c:3, d:4 }\n\nconsole.log({...obj1, ...obj2}) // {a: 1, b: {…}, c: 3, d: 4}\n// 支持无限制合并，但如果对象之间存在相同属性，则后面属性会覆盖前面属性。*请注意，这仅适用于浅层合并。\n\n\n// 2️⃣ Obj.assign()：可以把任意多个的源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象\nlet o1 = { a: 1 };\nlet o2 = { b: 2 };\n\nlet obj = Object.assign(o1, o2);\nconsole.log(obj); // { a: 1, b: 2 }\nconsole.log(o1); // { a: 1, b: 2 }, 且 **目标对象** 自身也会改变（也就是assign第一个对象）\nconsole.log(o2); // { b: 2 } 不改变\n\n// 备注：Object.assign() 拷贝的是属性值。假如源对象的属性值是一个指向对象的引用，它也只拷贝那个引用值\n// 备注：数组合并用 concat() 方法\n\n\n// 3️⃣ $.extend()\n\n```\n\n---\n\n### 2.浅拷贝，深拷贝\n\n**深拷贝（基础版）**\n\n```javascript\n\n/**\n * 此函数，可以完全生成一个新的拷贝对象，也可以将一个对象中的属性拷贝到另一个对象中去\n * @parmas {Object} 需要被拷贝的对象\n * @parmas {Object} 可选，目标对象，如果不填直接返回一个对象\n */\n\nfunction deepClone(origin, target = {}) {\n\n // 循环遍历对象的属性\n for (key in origin) {\n \n let isType = Object.prototype.toString.call(origin[key])\n\n // 克隆对象类型\n if (isType === '[object Object]') {\n target[key] = {}\n deepClone(origin[key], target[key])\n continue\n }\n\n // 克隆数组类型\n if (isType === '[object Array]') {\n target[key] = []\n deepClone(origin[key], target[key])\n continue\n }\n\n // 克隆 Set 类型\n \n // 克隆 Map 类型\n\n // 克隆其他类型\n\n // 克隆基础类型\n target[key] = origin[key]\n \n }\n\n return target\n}\n\nlet zhu = {\n name: '朱昆鹏',\n technology: ['css', 'html', 'js'],\n girlfriend: {\n name: 'lyt'\n }\n}\n\nlet zhuClone = deepClone(zhu) // zhuClone 内容完全和 zhu 一样\n\nlet zhuTest = { test: '测试' }\nlet zhuTestClone = deepClone(zhuTest, zhu) // zhuTestClone 不仅有 zhu所有内容，还有 zhuTest 的内容\n\n\n\n// JSON.parse(JSON.stringify(obj) 方法进行拷贝，了解就行\nconst obj = {\n name:'axuebin',\n sayHello:function(){\n console.log('Hello World');\n }\n}\nconsole.log(JSON.parse(JSON.stringify(obj)); // {name: \"axuebin\"} ???\n// undefined、function、symbol 会在转换过程中被忽略，所以就不能用这个方法进行深拷贝\n\n\n// 浅拷贝\nfunction clone(origin, target = {}) {\n let target = {};\n for (const key in origin) {\n target[key] = origin[key];\n }\n return target;\n};\n\n```\n\n---\n\n### 3.拓展：首层浅拷贝\n\n```javascript\n\nfunction shallowClone(source) {\n const targetObj = source.constructor === Array ? [] : {}; // 判断复制的目标是数组还是对象\n for (let keys in source) { // 遍历目标\n if (source.hasOwnProperty(keys)) {\n targetObj[keys] = source[keys];\n }\n }\n return targetObj;\n}\n\nconst originObj = {\n a:'a',\n b:'b',\n c:[1, 2, 3],\n d:{ dd: 'dd' }\n};\n\nconst cloneObj = shallowClone(originObj);\nconsole.log(cloneObj === originObj); // false\ncloneObj.a = 'aa';\ncloneObj.c = [1, 1, 1];\ncloneObj.d.dd = 'surprise';\n\nconsole.log(cloneObj); // {a:'aa',b:'b',c:[1,1,1],d:{dd:'surprise'}}\nconsole.log(originObj); // {a:'a',b:'b',c:[1,2,3],d:{dd:'surprise'}}\n\n```\n\n---\n\n### 4.判断对象是否为空对象\n\n```javascript\n\n// 参考：https://www.cnblogs.com/HKCC/p/6083575.html\n\nif (JSON.stringify(对象) === '{}') {\n console.log('空');\n}\n\n```\n\n---\n\n### 5.判断对象中属性的个数\n\n```js\nlet obj = {name: '朱昆鹏', age: 21}\n\n// ES6\nObject.keys(obj).length // 2\n\n// ES5\nlet attributeCount = obj => {\n let count = 0;\n for(let i in obj) {\n if(obj.hasOwnProperty(i)) { // 建议加上判断,如果没有扩展对象属性可以不加\n count++;\n }\n }\n return count;\n}\n\nattributeCount(obj) // 2\n```\n\n---\n\n### 6.JS 对象转 url 查询字符串\n\n```js\nconst objectToQueryString = (obj) => Object.keys(obj).map((key) => `${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`).join('&');\nobjectToQueryString({name: 'Jhon', age: 18, address: 'beijing'})\n// name=Jhon&age=18&address=beijing\n```\n\n---\n\n### 7.对象遍历\n\n```js\nlet objs = {\n 1: {\n name: '朱昆鹏'\n },\n 2: {\n name: '林雨桐'\n }\n}\n\nObject.keys(objs).forEach( ket => {\n console.log(key,objs[key])\n})\n\n// 1 {name: '朱昆鹏'} 2 {nama:'林雨桐'}\n\n```\n\n---\n\n### 8.字符串与对象相互转换\n\n[链接](https://mmww1024.iteye.com/blog/2427471)\n\n---\n\n## 🍧第三部分：DOM\n\n---\n\n### 1.常用DOM接口\n\n```js\n\n// 获取DOM节点\ndocument.getElementById() // 通过ID获取\ndocument.getElementsByTagName() // 标签名\ndocument.getElementsByClassName() // 类名\ndocument.querySelector() // 通过选择器获取一个元素\ndocument.querySelectorAll() // 通过选择器获取一组元素\ndocument.body // 获取body的方法\ndocument.getElementsByName(name) // 通过name属性查找元素节点\ndocument.documentElement // 获取html的方法\n\n// 节点类型\n元素节点（标签） // 属性nodeType返回值1\n属性节点（标签里的属性）// 返回值2\n文本节点 // 返回值3\n注释节点（comment） // 返回值8\ndocument // 返回值9\nDocumentFragment // 返回值11\n\n// 节点接口\ndom元素.parentNode // 返回当前元素的父节点\ndom元素.childNodes // 子节点们\ndom元素.firstChild // 第一个子节点\ndom元素.lastChild // 最后一个子节点\ndom元素.nextSibling // 后一个兄弟节点 previousSibling -> 前一个兄弟节点\n\n// 元素节点接口\ndom元素.parentElement // 返回当前元素的父元素节点\ndom元素.children // 返回当前元素的元素子节点\ndom元素.firstElementChild // 第一个元素子节点（IE不兼容）\ndom元素.lastElementChild // 最后一个元素子节点（IE不兼容）\ndom元素.nextElementSibling // 返回后一个兄弟元素节点\ndom元素.previousElementSibling // 返回前一个兄弟元素节点\n\n// 节点的四个属性和一个方法\n节点.nodeName // 元素的标签名，以大写形式表示（只读）\n节点.nodeValue // Text节点或者Comment节点的文本内容，（读写）\n节点.nodeType // 该节点的类型（只读）\n节点.attributes // Element节点的属性集合\n节点.hasChildNodes() // 判断节点 是否有子节点\n\n// Element节点的 属性和方法\ndom元素.innerHtml\ndom元素.innerText\ndom元素.attributes // 获取元素身上所有属性构成的集合\ndom元素.setAttribute(\"属性名\",\"属性值\")// 给元素设置属性和属性值\ndom元素.getAttribute(\"属性名\")// 获取属性值的方法\ndom元素.removerAttribute(\"属性\") // 删除属性\n\n\n// ============== 操作接口 ==================\n\n// 增\ndocument.createElement() // 创建元素节点\ndocument.createTextNode() // 创建文本节点\ndocument.creaetComment() //创建注释节点\ndocument.createDocumentFragment() // 创建文档碎片节点\n\n// 插\n父元素节点.appendChild(子元素对象) // 在元素节点的子元素最后插入子元素\n父元素节点.insertBefore(父元素中的子元素a, 需要插入的子元素b) // 最后的结果是，父元素节点中 b元素插入到了 a的前面\n\n\n// 删\n元素节点.remove() // 删除DOM元素（自己）\n父元素节点.removeChild(子元素节点) // 删除子元素\n\n// 替换\n父元素节点.replaceChild(新的节点, 需要被替换的子节点)\n\n// 复制\n元素节点.cloneChild() // 返回值是 复制出来的节点\n\n// 查看滚动条的滚动距离\nwindow.pageXOffset // x轴滚动距离\nwindow.pageYOffset // y轴滚动距离\ndocument.body.scrollLeft // x轴滚动距离（兼容低版本IE）\ndocument.body.scrollTop // y轴滚动距离（兼容低版本IE）\n// 如何兼容，因为如果有 pageXOffset，那么另一个兼容性的结果就是0，所以相加就能解决兼容性问题了\n\n// 让滚动条滚动\nwindow.scroll(x, y) // 滚动到某个位置\nwindow.scrollTo(x, y) // 滚动到某个位置\nwindow.scrollBy(x, y) // 累加滚动，就是每执行一次，就滚动多少位置\n\n// 查看视口的尺寸\nwindow.innerWidth // 视口的宽度\nwindow.innerHeight // 视口的高度\ndocument.documentElement.clientWidth // 兼容低版本IE\ndocument.documentElement.clientHeight // 兼容低版本IE\ndocument.body.clientWidth // 兼容怪异模式\ndocument.body.clientHeight //兼容怪异模式\ndocument.compatMode // 查看渲染模式 | 'CSS1Compat' 标准模式 | 'BackCompat' 怪异模式\n\n// 查看元素的几何尺寸\ndom元素.offsetWidth // 元素的宽度\ndom元素.offsetHeight // 元素的高度\ndom元素.offsetLeft // 元素相当于父级的位置（如果父级有定位的话，如果没有就是相对于文档的距离）\ndom元素.offsetTop // 元素相对于父级的位置（如果父级有定位的话，如果没有就是相对于文档的距离）\ndom元素.offsetParent // 返回最近有定位的父级DOM节点\n\n// 脚本化css\ndom元素.style // 查看所有样式表接口（内容可读可写）\ndom元素.style. = ... // 碰到float这样的保留字，前面加css，例如 cssFloat\ndom元素.style.width = ...\ndom元素.style.backgroundColor = ...\ndom元素.className = ...\n\nwindow.getComputedStyle(ele, null) // 返回某个元素，最后展示效果的 样式表对象（CSSStyleDeclaration）| 只读 | IE8以下不兼容\n\n```\n\n---\n\n### 2.判断当前位置是否为页面底部\n\n```js\nfunction bottomVisible() {\n return document.documentElement.clientHeight + window.scrollY >= (document.documentElement.scrollHeight || document.documentElement.clientHeight)\n}\n\nbottomVisible() // 返回值为true/false\n```\n\n---\n\n### 3.全屏\n\n##### 1.进入全屏\n\n```js\nfunction launchFullscreen(element) {\n if (element.requestFullscreen) {\n element.requestFullscreen()\n } else if (element.mozRequestFullScreen) {\n element.mozRequestFullScreen()\n } else if (element.msRequestFullscreen) {\n element.msRequestFullscreen()\n } else if (element.webkitRequestFullscreen) {\n element.webkitRequestFullScreen()\n }\n}\n\nlaunchFullscreen(document.documentElement) // 整个页面进入全屏\nlaunchFullscreen(document.getElementById(\"id\")) //某个元素进入全屏\n```\n\n##### 退出全屏\n\n```js\nfunction exitFullscreen() {\n if (document.exitFullscreen) {\n document.exitFullscreen()\n } else if (document.msExitFullscreen) {\n document.msExitFullscreen()\n } else if (document.mozCancelFullScreen) {\n document.mozCancelFullScreen()\n } else if (document.webkitExitFullscreen) {\n document.webkitExitFullscreen()\n }\n}\n\nexitFullscreen()\n```\n\n##### 全屏事件\n\n```js\ndocument.addEventListener(\"fullscreenchange\", function (e) {\n if (document.fullscreenElement) {\n console.log('进入全屏')\n } else {\n console.log('退出全屏')\n }\n})\n```\n\n---\n\n### 4.判断dom元素是否具有某个className\n\n方法一：使用HTML5新增classList 来操作类名\n\n```html\n\n\n\n \n \n \n ![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/1.quickcheck/3.%E8%BF%90%E7%BB%B4/1.png\")
\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/1.quickcheck/3.%E8%BF%90%E7%BB%B4/2.png\")
\n![](\"https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/notes/1.quickcheck/3.%E8%BF%90%E7%BB%B4/3.png\")
\n\n\n- 之后还需要进行配置：https://cloud.tencent.com/document/product/400/35244\n\n\n\n- 🔥注意：主域名申请的单域名证书，二级域名不在https加密保护内，所以 notes.itzkp.com 还是 http协议，而通配符证书可以保护主域名下所有的二级子域名\n\n于是乎我又申请了：notes.itzkp.com 和 jl.itzkp.com 的ssl证书，难点就是 二级域名的解析我是放到了，conf.d 文件夹下，我这怎么设置 ssl呢？\n\n```sh\n# 示例：在conf.d 下面的 notes.conf下\n\nserver {\n\tlisten 443;\n server_name notes.itzkp.com; #填写绑定证书的域名\n ssl on;\n ssl_certificate 1_notes.itzkp.com_bundle.crt;#证书文件名称\n ssl_certificate_key 2_notes.itzkp.com.key;#私钥文件名称\n ssl_session_timeout 5m;\n ssl_protocols TLSv1 TLSv1.1 TLSv1.2; #请按照这个协议配置\n ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;#请按照这个套件配置\n ssl_prefer_server_ciphers on;\n\n location / {\n\n proxy_pass http://140.143.3.244:9998;\n \tproxy_set_header X-Real-IP $remote_addr;\n \t \tproxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n \t proxy_set_header Host $http_host;\n \t\tproxy_set_header X-Nginx-Proxy true;\n \t\tproxy_redirect off; \n }\n}\n\nserver {\n listen 80;\n server_name notes.itzkp.com; #填写绑定证书的域名\n rewrite ^(.*)$ https://$host$1 permanent; #把http的域名请求转成https\n}\n\n```\n\n---\n\n## 2.ssh免密登录\n\n```js\n①：生成秘钥：ssh-keygen -t rsa（这会在 ~/.ssh下生成两个文件）(后面还可以加参数例如：-f 'zhu_key' 这是生成秘钥名称，就会生成 zhu_key 和 zhu_key.pub)\n id_rea：私钥（不规定名称，名称默认就是id_rea，这个留在主服务器上，这样主服务器就能访问具有公钥的服务器就不用密码了）\n id_rea.pub：公钥（不规定名称，名称默认就是id_rea.pub，这个传到目标服务器上，这样会使具有私钥的服务器不用密码就能连接）\n\n②：把公钥传到目标服务器上：scp ~/.ssh/id_rsa.pub root@目标服务器ip地址:/root/.ssh\n\n③：登录目标服务器：cat ~/.ssh/id_rsa.pub >> ~/.ssh/authorized_keys （注意：> 是覆盖，>> 是追加）\n\n④：在主服务器验证是否可以登录目标服务器：ssh root@目标服务器\n```\n\n**❗️有些情况下这种方法不管用，一个就是名称改为自定义的就不行，还有就是如果一台计算机是另一个的免密登录，这台想成为别的计算机的免密登录就不行，具体是什么问题，还需要继续研究**\n\n---\n\n## 3.Jenkins配置\n\n### 1.Jenkins Github hook 触发实现\n\n[材料](https://www.cnblogs.com/weschen/p/6867885.html)\n\n- Jenkins钩子函数hook只有一个，然后可以绑定很多个项目，只要一个项目触发了push，或者其他操作就会被这个钩子监听到，然后执行一些命令\n\n---\n\n## 4.CDN缓存配置（腾讯云）\n\n- 主要是进入 腾讯云安装指引进行配置\n\n## 📚参考列表（致敬）"
},
{
"path": "docs/quickcheck/4.其他/1.正则表达式速查.md",
"content": "---\ntitle: 1.正则表达式·速查\ndate: 2020-01-30 00:00:00\npermalink: quickcheck/4-1\n---\n\n# 1.正则表达式·速查\n\n---\n\n## 🛴第一部分：创建正则表达式\n\n```javascript\n// 你可以使用以下两种方法之一构建一个正则表达式\n\nconst regex1 = /ab+c/gi;\nconst regex2 = new RegExp(\"ab+c\", \"gi\");\n\n```\n\n---\n\n## 🛵第二部分：JS正则表达式的方法\n\n### 1. test：一个在字符串中测试是否匹配的RegExp方法，它返回true或false\n\n```javascript\nlet str = 'hello world';\n/world/.test(str); // true\n/ /.test(str); // true\n/good/.test(str); // false\n```\n\n---\n\n\n### 2. replace：一个在字符串中执行查找匹配的String方法，并且使用替换字符串替换掉匹配到的子字符串\n\n```javascript\nlet str = 'hello world'\nlet repStr = str.replace('world', 'replace') // 注意不会改变原内容\nconsole.log(repStr) // \"hello replace\"\n```\n\n---\n\n### 3. split：使用正则表达式 或 一个固定字符串分隔 一个字符串，返回 分隔后的子字符串数组\n\n```javascript\n// 这个大部分我都是 字符串.split(' ') 以空格分开来用的 😁\n\nlet str = 'hello RegExp';\nstr.split(' '); // [\"hello\", \"RegExp\"]\nstr.split('hello'); // [\"\", \"RegExp\"]\nstr.split('l'); // [\"he\", \"\", \"o RegExp\"]\nstr.split('good') // [\"hello RegExp\"]\n```\n\n---\n\n### 4. exec：一个在字符串中执行查找匹配的RegExp方法，它返回一个数组（未匹配到则返回null）\n\n::: tip\n直接挂一个解释吧，返回的内容是一个对象有点多：[链接](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec)\n:::\n\n---\n\n### 5. search：一个在字符串中测试匹配的String方法，它返回匹配到的位置索引，或者在失败时返回-1（略）\n\n---\n\n### 6. match：一个在字符串中执行查找匹配的String方法，它返回一个数组或者在未匹配到时返回null（略）\n\n\n---\n\n## 🚃第三部分：正则表达式的简单规则\n\n\n\n---\n\n## 🚅第四部分：常用正则表达式·速查\n\n---\n\n## 📚参考列表（致敬）\n\n- MDN：[正则表达式](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions)"
},
{
"path": "docs/quickcheck/4.其他/2.好的网站推荐.md",
"content": "---\ntitle: 2.好的网站推荐\ndate: 2020-01-30 00:00:00\npermalink: quickcheck/4-2\n---\n\n# 2.好的网站推荐\n\n## 🐳资料类\n\n- [MDN](https://developer.mozilla.org/zh-CN/)\n- [Vue官网](https://cn.vuejs.org/)\n- [Vue-Cli](https://cli.vuejs.org/zh/)\n- [Vue-Router](https://router.vuejs.org/zh/)\n- [Vuex](https://vuex.vuejs.org/zh/)\n- [Vue.js 服务器端渲染指南](https://ssr.vuejs.org/zh/)\n- [lodash.js官网](https://www.lodashjs.com/)\n- ...\n\n---\n\n## 🐬工具类\n\n- [在线格式化json](http://www.bejson.com/)\n- [代码生成好看的图片，可以给别人演示代码片段用](https://codeimg.io/)\n- [自动生成NGINX配置](https://nginxconfig.io/)\n- [alcss艺术字](https://www.bootschool.net/ascii-art)\n- [具有炫酷动画的网站](https://cssfx.dev/)\n- [各种文件相互转换的网站](https://smallpdf.com/cn)\n- [给变量命名的网站](https://unbug.github.io/codelf/)\n- [babel官网](https://www.babeljs.cn/)\n- [在线录屏软件](https://www.apowersoft.cn/free-online-screen-recorder)\n- ...\n\n---\n\n## 🦋社区类\n\n- [掘金](https://juejin.im/timeline)\n- [思否](https://segmentfault.com/)\n- ...\n\n"
},
{
"path": "docs/quickcheck/README.md",
"content": "## 前端\n\n[1.HTML和HTML5](./1-1/)