```元素默认就是斜体。
123 |
124 | 以上三种来源的样式表在同一作用域（同一文档）内会发生交叠，他们根据层叠规则决定最后适用的样式。
125 |
126 | CSS层叠为每一条样式规则分配一个权重，当出现多条相同规则时，权重高的优先。
127 |
128 | 默认地，所有者样式表比用户样式表权重高，用户代理样式表权重最低，但，使用！important规则会强制提升样式规则权重，详见下一节-层叠顺序。
129 |
130 | ### 层叠顺序
131 |
132 | 用户代理根据以下排序规则，决定最终适用于某元素的样式规则：
133 |
134 | - 1.首先获取所有匹配此元素声明的样式规则（包括匹配当前媒体类型和选择器匹配当前元素）。
135 | - 2.根据重要性以及样式来源进行排序，优先级（权重）由低到高依次为：
136 | - 1.用户代理声明样式
137 | - 2.用户样式表普通声明
138 | - 3.所有者样式表普通声明
139 | - 4.所有者样式表!important声明
140 | - 5.用户样式表!important声明
141 | - 3.对于相同重要性和来源的样式规则按如下规则进行排序：
142 | - 1.使用特定选择器的样式规则，其优先级（权重）高于使用通用选择器的样式规则
143 | - 2.伪类和伪元素选择器当作普通类和元素选择器
144 | - 4.按声明顺序排序：对于多条权重相同，来源相同的样式规则，后面的覆盖前面的，@import引入的样式规则总是在当前样式表所有样式规则的前面。
145 |
146 | ### 选择器优先级
147 |
148 | 选择器的优先级计算方式如下，使用a, b, c , d累计分数，abcd值越大，优先级越高，该选择器下声明的样式属性值覆盖其他值：
149 |
150 | - 1.a, 通过style属性声明的行内样式规则，a = 1;否则a = 0
151 | - 2.b, 其值为选择器中元素ID的次数
152 | - 3.c, 其值为选择器中其他属性和伪类出现的次数
153 | - 4.d, 其值为选择器中元素和伪元素名出现的次数
154 |
155 | ```
156 |
157 | * {} /* a=0,b=0,c=0,d=0 => 0000 */
158 | div {} /* a=0,b=0,c=0,d=1 => 0001 */
159 | div:last-child {} /* a=0,b=0,c=0,d=2 => 0002 */
160 | div p {} /* a=0,b=0,c=0,d=2 => 0002 */
161 | h1 p[data-index] {} /* a=0,b=0,c=1,d=2 => 0012 */
162 | h1 p.para {} /* a=0,b=0,c=1,d=2 => 0012 */
163 | h1 p.para.red {} /* a=0,b=0,c=2,d=2 => 0022 */
164 | #login {} /* a=0,b=1,c=0,d=0 => 0100 */
165 | style="" /* a=1,b=0,c=0,d=0 => 1000 */
166 | ```
167 |
168 | 如下代码：
169 |
170 | ```
171 |
172 |
177 | ```
178 |
179 | html结构：
180 |
181 | ```
182 |
183 | 我的字体蓝色
184 | ```
185 |
186 |
--------------------------------------------------------------------------------
/js_executionContext.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: post
3 | title: Execution Context
4 | permalink: js_executionContext.md
5 | description: introduce this, call, applay
6 | date: 2016-01-02 10:17:12 +08:00
7 | tags: "Share JavaScript Notes"
8 | ---
9 |
10 | #JavaScript之this、call与apply
11 |
12 | 在JavaScript学习中，this的重要性不明而寓，有必要对其深入学习，而与this息息相关的有两个特别需要注意的就是call，apply，本篇就着手从this开始阐述，而后介绍call、apply之用法。
13 |
14 | > 调用一个函数时代码执行控制权就转移到此函数，同时将参数传入此函数，除了声明函数时定义的形式参数，每个函数都会接受两个附加参数：this和arguments。
15 |
16 | ##this
17 | **JavaScript中this总是指向一个对象，这个对象基于函数运行时的执行环境动态绑定，而非函数声明时所处环境。**
18 |
19 | *[关于执行环境可查看本系列篇JavaScript之作用域与作用域链](https://github.com/codingplayboy/javascript_notes/blob/master/js_scope.md)*
20 |
21 | ###this指向
22 | 关于this指向问题，与函数调用息息相关，其可大致分为四类情况：
23 |
24 | * (1). 方法调用； 即作为某对象的方法调用。
25 | * (2). 函数调用；即作为普通函数调用。
26 | * (3). 构造器函数调用；即以new方式调用。
27 | * (4). call与apply调用；即以Function.prototype.call或Function.prototype.apply调用。
28 |
29 | #
30 |
31 | * **1.方法调用**
32 |
33 | ```
34 |
35 | var obj = {
36 | name: 'Job',
37 | getName: function() {
38 | console.log(this === obj); //输出true
39 | console.log(this.name); //输出Job
40 | return this.name;
41 | }
42 | };
43 | obj.getName();
44 | ```
45 | **当函数作为对象的方法被调用时，this总是指向该对象。**
46 |
47 | * **2.函数调用**
48 |
49 | ```
50 |
51 | var name = 'Job';
52 | var getName = function() {
53 | console.log(this === window); //输出true
54 | console.log(this.name); //输出Job
55 | return this.name;
56 | };
57 | getName(); //普通函数调用
58 | ```
59 | **非严格模式下，当函数作为普通函数方式调用时，不论该函数调用时所处执行环境为何，this总是指向全局对象，JavaScript中即是window对象。**
60 |
61 | 再看如下实例，加深理解：
62 | ```
63 |
64 |
74 | ```
75 |
76 | * **3.构造器函数调用**
77 |
78 | ```
79 |
80 | var Animal = function(name) {
81 | this.name = name;
82 | };
83 | var animal = new Animal('Dog');
84 | console.log(animal.name); //输出Dog
85 | ```
86 | **当用new调用构造器函数时，总会返回一个对象，该对象可以看成是构造器函数一个实例，一般，此时构造器里的this就指向返回的这个对象。**
87 | 但还需要注意的是当构造器显式地返回一个对象时：
88 | ```
89 |
90 | var Animal = function(name) {
91 | this.name = name;
92 | return {
93 | name: 'Job'
94 | };
95 | };
96 | var animal = new Animal('Dog');
97 | console.log(animal.name); //输出Job
98 | ```
99 | 此时，this指向的是构造器显式返回的对象。
100 |
101 | * **4.call与apply调用**
102 |
103 | ```
104 |
105 | var obj = {
106 | name: 'Job',
107 | getName: function() {
108 | console.log(this === obj);
109 | console.log(this.name);
110 | return this.name;
111 | }
112 | };
113 | var obj2 = {
114 | name: 'Web'
115 | };
116 | console.log(obj.getName()); //输出Job
117 | console.log(obj.getName.call(obj2)); //输出Web
118 | console.log(obj.getName.apply(obj2)); //输出Web
119 | ```
120 | 当以Function.prototype.call或Function.prototype.apply方式调用函数时，动态传入参数改变执行环境，此时this指向传入的对象。
121 |
122 | ##call与apply
123 | call与apply是Function原型上定义的两个方法，其应用广泛。
124 |
125 | * **1.call与apply的区别**
126 |
127 | 两者作用完全一样，不同之处在于传入参数的形式。
128 | > call传入参数数量不固定，第一个参数代表所调用函数体内this的指向，而后依次为所调用函数所需参数。
129 | >
130 | > apply接受最多两个参数，第一个参数指定被调用函数内this的指向，第二个参数为一个带下标的集合，可以是数组或者类数组，作为参数传给被调用函数。
131 |
132 | ```
133 |
134 | var fn = function(a, b, b) {
135 | console.log([a, b, c]);
136 | };
137 | fn.call(null, 1,2,3);
138 | fn.apply(null, [1,2,3]);
139 | ```
140 | **需要注意的是，非严格模式下，使用call或apply时，第一个参数是必须的，当第一个参数传入null时，函数体内this就会指向被调用函数的宿主对象(其包含对象)；而严格模式下，this指向则为null**
141 |
142 | * **2.call与apply的应用**
143 |
144 | (1). 改变this指向
145 | 使用call或apply调用函数可改变函数体内this的指向。实例如前文中this指向相关实例。
146 |
147 | (2). Function.prototype.bind
148 | Function.prototype.bind可以用来绑定函数体内this指向，其参数为this的指向对象。IE8及以下不支持，这里我们可以自己实现一个。
149 | ```
150 |
151 | Function.prototype.bind = function(context) {
152 | var self = this; //保存原函数的引用
153 | return function() { //返回一个新函数
154 | return self.apply(context, arguments); //将传入的参数指定为新函数体内this的指向对象
155 | };
156 | };
157 | var obj = {
158 | name: 'Job'
159 | };
160 | var fn = function() {
161 | console.log(this.name);
162 | };
163 | fn.bind(obj)();
164 | ```
165 |
166 | (3) 借用其他对象的方法
167 | 最熟悉的就是借用构造函数实现类似继承的效果：
168 | ```
169 |
170 | var Animal = function(name) {
171 | this.name = name;
172 | };
173 | var Dog = function() {
174 | Animal.apply(this, arguments);
175 | };
176 | Dog.prototype.getName = function() {
177 | return this.name;
178 | };
179 |
180 | var dog = new Dog('Dog');
181 | console.log(dog.getName()); //输出Dog
182 | ```
183 | 另一很常见的情况就是借用Array.prototype对象上的方法处理函数参数类数组arguments:
184 | ```
185 |
186 | (function() {
187 | Array.prototype.shift.call(arguments); //arguments为类数组[1,2,3]
188 | var args = Array.prototype.slice.apply(arguments); //将arguments类数组剩余参数转换为数组赋给args变量
189 | console.log(arguments); //输出[2, 3]
190 | console.log(args); //输出[2, 3]
191 | })(1,2,3);
192 | ```
193 | 上面借用Array.prototype上的shift方法移除参数列表的首位，当然也可以借用其他方法达到其他目的，如push, slice等。
194 |
195 | JavaScript中，call与apply的应用是非常广泛的，在各类Js框架库中，都不难发现其身影。
--------------------------------------------------------------------------------
/js_treeview_plugin.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: post
3 | title: 自定义js插件
4 | permalink: js_treeview_plugin.md
5 | description: treeViewPlugin
6 | date: 2016-01-07 13:59:55 +08:00
7 | tags: ["JavaScript", "Plugin", "插件"]
8 | ---
9 |
10 | # JavaScript之树列表插件实现
11 |
12 | treeViewPlugin，一个可以生成任意多级树列表的js插件，使用了jquery事件委托处理跨浏览器添加事件监听及DOM操作实现需求。[查看插件源码点此](https://github.com/codingplayboy/javascriptDemo/tree/master/treeViewPlugin)
13 |
14 | ## API说明
15 |
16 | ### 插件定义
17 |
18 | ```
19 |
20 | var treeViewPlugin = (function() { //插件定义、封装
21 | //插件实现
22 | }());
23 | ```
24 |
25 | ### 插件API
26 |
27 | ```
28 |
29 | return {
30 | initModule: initModule, //初始化树列表
31 | addParents: addParents, //给树列表添加父级菜单
32 | addChild: addChild, //给树列表添加子级菜单
33 | addChildNode: addChildNode //给树列表添加无子级的子级菜单
34 | };
35 | ```
36 |
37 | #### 初始化
38 |
39 | ```
40 |
41 | /**
42 | * [initModule 初始化树列表]
43 | * @param {[type]} $append_target [树列表容器]
44 | * $('.treeviewCont')
45 | * @return {[type]} [函数返回值]
46 | */
47 | initModule = function($append_target) {
48 | //具体实现
49 | };
50 | ```
51 |
52 | #### 添加父级菜单
53 |
54 | ```
55 |
56 | /**
57 | * [addParents 添加父级菜单
58 | * @param {[Array]} _data [菜单数据]
59 | * [{
60 | * id: 菜单id,
61 | * name: 菜单显示值
62 | *
63 | * }]
64 | */
65 | addParents = function(_data) {
66 | //具体实现
67 | };
68 | ```
69 |
70 | #### 添加子级菜单
71 |
72 | ```
73 |
74 | /**
75 | * [addChild 添加子级菜单]
76 | * @param {[Array]} _data [菜单数据]
77 | * [{
78 | * id: 菜单id,
79 | * name: 菜单显示值,
80 | * pId: 父级菜单id
81 | * }]
82 | */
83 | addChild = function(_data) {
84 | //具体实现
85 | };
86 | ```
87 |
88 | #### 添加无子级的菜单
89 |
90 | ```
91 |
92 | /**
93 | * [addChildNode 添加无子级子级菜单]
94 | * @param {[Array]} _data [菜单数据]
95 | * [{
96 | * id: 菜单id,
97 | * name: 菜单显示值,
98 | * pId: 父级菜单id
99 | * }]
100 | */
101 | addChildNode = function(_data) {
102 | //具体实现
103 | };
104 | ```
105 |
106 | ## demo展示
107 |
108 | ```
109 |
110 |
111 |
112 |
113 |
114 | Treeview Plugin Demo
115 |
116 |
130 |
131 |
132 | Treeview Plugin Demo
133 |
136 |
204 |
205 |
206 | ```
207 |
208 | **此插件只是初步实现，更多功能待完善，实际使用可根据实际需求做相应修改，欢迎大家一起分享、交流、学习。**
209 | *[查看插件源码点此](https://github.com/codingplayboy/javascriptDemo/tree/master/treeViewPlugin)
210 | *
211 |
--------------------------------------------------------------------------------
/web_history.md:
--------------------------------------------------------------------------------
1 | # 深入学习History对象管理浏览器会话历史
2 |
3 | History对象允许我们操作浏览器会话历史，即加载当前页面的标签页窗口或frame窗口的访问历史。之前有同学咨询我如何实现拦截用户跳转页面并强制用户返回首页后重新请求页面，于是有了本篇博客的主题，本篇深入介绍浏览器会话历史的操作，在最后对比加载页面的几种不同方式，并提供一个实例給读者把玩。
4 |
5 | ## 属性
6 |
7 | - History.length
8 |
9 | 只读的，其值为一个整数，标志包括当前页面在内的会话历史中的记录数量，比如我们通常打开一个空白窗口，length为0，再访问一个页面，其length变为1。
10 |
11 | - History.scrollRestoration
12 |
13 | 允许web应用在会话历史导航时显式地设置默认滚动复原，其值为auto或manual。
14 |
15 | - History.state
16 |
17 | 只读，返回代表会话历史堆栈顶部记录的任意可序列化类型数据值，我们可以以此来区别不同会话历史纪录。
18 |
19 | ## 方法
20 |
21 | - History.back()
22 |
23 | 返回会话历史记录中的上一个页面，等价于window.history.go(-1)和点击浏览器的后退按钮。
24 |
25 | - History.forward()
26 |
27 | 进入会话历史记录中的下一个页面，等价于window.history.go(1)和点击浏览器的前进按钮。
28 |
29 | - History.go()
30 |
31 | 加载会话历史记录中的某一个页面，通过该页面与当前页面在会话历史中的相对位置定位，如，-1代表当前页面的上一个记录，1代表当前页面的下一个页面。若不传参数或传入0，则会重新加载当前页面；若参数超出当前会话历史纪录数，则不进行操作。
32 |
33 | - History pushState()
34 |
35 | 在会话历史堆栈顶部插入一条记录，参数包括，任意可序列化的object对象数据（可选），页面标题（可选），页面URL（非空）。
36 |
37 | **目前，Firefox忽略页面标题参数。**
38 |
39 | - History.replaceState()
40 |
41 | 更新会话历史堆栈顶部记录信息，包括特定的任意可序列化的object对象数据（可选），页面标题（可选），页面URL。
42 |
43 | **值得注意的是，无论是replaceState()方法还是pushState()方法，其更新或添加会话历史记录后，改变的只是浏览器关于当前页面的标题和URL的记录情况，并不会刷新或改变页面展示。**
44 |
45 | ## window.history
46 |
47 | window的history是只读属性，该属性返回History对象的一个引用，支持我们操作浏览器会话历史记录。
48 |
49 | 出于安全考虑，History对象不允许我们通过JavaScript代码访问其他会话历史记录中其他页面的URL，但是它允许我们在不同页面间进行导航。
50 |
51 | ### onpopstate事件
52 |
53 | HTML5中，提供history.pushState()和history.replaceState()方法，支持我们添加或更新会话历史记录，另外还提供window.onpopstate事件支持我们对该操作进行监听。
54 |
55 | ### pushState()
56 |
57 | pushState()方法接收三个参数，一个state对象，一个页面标题，一个URL:
58 |
59 | 1. 状态对象：
60 | 1. 存储新添会话历史记录的状态信息对象，每次访问该条会话时，都会触发popstate事件，并且事件回调函数会接收一个参数，值为该事件对象的复制副本；
61 | 1. 状态对象可以是任何可序列化的数据，浏览器将状态对象存储在用户的磁盘以便用户再次重启浏览器时能恢复数据；
62 | 1. 一个状态对象序列化后的最大长度是640K，如果传递数据过大，则会抛出异常。
63 |
64 | 1. 页面标题：
65 | 1. 目前 ，该参数值会被忽略，暂不被使用，可以传入空字符串。
66 |
67 | 1. 页面URL：
68 | 1. 此参数声明新添会话记录的入口URL；
69 | 1. 在调用pushState()方法后，浏览器不会加载URL指向的页面（在重启浏览器后或许会加载新页面 ），我们可以在popstate事件回调中处理页面是否加载；
70 | 1. 此URL必须与当前页面URL同源,，否则会抛异常；其值可以是绝对地址，也可以是相对地址，相对地址会被基于当前页面URL解析 得到绝对地址；若其值为空，则默认是当前页面URL。
71 |
72 | pushState()方法可以改变URL地址栏，在会话历史堆栈顶部插入一条新会话记录，如：
73 |
74 |
75 | ```
76 |
77 | var stateObj = { foo: "bar" };
78 | history.pushState(stateObj, "page 2", "bar.html");
79 | ```
80 |
81 | 假如当前访问页面http://blog.codingplayboy.com，则执行以上js代码后，浏览器地址栏变为http://blog.codingplayboy.com/bar.html，页面展示并没有变化，随后，
82 |
83 | - 若我们点击浏览器的后退按钮，页面也不会变化，只是浏览器的地址栏URL变换为之前的http://blog.codingplayboy.com；
84 | - 若我们点击跳转到http://blog.codingplayboy.com/about.html,然后再点击浏览器的后退按钮，则页面会回退到http://blog.codingplayboy.com/bar.html页面，且在该页面触发popstate事件，会向事件回调传入一个之前定义的stateObj的复制值参数；
85 | - 我们可以在popstate事件回调中执行我们的任务，但是必须知道的是，只有当当前页面DOM加载完成（即DOMContentLoaded事件发生）后才会触发popstate事件。
86 | - pushState()方法不会触发hashchange事件，即使URL的hash片段值改变。
87 |
88 | ### replaceState()
89 |
90 | 与history.pushState()方法相比，history.replaceState()方法不创建新的会话历史，而是更新当前会话历史记录，如更新当前会话记录的状态对象或URL。
91 |
92 | ### popstate事件
93 |
94 | 每次会话记录变换激活都会在window上触发popstate事件，如果激活的会话记录是通过replaceState()更新的或使用pushState()方法创建的，popstate事件对象的state属性值就是该会话记录状态对象的一个副本。
95 |
96 | ## location.reload()与location.replace()小结
97 |
98 | 我们知道location.reload()和location.replace()方法还有直接设置location值，都可以重新加载页面，但是这三种方式也是有区别的：
99 |
100 | ### reload()
101 |
102 | - 语法
103 |
104 | location.reload(beForceGet)
105 |
106 | - 参数
107 |
108 | beForceGet，可选，值为true或false；默认为false，表示是否从客户端缓存读取当前页；为true时，则从服务端重新请求页面（相当于F5刷新和history.go(0)方法）。
109 |
110 |
111 | ### replace()
112 |
113 | - 语法
114 |
115 | location.replace(url)
116 |
117 | - 参数
118 |
119 | 一个相对或绝对URL，使用相对于当前页URL解析后的URL替换当前会话记录的URL，效果与使用history.replaceState()方法修改URL相同；
120 |
121 | - 对比reload()
122 |
123 | location.reload()会取客户端的缓存页面，但是location.replace(url)总是重新请求加载url指向的页面。
124 |
125 | ### location赋值
126 |
127 | - 语法
128 |
129 | location.href = url;
130 | 或
131 | location.assign(url);
132 |
133 | - 说明
134 |
135 | 可以为location直接设置一个URL值，该值等效于使用pushState()修改URL，会创建一条新会话记录。
136 |
137 |
138 |
139 | ## 拦截用户返回页面及强制请求新页面实例
140 |
141 | [点此传送到实例访问地址](http://demo.codingplayboy.com/demo/smallcase/htc/history/index.html)
142 |
143 | 首先，我们进入首页index.html，并点击任意跳转，跳转到第二页a.html（当然在实际应用中可以是任意页面），然后点击返回，我们会发现，并没有返回到我们访问的首页，而是进入了我们设置的拦截页，具体如何实现的呢，因为我们在第二页中编写JavaScript代码实现：
144 |
145 | ```
146 |
147 | ;(function() {
148 | window.onpopstate = function(event) {
149 | console.log(event.state);
150 | location.replace('replace.html');
151 | };
152 | history.pushState({name: '惊鸿'}, '', 'a.html?history=1');
153 | })();
154 | ```
155 |
156 | 我们调用pushState()方法创建了一条新会话记录（该会话URL为a.html?history=1，仔细看浏览器地址栏变URL变成了a.html?history=1,），并绑定了popstate事件回调，当浏览器返回时，会退回到上一条会话记录，即a.html会话，然后触发popstate事件，在事件回调函数中，我们调用location.replace('replace.html')将a.html页面跳转至replace.html（可以是任意同源页面），这就实现了拦截用户跳转；随后，再次点击返回，会返回到我们访问的第一个页面，我们查看NetWork请求会发现不同于之前返回的页面（请求状态码为304），其状态码是200，说明是一次新的请求，这是因为在replace.html页面中，加了如下代码：
157 |
158 | ```
159 |
160 | ;(function() {
161 | window.onpopstate= function(event) {
162 | console.log(event.state);
163 | document.location.replace(location.href);
164 | };
165 | })();
166 | ```
167 |
168 | 我们在popstate事件回调中，使用```location.replace()```方法强制刷新了当前页面；当我们在拦截页点击返回时，会回退到第一页会话，URL为index.html，然后触发popstate事件，执行```document.location.replace(location.href);```刷新页面。
169 |
170 |
171 | pushState()和replaceState()能做的比我们想象的要多，本文比较详细的对其进行了介绍，有兴趣的同学可以参考MDN或玩w3c，进行更深入的学习，也可以搜索PJAX，即PushState和Ajax，同时使用这两个工具，可以极大加快网站响应速度。
172 |
--------------------------------------------------------------------------------
/js_arrAlgortithm.md:
--------------------------------------------------------------------------------
1 | #JavaScript数组值之排序、去重及最值操作
2 |
3 | 本篇主要总结常见的排序算法在JavaScript中的实现及js数组取最值，去重，篇幅较长，如有需要可以跳越阅读。
4 |
5 | ##JavaScript之最值
6 |
7 | 想一想给你一个数组，让你取最值，你会如何实现呢？这里我们只给出取最大值的实例。
8 |
9 | - **遍历**
10 |
11 | 上代码：
12 | ```
13 |
14 | function max(arr) {
15 | var temp = arr[0];
16 | for (var i = 1; i < arr.length; i++) {
17 | if (arr[i] > temp) {
18 | temp = arr[i];
19 | }
20 | }
21 | return temp;
22 | }
23 | ```
24 |
25 | - **apply借用Math.max()**
26 |
27 | ```
28 |
29 | function max(arr) {
30 | return Math.max.apply(null, arr);
31 | }
32 | ```
33 | apply有两个参数,第一个参数为执行环境，一个以数组形式传入参数。
34 |
35 | ##JavaScript之排序算法
36 |
37 | 主要介绍最常用的几种排序算法的JavaScript实现：桶排序，冒泡排序，快速排序。
38 |
39 | ###桶排序
40 |
41 | > 将数组分到有限数量的桶里，数组项值对应桶的编号，桶里的值则是其编号对应相等的数组项值出现的次数，然后，根据桶里的值将桶的编号依次输出。
42 |
43 | 试想一下，你们五个小伙伴考试微积分，分别考了5分，6分，3分，8分，6分，接下来按分数高低进行排名。
44 | 如何实现呢？
45 | 这里我们只需要一个数组就能轻易解决：
46 |
47 | *大数组下标为待排序数组项的值，大数组值为其对应下标在待排序数组中出现次数，默认为0。大数组长度为待排序数组中最大值加1（因为下标从0开始）。*
48 |
49 |
50 | ```
51 |
52 | function barrelSort(arr) {
53 | var _arr = [];
54 | var _max = Math.max.apply(null, arr); //借用取数组最大值
55 | var _num = _max + 1;
56 | while((_num--) >= 0) { //生成一个大一维数组，长度为数组最大值+1
57 | _arr[_num] = 0;//初始化大数组项全为0
58 | }
59 | var _len = arr.length;
60 | while ((_len--) >= 0) {//循环数组
61 | _arr[arr[_len]]++;//将数组项值对应为大数组下标,并统计数组项值出现次数，存入大数组
62 | }
63 | var _item = _max + 1;
64 | arr = [];//重新生成排序后的数组
65 | while ((_item--) >= 0) {//循环大数组
66 | var k = 1;
67 | while((k++) <= _arr[_item]) {//统计大数组中出现次数大于0的下标值，并存入数组
68 | arr.push(_item);
69 | }
70 | }
71 | console.log(arr);
72 | return arr;
73 | }
74 | ```
75 |
76 | - **时间复杂度O(m+n)**
77 |
78 | *如代码，第一个while循环m次（m为桶个数，即待排序数组最大值+1），第二个while循环n次(n为待排序数组长度)，最后嵌套while循环m+n次，即先循环大数组，然后只统计大数组中值大于0的对应下标，其实也就等于待排序数组长度，所以整个排序算法一共循环2*（m+n）次，其时间复杂度可为O(m+n)。
79 |
80 | ###冒泡排序
81 |
82 | 何谓冒泡排序呢，先来理解一下：
83 |
84 | > 重复地走访过要排序的数列，一次比较两个元素，如果他们的顺序错误就把他们交换过来。因为越大的元素会经由交换慢慢“浮”到数列的顶端，故得名--冒泡。
85 |
86 | - **趟** 从0开始循环到数组倒数第二个数，每次循环称为一趟。
87 | - **冒泡** 从第一位数一直循环到倒数第二位数，依次两两比较，一次比较为一次冒泡。
88 |
89 | *冒泡排序中一趟循环确定一位数字的正确位置，每趟循环都需要从当前数组序列的第一位数到倒数第二位数依次进行冒泡循环，最终确定排序后的数组序列。*
90 |
91 | 请看代码：
92 |
93 | ```
94 |
95 | function bubbleSort(arr) {
96 | var _len = arr.length - 1;
97 | var t;
98 | for (var i = 0; i < _len; i++) {//从0开始循环到数组倒数第二个数，每次循环称为一趟
99 | for(var j = 0; j < _len - i; j++) {//从第一位数一直循环到倒数第二位数，每次循环为有若干次冒泡
100 | if (arr[j] < arr[j + 1]) {//比较两个数大小，根据要求交换位置，即冒泡，结束后进行下一次冒泡
101 | t = arr[j];
102 | arr[j] = arr[j + 1];
103 | arr[j + 1] = t;
104 | }
105 | }
106 | }
107 | console.log(arr);
108 | return arr;
109 | }
110 | ```
111 |
112 | - **时间复杂度O(N^2)**
113 |
114 | 如代码所示，冒泡排序算法只有一个双重嵌套循环，共循环n*n次，其时间复杂度即为O(N^2)。
115 |
116 | ###快速排序
117 |
118 | 快速排序，可谓最常用的排序算法，也是目前提到的平均时间复杂度最快的算法，先来了解一下：
119 |
120 | > 找一个基准数，通过一趟排序将要排序的数据分割成独立的两部分，其中一部分的所有数据都比基准数要小，另一部分的所有数据都比基准数要大，然后再按此方法对这两部分数据分别进行快速排序，整个排序过程可以递归进行，以此达到整个数据变成有序序列。
121 |
122 | - **基准数** 一个参照数，用来将待排序数列分割成两部分。
123 | - **哨兵** 勘探待排序数组值依次与基准数进行比较的标记，以找到合格数（分别大于和小于基准数的两个数）。
124 | - **趟** 一趟排序找一个基准数，然后选取从左至右与从右至左同时进行勘探。
125 |
126 | *一般基准数我们取数组第一位数。两个哨兵分别为待排序数组首尾项。*
127 |
128 | 直接上代码：
129 |
130 | ```
131 |
132 | function quickSort(arr) {
133 | function _sort(left, right) {
134 | var _left = left, _right = right;
135 | var temp;
136 | if (left > right) {
137 | return;
138 | }
139 | temp = arr[left];
140 | while (left != right) {
141 | //从右往左查找
142 | while (arr[right] >= temp && left < right) {//如果哨兵标记的数大于等于基准数则继续‘向前’，标记下一个数
143 | right--;
144 | }
145 | //从左往右查找
146 | while (arr[left] <= temp && left < right) {//如果哨兵标记的数小于等于基准数则继续‘向前’，标记下一个数
147 | left ++;
148 | }
149 | //交换两个数位置
150 | if (left < right) {//两个哨兵均已找到目标数，如果两个哨兵未相遇，则交换当前两个哨兵所指向的目标数
151 | temp = arr[left];
152 | arr[left] = arr[right];
153 | arr[right] = temp;
154 | }
155 | }
156 | //将此趟基准数交换至正确位置（小于基准数的数列与大于基准数的数列之间）
157 | temp = arr[_left];
158 | arr[_left] = arr[left];
159 | arr[left] = temp;
160 | _sort(_left, left - 1);//对分割后的两部分数列递归
161 | _sort(left + 1, _right);
162 | }
163 | _sort(0, arr.length - 1);//开始快排
164 | console.log(arr);
165 | return arr;
166 | }
167 | ```
168 |
169 | - **时间复杂度平均O(NlogN)**
170 |
171 | 如代码示，最坏情况发生时，每次划分过程产生的两个数列分别包含n-1个元素和1个元素，此时相当于有两层嵌套循环，时间复杂度为O(N^2),与冒泡排序一致，而最好情况下，每次划分产生的两个数列长度大致相等，时间复杂度为O(NlogN)。
172 |
173 | **尽管快速排序的最坏时间为O(n2)，但就平均性能而言，它是基于关键字比较的内部排序算法中速度最快者，快速排序亦因此而得名。它的平均时间复杂度为O(nlgn)。**
174 |
175 | ##JavaScript数组去重
176 |
177 | 关于数组去重，也有很多种方法，在此给出几种效率最高的，借鉴一二。
178 |
179 | ```
180 |
181 | /** 第一种 */
182 | function uniqueArray(arr) {
183 | var res = [arr[0]];
184 | for(var i = 1; i < arr.length; i++) //从第二项开始遍历
185 | {
186 | //若数组第i项在当前数组中下标不是i，则说明第i项重复，应忽略。否则存入结果数组
187 | if (arr.indexOf(arr[i]) == i) ｛
188 | res.push(arr[i]);
189 | ｝
190 | }
191 | return res;
192 | }
193 |
194 | /** 第二种 */
195 | function uniqueArray(arr) {
196 | var _hash = {}, result = [];
197 | for (var i = 0; i < arr.length; i++) {
198 | if (!_hash[arr[i]]) {
199 | _hash[arr[i]] = true; //将首次遍历到的数组项存入hash对象，效率比indexOf快得多
200 | result.push(arr[i]);
201 | }
202 | }
203 | return result;
204 | }
205 | ```
206 |
207 | 总结：此篇虽篇幅略长，但细细读来，想来还是能有些收获，足矣。
--------------------------------------------------------------------------------
/js_moduleManage.md:
--------------------------------------------------------------------------------
1 | #Js模块化AMD与CMD
2 |
3 | 不同于传统的代码开发，作为一名前端开发者，不知道AMD或CMD是不合格的，我们有必要对它进行学习。在开始阐述AMD/CMD之前，先得明白什么是模块化。
4 |
5 | > 模块化，利用分类思维把复杂的系统分解为结构合理、可拓展、便于管理的多模块，使各模块高内聚、低耦合。
6 |
7 | ## AMD
8 |
9 | ### CommonJs
10 | 在学习AMD之前，很有必要了解一下CommonJs，CommonJs是NodeJs的模块系统规范，其使用方式很简单，一个模块即是一个文件，如下：
11 |
12 | 定义模块b.js：
13 | ```
14 |
15 | //b.js
16 | var name = 'xjg';
17 | function getName() {
18 | return name;
19 | }
20 | //module.exports是CommonJs模块定义API
21 | module.exports = {
22 | getName: getName
23 | };
24 | //or
25 | exports.getName = getName;
26 |
27 | ```
28 | a.js加载依赖模块b.js：
29 | ```
30 |
31 | //a.js
32 | var b = require('b');//可不加后缀.js
33 | b.getName();//调用
34 | ```
35 | 如上代码，调用b.getName()之前，需先加载依赖模块，并将其返回对象赋值给变量b，必须加载完成后，才调用b.getName()。在服务器环境，由于模块文件都在本地，其加载都是很快的，并不会感觉到阻塞；然后在客户端环境下，模块文件不在本地，加载模块文件需要耗时，则会明显阻塞后续代码，显然CommonJs不适用于浏览器环境。
36 |
37 | ### AMD
38 |
39 | > AMD(Asynchronous Module Definition)，即异步模块定义，使用异步方式加载模块，加载模块，不阻塞后续代码的执行，依赖此模块的代码都在回调函数中，加载完此模块才运行。
40 |
41 | - define()
42 |
43 | ```define(id?, dependencies?, factory);```
44 |
45 | |参数 |说明
46 | |-----------------------------|------------
47 | |id(String) |定义模块标识id
48 | |dependencies(Array) |模块其他依赖
49 | |factory(function|Object) |定义模块初始化执行函数或对象
50 |
51 | - id
52 |
53 | 如果模块 "a/b/c" 请求 "../d", 则解析为"a/d";
54 |
55 | 如果模块 "a/b/c" 请求 "./e", 则解析为"a/b/e"
56 |
57 | - factory
58 |
59 | 模块初始化要执行的函数或对象。如果为函数，它只被执行一次。如果是对象 ，此对象为模块的输出值。
60 |
61 | 回调函数：
62 | ```
63 |
64 | define('b', [c], function(c) {
65 | var name = '惊鸿';
66 | function getName() {
67 | return name;
68 | }
69 | return {
70 | getName: getName
71 | }
72 | });
73 | ```
74 | 返回对象：
75 | ```
76 |
77 | define({
78 | name: '惊鸿',
79 | getName: function getName() {
80 | return this.name;
81 | }
82 | });
83 | ```
84 |
85 | - 三个特殊关键字(require, exports, module)
86 |
87 | 如果require,exports, 或 module在依赖列表中，参数应该按照
88 | CommonJS模块规范自由变量去解析。
89 |
90 | *exports 仅仅是 module.exports 的一个引用。在 factory 内部给 exports 重新赋值时，并不会改变 module.exports 的值。*
91 |
92 | ```
93 |
94 | define('a', ['require', 'exports', 'module'], function(require, exports, module) {
95 | var b = require('b');
96 | exports.getName = function() {
97 | return b.getName();
98 | };
99 | //or
100 | module.export = {
101 | getName: function() {
102 | return b.getName();
103 | }
104 | };
105 | });
106 | ```
107 |
108 | - require()
109 |
110 | ```require(id, callback);```
111 |
112 | |参数 |说明
113 | |-----------------------------|------------
114 | |id(Array) |加载模块标识id，以逗号分隔
115 | |callback(function) |模块加载后执行回调函数
116 |
117 | ```
118 |
119 | require(['a'], function(a) {
120 | a.getName();
121 | });
122 | ```
123 |
124 | - define.amd 属性（Object）
125 |
126 | 一个空对象，可用来判定当前页面是否支持AMD模块加载，如：
127 |
128 | ```
129 |
130 | // 支持AMD模块加载
131 | if (typeof define === 'function' && define.amd) {}
132 | ```
133 |
134 | ## CMD
135 |
136 | CMD(Common Module Definition)，通用模块定义，在 Sea.js 中，所有 JavaScript 模块都遵循CMD模块定义规范。该规范明确了模块的基本书写格式和基本交互规则，在CMD中，一个模块就是一个文件。
137 |
138 | - define()
139 |
140 | ```define(factory);```
141 |
142 | 全局define函数，定义模块，factory为定义初始化执行对象，可以是函数、json对象、字符串。
143 |
144 | 构造函数：
145 | ```
146 |
147 | define(function(require, exports, module) {
148 | var b = require('b');
149 | exports.getName = function() {
150 | return b.getName();
151 | };
152 | //or
153 | module.exports = {
154 | getName: function() {
155 | return b.getName();
156 | }
157 | };
158 | });
159 | ```
160 | 字符串定义模版：
161 | ```
162 |
163 | define("My name is {{name}}");
164 | ```
165 | 对象定义数据：
166 | ```
167 |
168 | define({name: '惊鸿', tag: 'web developer'});
169 | ```
170 |
171 | - require()
172 |
173 | ```require(id);```
174 | require函数接受一个模块标识参数，该函数返回传入参数对应模块提供的接口，其加载模块为同步加载：
175 | ```
176 |
177 | var b = require('./b');
178 | b.getName();
179 | ```
180 | ```require.async([ids], callback?);```
181 | require.async接受一个模块标识列表，一个模块加载完成后的回调函数，其加载模块为异步加载：
182 | ```
183 |
184 | require(['./a', './b'], function(a, b) {
185 | a.getName();
186 | b.getName();
187 | });
188 | ```
189 | - exports与module
190 |
191 | 参考AMD中关键变量exports和module
192 |
193 | - define.cmd 属性（Object）
194 |
195 | 一个空对象，可用来判定当前页面是否支持CMD模块加载，如：
196 |
197 | ```
198 |
199 | // 支持CMD模块加载
200 | if (typeof define === 'function' && define.cmd) {}
201 | ```
202 |
203 | ## AMD与CMD
204 | 初步学习了AMD与CMD,接下来比较一下AMD与CMD:
205 |
206 | - AMD
207 | - 1.RequireJS 在推广过程中对模块定义的规范化产出；
208 | - 2.一个文件中可定义多个模块；
209 | - 3.异步加载模块；
210 | - 4.提前执行，依赖前置;(模块依赖，提前书写)
211 |
212 | - CMD
213 | - 1.SeaJs在推广过程中对模块定义的规范化产出；
214 | - 2.一个模块即是一个文件；
215 | - 3.默认为同步加载模块；
216 | - 4.延迟执行，依赖就近，职责单一;（模块依赖，用时书写）
217 |
218 | 若有不足，欢迎指正。
--------------------------------------------------------------------------------
/js_closureFunc.md:
--------------------------------------------------------------------------------
1 | #JavaScript之闭包与高阶函数（一）
2 |
3 | JavaScript虽是一门面向对象的编程语言，但同时也有许多函数式编程的特性，如Lambda表达式，闭包，高阶函数等。
4 |
5 | > 函数式编程是种编程范式，它将电脑运算视为函数的计算。函数编程语言最重要的基础是 λ 演算（lambda calculus）。而且λ演算的函数可以接受函数当作输入（参数）和输出（返回值
6 |
7 | ##闭包
8 |
9 | 何谓闭包？对于闭包众位各有己见，今我试说之，**闭包，常指有权访问其外部作用域中变量和参数的函数。**最常见的就是在某函数内部创建另一个函数。如：
10 |
11 | ```
12 |
13 | var count = (function() {
14 | var item = 0;
15 |
16 | return {
17 | add: function(num) {
18 | item += typeof num === 'number' ? num : 1;
19 | },
20 | value: function() {
21 | return item;
22 | }
23 | }
24 | })();
25 | ```
26 | *此处把函数返回的结果赋值给count，该函数返回一个包含两个方法的对象，对象中的方法均可访问其包含函数中的变量及参数。count中保存的是该对象的一个引用，对象中的方法依然可以访问自执行函数中的变量，而且访问的是变量本身。*
27 |
28 | > 闭包 函数可以访问它创建时所处的上下文环境中的变量以及参数，this以及arguments除外。
29 |
30 | 闭包其实并不是很好阐述，与我而言，自我理解与向他人阐述差别甚大，但也要试着去征服它。闭包的形成与变量息息相关，尤其是变量的作用以及变量生命周期，请看细说：
31 |
32 | ###闭包与变量
33 |
34 | **闭包中所保存的是整个变量对象--执行环境（上下文环境）中的一个表示变量的对象的引用，访问执行环境中变量即是访问该变量对象中的变量。**
35 |
36 | > 变量对象 每个执行环境（上下文环境）中的一个表示所有变量的对象，全局环境的变量对象始终存在，而局部环境的变量对象只在其执行过程中存在。
37 |
38 | 典型案例如下：
39 | ```
40 |
41 | function myNumber() {
42 | var count = [];
43 | for (var i = 0; i < 10; i ++) {
44 | count[i] = function() {
45 | return i;
46 | }
47 | }
48 | return count;
49 | }
50 | ```
51 | 这个函数会返回一个函数数组，这个数组会不会乖乖返回自己的数字呢？当然不会，事实上，每个函数都返回10。为什么呢？细细道来，因为每个函数的作用域链中都保存着myNumber()函数的活动对象（变量对象），他们都引用同一个变量对象，当然也引用同一个变量i,当myNumber()函数返回后i为10。
52 |
53 | 再看如下代码：
54 | ```
55 |
56 | function myNumber() {
57 | var count = [];
58 | for (var i = 0; i < 10; i ++) {
59 | count[i] = （function(num) {
60 | return function() {
61 | return num;
62 | };
63 | })(i);
64 | }
65 | return count;
66 | }
67 | ```
68 | 在此将自执行匿名函数结果赋值给数组，调用每个匿名函数时，传入变量i，而函数参数是**按值传递**，即将变量值复制给参数num，在此匿名函数内部又创建并返回了一个访问num参数的闭包，count数组中的函数均保存有自己的num变量的副本，于是，便返回各自的值了。
69 |
70 | ####变量的作用域
71 |
72 | 变量分全局变量与局部变量，在函数中声明变量时，以var关键字定义的变量即是局部变量，而不带var关键字的就变成全局变量。
73 | ```
74 |
75 | var c = 3
76 | var func = function() {
77 | var a = 1;
78 | b = 2;
79 | alert(b);//2
80 | alert(c);//3
81 | }
82 | func();
83 | alert(b);//2
84 | alert(a);//Uncaught ReferenceError: b is not defined
85 | ```
86 | 我们知道，**在函数中查找变量时，首先在当前函数执行环境作用域查找，若未找到，则随当前执行环境创建的作用域链往外层查找，直到全局对象为止，这里的查找是从内向外查找的**
87 |
88 | ####变量的生命周期
89 |
90 | 上面说到变量作用域，这里谈谈变量生命周期：
91 |
92 | - **全局变量**，其生命周期在整个程序运行时间内永久存在，除非主动销毁，否则可以随时调用。
93 | - **局部变量**， 其在所属作用域代码执行过程中存在，当运行完成，且不存在外部调用此上下文环境中的变量时，即被销毁，否则依然存在。
94 |
95 | ```
96 |
97 | var func = function() {
98 | var res = [1,2,3,4,5,6];
99 | var a = 0;
100 | return function() {
101 | alert(res[a]);
102 | a++;
103 | }
104 | };
105 | var f = func();
106 |
107 | func()();//1
108 | func()();//1
109 |
110 | f();//1
111 | f();//2
112 | f();//3
113 | ```
114 | 试比较执行fun()()与f()的弹出值，是不一样的，貌似在f()中a一直存在。当执行var f = func();时，f函数返回的是一个匿名函数的引用，此匿名函数可以访问func()被调用时的上下文环境（执行环境），局部变量即在其中，局部变量所处环境能被外界访问，局部变量就不会被销毁。
115 |
116 | ###闭包的作用
117 |
118 | 1. **封装变量**
119 |
120 | 闭包可以封装形成‘私有变量‘，如:实现计算乘积:
121 | ```
122 |
123 | var mult = function() {
124 | var a = 1;
125 | for (var i = 0, len = arguments.length; i < len; i++) {
126 | a = a * arguments[i];
127 | }
128 | return a;
129 | }
130 | alert(mult(1,2,3,4));
131 | ```
132 |
133 | 2. **模仿块级作用域**
134 |
135 | JavaScript中是没有块级作用域的概念的，如：
136 | ```
137 |
138 | function block() {
139 | var res = [1,3,5,7,9];
140 | for (var i = 0; i < res.length; i++) {
141 | alert(res[i]);
142 | }
143 | var i;//重新声明变量
144 | alert(i);//5
145 | }
146 | ```
147 | 如上代码所见，i变量定义后在整个包含函数中均可访问。**JavaScript中for语句并不会形成块级作用域，其整个作用域是包含函数创建的，而且对变量的后续声明都将被忽略。**
148 | 要达到块级作用域效果，我们可以形成闭包来模仿之，如：
149 | ```
150 |
151 | (function() {
152 | //块级作用域
153 | })()
154 | ```
155 | 3. **添加私有变量或函数**
156 |
157 | 通过在私有作用域定义私有变量或函数，可以形成私有成员，如：
158 | ```
159 |
160 | (function() {
161 | var name = 'xjg';
162 | function getName() {
163 | reutn name;
164 | }
165 | Person = function(val) {
166 | name = val;
167 | }
168 | Person.getName = function() {
169 | return name;
170 | }
171 | })();
172 | var p1 = new Person('Anagle');
173 | alert(p1.getName());//Anagle
174 | alert(getName())//ReferenceError: getName is not defined
175 | ```
176 | 此处，name就变成了一个静态私有变量。
177 |
178 | ###闭包与内存泄漏
179 |
180 | 局部变量本来在函数退出时被销毁，然而闭包中不是这样，局部变量生命周期被延长，闭包将使这些数据无法及时销毁，会占用内存，容易造成内存泄漏。如：
181 | ```
182 |
183 | function addHandle() {
184 | var element = document.getElementById('myNode');
185 | element.onclick = function() {
186 | alert(element.id);
187 | }
188 | }
189 | ```
190 | 此处，onclick匿名函数保存了一个对包含函数活动对象（变量对象）的引用，其保存element的引用，element将不会被回收。
191 | ```
192 |
193 | function addHandle() {
194 | var element = document.getElementById('myNode');
195 | var id = element.id;
196 | element.onclick = function() {
197 | alert(id);
198 | }
199 | element = null;
200 | }
201 | ```
202 | 此处将element设为null，即解除对其的引用，垃圾回收器将回收其占用内存。
203 |
204 | 此篇对JavaScript闭包做了总结，阐述，限于篇幅，在下篇讲述JavaScript中的高阶函数。
--------------------------------------------------------------------------------
/web_lnmp_wordpress.md:
--------------------------------------------------------------------------------
1 | # LNMP搭建WordPress博客
2 | 几经折腾，我的个人博客从最开始的利用github搭建，然后租用云主机，再到现在购买服务器，安装LNMP环境，搭建WordPress博客。所谓LNMP，就是Linux、Nginx、MySQL和世界上最好的语言--PHP。此次部署博客前后遇到问题不少，花了两周时间，所得不少，对Linux也有更多的了解，但更感前路漫漫，尚需努力。
3 |
4 | ## Linux
5 |
6 | - CentOS中启动、停止、重启服务方法：
7 |
8 | ```
9 |
10 | systemctl start|stop|restart|enable service //依次为启动、停止、重启、设置开机自启动某服务
11 | 如：
12 | systemctl restart nginx
13 | ```
14 |
15 | - 增加用户组和用户：
16 |
17 | ```
18 |
19 | useradd -g testgroup testuser
20 | ```
21 |
22 | # Nginx
23 | 使用你喜欢的shell工具，连接上Linux服务器，比如XShell，[点此下载](http://blog-resource.bj.bcebos.com/files/2016/06/Xshell5.exe)。首先，安装Nginx服务器，这里我们不讨论Apache和Nginx，以后有机会再深入学习。我的服务器安装的是CentOS系统，其他的Ubuntu安装原理也是一样。
24 |
25 | - 安装
26 |
27 | 执行以下指令安装Nginx：
28 |
29 | ```yum install nginx```
30 |
31 | - 配置
32 |
33 | 使用```nginx -v```指令检查Nginx是否安装完成。然后打开Nginx配置文件：
34 |
35 | ```
36 |
37 | vi /etc/nginx/nginx.conf
38 | ```
39 |
40 | ```
41 |
42 | server {
43 | listen 80 default_server; //监听端口
44 | listen [::]:80 default_server;
45 | server_name blog.codingplayboy.com; //服务器访问地址
46 | root /usr/share/nginx/html; //服务器根目录
47 |
48 | # Load configuration files for the default server block.
49 | include /etc/nginx/default.d/*.conf;
50 |
51 | location / { //服务器根目录访问映射路径
52 | root /usr/share/nginx/html/blog-wp;
53 | index index.php index.html index.htm; //首页
54 | }
55 |
56 | error_page 404 /404.html;
57 | location = /40x.html {
58 | root /usr/share/nginx/html;
59 | }
60 |
61 | error_page 500 502 503 504 /50x.html;
62 | location = /50x.html {
63 | root /usr/share/nginx/html;
64 | }
65 |
66 | rewrite /wp-admin$ $scheme://$host$uri/ permanent;
67 | location ~ \.php$ { //解析访问php文件时处理规则
68 | root /usr/share/nginx/html/blog-wp;
69 | fastcgi_pass 127.0.0.1:9000; //php-fpm
70 | fastcgi_index index.php;
71 | fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
72 | include fastcgi_params;
73 | }
74 | }
75 | ```
76 |
77 | - 权限设置
78 |
79 | 访问服务器地址，会出现Access Denied，403Forbidden禁止访问，我们还需要修改服务器访问目录权限
80 |
81 | ```
82 |
83 | chown -R nginx:nginx /usr/share/nginx/html/blog-wp
84 | chmod -R 774 /usr/share/nginx/html/blog-wp
85 | ```
86 |
87 | nginx:nginx为Linux用户和用户组，后文配置php-fpm时将创建。
88 |
89 | - SELinux设置
90 |
91 | 为了能完整使用wordpress读写博客、安装主题插件功能还需要修改SELinux安全上下文以拥有对目录文件的读写权限：
92 |
93 | ```
94 |
95 | setsebool -P httpd_read_user_content 1
96 | setsebool -P httpd_enable_homedirs 1
97 | chcon -R -t httpd_sys_rw_content_t /usr/share/nginx/html/blog-wp
98 | ```
99 |
100 | ## MySQL
101 |
102 | - 安装
103 |
104 | CentOS7以前可以安装MySQL，但是在CentOS7中MySQL由MariaDB替代，大致还是相同的安装方式：
105 |
106 | ```
107 |
108 | yum install mariadb mariadb-server
109 | 或
110 | yum install mysql mysql-server
111 | ```
112 |
113 | - 配置
114 |
115 | 安装完成后，拷贝配置文件至/etc/my.conf，若已存在my.conf直接覆盖：
116 |
117 | ```
118 |
119 | cp /usr/share/mysql/my-huge.cnf /etc/my.cnf
120 | ```
121 |
122 | - 创建数据库
123 |
124 | 随后给数据库创建用户，输入指令：
125 |
126 | ```
127 |
128 | mysql_secure_installation
129 | ```
130 | 按照提醒依次输入用户名、密码，对于其他询问可以直接确定，到最后创建账户成功。
131 |
132 | ```
133 |
134 | mysql -u root -p
135 | ```输入之前创建的用户名和密码登录数据库，创建一个wordpress数据库，数据库名可以自定义:
136 |
137 | ```
138 |
139 | create database wordpress
140 | ```
141 |
142 | ```use wordpress```切换至该数据库，创建连接该数据库的账号：
143 |
144 | ```
145 |
146 | grant all on wordpress.* to username identified by "password"
147 | ```
148 |
149 | - 权限
150 |
151 | 修改数据库文件权限：
152 |
153 | ```
154 |
155 | chown mysql:mysql /var/lib/mysql -R
156 | ```
157 |
158 | ## PHP
159 |
160 | - 安装
161 |
162 | ```
163 |
164 | sudo yum -y install php php-fpm php-mysql php-gd php-ldap php-odbc php-pear php-xml php-xmlrpc php-mbstring php-snmp php-soap curl
165 | ```
166 |
167 | ```
168 |
169 | sudo yum -y install epel-release
170 | ```
171 |
172 | - 配置
173 |
174 | 打开php-fpm配置文件：
175 |
176 | ```
177 |
178 | vi /etc/php-fpm.d/www.conf
179 | ```
180 |
181 | 找到对应owner,user,group，修改为nginx用户和nginx用户组：
182 |
183 | ```
184 |
185 | listen.owner = nginx
186 | listen.group = nginx
187 | listen.mode = 0666
188 | ...
189 | user = nginx
190 | group = nginx
191 |
192 | ```
193 | 然后激活nginx用户：
194 |
195 | ```
196 |
197 | usermod -s /bin/bash username
198 | ```也可以直接修改文件：
199 |
200 | ```
201 | cat /etc/passwd
202 | ```
203 | 发现它的shell是“/sbin /nologin”，需要将起改成“/bin/bash”。
204 |
205 | - 配置php.ini
206 |
207 | 打开php.ini配置文件：
208 |
209 | ```
210 |
211 | vi /etc/php.ini
212 | ```
213 | 找到open_basedir所在行，此参数规定php所能运行的目录，若不修改该值，访问nginx服务器将报Access Denied错误；将该参数值修改为服务器访问目录或者直接注释该行。
214 |
215 | - 启动
216 |
217 | 启动php-fpm:
218 |
219 | ```
220 |
221 | systemctl start php-fpm
222 | systemctl enable php-fpm
223 | //设置开机自启动php-fpm
224 | ```
225 |
226 | ## WordPress
227 |
228 | 下载WordPress安装包，可以直接wget获取也可以ftp上传，解压到/usr/share/nginx/html/blog-wp，访问index.php即进行安装：
229 |
230 | 
231 |
232 | 点击开始安装：
233 |
234 | 
235 |
236 | 安装好后就可以正常访问了，开始安装wordpress插件可能会提示让你连接FTP:
237 |
238 | ，如果有你可以连接，但是也可以直接修改之前安装wordpress时生产的wp-config.php配置文件,在文件添加如下代码：
239 |
240 | ```
241 |
242 | define('FS_METHOD', 'direct');
243 | define('FS_CHMOD_DIR', 0777);
244 | define('FS_CHMOD_FILE', 0777);
245 | ```
246 |
247 | 再次安装即可正常安装成功，接下来开始你的第一篇博客吧。
248 |
249 |
--------------------------------------------------------------------------------
/h5_postMessage.md:
--------------------------------------------------------------------------------
1 | # HTML5 window.postMessage与跨域问题
2 | 在前一篇文章中，讲到浏览器同源策略，即阻止不同域的页面间访问彼此的方法和属性，并对解决同源策略跨域问题提出的解决方案进行阐述：子域代理、JSONP、CORS。本篇将详细阐述HTML5 window.postMessage，借助postMessage API，文档间可以以安全可控的方式实现跨域通信，第三方JavaScript代码也可以与iframe内加载的外部文档进行通信。
3 |
4 | [先来看一个postMessage实例](http://jhssdemo.duapp.com/demo/h5_postmessage/index.html)
5 |
6 | [有需要可以看看相关代码](https://github.com/codingplayboy/javascriptDemo/tree/master/html5/html5_message)
7 |
8 | ## HTML5 window.postMessage API
9 |
10 | > HTML5 window.postMessage是一个安全的、基于事件的消息API。
11 |
12 | ### postMessage发送消息
13 | 在需要发送消息的源窗口调用postMessage方法即可发送消息。
14 |
15 | - 源窗口
16 | 源窗口可以是全局的window对象，也可以是以下类型的窗口:
17 | - 文档窗口中的iframe:
18 |
19 | ```
20 |
21 | var iframe = document.getElementById('my-iframe');
22 | var win = iframe.documentWindow;
23 | ```
24 |
25 | - JavaScript打开的弹窗：
26 |
27 | ```
28 |
29 | var win = window.open();
30 | ```
31 |
32 | - 当前文档窗口的父窗口：
33 |
34 | ```
35 |
36 | var win = window.parent;
37 | ```
38 |
39 | - 打开当前文档的窗口：
40 |
41 | ```
42 |
43 | var win = window.opener();
44 | ```
45 |
46 | 找到源window对象后，即可调用postMessage API向目标窗口发送消息：
47 |
48 | ```win.postMessage('Hello', 'ttp://jhssdemo.duapp.com/');```
49 |
50 | postMessage函数接收两个参数：第一个为将要发送的消息，第二个为源窗口的源。
51 |
52 | *注：只有当目标窗口的源与postMessage函数中传入的源参数值匹配时，才能接收到消息。*
53 |
54 | ### 接收postMessage消息
55 | 要想接收到之前源窗口通过postMessage发出的消息，只需要在目标窗口注册message事件并绑定事件监听函数，就可以在函数参数中获取消息。
56 |
57 | ```
58 |
59 | window.onload = function() {
60 | var text = document.getElementById('txt');
61 | function receiveMsg(e) {
62 | console.log("Got a message!");
63 | console.log("\nMessage: " + e.data);
64 | console.log("\nOrigin: " + e.origin);
65 | // console.log("Source: " + e.source);
66 | text.innerHTML = "Got a message!
" +
67 | "Message: " + e.data +
68 | "
Origin: " + e.origin;
69 | }
70 | if (window.addEventListener) {
71 | //为窗口注册message事件，并绑定监听函数
72 | window.addEventListener('message', receiveMsg, false);
73 | }else {
74 | window.attachEvent('message', receiveMsg);
75 | }
76 | };
77 | ```
78 |
79 | message事件监听函数接收一个参数，Event对象实例，该对象有三个属性：
80 |
81 | - data 发送的具体消息
82 | - origin 发送消息源
83 | - source 发送消息窗口的window对象引用
84 |
85 | ### 说明
86 |
87 | - 可以将postMessage函数第二个参数设为*，在发送跨域消息时会跳过对发送消息的源的检查。
88 | - postMessage只能发送字符串信息。
89 |
90 |
91 | ### 实例
92 |
93 | - 源窗口
94 |
95 | ```
96 |
97 |
98 |
99 |
100 |
101 | Html5 postMessage
102 |
109 |
110 |
111 |
112 |
113 |
114 |
116 |
117 |
119 |
145 |
146 |
147 | ```
148 |
149 | - 目标窗口
150 |
151 | win.html
152 | ```
153 |
154 |
155 |
156 |
157 |
158 | Html5 postMessage
159 |
166 |
167 |
168 | The New Window
169 |
170 |
190 |
191 |
192 | ```
193 |
194 | ### 回顾
195 | 通过本篇的学习，了解了使用HTML5的postMessage API在窗口间进行通信，也知道可以借助其实现跨域通信；现代浏览器基本都支持postMessage，而对于一些老式浏览器如IE7-等，可以使用一定的替代方案，进行数据通信，如window.name、url查询字符和hash片段等。
--------------------------------------------------------------------------------
/backbone_events.md:
--------------------------------------------------------------------------------
1 | # Backbone入门之事件（Backbone.Events）
2 |
3 | Backbone事件将事件触发所要执行的回调函数注册成事件处理句柄，当事件发生时，就触发该函数。
4 |
5 | ## Backbone.Events
6 |
7 | Backbone.Events可以扩展到任何对象上，使其具有绑定和触发事件的能力。在绑定事件的回调处理函数之前，不需要定义事件，且可以传递参数：
8 |
9 | ```
10 |
11 | var myObj = {};
12 |
13 | _.extend(myObj, Backbone.Events);
14 |
15 | //添加一个自定义事件
16 | myObj.on('test', function(msg) {
17 | console.log('triggered ' + msg);
18 | });
19 |
20 | //触发自定义事件,输出"triggered test"
21 | myObj.trigger('test', 'test');
22 | ```
23 |
24 | ### on()
25 |
26 | on(event, callback [,context])会在对象上绑定一个事件回调函数，回调函数this默认指向当前对象,事件发生时，回调函数就会被调用。单一事件时，第一个参数event值即为自定义事件名；而多个事件时，则可以为事件加上命名空间，以冒号分隔；第三个参数可以传入作为回调函数执行上下文，：
27 |
28 | *注：特殊事件all，可以捕获对象上所有的事件触发。*
29 |
30 | - 未注册all事件
31 |
32 | ```
33 |
34 | var myObj = {};
35 | _.extend(myObj, Backbone.Events);
36 |
37 | function test(msg) {
38 | console.log('triggered ' + msg);
39 | }
40 |
41 | myObj.on('test:first', test);
42 | myObj.on('test:second', test);
43 |
44 | //触发test:first事件，输出 "triggered test first"
45 | myObj.trigger('test:first', 'test first');
46 | //触发test:second事件，输出 "triggered test second"
47 | myObj.trigger('test:second', 'test second');
48 |
49 | //不触发任何事件
50 | myObj.trigger('test', 'test');
51 |
52 | ```
53 |
54 | - 注册all事件
55 |
56 | ```
57 |
58 | var myObj = {};
59 | _.extend(myObj, Backbone.Events);
60 |
61 | function test(msg) {
62 | console.log('triggered ' + msg);
63 | }
64 |
65 | //监听所有事件
66 | myObj.on('all', test);
67 |
68 | //触发test:first事件，输出 "triggered test first"
69 | myObj.trigger('test:first', 'test first');
70 | //触发test:second事件，输出 "triggered test second"
71 | myObj.trigger('test:second', 'test second');
72 |
73 | //触发test事件， 输出"triggered test"
74 | myObj.trigger('test', 'test');
75 |
76 | //触发所有事件
77 | ```
78 |
79 | ### once()
80 |
81 | 注册事件并绑定回调处理函数，触发一次后立即被移除，其他同on()方法。
82 |
83 | ### off()
84 |
85 | off([event] [,callback] [,context])事件可以移除之前通过on()方法绑定在事件对象上的回调处理函数，第一个参数为要移除的回调函数对应的事件名，若为空则移除所有事件的回调函数；第二个参数为对应的要移除的回调函数名，若为空则移除该事件所有绑定的回调函数：第三个函数为回调函数上下文，若为空则移除所有上下文下的这个回调函数：
86 |
87 | ```
88 |
89 | var myObj = {};
90 | _.extend(myObj, Backbone.Events);
91 |
92 | function test(msg) {
93 | console.log('triggered ' + msg);
94 | }
95 | function joke(msg) {
96 | console.log("Joke " + msg);
97 | }
98 |
99 | myObj.on('test:first', test);
100 | myObj.on('test:second', test);
101 | myObj.on('joke', test);
102 | myObj.on('joke', joke);
103 |
104 | myObj.off('test:first');
105 |
106 | //触发test:first事件，不输出
107 | myObj.trigger('test:first', 'test first');
108 | //触发test:second事件，输出 "triggered test second"
109 | myObj.trigger('test:second', 'test second');
110 |
111 | myObj.off('joke', test);
112 | //触发joke事件，输出"Joke joke"
113 | myObj.trigger('joke', 'joke');
114 |
115 | myObj.off('joke');
116 | //触发joke事件，不输出
117 | myObj.trigger('joke', 'joke');
118 | ```
119 |
120 | ### trigger()
121 | trigger(event [,*args])方法为指定事件触发回调函数，第一个参数为事件名，后面的参数为传递的参数，可以为一个或多个；trigger()方法可以触发一个或多个事件的回调函数，触发单个事件时，event参数值即为事件名；而触发多个事件时，event值为以空格分隔的多个事件名：
122 |
123 | ```
124 |
125 | var myObj = {};
126 | _.extend(myObj, Backbone.Events);
127 |
128 | function test(arg1, arg2) {
129 | console.log('triggered ' + arg1 + ' ' + arg2);
130 | }
131 | function joke(msg) {
132 | console.log("Joke " + msg);
133 | }
134 |
135 | myObj.on('test', test);
136 | myObj.on('joke', joke);
137 |
138 | //输出"triggered boy girl"
139 | myObj.trigger('test', 'boy', 'girl');
140 |
141 | //输出"triggered several events undefined"和"Joke several events"
142 | myObj.trigger('test joke', 'several events');
143 | ```
144 |
145 | ### listenTo()
146 |
147 | 前文的on()和off()都是在对象上直接绑定或移除回调函数，而listenTo(obj, event, callback)方法则可以实现一个对象监听另一个对象上的事件，第一个参数是要监听的对象，第二个参数是要坚听对象上事件的事件名，第三个参数是所监听对象上事件触发时此对象上的回调函数：
148 |
149 | *注：object.listenTo()方法调用时，其第三个参数回调函数执行上下文总是当前对象object。*
150 |
151 | ```
152 |
153 | var objA = {}, objB = {};
154 | _.extend(objA, Backbone.Events);
155 | _.extend(objB, Backbone.Events);
156 |
157 | objA.listenTo(objB, 'test', function(e) {
158 | console.log('listened it');
159 | });
160 |
161 | //输出"listened it"
162 | objB.trigger('test');
163 | ```
164 |
165 | ### listenToOnce()
166 |
167 | listenToOnce(obj, event, callback)方法则可以实现一个对象监听另一个对象上的事件，并在该事件触发一次后
168 |
169 | ### stopListening()
170 |
171 | stopListening([other] [,event] [,callback])方法使对象终止监听事件，若不带参数，则停止监听所有对象，移除所有已注册的回调函数；若第二个参数为空，则停止监听某对象上所有事件，移除为该对象注册的所有回调函数；若第三个参数为空，停止监听某对象上特定事件，移除为该事件注册的所有回调函数；参数均不为空，移除某对象上特定事件的指定回调函数：
172 |
173 | ```
174 |
175 | var objA = {}, objB = {};
176 | _.extend(objA, Backbone.Events);
177 | _.extend(objB, Backbone.Events);
178 |
179 | objA.listenTo(objB, 'test', function(e) {
180 | console.log('listened it');
181 | });
182 |
183 | //输出"listened it"
184 | objB.trigger('test');
185 |
186 | objA.stopListening(objB);
187 | //不输出
188 | objB.trigger('test');
189 | ```
190 |
191 | ## 事件与视图
192 |
193 | 在Backbone中，事件使用最多的场景总是与视图对象一起，在一个视图中，要监听事件，一般有两种方式：DOM事件和Event事件API。
194 |
195 | - DOM事件
196 |
197 | 添加DOM事件可以通过视图对象events属性或者jQuery.on()方法注册：
198 |
199 | - 使用events属性注册的事件，回调函数的this指向视图对象
200 | - 使用jQuery注册事件，回调函数this指向DOM元素
201 |
202 | - Event API
203 |
204 | 使用Event API注册事件也有两种情况：
205 |
206 | - 使用on()方法注册事件，上下文默认是指向当前对象，也可以通过第三个参数传入作为回调函数上下文
207 | - 使用listenTo()注册事件，回调函数this指向当前对象
208 |
209 |
--------------------------------------------------------------------------------
/js_prototype.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: post
3 | title: JavaScript Prototype
4 | permalink: js_prototype.md
5 | description: introduce javascript prototype
6 | date: 2016-01-03 20:08:49 +08:00
7 | tags: "Share JavaScript Notes"
8 | ---
9 |
10 | #JavaScript之原型与原型链
11 |
12 | 在基于类的语言中，对象是类的实例，并且类可以从另一个类继承，如Java；JavaScript则是一门基于原型的语言，以原型链实现继承，其对象可以直接继承自另一对象，此篇详细阐述JavaScript之原型与原型链。
13 |
14 | ##原型
15 | Javascript中创建的每个函数都有一个prototype属性，这个属性是一个指针，指向一个对象，这个对象的作用即是包含可以由特定类型实例共享的属性和方法，这个对象就是函数的原型对象。
16 |
17 | 默认情况，所有的原型对象都会有一个constructor属性，这个属性包含一个指向prototype属性所在函数的指针。
18 |
19 | 调用构造函数创建一个新实例后，实例的内部将包含一个指向构造函数原型对象的指针，在ECMA-262中定义此指针为[[Prototype]]，并不能被显式的访问到，而在Firefox,Safari和Chrome中每个对象上有一个\_\_proto\_\_属性。
20 |
21 | *\_\_proto\_\_显示的是实例与构造函数原型对象间的关系，而非实例与构造函数间的关系。*
22 |
23 | ```
24 |
25 | function Animal(name) {
26 | this.name = name;
27 | }
28 | Animal.prototype.age = 3;
29 | Animal.prototype.getName = function() {
30 | return this.name;
31 | };
32 | var animal = new Animal('Dog');
33 | console.log(animal.getName()); //输出Dog
34 | ```
35 | 以上代码中，Animal为构造函数，Animal.prototype指向构造函数原型对象；原型对象中constructor属性指向构造函数，即Animal.prototype.constructor指向Animal；在构造函数实例中，其\_\_proto\_\_属性指向构造函数原型对象。
36 |
37 | * 1. 原型与实例属性访问
38 |
39 | ```
40 |
41 | function Animal(name) {
42 | this.name = name;
43 | }
44 | Animal.prototype.age = 3;
45 | Animal.prototype.getName = function() {
46 | return this.name;
47 | };
48 | var animal1 = new Animal('Dog');
49 | var animal2 = new Animal('Cat');
50 | console.log(animal1.age); //输出3--原型属性
51 | console.log(animal2.age); //输出3--原型属性
52 | animal2.age = 4;
53 | console.log(animal2.age); //输出4--实例属性
54 | delete animal2.age;
55 | console.log(animal2.age); //输出3--原型属性
56 | ```
57 | > 获取某对象属性时，首先从该对象实例本身开始，若该实例中找到该属性，则返回该属性值；若未找到，则继续查找该实例对象指向的构造函数原型对象，若找到则返回值。
58 |
59 | (1) hasOwnProperty()方法
60 | hasOwnProperty()方法可以检测一个属性是在原型上还是实例上，只有当给定属性为对象实例属性时返回true：
61 |
62 | ```
63 |
64 | function Animal(name) {
65 | this.name = name;
66 | }
67 | Animal.prototype.age = 3;
68 | Animal.prototype.getName = function() {
69 | return this.name;
70 | };
71 | var animal1 = new Animal('Dog');
72 | var animal2 = new Animal('Cat');
73 | console.log(animal1.hasOwnProperty('name')); //true
74 | console.log(animal1.hasOwnProperty('age')); //false
75 | animal1.age = 4;
76 | console.log(animal1.hasOwnProperty('age')); //true
77 | ```
78 |
79 | (2) 原型与in
80 | 单独使用in操作符时，只要通过对象能访问到给定属性即返回true，无论属性是在实例还是原型上定义：
81 |
82 | ```
83 |
84 | function Animal(name) {
85 | this.name = name;
86 | }
87 | Animal.prototype.age = 3;
88 | Animal.prototype.getName = function() {
89 | return this.name;
90 | };
91 | var animal1 = new Animal('Dog');
92 | var animal2 = new Animal('Cat');
93 | console.log(animal1.hasOwnProperty('name')); //true
94 | console.log('name' in animal1); //true
95 | console.log(animal1.hasOwnProperty('age')); //false
96 | console.log('age' in animal1); //true
97 | console.log('eat' in animal1); //false
98 | ```
99 |
100 | * 2.实例与原型的引用关系
101 |
102 | 实例在创建时，其内部指针\[\[Prototype\]\](在上文提到的\_\_proto\_\_)指向构造函数原型对象，存在引用关系。
103 |
104 | ```
105 |
106 | function Animal(name) {
107 | this.name = name;
108 | }
109 | var animal = new Animal('Dog');
110 | Animal.prototype.age = 3;
111 | Animal.prototype.getName = function() {
112 | return this.name;
113 | };
114 | animal.getName(); //输出Dog
115 | ```
116 | 可以看到虽然实例早于原型中getName方法创建，但其依然可以调用该方法，因为实例通过引用指向原型对象，原型对象变化自然能被实例访问到。然而，对于如下这种情况：
117 | ```
118 |
119 | function Animal(name) {
120 | this.name = name;
121 | }
122 | var animal = new Animal('Dog');
123 | Animal.prototype = {
124 | constructor: Animal, //设置constructor值为Animal，确保constructor属性返回适当值，详细见上文关于constructor属性说明
125 | age: 3,
126 | getName: function() {
127 | return this.name;
128 | }
129 | };
130 | var animal2 = new Animal('Cat');
131 | console.log(animal2.getName()); //输出Cat
132 | animal.getName(); //TypeError: undefined is not a function
133 | ```
134 | 此处，首先创建了一个实例，随后重写了构造函数原型对象，再在实例上调用getName方法时报错；而重写构造函数原型对象之后创建的实例调用getName方法可以正常返回对应值。这是因为重写原型对象之后，之前创建的实例引用的依然是之前的原型对象，其与现有原型之间并无联系，而之后创建的实例[[Prototype]]指针引用的就是现有原型。
135 |
136 | * 3.原型对象存在问题
137 |
138 | ```
139 |
140 | function Animal(name) {
141 | this.name = name;
142 | }
143 | Animal.prototype.age = 3;
144 | Animal.prototype.partner = ['one'];
145 | Animal.prototype.getName = function() {
146 | return this.name;
147 | };
148 | var animal1 = new Animal('Dog');
149 | var animal2 = new Animal('Cat');
150 | console.log(animal1.partner); //输出["one"]
151 | console.log(animal2.partner); //输出["one"]
152 | animal1.partner.push('two');
153 | console.log(animal1.partner); //输出["one", "two"]
154 | console.log(animal2.partner); //输出["one", "two"]
155 | console.log(animal1.partner === animal2.partner); //输出true
156 | ```
157 | 可以看到原型中所有属性都被实例共享，特别是对于引用类型的属性，如上的partner属性。
158 |
159 | * 4.默认原型
160 |
161 | 所有引用类型默认都继承自Object，所有构造函数默认原型都是Object的实例，默认原型都会包含一个内部指针，指向Object.prototype。
162 |
163 | * 5.构造函数，原型与实例的关系
164 |
165 | 每个构造函数都有一个原型对象，由prototype属性指向；原型对象包含一个指向构造函数的指针constructor；而实例都包含一个指向构造函数原型对象的内部指针[[Prototype]]。
166 |
167 | ##原型链
168 |
169 | 每一个构造函数都有一个原型对象，当我们让某一原型对象等于另一构造函数的实例，此时该原型对象就包含一个指针，该指针指向这一构造函数的原型对象，该指针指向的原型对象中包含一个指向这一构造函数的指针，同样我们可以令该指针指向的原型对象等于另一构造函数的实例，如此递进，则形成一条实例与原型的链条，即原型链。
170 |
171 | ```
172 |
173 | function Parent() {
174 | this.name = 'parent';
175 | };
176 | Parent.prototype.getName = function() {
177 | return this.name;
178 | };
179 | function Child() {
180 | this.childname = 'child';
181 | }
182 | Child.prototype = new Parent();
183 | Child.prototype.getChildName = function() {
184 | return this.childname;
185 | };
186 | var child = new Child();
187 | console.log(child.getName()); //输出parent
188 | console.log(child.getChildName()); //输出child
189 | ```
190 | 如上代码，child实例指向Child原型，Child原型等于Parent实例，即指向Parent原型。可见本质即是以一个新类型（构造函数）的实例重写原型对象，形成原型链。
191 |
192 | * 原型链问题
193 |
194 | 既然原型对象存在问题，那么原型链自然也继承了这个问题，即原型属性会被所有实例共享，对于原型属性的改变将影响所有实例，而在原型链中，由于某一原型对象等于另一构造函数的实例，实例受影响，也就导致其他原型对象也受影响。
195 |
196 | 原型与原型链是JavaScript实现继承的基础，下一篇详细介绍JavaScript之继承。
197 |
--------------------------------------------------------------------------------
/css_transition.md:
--------------------------------------------------------------------------------
1 | # CSS3之transition
2 |
3 | JavaScript是单线程执行的，代码是一句一句执行的，而异步任务，如定时器或者动画，会被压入执行队列，在线程空闲时执行。在CSS3动画出现之前，我们通常使用定时器和JavaScript实现动画效果，但是由于JavaScript单线程执行，很容易发生动画卡顿，效果较差。CSS3提供的过渡（transition）、动画（animation）、变换（transform）能比较好的为我们展现不同的动画效果，因此有必要对其进行了解、学习，本篇开始介绍CSS3之过渡。
4 |
5 | ## 过渡（transition）
6 |
7 | > CSS过渡支持我们在改变CSS属性时控制动画的变化效果。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。
8 |
9 | CSS过渡在独立于JavaScript执行线程的另一个线程里执行，JavaScript的执行不会阻塞CSS动画，使得应用动画效果更加流畅。
10 |
11 | #### CSS3过渡简洁语法如下：
12 |
13 | ```
14 |
15 | transition: [property] [duration] [timing-function] [delay];
16 | ```
17 |
18 | - property，属性名称；
19 | - duration，过渡动画持续的时间；
20 | - timing-function，动画执行时间变化函数；
21 |
22 | - ease-in，动画变化逐渐变快；
23 | - ease-out，动画变化逐渐变慢；
24 | - ease-in-out，动画先逐渐变快然后逐渐变慢；
25 | - linear，线性动画变换；
26 | - cubic-bezire(x1, y1, x2, y2)，定义动画时间变化曲线
27 | - step(number, type)，定义动画变化区段块
28 |
29 | 关于动画变化函数更多，请查看[https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function](https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function)
30 |
31 | - delay，过渡动画属性变化延迟执行时间。
32 |
33 | *注：可以一次声明多个过渡变化，以逗号分隔。*
34 |
35 | #### CSS3过渡子属性语法
36 |
37 | 我们可以通过CSS过渡子属性分别控制CSS3过渡动画模块：
38 |
39 | - transition-property：定义将要使用CSS3过渡动画的单个或多个CSS属性名称
40 | - transition-duration：定义发生过渡动画的单个或多个CSS属性所对应过渡动画执行所需时间
41 | - transition-timing-function：定义CSS3过渡动画过程中属性值与时间的变化函数
42 | - transition-delay： 定义过渡动画属性变化延迟执行时间
43 |
44 |
45 | ## CSS3过渡动画实例
46 |
47 | [观看CSS3过渡实例请进入](http://demo.codingplayboy.com/demo/smallcase/htc/css_transition.html)
48 |
49 | html代码：
50 |
51 | ```
52 |
53 |
54 | The box below combines transitions for: width, height, background-color, transform. Hover or click over the box to see these properties animated.
55 |
56 |
57 |
58 |
59 |
60 | ```
61 |
62 | CSS样式：
63 |
64 | ```
65 |
66 | .box {
67 | border: 1px solid #FFCCCC;
68 | display: block;
69 | width: 100px;
70 | height: 100px;
71 | background-color: #0000FF;
72 | -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s;
73 | transition: width 2s, height 2s, background-color 2s, transform 2s;
74 | }
75 |
76 | .box:hover {
77 | background-color: #FFCCCC;
78 | width: 200px;
79 | height: 200px;
80 | -webkit-transform: rotate(180deg);
81 | transform: rotate(180deg);
82 | }
83 | .trans.box {
84 | background-color: #FF0000;
85 | width: 300px;
86 | height: 300px;
87 | -webkit-transform: rotate(270deg);
88 | transform: rotate(270deg);
89 | }
90 | ```
91 |
92 | ## CSS3过渡与transitionend
93 |
94 | CSS属性发生过渡变化时，除了会执行CSS相应的指定变化，还会在完成时触发transitionend事件。
95 |
96 | ##### transitionend
97 |
98 | > transitionend 事件在 CSS 完成过渡后触发。如果过渡在完成前移除，例如transition-property属性被移除，此事件将不被触发。
99 |
100 | 语法如下：
101 |
102 | ```
103 |
104 | // Safari 3.1 到 6.0
105 | object.addEventListener("webkitTransitionEnd", myScript);
106 | // 标准方式
107 | object.addEventListener("transitionend", myScript);
108 | ```
109 |
110 | #### 无限弹动小球实例
111 |
112 | [无限弹动小球实例地址](http://demo.codingplayboy.com/demo/smallcase/htc/css3_transition_ball.html)
113 |
114 | html代码：
115 |
116 | ```
117 |
118 |
119 |
120 | ```
121 |
122 | css样式：
123 |
124 | ```
125 |
126 | * {
127 | margin: 0;
128 | padding: 0
129 | }
130 | html, body {
131 | width: 100%:
132 | height: 100%;
133 | }
134 | .ball {
135 | background-color: blue;
136 | width: 100px;
137 | height: 100px;
138 | position: absolute;
139 | top: 30px;
140 | left: 20px;
141 | border-radius: 50px;
142 | }
143 | .floor {
144 | position: absolute;
145 | bottom: 10px;
146 | left: 0;
147 | width: 100%;
148 | }
149 | ```
150 |
151 | JavaScript代码：
152 |
153 | ```
154 |
155 |
214 | ```
215 |
216 | 本篇对CSS3过渡进行了基本讲解和拓展，并给出了两个实例，供参考。
--------------------------------------------------------------------------------
/css_visual_formatting_model.md:
--------------------------------------------------------------------------------
1 | # CSS之视觉格式化模型(Visual Formatting Model)
2 |
3 | CSS中的visual formatting model(视觉格式化模型)是一种处理文档并把它显示在可视化媒体上的算法。这是CSS中的一个基础概念。visual formatting model把文档的每一个元素转换成0个，1个或多个符合CSS盒模型的盒子，每个盒子的布局内容包括如下部分：
4 |
5 | - 盒子尺寸：明确指定受限制或不指定
6 | - 盒子类型：行内，行内级，原子行内级，块盒
7 | - 定位方案：包括正常文档流，float或者绝对定位
8 | - 节点树的其他元素：其子元素或兄弟元素
9 | - viewport（视口）的尺寸和定位
10 | - 内含图片的固有尺寸
11 | - 其他额外信息
12 |
13 |
14 | ## 视口（viewport）
15 |
16 | ---
17 |
18 | 用户代理，如浏览器通常提供给用户一个viewport（屏幕上的一个窗口或其他可视区域），通过该viewport用户可以访问到一个文档，在viewport尺寸变化时，用户代理可以改变文档的布局。
19 |
20 | ### 滚动（scroll）
21 |
22 | 当viewport宽度或高度小于渲染文档的画布时，默认地，用户代理会提供一个滚动机制。
23 |
24 | ## 包含块（containing block）
25 |
26 | 在CSS2.1中，许多盒子的定位和尺寸是根据一个矩形盒子的边界来计算的，这个矩形盒子就叫做包含块（containing block）。通常，一个盒子为其子级盒子创建包含块，我们就可以说这个盒子为其后代创建一个包含块。
27 |
28 | ### 初始包含块（initial containing block）
29 |
30 | 文档根元素所在的矩形包含块就是初始包含块，对于浏览器等媒体，其尺寸等于viewport尺寸并且被固定在画布，其direction属性值和根元素一样。
31 |
32 | ### 溢出（overflow）
33 |
34 | visual formatting model相对于包含块的边界来渲染盒子，然而一个盒子并不受其包含块限制，当一个盒子的内容超出其包含块时，就是我们通常所说的溢出（overflow）。
35 |
36 |
37 |
38 | ## 盒子的生成
39 |
40 | ----
41 | CSS visual formatting model从文档元素生成盒子，生成的盒子有多种类型，其类型会影响visual formatting model的行为。生成盒子的类型取决于元素CSS属性display的值。
42 |
43 | ### 块级元素和块级盒
44 |
45 | 当元素的CSS属性display计算值是block，list-item或table的时候，这个元素就是块级元素。一个块级元素会被视觉格式化成一个块（block），按照垂直方向排列。
46 |
47 | #### 主要块级盒（principal block-level box）
48 |
49 | 每个块级盒子都参与[Block Formatting Context(块格式化上下文)](http://blog.codingplayboy.com/2016/11/05/css_formattingcontext/)。每个块级元素(block-level element)至少生成一个块级盒子，即主要块级盒，大多数元素只生成一个主要块级盒，而有一些元素，如li列表，则会生成多个盒子，包括主要块级盒及描述排版信息或项目符号的其他盒子。
50 |
51 | 主要块级盒包括包括后代元素生成的盒子及生成的内容，我们可以使用之前谈到的定位方案定位该盒子。
52 |
53 | #### 块容器盒（block container box）
54 |
55 | 块容器盒只包含其他块级盒或生成一个行内格式化上下文，即只包含行内盒。我们必须明白块级盒和块容器盒两个概念不冲突。块级盒描述盒子与它的父级和兄弟元素之间的行为，块容器盒描述它与其后代元素之间如何相互作用。块级盒也可能是一个块容器盒。一些块级盒，比如表格，不是块级容器盒；相反地，一些块级容器盒，比如非置换行内块和非置换表格单元格也不是块级盒。
56 |
57 | #### 块级盒与块盒
58 |
59 | 块级盒中也是块容器盒的盒子，是块盒（block box）。
60 |
61 | #### 匿名块盒
62 |
63 | 在某些情况下，visual formatting model 需要添加一些辅助性盒子，但是CSS选择器不能选中这些盒子，这些盒子叫做匿名盒子（anonymous box）.
64 |
65 | 不能使用CSS选择器选择匿名盒子，说明不能给他们定义样式，这意味着所有可继承属性都继承自父元素，所有不可继承属性都是其初始值。
66 |
67 | ##### 匿名块盒实例
68 |
69 | - 1.一种情况是块级盒子与行内级盒子同时存在是，在行内级元素周围会形成匿名块盒。
70 |
71 | 块容器盒只能包含块级盒或行内级盒，但是，通常在一个文档中，包含这两种类型盒子，此时，在行内级盒子前后创建匿名块盒。
72 |
73 | ```
74 |
75 | 我是第一个匿名块盒的内容
我是块级盒子的内容
我是第二个匿名块盒的内容
我是第一个匿名块盒的内容 我是块级盒子的内容我是第二个匿名块盒的内容
99 | ```
100 |
101 | 效果如下：
102 |
103 | 
104 |
105 | 这个实例会产生两个匿名块盒，一个是包裹span元素前面的行内文本，一个包裹span元素后面的文本，盒结构如下：
106 |
107 | 
108 |
109 | ### 行内级元素和行内级盒
110 |
111 | 当一个元素的CSS display属性计算值是inline或inline-block或inline-table时，这个元素就是行内级元素。行内级元素不包含块内容，它和其他行内级内容分布在一行内，直至超出换行，典型的比如段落，通常由图片，文字等行内级元素组成。
112 |
113 | 行内级元素产生行内级盒，行内级盒参与[行内格式化上下文（inline formatting context）](http://blog.codingplayboy.com/2016/11/05/css_formattingcontext/)。
114 |
115 | #### 行内级盒与行内盒
116 |
117 | 行内级盒中，有些盒子其内容参与其容器的行内格式化上下文，这些行内级盒子，就是行内盒子。
118 |
119 | **所有的display值为inline的非置换盒子都是行内盒。**
120 |
121 | ##### 原子行内级盒（atomic inline-level box）
122 |
123 | 行内级盒中，那些内容不参与形成行内格式化上下文的盒子，称为原子行内级盒子；由置换行内级元素或display计算值为inline-block或inline-table的元素产生；原子行内级盒不会被分割成多个盒子。在一行宽度足够显示其内容时，原子行内级盒内容不会被拆分成多行。
124 |
125 | 如下，span的display属性值为inline，即其默认值时，其形成的盒子不是原子行内级盒，因此会被拆分成多行：
126 |
127 | ```
128 |
129 |
130 | 对于非原子行内级盒 我的内容会被拆分成多行 因为这里的span是inline行内盒.
131 |
132 | ```
133 |
134 | 效果如图：
135 |
136 | 
137 |
138 | 而对于如下，将span元素display设置成inline-block;
139 |
140 | ```
141 |
142 | 对于原子行内级盒 我的内容不可以被拆分成多行 因为这里的span是inline-block行内级盒.
143 |
144 | ```
145 |
146 | 效果如图：
147 |
148 | 
149 |
150 | #### 匿名行内盒（anonymous inline box）
151 |
152 | 类似于上文说到的块盒，有时候CSS引擎也会自动创建行内盒,这些行内盒子不能使用CSS选择器选中，不能被命名，它们的可继承CSS属性值继承自父级元素，不可继承属性则是初始值，这就是匿名行内盒。
153 |
154 | 创建匿名行内盒，最常见的情况就是，某些文本作为一个块盒的直接子级，创建一个行内格式化上下文,这种情况下，文本就包含在匿名行内盒中。特别需要注意的是，即使是空格组成的文本也会生成匿名行内盒，除非我们使用white-space属性将空白内容清除。
155 |
156 | ### 其他类型的盒子
157 |
158 | #### 行盒
159 |
160 | 行盒是行内格式化上下文创建来表示一行文本。在一个块盒中，一个行盒从块盒的某一边框扩展到另一边框。当使用了float定位时，行盒从左浮动的最右边框扩展到右浮动的最左边框。行盒只是一种技术上的实现，通常并不需要我们进行操作。
161 |
162 | #### 插入盒（Run-in box）
163 |
164 | 插入盒，使用display:run-in;定义，可能是块盒也可能是行内盒，取决于其后续盒子的类型。最典型的应用场景是在文章的第一段中定义文章的标题。由于可操作性不足，Run-in box在CSS2.1中被移除，但也可能在后续版本重新出现，可以了解一下。
165 |
166 | ## 内容模型（content model）
167 |
168 | ---
169 |
170 | 内容模型，由元素类型及其内容布局触发，除了前文提到的行内和块级格式化上下文，CSS还定义了其他的内容模型，这些模型用来描述特定的内容布局，也可能会创建其他类型盒子：
171 |
172 | - 表格内容模型：可能创建一个表格容器盒和一个表格盒，也可能创建标题caption盒
173 | - 多列内容模型：可能在容器盒子和内容之间创建多个列盒
174 | - 实验性的grid或flex盒子内容模型，也可能创建其他类型的盒子
175 |
176 | 一旦创建了盒子，CSS引擎就会使用以下某一种算法进行布局定位：
177 |
178 | - 1.普通流定位，默认按从上到下，从左到右的顺序一个接一个的放置盒子
179 | - 2.float浮动定位，使盒子脱离普通流，将盒子放置在包含盒的两边。
180 | - 3.绝对定位，使用包含盒创建的绝对坐标系统定位盒子，绝对定位的盒子是会层叠覆盖的。
181 |
182 | [更多关于CSS定位机制，可以查看CSS之定位机制](http://blog.codingplayboy.com/2016/01/19/css_position/)
183 |
184 | ### 普通流
185 |
186 | 在普通文档流中，盒子是一个接一个排版。在块级格式化上下文中，它们按垂直方向排列，在行内格式化上下文中，按水平方向排列。当元素的position属性值是stati或relative时，触发普通流定位。
187 |
188 | ### float浮动
189 |
190 | 在float浮动定位中，浮动盒子会被放置在当前行的首尾两端。float定位会导致普通流中的内容沿着浮动盒子的边界排列，除非使用clear属性等方法清除浮动影响。
191 |
192 | ### 绝对定位
193 |
194 | 在绝对定位中，盒子完全脱离普通文档流，不再发生影响。绝对定位使用相对于其包含盒的top,bottom,lefl,right属性定位。position属性值为absolute或fixed的元素是绝对定位元素，fixed定位元素包含块是viewport，其相对于viewport视口进行定位。
195 |
196 |
197 | 关于CSS的视觉格式化模型就介绍到这，下一篇，计划总结一下CSS盒子模型相关知识，希望能給读者有所帮助。
198 |
--------------------------------------------------------------------------------
/CSS_animation.md:
--------------------------------------------------------------------------------
1 | # CSS3 animation
2 |
3 | 在之前，我们介绍过CSS3 transition过渡，其中实现了一个[小球弹动动画](http://demo.codingplayboy.com/demo/smallcase/htc/css3_transition_ball.html)，本篇继续深入介绍CSS3 animation，动画相关知识。
4 |
5 | ## 前言
6 |
7 | 相对于CSS3 transition，其主要作用于元素状态间的转换，实现的动画主要是在两个状态间的转换，只适合实现一些简单动画，而且通常需要JavaScript配合，对于复杂的动画并不适合；而CSS3 animation则更强大，它允许我们为动画定义许多关键帧，每个关键帧代表动画过程中某个状态，它可以使动画在不同状态间更平滑过渡。
8 |
9 | ## 创建关键帧（keyframe）
10 |
11 | CSS3中，使用@keyframes规则来定义动画及创建关键帧，关键帧以时间百分比排序，即在动画执行时间的百分比时间点触发该动画关键帧，至少定义0%和100%两个关键帧，动画才可用，如下：
12 |
13 | ```
14 |
15 | @keyframes bounce {
16 | 0% {
17 | top: 10px;
18 | left: 10px;
19 | }
20 | 50% {
21 | top: 50px;
22 | left: 50px;
23 | }
24 | 100% {
25 | top: 150px;
26 | left: 150px;
27 | }
28 | }
29 | ```
30 |
31 | 如上定义了一个bounce动画，在其内创建了三个关键帧，分别是0%，50%，100%三个时间点，该效果是一个元素渐隐渐现。
32 |
33 | ## 动画属性
34 |
35 | 当使用@keyframes规则定义动画关键帧时，必须把该动画绑定到某个选择器，才能有效果，如：
36 |
37 | ```
38 |
39 | .car {
40 | position: fixed;
41 | top: 10px;
42 | left: 10px;
43 | z-index: 999;
44 | width: 60px;
45 | height: 60px;
46 | background-color: red;
47 | opacity: 1;
48 | border: 1px solid #ccc;
49 | border-radius: 30px;
50 | animation: bounce 3s linear 2s infinite alternate;
51 | }
52 | ```
53 |
54 | html结构如下：
55 |
56 | ```
57 |
58 |
59 | ```
60 |
61 | 效果实例查看：[CSS3 animation动画实例](http://demo.codingplayboy.com/demo/smallcase/htc/css3_animation.html)
62 |
63 | CSS3中所有动画属性如下：
64 |
65 | 属性| 描述| 值|
66 | -----|---------|
67 | @keyframes| 规定动画，创建关键帧。| 动画名|
68 | animation| 所有动画属性的简写属性，除了 animation-play-state 属性。 |动画子属性的合并|
69 | animation-name| 规定 @keyframes 动画的名称。|@keyframes定义的动画名|
70 | animation-duration| 规定动画完成一个周期所花费的秒或毫秒。|默认值为 0。|
71 | animation-timing-function| 规定动画的速度曲线。| 默认值为 "ease"。|
72 | animation-delay| 规定动画何时开始。|默认值为 0。|
73 | animation-iteration-count| 规定动画被播放的次数。|默认值为 1。 |
74 | animation-direction| 规定动画是否在下一周期逆向地播放。|默认值为 "normal"，"alternate"表示下一周期逆向播放。|
75 | animation-play-state| 规定动画是否正在运行或暂停。|默认是 "running"。|
76 | animation-fill-mode| 规定元素在动画之后所处的状态。|“forwards”表示元素停留在动画结束的状态，“backwards”表示恢复到在动画开始的状态，默认值为“backwards”。|
77 |
78 | 如下是上面例子使用动画子属性书写：
79 |
80 | ```
81 |
82 | .car {
83 | animation-name: bounce;
84 | animation-duration: 3s;
85 | animation-timing-function: linear;
86 | animation-delay: 2s;
87 | animation-iteration-count: infinite;
88 | animation-direction: alternate;
89 | animation-play-state: running;
90 | }
91 | ```
92 |
93 | ## 兼容性
94 |
95 | Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性；Chrome 和 Safari 需要前缀 -webkit-；Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。
96 |
97 | 如：
98 |
99 | ```
100 |
101 | @-webkit-keyframes bounce {
102 | 0% {}
103 | 100%{}
104 | }
105 | @keyframes bounce {
106 | 0% {}
107 | 100%{}
108 | }
109 |
110 | .car {
111 | -webkit-animation: bounce 2s;
112 | animation: bounce 2s;
113 | }
114 | ```
115 |
116 | ## 动画事件
117 |
118 | 和CSS3 transition相似，CSS3还为更好的控制CSS3动画提供了动画事件：animationstart，animationend，animationiteration，我们可以添加事件监听器，如：
119 |
120 | ```
121 |
122 | var ball = document.querySelector('.box');
123 | //事件注册兼容
124 | window.EventHandler = function () {
125 | if (window.addEventListener) {
126 | EventHandler = function(ele, type, callback, bubble) {
127 | return ele.addEventListener(type, callback, bubble);
128 | }
129 | } else if (window.attachEvent) {
130 | EventHandler = function(ele, type, callback, bubble) {
131 | return ele.attachEvent('on' + type, callback);
132 | }
133 | }else {
134 | EventHandler = function(ele, type, callback, bubble) {
135 | ele['on' + type] = errorReport;
136 | }
137 | }
138 | };
139 |
140 | function myStartFunction() {
141 | ball.innerHTML = "start";
142 | ball.style.backgroundColor = "yellow";
143 | }
144 |
145 | function myIterationFunction() {
146 | ball.innerHTML = "iteration";
147 | ball.style.backgroundColor = "lightblue";
148 | }
149 |
150 | function myEndFunction() {
151 | ball.innerHTML = "end";
152 | ball.style.backgroundColor = "lightgray";
153 | }
154 |
155 | EventHandler(ball, "webkitAnimationStart", myStartFunction);
156 | EventHandler(ball, "webkitAnimationIteration", myIterationFunction);
157 | EventHandler(ball, "webkitAnimationEnd", myEndFunction);
158 | EventHandler(ball, "animationstart", myStartFunction);
159 | EventHandler(ball, "animationiteration", myIterationFunction);
160 | EventHandler(ball, "animationend", myEndFunction);
161 | ```
162 |
163 | 实例查看[CSS3 animation事件](http://demo.codingplayboy.com/demo/smallcase/htc/css3_animation_event.html)
164 |
165 | ## 小球弹动实例
166 |
167 | 先看看CSS3 transition过渡实现的小球弹动效果[小球弹动动画](http://demo.codingplayboy.com/demo/smallcase/htc/css3_transition_ball.html)，接下来使用CSS3 animation实现。
168 |
169 | html结构如下：
170 |
171 | ```
172 |
173 |
174 | ```
175 |
176 | ### 创建关键帧
177 |
178 | 首先创建动画及动画关键帧：
179 |
180 | ```
181 |
182 | @keyframes bounce {
183 | 0% {
184 | top: 30px;
185 | }
186 | 50% {
187 | top: 300px;
188 | }
189 | 100% {
190 | top: 30px;
191 | }
192 | }
193 | ```
194 |
195 | ### 动画属性
196 |
197 | 创建动画后必须绑定到特定选择器，动画才有效果：
198 |
199 | ```
200 |
201 | .box {
202 | position: fixed;
203 | top: 30px;
204 | left: 30px;
205 | z-index: 999;
206 | width: 40px;
207 | height: 40px;
208 | background-color: red;
209 | border: 1px solid #ccc;
210 | border-radius: 20px;
211 | -webkit-animation: bounce 2s linear infinite 1s alternate;
212 | animation: bounce 2s linear infinite 1s alternate;
213 | }
214 | ```
215 |
216 | 效果可以实现小球弹动，但是缺少弹跳效果，因为动画时间没有为linear，即线性小球下降时没有超重的表现，落地后反弹也没有失重的效果，我们需要为下降和反弹设置不同的动画时间函数，但是在animation属性中只能定义一个动画函数，我们可以在动画关键帧中为每个关键帧定义不同动画时间函数：
217 |
218 | ```
219 |
220 | @-webkit-keyframes bounce {
221 | 0% {
222 | top: 30px;
223 | -webkit-animation-timing-function: cubic-bezier(1, 0, 0.96, 0.91);
224 | }
225 | 50% {
226 | top: 300px;
227 | -webkit-animation-timing-function: cubic-bezier(0, 0.27, 0.32, 1);
228 | }
229 | 100% {
230 | top: 30px;
231 | -webkit-animation-timing-function: cubic-bezier(0, 0.27, 0.32, 1);
232 | }
233 | }
234 | @keyframes bounce {
235 | 0% {
236 | top: 30px;
237 | animation-timing-function: cubic-bezier(1, 0, 0.96, 0.91);
238 | }
239 | 50% {
240 | top: 300px;
241 | animation-timing-function: cubic-bezier(0, 0.27, 0.32, 1);
242 | }
243 | 100% {
244 | top: 30px;
245 | animation-timing-function: cubic-bezier(0, 0.27, 0.32, 1);
246 | }
247 | }
248 | ```
249 |
250 | 效果如下：[CSS3 animation小球无限弹动](http://demo.codingplayboy.com/demo/smallcase/htc/css3_animation_ball.html)，与之前实例完全相似，而且只通过CSS实现，并没有使用JavaScript。
251 |
252 |
--------------------------------------------------------------------------------
/css_transform.md:
--------------------------------------------------------------------------------
1 | # CSS3 transform
2 |
3 | 之前，我们介绍过[CSS3的transition过渡效果](http://blog.codingplayboy.com/2016/07/03/css3%E4%B9%8Btransition/)和[CSS3的animation动画](http://blog.codingplayboy.com/2016/11/27/css3_animation/)，本篇深入介绍CSS3 transform，即变换。
4 |
5 | ## 定义和用法
6 |
7 | CSS transform属性向元素应用 2D 或 3D 转换，其后紧跟一个变换函数支持我们修改CSS视觉格式化模型中的元素坐标，通过声明变换函数，允许移动（转换），旋转，缩放，倾斜元素。
8 |
9 | ### 语法
10 |
11 | transform属性CSS语法如下：
12 |
13 | ```
14 |
15 | transform: none | transform-functions;
16 | ```
17 |
18 | 其JavaScript语法如下：
19 |
20 | ```
21 |
22 | object.style.transform="rotate(17deg)";
23 | object.style.webkitTransform = “rotate(17deg)”；
24 | ```
25 |
26 | ## 变换函数（ transform function）
27 |
28 | 在DOM计算完后，可以使用transform属性操作DOM的渲染方式，其后紧跟一个变换函数，指明DOM的变换方式。主要的变换函数如下：
29 |
30 | 值| 描述|
31 | ------|-----|
32 | none| 定义不进行转换。|
33 | matrix(n,n,n,n,n,n)| 定义 2D 转换，使用六个值的矩阵。|
34 | matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)| 定义 3D 转换，使用 16 个值的 4x4 矩阵。|
35 | translate(x,y) |定义 2D 移动转换。|
36 | translate3d(x,y,z)| 定义 3D 移动转换。|
37 | translateX(x)| 定义X轴转换。 |
38 | translateY(y)| 定义Y 轴转换。 |
39 | translateZ(z)| 定义Z 轴 3D 转换。 |
40 | scale(x,y)| 定义 2D 缩放转换。|
41 | scale3d(x,y,z)| 定义 3D 缩放转换。|
42 | scaleX(x)| 通过设置 X 轴的值来定义缩放转换。|
43 | scaleY(y)| 通过设置 Y 轴的值来定义缩放转换。|
44 | scaleZ(z)| 通过设置 Z 轴的值来定义 3D 缩放转换。|
45 | rotate(angle)| 定义 2D 旋转，在参数中规定角度。|
46 | rotate3d(x,y,z,angle)| 定义 3D 旋转。|
47 | rotateX(angle)| 定义沿着 X 轴的 3D 旋转。|
48 | rotateY(angle)| 定义沿着 Y 轴的 3D 旋转。|
49 | rotateZ(angle)| 定义沿着 Z 轴的 3D 旋转。|
50 | skew(x-angle,y-angle)| 定义沿着 X 和 Y 轴的 2D 倾斜转换。|
51 | skewX(angle)| 定义沿着 X 轴的 2D 倾斜变换。|
52 | skewY(angle)| 定义沿着 Y 轴的 2D 倾斜变换。|
53 | perspective(n)| 为 3D 转换元素定义透视视图。|
54 |
55 | ## 实例
56 |
57 | 如下html结构：
58 |
59 | ```
60 |
61 |
62 | ```
63 |
64 | 样式如下：
65 |
66 | ```
67 |
68 | .car {
69 | position: fixed;
70 | top: 10px;
71 | left: 10px;
72 | z-index: 999;
73 | width: 60px;
74 | height: 60px;
75 | background-color: red;
76 | border: 1px solid #ccc;
77 | border-radius: 30px;
78 | -webkit-transform: translate(100px, 100px);
79 | transform: translate(100px, 100px);
80 | }
81 | ```
82 |
83 | ## 硬件加速
84 |
85 | 当同时使用渐变，变换等多种图形效果时，我们会发现同一个动画在IOS和安卓上效果流畅度差别很大，这是因为IOS设备都内置了图形加速硬件。GPU，Graphics Processing Unit图形处理器，其作用主要就是优化动画及合成，开启GPU加速，可以使得动画更加流畅，在安卓上，2D变换不会开启GPU加速，其动画不在GPU上渲染，而3D变换则会开启GPU加速，使用GPU渲染图形和动画，比如使用translate3d()，而不是translate()变换函数就可以开启GPU加速，使得动画更流畅，如：
86 |
87 | ```
88 |
89 | transform: translate3d(100px, 100px, 0);
90 | ```
91 |
92 | ### 硬件加速限制
93 |
94 | 当使用GPU加速动画时，并不是把原生DOM传递给GPU，它生成一个元素图像，把该图像发送到GPU，GPU将图像应用为多边形纹理贴图代表元素，GPU可以流畅快速的对这些多边形进行旋转，缩放，转换，倾斜等变换，但是需要明白，由于只是传递元素图像到GPU进行处理，所以它并不能重新渲染内容。
95 |
96 | ### 2D变换与3D变换
97 |
98 | 我们知道，3D变换是会开启GPU加速，3D变换动画会更流畅，但是2D变换与3D变换还有其他差别，先看一个实例-[CSS3 2D变换与3D变换](http://demo.codingplayboy.com/demo/smallcase/htc/css3_transform_blur.html)，效果如图：
99 |
100 | 
101 |
102 | 如上图可见，第一个div内背景图比第二个背景图更清楚，因为第一个背景图div是使用了2D变换放大了3倍：```scale(3, 3)```,2D变换不是处理元素图像，可以比较好的还原元素质量，而第二个背景图div使用了3D变换放大了3倍：```scale3d(3, 3, 1)```，3D变换交给GPU，处理了元素图像，它只能放大该图像，元素清晰度自然就下降了。既然知道了问题何在，自然就可以对症下药：我们可以在动画或变换结束时，将元素3D变换转换成2D变换。
103 |
104 | ### 3D变换模糊状态净化
105 |
106 | 如上3D变换会导致元素变模糊，前面已经深入探讨了原因，解决办法就是在动画或变换结束时，将元素3D变换转换成2D变换，如下主要代码：
107 |
108 | ```
109 |
110 | ;(function() {
111 | var TRANSFORM = 'transform';
112 | var TRANSITION = 'transition';
113 | var TRANSITIONEND = 'transitionend';
114 | var transform_pro = 'transform';
115 | var after = document.querySelector('.after');
116 |
117 | //事件注册兼容
118 | window.EventHandler = function () {
119 | if (window.addEventListener) {
120 | EventHandler = function(ele, type, callback, bubble) {
121 | return ele.addEventListener(type, callback, bubble);
122 | }
123 | } else if (window.attachEvent) {
124 | EventHandler = function(ele, type, callback, bubble) {
125 | return ele.attachEvent('on' + type, callback);
126 | }
127 | }else {
128 | EventHandler = function(ele, type, callback, bubble) {
129 | ele['on' + type] = errorReport;
130 | }
131 | }
132 | };
133 |
134 | if (typeof document.body.style.webkitTransform === 'string') {
135 | TRANSFORM = 'webkitTransform';
136 | transform_pro = '-webkit-transform';
137 | }
138 | if (typeof document.body.style.webkitTransition === 'string') {
139 | TRANSITION = 'webkitTransition';
140 | }
141 |
142 | EventHandler(after, 'webkitTransitionEnd', function() {
143 | after.style[TRANSFORM] = 'scale(3, 3)';
144 | });
145 | EventHandler(after, 'transitionend', function() {
146 | after.style[TRANSFORM] = 'scale(3, 3)';
147 | });
148 | setTimeout(function() {
149 | after.style[TRANSITION] = transform_pro + ' 1s ease-in';
150 | after.style[TRANSFORM] = 'scale3d(3, 3, 1)';
151 | }, 1000);
152 | })();
153 | ```
154 |
155 | 查看实例-[CSS3 3D变换模糊状态净化](http://demo.codingplayboy.com/demo/smallcase/htc/css3_transform_blur_repair.html)
156 |
157 | 上面实例中，第二个div元素逐渐放大然后变得清晰；我们为第二个div元素绑定transition过渡效果，实现3D变换，然后在transitionend事件回调中将3d变换转成2D变换，元素清晰度得到净化，变得清晰。
158 |
159 | ## 小球弹动
160 |
161 | 还记得之前使用CSS3 transition-[transition实例](http://demo.codingplayboy.com/demo/smallcase/htc/css3_transition_ball.html)和animation-[animation实例](http://demo.codingplayboy.com/demo/smallcase/htc/css3_animation_ball.html)实现过小球弹动动画，之前都是使用的position定位实现的弹动动画，现在我们还可以使用transform方式实现。
162 |
163 | html结构如下：
164 |
165 | ```
166 |
167 |
168 | ```
169 |
170 | ### 创建动画和变换
171 |
172 | 使用@keyframes规则创建动画和关键帧，并在关键帧内使用transform变换实现小球移动状态：
173 |
174 | ```
175 |
176 | @-webkit-keyframes bounce {
177 | 0% {
178 | -webkit-transform: translate(0, 30px);
179 | -webkit-animation-timing-function: cubic-bezier(1, 0, 0.96, 0.91);
180 | }
181 | 50% {
182 | -webkit-transform: translate(0, 300px);
183 | -webkit-animation-timing-function: cubic-bezier(0, 0.27, 0.32, 1);
184 | }
185 | 100% {
186 | -webkit-transform: translate(0, 30px);
187 | -webkit-animation-timing-function: cubic-bezier(0, 0.27, 0.32, 1);
188 | }
189 | }
190 | @keyframes bounce {
191 | 0% {
192 | transform: translate(0, 30px);
193 | animation-timing-function: cubic-bezier(1, 0, 0.96, 0.91);
194 | }
195 | 50% {
196 | transform: translate(0, 300px);
197 | animation-timing-function: cubic-bezier(0, 0.27, 0.32, 1);
198 | }
199 | 100% {
200 | transform: translate(0, 30px);
201 | animation-timing-function: cubic-bezier(0, 0.27, 0.32, 1);
202 | }
203 | }
204 | ```
205 |
206 | ### 绑定动画
207 |
208 | 将上面定义的动画绑定到特定选择器：
209 |
210 | ```
211 |
212 | .ball {
213 | position: fixed;
214 | top: 10px;
215 | left: 10px;
216 | z-index: 999;
217 | width: 60px;
218 | height: 60px;
219 | background-color: red;
220 | border: 1px solid #ccc;
221 | border-radius: 30px;
222 | -webkit-animation: bounce 3s infinite;
223 | animation: bounce 3s infinite;
224 | }
225 | ```
226 |
227 | 效果查看实例-[CSS3 transform弹动小球](http://demo.codingplayboy.com/demo/smallcase/htc/css3_transform_bounce.html)
228 |
229 | ##
--------------------------------------------------------------------------------
/html_dom_2.md:
--------------------------------------------------------------------------------
1 | # HTML DOM(二)
2 | 上篇介绍了HTML DOM、节点树、文档中所有类型节点的基类型Node类型及Node节点操作、本篇介绍DOM中更多具体的节点类型及其相关操作。
3 |
4 | ## Document类型--文档节点
5 | 每个载入浏览器的 HTML 文档都会成为 Document 对象。在浏览器中document对象是HTMLDocument的一个实例，表示整个HTML文档，而HTMLDocument又继承自Document类型。因此我们可以通过document对象来访问HTML文档中所有元素。
6 |
7 | *注：document是window对象的一个属性，因此其是全局对象。*
8 |
9 | 在HTML DOM中,Document有以下特性：
10 |
11 | 属性 |值
12 | --------------|---------
13 | nodeType |9
14 | nodeName |#document
15 | nodeValue |null
16 | parentNode |null
17 | childNodes |0或1个DocumentType，0或1个Element，0或若干个Comment节点
18 | ownerDocument |null
19 |
20 | ### 文档节点的子节点
21 | 通过之前的学习，我们知道文档节点的唯一元素子节点（Element类型）是文档元素，即html元素，访问方式有两种：
22 |
23 | - document.childNodes加对应索引访问
24 | - documentElement属性始终指向HTML页面的html元素，[更多详情可参见文章漫谈document.documentElement与document.body](http://blog.codingplayboy.com/index.php/2016/01/26/html_docbody/)。
25 |
26 | ### Document对象属性
27 | 属性 |描述
28 | ----------------|---------------
29 | body |指向body元素，对于定义了框架集的文档，该属性引用最外层的