`。
32 |
33 | - 利用作用域插槽，可以将上述重复的代码委托给父组件。
34 |
35 | 作用域插槽允许你讲模板传递给插槽，并且可以访问某些子数据
36 |
37 | 例如子组件：
38 |
39 | ```
40 |
41 |
42 |
43 | ```
44 |
45 | 父组件：
46 |
47 | ```
48 |
49 |
50 | {{props.my-prop}}
51 |
52 |
53 | ```
54 |
55 | - 在`my-list`使用scoped slots
56 |
57 | 将列表数组作为`props`传递给`my-list`。用一个scoped slot，这样`my-list`只负责迭代列表项，但是父组件仍然可以定义每个列表如何显示。
58 |
59 | ```
60 | // app.js file
61 | Vue.component('my-list',
62 | { template: '#my-list',
63 | props: ['title', 'items']
64 | })
65 |
66 | // index.html
67 |
77 | ```
78 | 现在`title`和`items`都作为`props`绑定到插槽中了。
79 |
80 | 父组件：
81 |
82 | ```
83 |
84 |
85 | {{ shape.name }} ({{ shape.sides }} sides)
86 |
87 |
88 |
89 |
90 |
91 |
92 |
{{ color.name }}
93 |
96 | ```
--------------------------------------------------------------------------------
/2017/2017.11.23.md:
--------------------------------------------------------------------------------
1 | [Everything You Never Knew About CSS Floats](https://designshack.net/articles/css/everything-you-never-knew-about-css-floats/)
2 |
3 | 比较基础全面的文章，复习一遍更深入的了解到
4 | **使用浮动的九条规则**
5 |
6 | 1. 浮动元素会被推到他的容器的边缘。
7 | 2. 任何浮动元素都会出现在他之前的浮动元素的旁边或是下方。如果元素都是左浮动，那么第二个元素将会出现在第一个元素的右边，如果都是右浮动，第二个元素会出现在第一个元素的左边。
8 | 3. 左浮动的盒子不能出现在右浮动盒子的右边。
9 | 4. 浮动元素不能高过他的容器的上边缘（当涉及到塌陷的边距这将会更复杂，请参考最初的规则）。
10 | 5. 浮动元素不能比前一个块级元素或浮动元素高。
11 | 6. 浮动元素不能高过前一行内联元素。
12 | 靠着另一个浮动元素的浮动元素不能超出自己的父容器边缘。
13 | 7. 一个浮动的盒子必须尽可能的高的放置。
14 | 8. 一个左浮动的盒子必须尽可能左的放置，一个右浮动的盒子要尽可能的右的放置。尽可能高的位置的优先级比左右高。
--------------------------------------------------------------------------------
/2017/2017.11.25.md:
--------------------------------------------------------------------------------
1 | [(译文）All About Recursion, PTC, TCO and STC in JavaScript](http://www.zcfy.cc/article/all-about-recursion-ptc-tco-and-stc-in-javascript-2813.html)
2 |
3 | [尾调用优化](http://www.ruanyifeng.com/blog/2015/04/tail-call.html)
4 |
5 | 本文将通过图示的方法讨论递归，讨论什么是PTC、TCO（Tail Call Optimization，尾调用优化）、STC（Syntactic Tail Call，语法级尾调用），以及它们的区别、原理，还会讨论主流JavaScript引擎对它们的实现。
6 |
7 | 假如递归调用过多，调用栈会越来越大，最终可能导致Stack Buffer Overflow。只要栈达到容量上限，多一个调用就会造成溢出。
8 |
9 |
10 | **尾调用**
11 |
12 | 适当的尾调用可以避免递归调用时的栈膨胀。
13 |
14 | 尾调用就是指某个函数的最后一步是调用另一个函数，执行时不会造成栈膨胀的函数。尾调用是执行return之前要做的最后一个操作，而这个被调用函数的返回值由调用它的函数返回。调用函数不能是生成器函数。
15 |
16 | ```
17 | function f(x){
18 | return g(x);
19 | }
20 | ```
21 |
22 |
23 | **尾调用优化 Tail Call Optimization**
24 |
25 | 尾调用优化是编译器使用的一种技术，它使用jumps把递归调用转换成一个循环。
26 |
27 |
28 | 我们知道， 函数调用会在内存里面形成一个“调用记录”，又称“调用栈”（call stack），保存调用位置和内部变量等信息。
29 |
30 |
31 |
32 | 
33 |
34 |
35 | ```
36 | function f() {
37 | let m = 0;
38 | let n = 1;
39 | return g(m + n);
40 | }
41 | ```
42 | 尾调用由于是函数的最后一步操作，所以不需要保留外层函数的调用记录，因为调用位置、内部变量等信息都不会再用到了，只要直接用内层函数的调用记录，取代外层函数的调用记录就可以了。
43 |
44 | **尾递归**
45 |
46 | 修改factorial函数，变成尾部递归
47 |
48 | ```
49 | function factorial(n, total = 1) {
50 | if (n === 0) {
51 | return total
52 | }
53 |
54 | return factorial(n - 1, n * total)
55 | ```
56 |
57 | 以下是调用factorial(4)的过程：
58 |
59 | 1. 在栈顶部压入一个对factorial的调用。
60 | 2. 因为4不是0（既定情况），那么我们知道下一次要计算的值（3）和当前累积值（4 * total）。
61 | 3. 再次调用factorial，它会得到完成计算所需的所有数据：要计算的下一个阶乘和累积的总数。至此，不再需要之前的栈帧了，可以把它弹出，只添加新的调用factorial(3, 4)。
62 | 4. 这次调用同样大于0，于是需要计算下一个数的阶乘，同时将累积值（4）与当前值（3）相乘。
63 | 5. 至此（又）不再需要上一次调用了，可以把它弹出，再次调用factorial并传入2和12。再次更新累积值为24，同时计算1的阶乘。
64 | 6. 前一帧又从栈中被删除，我们又用1乘以24（总数），并计算0的阶乘。
65 | 7. 最后，0的阶乘返回了累积的总数，也就是24（就是4的阶乘）。
66 |
67 | 计算n的阶乘，最多需要保存n个调用记录，复杂度 O(n) 。
68 | 如果改写成尾递归，只保留一个调用记录，复杂度 O(1) 。
69 |
70 | **严格模式**
71 |
72 | ES6的尾调用优化只在严格模式下开启，正常模式是无效的。
73 |
74 | 这是因为在正常模式下，函数内部有两个变量，可以跟踪函数的调用栈。
75 |
76 | - arguments：返回调用时函数的参数。
77 | - func.caller：返回调用当前函数的那个函数。
78 | -
79 | 尾调用优化发生时，函数的调用栈会改写，因此上面两个变量就会失真。严格模式禁用这两个变量，所以尾调用模式仅在严格模式下生效。
80 |
81 | 为了在Node中使用适当的尾调用，必须在JS文件顶部添加'use strict'以启用strict mode，然后以--harmony_tailcalls标记来运行。
--------------------------------------------------------------------------------
/2017/2017.2.15.md:
--------------------------------------------------------------------------------
1 | - [JavaScript let](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/let)
2 | - [What's the difference between using “let” and “var” to declare a variable?](https://stackoverflow.com/questions/762011/whats-the-difference-between-using-let-and-var-to-declare-a-variable)
3 | - [JavaScript 数组方法对比](http://web.jobbole.com/90333/)
4 |
--------------------------------------------------------------------------------
/2017/2017.2.19.md:
--------------------------------------------------------------------------------
1 | html
2 | ```
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | ```
11 |
12 | JS
13 | ```
14 | new Vue({
15 | el: 'body',
16 | data: {
17 | showPass: false,
18 | // init
19 | password: ''
20 | }
21 | })
22 | ```
--------------------------------------------------------------------------------
/2017/2017.2.21.md:
--------------------------------------------------------------------------------
1 | 正则表达式 有效密码格式
2 | ```
3 | function validateEmail(email) {
4 | var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
5 | return re.test(email);
6 | }
7 | ```
8 |
9 | [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
--------------------------------------------------------------------------------
/2017/2017.2.22.md:
--------------------------------------------------------------------------------
1 | - [div居中](http://www.jianshu.com/p/a7552ce07c88)
2 |
3 | 方法之一：
4 | ```
5 | .parent{
6 | padding: ;
7 | }
8 | .child{
9 | margin: 0 auto;
10 | display: block;
11 | width: ;
12 | height: ;
13 | }
14 | ```
15 |
16 | - [footer置底](https://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page?rq=1)
17 | 1.Have a `
` with class="wrapper" for your content
18 | 2。Right before the closing
of the wrapper place the `
`
19 | 3.Right after the closing