sync posts

silentmaker · Feb 27, 2019 · cc95a9c · cc95a9c
1 parent ec2be25
commit cc95a9c
Show file tree

Hide file tree

Showing 28 changed files with 931 additions and 118 deletions.
diff --git a/src/pages/AMP简介.md b/src/pages/AMP简介.md
@@ -6,11 +6,11 @@ categories: ['dev']
 path: '/amp-intro'
 ---
 
-#### 加速的移动网页
+### 加速的移动网页
 
 AMP, Accelerated Mobile Page，是google一个团队提出来的性能优化技术，目标是加快移动端页面呈现速度，提高整体体验
 
-AMP 主要由 AMP HTML、AMP JS 以及 AMP Cache 三部分组成，其中，AMP HTML 是 HTML 的子集，在 AMP HTML 中只允许使用有限的标签，比如 <p>、<article> 等标签可以直接使用，有些标签允许有限制的使用，比如 <meta> 标签不能使用 http-equiv 属性；而像 <img>、<audio> 等标签需要替换为 <amp-img>、<amp-audio> 等 AMP Components；还有些标签比如 <frame>、<form> 则不允许使用
+AMP 主要由 AMP HTML、AMP JS 以及 AMP Cache 三部分组成，其中，AMP HTML 是 HTML 的子集，在 AMP HTML 中只允许使用有限的标签，比如p、artcicle等标签可以直接使用，有些标签允许有限制的使用，比如meta标签不能使用 http-equiv 属性；而像 img、audio 等标签需要替换为 apm-img、amp-audio 等 AMP Components；还有些标签比如 frame、form 则不允许使用
 
 以下是一个AMP页面的基础模板：
 
@@ -58,21 +58,21 @@ AMP 主要由 AMP HTML、AMP JS 以及 AMP Cache 三部分组成，其中，AMP
 
 AMP HTML 有一些强制的格式要求：
 
-- DTD 必须是： <!doctype html>
-- 顶层标签必须包含 AMP 属性，如：<html ⚡> 或 <html amp>
-- 必须在 Head 区域中放置 <link rel="canonical" href="$SOME_URL" /> 标签，用来指定该文档普通版本的 url；如果只有一个版本，使用当前 url 即可
-- 必须将 <meta charset="utf-8"> 放置在 Head 区域最开始的位置
-- 必须在 Head 区域包含这个 ViewPort：<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
-- 必须将 <script async src="https://cdn.ampproject.org/v0.js"></script> 作为 Head 区域最后的元素
-- 必须在 Head 区域包含以下代码：<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>；
+- DTD 必须是：` <!doctype html>`
+- 顶层标签必须包含 AMP 属性，如：`<html ⚡>` 或 `<html amp>`
+- 必须在 Head 区域中放置 `<link rel="canonical" href="$SOME_URL" />` 标签，用来指定该文档普通版本的 url；如果只有一个版本，使用当前 url 即可
+- 必须将 `<meta charset="utf-8">` 放置在 Head 区域最开始的位置
+- 必须在 Head 区域包含这个 ViewPort：`<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">`
+- 必须将 `<script async src="https://cdn.ampproject.org/v0.js"></script>` 作为 Head 区域最后的元素
+- 必须在 Head 区域包含以下代码：`<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>`
 
-#### 减少页面控制
+### 减少页面控制
 
 AMP 适用于新闻、博客等信息内容为主的页面，其他性能优势是通过减少很多互动功能和对页面的控制来得到了，网页的 CSS代码也要简化，并且要写在HTML中，同时也不能调用外部CSS文件，JS也大部分不能用了，图片、视频等都会等到用户下拉到时再加载，广告展示的体验也得到了优化，这些都是通过 AMP JS 和 AMP Components 来达成的，最后通过 AMP Cache，Google将页面缓存在自己的CDN，以实现静态资源的高度缓存
 
-#### AMP 组件
+### AMP 组件
 
-AMP Components 是使用浏览器自定义元素，即Custom Elements实现的组件，用来替换 HTML 中默认的 `<img>` 和 `<video>` 等标签，用来实现对资源的自定义加载策略，还有一些复杂的交互效果，如图片轮播等
+AMP Components 是使用浏览器自定义元素，即Custom Elements实现的组件，用来替换 HTML 中默认的img 和 video 等标签，用来实现对资源的自定义加载策略，还有一些复杂的交互效果，如图片轮播等
 
 AMP 内置组件，包括：amp-img、amp-audio、amp-anim、amp-ad、amp-pixel、amp-video，引入了cdn.ampproject.org/v0.js 之后就可以直接使用。
 
@@ -87,7 +87,7 @@ AMP 扩展组件，包括：amp-carousel、amp-lightbox、amp-iframe、amp-insta
 
 为了避免页面抖动，每个 AMP Component 都必须设置高宽属性，在响应式布局下会按比例自动调整大小
 
-#### 更好的内容分发
+### 更好的内容分发
 
 Web性能优化的方案很多，但是普通的情况是具体业务场景下的优化很难通用化，而通用化方案常常依赖服务端，导致成本很高，或者没有在瓶颈上起效，效果不明显
 

