update

code/jsonp/Readme.md

@@ -44,7 +44,12 @@ handleData(data)
 
 `JSONP`，全称 `JSON with Padding`，为了解决跨域的问题而出现。虽然它只能处理 GET 跨域，虽然现在基本上都使用 CORS 跨域，但仍然要知道它，毕竟**面试会问**。
 
-`curl` 示例
+`JSONP` 基于两个原理:
+
+1. 动态创建 `script`，使用 `script.src` 加载请求跨过跨域
+1. `script.src` 加载的脚本内容为 JSONP: 即 `PADDING(JSON)` 格式
+
+从上可知，使用 `JSONP` 跨域同样需要服务端的支持。`curl` 示例
 
 ``` bash
 $ curl https://shanyue.tech/api/user?id=100&callback=padding
@@ -59,40 +64,52 @@ padding({
 
 对于正常的请求有何不同一目了然: **多了一个 callback=padding, 并且响应数据被 padding 包围**，这就是 JSONP
 
-
-**那请求数据后，如何处理数据呢？此时的 padding 就是处理数据的函数**
+**那请求数据后，如何处理数据呢？此时的 padding 就是处理数据的函数**。我们只需要在前端实现定义好 padding 函数即可
 
 ``` js
 window.padding = handleData
 ```
 
-这里实现一个 jsonp 函数
+基于以上两个原理，这里实现一个简单 jsonp 函数：
 
 ``` js
 function jsonp_simple ({ url, onData, params }) {
   const script = document.createElement('script')
 
   // 一、默认 callback 函数为 padding
   script.src = `${url}?${stringify({ callback: 'padding', ...params })}`
+
   // 二、使用 onData 作为 window.padding 函数，接收数据
   window['padding'] = onData
 
+  // 三、动态加载脚本
   document.body.appendChild(script)
 }
