Flex上手与实战
Flex之于 CSS3 就如Promise之于 ES6，都解决了开发者的痛点问题，大大提高了生产力。借助Flex，可以轻松实现栅栏布局、水平/垂直居中、自定义排列方向和顺序等等需求。因此，Flex几乎是 CSS3 的必考内容。
前端工程师的福音：flex原来写前端的过程中，得有一大部分的时间是花费在了水平/垂直居中对齐这件事情上，而网上也是一大堆试图解释某一种对齐方法是正确的文章，搞得头昏脑胀。
终于，弹性布局flex来了，现在团队的开发，在布局上都采用了flex，毕竟不要把生命浪费在对齐这件事情上。
容器的属性和常用值容器可以通过设置display属性为flex / inline-flex（行内 flex）来指定其为 flex 布局。
下面，将记录一下容器的属性和常用值，基本可以囊括大多数应用场景哦。
属性
含义
值
常用值
flex-direction
项目排列方向
row(默认)、row-reverse、column、column-reverse
row / column
flex-wrap
项目是否换行
nowrap(默认)、wrap、wrap-revers ...
你了解css3的nth-child吗
:nth-child(n) 选择器匹配属于其父元素的第 n 个子元素，借助这个特性，可以实现选择第偶数次序的子元素、选择一定范围内的子元素等“批量选择操作”。而它比较难理解的地方是参数表达式中n的含义，以及如何进行数学运算，这也是面试中考察的难点。
nth-child 介绍:nth-child(n) 选择器匹配属于其父元素的第 n 个子元素。
使用它的时候需要注意几点：
第 n 个子元素的计数是从 1 开始，不是从 0 开始的
选择表达式中的字母n代表 ≥0 的整数
常见用法它有 3 种常见用法：
直接指明 n 的值：span:nth-child(1)
用even/odd分别代表偶数 / 奇数：span:nth-child(even)
借助n自定义选择范围：
nth-child(2n)/nth-child(2n + 1)：偶数 / 奇数
nth-child(n + 3)：第 3 个开始到最后
进阶用法上面的用法中的第三部分，一般都是使用n，而有时候也会用到-n，比如选取前 2 个元素就是：nth-child(-n + 2)。
为什么是这样呢？其实运算：-n + 2 ≥ ...
HTML5原生拖放事件的学习与实践
前言之前学习了 HTML5 的拖放事件，开发中也用到了拖拽组件。为了厘清整体的逻辑，专门做了一个小例子。
具体实现的效果也很简单：元素可以在容器中任意拖动，元素被移入容器的时候，还会有相关样式的改变已达到更好的展示效果。
例子基本运用了拖放事件的全部事件，并且尽量简洁的展示了出来。特此记录。
拖放事件介绍由名字可以看出来，拖放事件由 2 部分组成：拖动和释放。
而拖动又由 2 部分组成，分别是被拖动元素的相关事件和元素容器的相关事件。
1、被拖动元素的相关事件 ：
事件名称
说明
dragstart
在元素开始被拖动时候触发
drag
在元素被拖动时反复触发
dragend
在拖动操作完成时触发
2、容器的相关事件 ：
事件名称
说明
dragenter
当被拖动元素进入目的地元素所占据的屏幕空间时触发，一般需要取消浏览器的默认行为。
dragover
当被拖动元素在目的地元素内时触发，一般需要取消浏览器的默认行为。
dragleave
当被拖动元素没有放下就离开目的地元素时触发
3、释放事件 ：
事件名称
说明
drop
当 ...
FileAPI文件操作实战
介绍HTML5 为我们提供了 File API 相关规范。主要涉及 File 接口 和 FileReader 对象 。
本文整理了兼容性检测、文件选择、属性读取、文件读取、进度监控、大文件分片上传以及拖拽上传等开发中常见的前端文件操作。
准备工作首先，我们的 File 来自于<input>标签中选中的文件列表。所以，准备如下的 HTML 代码：
12345<input type="file" id="files" multiple /><div id="list"></div><div id="images"></div><!-- File API相关操作写在了script.js中 --><script src="./script.js"></script>
检测兼容性File 对象是特殊类型的 Blob。在 script 入口处，应该检测当前浏览器是否支持 File API：
...
设计模式手册之模板模式
1. 什么是模板模式？
模板模式是抽象父类定义了子类需要重写的相关方法。而这些方法，仍然是通过父类方法调用的。
根据描述，“模板”的思想体现在：父类定义的接口方法。
除此之外，子类方法的调用，也是被父类控制的。
2. 应用场景一些系统的架构或者算法骨架，由“BOSS”编写抽象方法，具体的实现，交给“小弟们”实现。
而绝对是不是用“小弟们”的方法，还是看“BOSS”的心情。
不是很恰当的比喻哈~
3. 多语言实现3.1 ES6 实现Animal是抽象类，Dog和Cat分别具体实现了eat()和sleep()方法。
Dog或Cat实例可以通过live()方法调用eat()和sleep()。
注意：Cat和Dog实例会被自动添加live()方法。不暴露live()是为了防止live()被子类重写，保证父类的控制权。
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051class Animal { constructor() { ...
设计模式手册之备忘录模式
1. 什么是备忘录模式
它属于行为模式，保存某个状态，并且在需要的时候直接获取，而不是重复计算。
注意：备忘录模式实现，不能破坏原始封装。也就是说，能拿到内部状态，将其保存在外部。
2. 应用场景最典型的例子是“斐波那契数列”递归实现。不借助备忘录模式，数据一大，就容易爆栈；借助备忘录，算法的时间复杂度可以降低到$ O(N) $
除此之外，数据的缓存等也是常见应用场景。
3. 多语言实现3.1 ES6 实现首先模拟了一下简单的拉取分页数据。如果当前数据没有被缓存，那么就模拟异步请求，并将结果放入缓存中；如果已经缓存过，那么立即取出即可，无需多次请求。
main.js：
123456789101112131415161718192021222324252627282930313233343536const fetchData = (() => { // 备忘录 / 缓存 const cache = {} return (page) => new Promise((resolve) => { ...
设计模式手册之解释器模式
1. 什么是“解释器模式？
解释器模式: 提供了评估语言的语法或表达式的方式。
这是基本不怎么使用的一种设计模式。确实想不到什么场景一定要用此种设计模式。
实现这种模式的核心是：
抽象表达式：主要有一个interpret()操作
终结符表达式：R = R1 + R2中，R1 R2就是终结符
非终结符表达式：R = R1 - R2中，-就是终结符
环境(Context): 存放文法中各个终结符所对应的具体值。比如前面R1和R2的值。
2. 优缺点优点显而易见，每个文法规则可以表述为一个类或者方法。这些文法互相不干扰，符合“开闭原则”。
由于每条文法都需要构建一个类或者方法，文法数量上去后，很难维护。并且，语句的执行效率低（一直在不停地互相调用）。
3. 多语言实现3.1 ES6 实现为了方便说明，下面省略了“抽象表达式”的实现。
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253class Context { ...
设计模式手册之桥接模式
1. 什么是桥接模式
桥接模式将抽象部分和具体实现部分分离，两者可独立变化，也可以一起工作。
在这种模式的实现上，需要一个对象担任桥的角色，起到连接的作用。
2. 应用场景在封装开源库的组件时候，经常会用到这种设计模式。
例如，对外提供暴露一个afterFinish函数,如果用户有传入此函数, 那么就会在某一段代码逻辑中调用。
这个过程中，组件起到了“桥”的作用，而具体实现是用户自定义。
3. 多语言实现3.1 ES6 实现JavaScript 中桥接模式的典型应用是：Array对象上的forEach函数。
此函数负责循环遍历数组每个元素，是抽象部分；而回调函数callback就是具体实现部分。
下方是模拟forEach方法：
123456789101112const forEach = (arr, callback) => { if (!Array.isArray(arr)) return const length = arr.length for (let i = 0; i < length; ++i) { call ...
设计模式手册之适配器模式
1. 什么是适配器模式？
适配器模式为多个不兼容接口之间提供“转化器”。
它的实现非常简单，检查接口的数据，进行过滤、重组等操作，使另一接口可以使用数据即可。
2. 应用场景当数据不符合使用规则，就可以借助此种模式进行格式转化。
3. 多语言实现假设编写了不同平台的音乐爬虫，破解音乐数据。而对外向用户暴露的数据应该是具有一致性。
下面，adapter函数的作用就是转化数据格式。
因为，网易、QQ、虾米等平台的音乐数据不同，需要处理成一致的数据返回给用户，方便用户调用。
3.1 ES6 实现1234567891011121314151617181920212223const API = { qq: () => ({ n: '菊花台', a: '周杰伦', f: 1, }), netease: () => ({ name: '菊花台', author: '周杰伦', ...
设计模式手册之状态模式
1. 什么是“状态模式”？
状态模式：对象行为是基于状态来改变的。
内部的状态转化，导致了行为表现形式不同。所以，用户在外面看起来，好像是修改了行为。
2. 优缺点优点
封装了转化规则，对于大量分支语句，可以考虑使用状态类进一步封装。每个状态都是确定的，所以对象行为是可控的。
缺点
状态模式的关键是将事物的状态都封装成单独的类，这个类的各种方法就是“此种状态对应的表现行为”。因此，状态类会增加程序开销。
3. 代码实现3.1 ES6 实现在 JavaScript 中，可以直接用 JSON 对象来代替状态类。
下面代码展示的就是 FSM（有限状态机）里面有 3 种状态：download、pause、deleted。控制状态转化的代码也在其中。
DownLoad类就是，常说的Context对象，它的行为会随着状态的改变而改变。
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758const FSM = (() => ...