diff --git a/src/pages/Babel笔记.md b/src/pages/Babel笔记.md
@@ -15,7 +15,7 @@ path: '/babel-notes'
 4. Stage 3：candidate - 至少要有2个符合规范的具体实现
 5. Stage 4：finished - 完成
 
-#### Babel6
+### Babel6
 
 
 Babel6增加了以下配置项：
@@ -30,7 +30,7 @@ Babel6增加了以下配置项：
 * *babel-polyfill*：引入新的内置对象如Promise和静态方法如Array.from以供使用
 * *babel-register*：模块注册器，在底层改写node的require方法，不带后缀情况下会默认转译.es6、.es、.jsx和.js后缀的模块，其实等同于babel-core/register模块，也可以单独引入
 
-#### 插件
+### 插件
 
 官方插件列表：https://babeljs.io/docs/en/plugins/
 语法层次的转译，和api层次的垫片(polyfill)，都是通过一系列插件来实现
@@ -77,7 +77,7 @@ external-helpers则提供了常见的工具函数，比如Object.extend
 - 后者更全能也更稳妥，提供了完整的ES6+环境，官方也建议全局引入
 - 建议开发库或框架时引入不会前者，不会污染全局作用域；大型web应用则推荐后者，全局引入后者打包后的文件体积可能比各模块重复引入体积更小
 
-#### Preset配置
+### Preset配置
 官方已经不推荐使用{ "presets": ["es2015"] }的方式，而是用*babel-preset-env*
 
 ```javascript

diff --git a/src/pages/Generator与asyncIterator.md b/src/pages/Generator与asyncIterator.md
@@ -0,0 +1,55 @@
+---
+title: 'Generator与asyncIterator'
+date: '2018-06-26'
+tags: ['Javascript']
+categories: ['编程']
+path: '/generator-and-async-iterator'
+---
+
+假设有一个业务场景是这样的，根据一个微博或者其他社交媒体的图片搜索接口，不停地切换展示图片，比如说不断切换微博有关于猫的图片，每张图片只展示一次，常见的思路就是分页+轮询
+
+对于这种生成不间断的数据流的模式，其实也可以用迭代器和generator的思路来做：
+
+```javascript
+const cats = []; // 很多的猫图
+
+function* switchCat() {
+ for (const cat of cats)
+ yield html`<img src="${url}" style="width:150px;height:150px;" />`;
+}
+
+while (true) switchCat();
+```
+
+switchCat 函数每执行一次，就会更换一次图片，但是这样循环还是很快就执行完毕，最后可能只看到了最后一张图片，应该让一张加载完并且展示个1s，再切换图片
+
+我们可以再假设`for (const cat of cats)`的cat 是一个异步函数，函数执行中包括了加载图片和图片停留的逻辑，那我们就可以使用for await ... of 循环：
+
+```javascript
+async function* switchCat() {
+ for await(const cat of cats)
+ await loadImage(cat);
+ await sleep(1000);
+ yield html`<img src="${url}" style="width:150px;height:150px;" />`;
+}
+```
+
+这样每次循环都会至少等待加载图片和图片停留的时间，但cats数组并不是无限的，分页接口每次只返回10张图片，那我们可以尝试让cats包含的10张图片不断更新，同时修改cats为对象，并自定义其迭代器行为：
+
+```javascript
+const cats = {
+ [Symbol.asyncInterator]: async function*() {
+ let page = 1
+ while(true) { // 假设图片库是无限大的
+ const pageData = await fetchCatImages(page);
+ for (const url of pageData) yield url
+ page++
+ }
+ }
+};
+```
+
+[Symbol.asyncInterator]是对象被用于for await ... of 循环中时的回调函数，从而cats就变成了一个可以无限迭代的对象
+
+这样的写法并不是什么最佳实践，只是从思路创新的看，我们应该还可以用语言的新特性来做很多事情
+
diff --git a/src/pages/JS的模块系统.md b/src/pages/JS的模块系统.md
@@ -6,7 +6,7 @@ categories: ['编程']
 path: '/js-module-system'
 ---
 
-#### CommonJS模式
+### CommonJS模式
 
 ```javascript
 module.exports = () => {
@@ -21,7 +21,7 @@ CommonJS是Node的主要模块机制，从设计的出发点就是考虑了服
 
 而其缺点在于，同步的API设计使其不适合客户端的很多异步场景，在浏览器里使用需要loader或者转译，模块只能是一个文件，不适用于静态代码分析器
 
-#### AMD模式
+### AMD模式
 
 Asynchronous Module Definition，比如require.js和Dojo.js，不互相依赖的模块可以同时加载，加载速度更快
 
@@ -40,7 +40,7 @@ define(function(require) {
 
 这个机制的优点主要是异步加载，兼容CommonJS，并且支持多文件模块，缺点主要是语法上复杂一点，使用时需要loader或者转译，同样不适用于静态代码分析器
 
-#### CMD模式
+### CMD模式
 
 CMD是另一种模块化方案，它与AMD很类似，不同点在于 AMD 推崇依赖前置、提前执行，CMD推崇依赖就近、延迟执行
 
@@ -72,7 +72,7 @@ seajs.use(['math.js'], function(math) {
 });
 ```
 
-#### ES2015 Module
+### ES2015 Module
 
 ```javascript
 // lib.js