+
+// 发送 JSONP 请求
+jsonp_simple({
+  url: 'http://localhost:10010',
+  params: { id: 10000 },
+  onData (data) {
+    console.log('Data:', data)
+  }
+})
 ```
 
-此时会有一个问题: **window.padding 函数会污染全局，如果有多个请求发送如何处理？**
+此时会有一个问题: **window.padding 函数会污染全局变量，如果有多个 JSONP 请求发送如何处理？**
 
-**使 jsonp 的回调函数名作为一个随机变量**，代码如下
+**使 jsonp 的回调函数名作为一个随机变量，避免冲突**，代码如下
 
 ``` js
 function jsonp ({ url, onData, params }) {
   const script = document.createElement('script')
 
   // 一、为了避免全局污染，使用一个随机函数名
   const cbFnName = `JSONP_PADDING_${Math.random().toString().slice(2)}`
+
   // 二、默认 callback 函数为 cbFnName
   script.src = `${url}?${stringify({ callback: cbFnName, ...params })}`
+
   // 三、使用 onData 作为 cbFnName 回调函数，接收数据
   window[cbFnName] = onData;
 
@@ -109,7 +126,35 @@ jsonp({
 })
 ```
 
-## 代码附录
+## 服务器端代码
+
+`JSONP` 需要服务端进行配合，返回 `JSON With Padding` 数据，代码如下:
+
+``` js
+const http = require('http')
+const url = require('url')
+const qs = require('querystring')
+
+const server = http.createServer((req, res) => {
+  const { pathname, query } = url.parse(req.url)
+  const params = qs.parse(query)
+
+  const data = { name: 'shanyue', id: params.id }
+
+  if (params.callback) {
+    // 服务端将要返回的字符串
+    str = `${params.callback}(${JSON.stringify(data)})`
+    res.end(str)
+  } else {
+    res.end()
+  }
+})
+
+server.listen(10010, () => console.log('Done'))
+
+```
+
+## 完整代码附录
 
 完整代码可见[山月博客的 github 仓库](https://github.com/shfshanyue/blog/tree/master/code): <https://github.com/shfshanyue/blog/tree/master/code/jsonp/>
 
@@ -194,7 +239,9 @@ server.listen(10010, () => console.log('Done'))
 
 ## JSONP 实现代码示例演示
 
-从中克隆代码: [山月博客的 github 仓库](https://github.com/shfshanyue/blog/tree/master/code)
++ 从中克隆代码: [山月博客的 github 仓库](https://github.com/shfshanyue/blog/tree/master/code)
++ 从中克隆代码: [山月博客的 github 仓库](https://github.com/shfshanyue/blog/tree/master/code)
++ 从中克隆代码: [山月博客的 github 仓库](https://github.com/shfshanyue/blog/tree/master/code)
 
 ### 文件结构
 

life/learn.md

@@ -0,0 +1,19 @@
+# 答粉丝问: 山月，你平时是如何学习的？
+
+今日晚上我在 B 站直播面试题解答时，有人提问: 山月老师，你平时是怎么学习的？
+
+提升自己最有效的方法永远是去解决项目中的痛点问题，然而这有可能并不适合所有人。
+
+那就退而求其次: **去熟悉你们项目**。如何熟悉项目也是一个技术活，我总结了以下步骤，用时一个月
+
+1. 查看项目中 `package.json`，去熟悉其中的 `dependencies`
+  + 在 npm 官方仓库中搜索每一个库，查看文档，必要时了解该库的源码
+  + 在项目中全局搜索该库，了解该库在项目中做了什么事，解决了什么问题
+1. 查看项目中 `package.json`，去熟悉其中的 `scripts`
+  + `npm scripts` 总是与前端工程化沾点关系，如打包、测试、发包、格式化。如 `prepublishOnly` 与 `prepare` 是什么
+1. 查看项目中 `package.json`，查看文档，了解所有字段的含义
+1. 查看项目中的配置文件，一般高度封装的项目中就有一大堆配置文件，查看其通用配置，如 `postcss.config.js`、`tsconfig.js` 等，查看文档
+1. 查看项目中的配置文件，一般高度封装的项目中就有一大堆配置文件，查看其不通用配置，如关于环境变量、CICD、部署之类，查看文档
+1. 查看项目中的目录结构，查看其它文件目录的职责，如 `.gitignore`、`node_modules` 层次等
+
+完

life/temp.md

@@ -0,0 +1,8 @@
+# XXX 在平时工作中用不到
+
+> "prepare" filename:package.json org:vuejs
+
++ 如何模糊匹配
+
++ 终端介绍
+

post/zero-to-learn-fe.md

@@ -156,6 +156,12 @@ MDN 是服务于开发者最齐全的文档，也是前端**必不可少翻得
 <div>hello, world</div>
 ```
 
+### Reference
+
+这里有关于所有 HTML 的标签，如若有时间可通读一遍，如若没有时间则大概通读一遍
+
++ [HTML Element Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)
+
 ## CSS: 五天时间
 
 + 学习资料: [初识HTML(5)+CSS(3)-2020升级版](https://www.imooc.com/learn/9)，包含了 HTML 和 CSS 的教程。
@@ -173,22 +179,25 @@ MDN 是服务于开发者最齐全的文档，也是前端**必不可少翻得
 
 ### CSS 趣味练习
 
-以下三种是关于学习 CSS3 选择器、Flex、Grid最好的教程了，并且极其富有趣味性
+以下三种是关于学习 CSS3 选择器、Flex、Grid教好的教程了，并且极其富有趣味性
 
 + [CSS Diner](https://flukeout.github.io/)
 + [Flex Forggy](https://flexboxfroggy.com/)
 + [Grid Garden](https://cssgridgarden.com/)
 
 ## 插曲: VSCode
 
-### Emmet
+`VSCode` 前端必备开发神器，生产力工具，如同剑客的剑。
+
 ### 快捷键
 
-## 插曲: Chrome Devtools
+### Emmet
+
+## 插曲: Chrome Devtools · Elements Panel
 
 ![Chrome Devtools](https://cdn.jsdelivr.net/gh/shfshanyue/blog@1.0/post/assets/learn-fe-devtools.png)
 
-学习完 HTML/CSS 后，可以发送一下，学点 Devtools 的用法，以下不需要掌握，多看一点是一点
+学习完 HTML/CSS 后，可以放松一下，学点 Devtools 的用法，以下不需要掌握，多看一点是一点。
 
 一个前端每天有一半的时间在敲代码、另一半的时间在点 Devtools。从中可以看到 Devtools 在前端中的地位及重要性。
 
@@ -256,9 +265,13 @@ const p = 'world'
 
 ![DOM API 学习](https://cdn.jsdelivr.net/gh/shfshanyue/blog@1.0/post/assets/learn-fe-dom.png)
 
-学习资料: [MDN 上的 DOM API 概述](https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model/Introduction)
+学习资料: 
+
++ [DOM API - MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model)
++ [Event](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Building_blocks/Events)
++ [Cookie](https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie)
 
-DOM API，及 DOM 赋予 Javascript 的各种操作 HTML 的 API。现代前端框架对于 DOM 手动操作已经很少很少了，但是了解还是必不可少的。
+DOM API，即 DOM 赋予 Javascript 的各种操作 HTML 的 API。现代前端框架对于 DOM 手动操作已经很少很少了，但是了解还是必不可少的。
 
 在 Chrome Devtools 中输入以下变量观察挂在上边的所有属性:
 
@@ -276,6 +289,16 @@ DOM API，及 DOM 赋予 Javascript 的各种操作 HTML 的 API。现代前端
 > element.onClick = () => {}
 ```
 
++ Window
++ Document
++ Element/NodeList/Attribute
++ Event
++ Web API
+
+### Reference
+
++ [Event Reference](https://developer.mozilla.org/en-US/docs/Web/Events)
+
 ## 插曲: 了解谷歌控制台
 
 ![](https://developer.chrome.com/docs/devtools/overview/0)
@@ -494,21 +517,27 @@ Gitlen 最大的优点是可以可视化过去代码发生了什么，但是对
 
 ## HTTP: 前后端沟通桥梁
 
-+ fetch API
-+ axios
-+ use-fetch
-
 + [MDN: HTTP Guide](https://developer.mozilla.org/zh-CN/docs/Web/HTTP)
 + 书籍: HTTP 权威指南
 
 精读文章 [HTTP Overview](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Overview)
 
+## XHR、Fetch API 与 Axios
+
++ fetch API
++ axios
++ use-fetch
+
 ## 插曲: 调试 HTTP
 
 ### Chrome Network Devtools
 
 ### Postman
 
+## Security
+
++ [MDN - Security](https://developer.mozilla.org/en-US/docs/Web/Security)
+
 ## Node Server
 
 你现在终于可以知道别人经常念叨的 Java、Python 是做什么的，他们大部分是用来做服务器端。