闭包的概念、作用

当在函数内部定义了其他函数时，就创建了闭包（closures）。闭包有权访问函数内部的所有变量，原理如下：

• 当某个函数被调用时，会创建一个执行环境及相应的作用域链，然后，使用arguments和其他命名参数的值来初始化函数的活动对象。
• 在后台执行环境中，闭包的作用域链包含着他自己的作用域、包含函数的作用域和全局作用域。
• 通常，函数的作用域及其所有变量都会在函数执行结束后被销毁
• 但是，当函数返回一个闭包时，这个函数的作用域将会一直在内存中保存直到闭包不存在为止,即当函数返回闭包后，其执行环境的作用域链会被销毁，但他的活动对象仍会留在内存中，直到匿名函数被销毁后，函数的活动对象才会被销毁。
• 闭包只能取得包含函数中任何变量的最后一个值。

  more >>

浮动的原理

float属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。float:right|left|none|inherit

浮动的框可以向左或向右移动，直到它的外边缘碰到包含它的框或另一个浮动块的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。因此，创建浮动框可以使文本围绕图像。当一个元素浮动之后，不会影响到块级框的布局而只会影响内联框（通常是文本）的排列。

more >>

前言

回调函数的问题在于他剥夺了我们使用return和throw，这类关键字的能力，把程序执行的控制权交给回调函数，从而带来反转控制（inversion of control）。而Promise很好的解决了这一问题。如下面这个例子，并不是直接给foo()传递一个回调函数，而是return一个接收回调函数的事件-promise。
promise承诺我们一定可以在未来的某个时刻得到某个异步事件的结果，fulfillment或者reject，所以我们可以对结果安排一些之后要执行的操作，而不必担心这个异步事件什么时候执行完毕（time-independent）。这里p获得了这个promise执行的结果，我们可以通过then方法来决定reslove之后执行什么，来处理这些future value。
inversion of inversion从而解决反转控制。

more >>

Chapter 1:Asynchrony: Now & Later

什么是异步？

Any time you wrap a portion of code into a function and specify that it should be executed in response to some event
(timer, mouse click, Ajax response, etc.), you are creating a later chunk of your code, and thus introducing asynchrony to
your program.

将程序分块chunk,只有一个chunk现在执行，其他的chunk稍后执行（chunk通常由function组成）。若使用定时器、ajax请求（默认异步）、鼠标单击监听事件、等待用户输入等，从而指定一部分的代码稍后执行，也就是在程序中引入了异步。

• 例如我们发送网络请求等待响应，它也可以发送一个同步的ajax请求（最好不要），这时就必须要等到响应回来之后，才可以继续执行剩下的代码。而异步的ajax，他发送请求之后，并不会等待请求回来，而只是注册一下这个事件，就继续执行剩下的代码，将这个事件挂起，通知hosting environment去监听，等待网络请求回来之后，触发这个事件，再把回掉函数放到事件循环队列中。

  more >>

瀑布流

这种布局适合于小数据块，每个数据块内容相近且没有侧重。视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。懒加载模式。

几种实现方式：
1）传统多列浮动 纵

• 各列固定宽度，并且左浮动；
• 一列中的数据块为一组，列中的每个数据块依次排列即可；
• 更多数据加载时，需要分别插入到不同的列上；

2）css3定义 多列布局 纵

• 可以指定容器的列个数，列间距，列中间边框，列宽度来实现；

3）绝对定位 最优 横

• 对现有数据块进行排列计算各自所在的位置，
• 下拉滚动时，出发加载数据操作，并把数据添加到目标容器
• 函数节流 resize 触发会很频繁，可以将回调函数缓存一段时候后执行，即当这段时间内多次触发了resize事件，但回调函数只会执行一次(见 S.buffer 函数)
• 确定预加载线高度值，表示何时触发加载数据。

js核心思路：

1. 编写方法：获取容器内所有外层元素，存入数组；
2. 编写方法：计算容器内一行可以承载多少个元素，方法：容器宽度/元素宽度，四舍五入向下取整；
3. 编写方法：把每一行中所有元素的高度值存入数组；
4. 编写方法：在高度值数组中找到最小高度值；
5. 编写方法：把第二行第一个元素定位到上一行所有元素中高度最低的元素下面，即设置该元素的top，left，position属性；
6. 编写方法：重置当前高度值数组中的最小值；
7. 编写方法：从第二行第一个元素开始，遍历每个元素，用上述方法重新定位每个元素的位置，把该事件绑定到页面；
8. 编写方法：监听鼠标事件，当前容器内最下面一个元素的offsetTop < 浏览器可视高度/已滚动高度时，h或者当滚动到最底部以上100像素时， 加载新内容 。加载下一页数据；
9. 加载完之后，用上述方法重新定位新加载元素的位置；

   雪碧图

参考：

• 《WEB设计》瀑布流布局浅析