12 |
13 | ```
14 | 等元素，其显示为block样式，会将一行中其可用的空间给跨越占据，容不下另一个元素与其同行。
15 |
16 | 2. 默认display:inline属性（行内元素）
17 |
18 | ```
19 |
20 |
21 |
22 |
23 | ![]()
24 |
25 | ```
26 |
27 | 等元素，其不会打断文档排布流，会在一行中一个挨一个地排列。
28 |
29 | #### 用float方式会带来的麻烦：
30 |
31 | 使用float方式需要注意的是，要有一个元素来包裹float元素，同时避免接下来的元素紧紧地靠近它。
32 |
33 | 另外一个麻烦是，当有一个多行水平列表，但是列表里的内容有不同的高度时，就会排的非常痛苦。
34 |
35 | #### 用display:inline-block;方式：
36 |
37 | display:inline-block;方式样式化列表时，既可使得列表元素能按行挨个排列，
38 |
39 | 同时元素还能保持其块属性，比如高和宽、上下边距等。
40 |
41 | 但是对有不同高度内容的元素时，通常要设置对齐方式如vertical-align: top;来使元素顶部对齐。
42 |
43 | #### 用display:inline-block;的浏览器兼容：
44 |
45 | CSS中使用`display:inline-block`;来样式化，在Firefox, Safari, Google Chrome 和 IE 8及以上是有效的。
46 |
47 | 但是在早期的IE，比如IE 7，就要做一些改变才能适应。
48 |
49 | ```
50 | /* For IE 7 */
51 | zoom: 1;
52 | *display: inline;
53 | ```
54 |
55 | 通常，做浏览器兼容适应的CSS样式化，最好是分开独立的样式文件，然后通过条件注释将其引入。
56 |
57 | #### 用display:inline-block;的空白符引起的问题：
58 |
59 | 因为元素之间是行内inline修饰排列的，因此HTML中的空格符也会影响到这个修饰。也就是说，
60 |
61 | 当我们把元素的大小和顺序排列好后，如果在``元素之间有空格符，
62 |
63 | 这个空格符将会产生4px的边距。
64 |
65 | ### 综述
66 |
67 | 1. 用`display:inline-block`;来实现水平列表比用float方式更容易控制，需要注意的是前者会由空格符带来边距影响。
68 |
69 | 2. `inline-block`默认是底部对齐的，要让两个元素顶部对齐，需要加上一句：`veritcal-align:top`;
70 |
71 | 3. `inline-block` 的宽度可以自行设置的，而inline的自行设置宽度是无效的。
72 |
73 | 参考资料:
74 |
75 | 1. [css之display:inline-block与float区别](https://www.cnblogs.com/zyh-club/p/4702994.html)
76 |
--------------------------------------------------------------------------------
/docs/杂记-24.前端跨域解决.md:
--------------------------------------------------------------------------------
1 | ### 什么是跨域？
2 |
3 | 跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。
4 |
5 | 所谓同源是指，域名，协议，端口均相同，不明白没关系，举个栗子：
6 |
7 | `http://www.123.com/index.html` 调用 `http://www.123.com/server.php` （非跨域）
8 |
9 | `http://www.123.com/index.html` 调用 `http://www.456.com/server.php` （主域名不同:123/456，跨域）
10 |
11 | `http://abc.123.com/index.html` 调用 `http://def.123.com/server.php` （子域名不同:abc/def，跨域）
12 |
13 | `http://www.123.com:8080/index.html` 调用 `http://www.123.com:8081/server.php` （端口不同:8080/8081，跨域）
14 |
15 | `http://www.123.com/index.html` 调用 `https://www.123.com/server.php` （协议不同:http/https，跨域）
16 |
17 | 请注意：localhost和127.0.0.1虽然都指向本机，但也属于跨域。
18 |
19 | 浏览器执行javascript脚本时，会检查这个脚本属于哪个页面，如果不是同源页面，就不会被执行。
20 |
21 | #### 特别注意两点：
22 |
23 | 第一，如果是协议和端口造成的跨域问题“前台”是无能为力的。
24 |
25 | 第二：在跨域问题上，域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。
26 |
27 | “URL的首部”指`window.location.protocol +window.location.host`，也可以理解为“`Domains, protocols and ports must match`”。
28 |
29 | ### 前端解决跨域问题
30 |
31 | #### 1. document.domain + iframe (只有在主域相同的时候才能使用该方法)
32 |
33 | ##### 在`www.a.com/a.html`中：
34 |
35 | ```javascript
36 | document.domain = 'a.com';
37 | var ifr = document.createElement('iframe');
38 | ifr.src = 'http://www.script.a.com/b.html';
39 | ifr.display = none;
40 | document.body.appendChild(ifr);
41 | ifr.onload = function(){
42 | var doc = ifr.contentDocument || ifr.contentWindow.document;
43 | //在这里操作doc，也就是b.html
44 | ifr.onload = null;
45 | };
46 | ```
47 |
48 | ##### 在`www.script.a.com/b.html`中：
49 |
50 | `document.domain = 'a.com';`
51 |
52 | #### 2. location.hash + iframe
53 |
54 | 原理是利用location.hash来进行传值。
55 |
56 | 假设域名a.com下的文件cs1.html要和cnblogs.com域名下的cs2.html传递信息。
57 |
58 | 1) cs1.html首先创建自动创建一个隐藏的iframe，iframe的src指向cnblogs.com域名下的cs2.html页面
59 |
60 | 2) cs2.html响应请求后再将通过修改cs1.html的hash值来传递数据
61 |
62 | 3) 同时在cs1.html上加一个定时器，隔一段时间来判断location.hash的值有没有变化，一旦有变化则获取获取hash值
63 |
64 | 注：由于两个页面不在同一个域下IE、Chrome不允许修改parent.location.hash的值，所以要借助于a.com域名下的一个代理iframe
65 |
66 | ##### 先是a.com下的文件cs1.html文件：
67 |
68 | ```
69 | function startRequest(){
70 | var ifr = document.createElement('iframe');
71 | ifr.style.display = 'none';
72 | ifr.src = 'http://www.cnblogs.com/lab/cscript/cs2.html#paramdo';
73 | document.body.appendChild(ifr);
74 | }
75 |
76 | function checkHash() {
77 | try {
78 | var data = location.hash ? location.hash.substring(1) : '';
79 | if (console.log) {
80 | console.log('Now the data is '+data);
81 | }
82 | } catch(e) {};
83 | }
84 |
85 | setInterval(checkHash, 2000);
86 | ```
87 | ##### cnblogs.com域名下的cs2.html:
88 |
89 | ```
90 | //模拟一个简单的参数处理操作
91 | switch(location.hash){
92 | case '#paramdo':
93 | callBack();
94 | break;
95 | case '#paramset':
96 | //do something……
97 | break;
98 | }
99 |
100 | function callBack(){
101 | try {
102 | parent.location.hash = 'somedata';
103 | } catch (e) {
104 | // ie、chrome的安全机制无法修改parent.location.hash，
105 | // 所以要利用一个中间的cnblogs域下的代理iframe
106 | var ifrproxy = document.createElement('iframe');
107 | ifrproxy.style.display = 'none';
108 | // 注意该文件在"a.com"域下
109 | ifrproxy.src = 'http://a.com/test/cscript/cs3.html#somedata';
110 | document.body.appendChild(ifrproxy);
111 | }
112 | }
113 | ```
114 |
115 | ##### a.com下的域名cs3.html
116 |
117 | ```
118 | //因为parent.parent和自身属于同一个域，所以可以改变其location.hash的值
119 | parent.parent.location.hash = self.location.hash.substring(1);
120 | ```
121 |
122 | #### 3. window.name + iframe
123 |
124 | window.name 的美妙之处：name 值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的 name 值（2MB）。
125 |
126 | 1) 创建a.com/cs1.html
127 |
128 | 2) 创建a.com/proxy.html，并加入如下代码
129 |
130 | ```
131 |
132 |
155 |
156 |
157 |
162 |
163 | ```
164 |
165 | 3 在b.com/cs1.html中包含：
166 |
167 | ```
168 |
171 | ```
172 |
173 | ### 4. postMessage（HTML5中的XMLHttpRequest Level 2中的API）
174 |
175 | a.com/index.html中的代码：
176 |
177 | ```
178 |
179 |
188 | ```
189 |
190 | b.com/index.html中的代码：
191 |
192 | ```
193 |
205 | ```
206 |
207 | ### 5. JSONP
208 |
209 | JSONP包含两部分：回调函数和数据。
210 |
211 | 回调函数是当响应到来时要放在当前页面被调用的函数。
212 |
213 | 数据就是传入回调函数中的json数据，也就是回调函数的参数了。
214 |
215 | ```
216 | function handleResponse(response){
217 | console.log('The responsed data is: '+response.data);
218 | }
219 |
220 | var script = document.createElement('script');
221 | script.src = 'http://www.baidu.com/json/?callback=handleResponse';
222 | document.body.insertBefore(script, document.body.firstChild);
223 |
224 | /*handleResonse({"data": "zhe"})*/
225 | //原理如下：
226 | //当我们通过script标签请求时
227 | //后台就会根据相应的参数(json,handleResponse)
228 | //来生成相应的json数据(handleResponse({"data": "zhe"}))
229 | //最后这个返回的json数据(代码)就会被放在当前js文件中被执行
230 | //至此跨域通信完成
231 | ```
232 | jsonp虽然很简单，但是有如下缺点：
233 |
234 | 1）安全问题(请求代码中可能存在安全隐患)
235 |
236 | 2）要确定jsonp请求是否失败并不容易
237 |
238 | 3) jsonp 只是get请求
239 |
240 | ### 6. web sockets
241 | web sockets是一种浏览器的API，它的目标是在一个单独的持久连接上提供全双工、双向通信。(同源策略对web sockets不适用)
242 |
243 | web sockets原理：在JS创建了web socket之后，会有一个HTTP请求发送到浏览器以发起连接。取得服务器响应后，建立的连接会使用HTTP升级从HTTP协议交换为web sockt协议。
244 |
245 | 只有在支持web socket协议的服务器上才能正常工作。
246 |
247 | ```
248 | //http->ws; https->wss
249 | var socket = new WebSockt('ws://www.baidu.com');
250 | socket.send('hello WebSockt');
251 | socket.onmessage = function(event){
252 | var data = event.data;
253 | }
254 | ```
255 |
256 | ### 7. CORS
257 |
258 | CORS背后的思想，就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败。
259 |
260 | IE中对CORS的实现是xdr
261 |
262 | ```
263 | var xdr = new XDomainRequest();
264 | xdr.onload = function(){
265 | console.log(xdr.responseText);
266 | }
267 | xdr.open('get', 'http://www.baidu.com');
268 | ......
269 | xdr.send(null);
270 | ```
271 |
272 | 其它浏览器中的实现就在xhr中
273 |
274 | ```
275 | var xhr = new XMLHttpRequest();
276 | xhr.onreadystatechange = function () {
277 | if(xhr.readyState == 4){
278 | if(xhr.status >= 200 && xhr.status < 304 || xhr.status == 304){
279 | console.log(xhr.responseText);
280 | }
281 | }
282 | }
283 | xhr.open('get', 'http://www.baidu.com');
284 | ......
285 | xhr.send(null);
286 | ```
287 |
288 | 实现跨浏览器的CORS
289 |
290 | ```
291 | function createCORS(method, url){
292 | var xhr = new XMLHttpRequest();
293 | if('withCredentials' in xhr){
294 | xhr.open(method, url, true);
295 | }else if(typeof XDomainRequest != 'undefined'){
296 | var xhr = new XDomainRequest();
297 | xhr.open(method, url);
298 | }else{
299 | xhr = null;
300 | }
301 | return xhr;
302 | }
303 | var request = createCORS('get', 'http://www.baidu.com');
304 | if(request){
305 | request.onload = function(){
306 | ......
307 | };
308 | request.send();
309 | }
310 | ```
311 |
312 | 资料来源：
313 |
314 | 1. [ 前端解决跨域问题的8种方案（最新最全）](http://blog.csdn.net/joyhen/article/details/21631833)
315 |
316 | 2. [什么是跨域？怎么解决跨域问题？](http://blog.csdn.net/lambert310/article/details/51683775)
317 |
--------------------------------------------------------------------------------
/docs/杂记-25.web缓存.md:
--------------------------------------------------------------------------------
1 | ### 为什么要用缓存
2 | 一般针对静态资源如CSS,JS,图片等使用缓存，原因如下：
3 |
4 | - **请求更快**：通过将内容缓存在本地浏览器或距离最近的缓存服务器（如CDN），在不影响网站交互的前提下可以大大加快网站加载速度。
5 |
6 | - **节省带宽**：对于已缓存的文件，可以减少请求带宽甚至无需请求网络。
7 |
8 | - **降低服务器压力**：在大量用户并发请求的情况下，服务器的性能受到限制，此时将一些静态资源放置在网络的多个节点，可以起到均衡负载的作用，降低服务器的压力。
9 |
10 | ### 缓存分类
11 |
12 | 缓存分为**服务端侧**（server side，比如 Nginx、Apache）和**客户端侧**（client side，比如 web browser）。
13 |
14 | **常用的服务端缓存有CDN缓存，客户端缓存就是指浏览器缓存。**
15 |
16 | #### 缓存类型
17 |
18 | 浏览器缓存分为强缓存和协商缓存：
19 |
20 | 1. **强缓存**：浏览器在加载资源时，先根据这个资源的一些http header判断它是否命中强缓存，强缓存如果命中，浏览器直接从自己的缓存中读取资源，不会发请求到服务器。比如某个css文件，如果浏览器在加载它所在的网页时，这个css文件的缓存配置命中了强缓存，浏览器就直接从缓存中加载这个css，连请求都不会发送到网页所在服务器；
21 |
22 | 2. **协商缓存**：当强缓存没有命中的时候，浏览器一定会发送一个请求到服务器，通过服务器端依据资源的另外一些http header验证这个资源是否命中协商缓存，如果协商缓存命中，服务器会将这个请求返回（304），但是不会返回这个资源的数据，而是告诉客户端可以直接从缓存中加载这个资源，于是浏览器就又会从自己的缓存中去加载这个资源；若未命中请求，则将资源返回客户端，并更新本地缓存数据（200）。
23 |
24 | 强缓存与协商缓存区别：**强缓存不发请求到服务器，协商缓存会发请求到服务器**。
25 |
26 | #### 如何设置缓存
27 |
28 | 1. HTML Meta标签控制缓存（非HTTP协议定义）
29 |
30 |
31 |
32 | 上述代码的作用是告诉浏览器当前页面不被缓存，每次访问都需要去服务器拉取。这种方法使用上很简单，但只有部分浏览器可以支持，而且所有缓存代理服务器都不支持，因为代理不解析HTML内容本身。
33 |
34 | 2. HTTP头信息控制缓存
35 |
36 | HTTP头信息控制缓存是通过Expires（强缓存）、Cache-control（强缓存）、Last-Modified/If-Modified-Since（协商缓存）、Etag/If-None-Match（协商缓存）实现，下面详细介绍。
37 |
38 | 1）**Expires**
39 |
40 | Expires是http1.0提出的一个表示资源过期时间的header，它描述的是一个绝对时间，由服务器返回，用GMT格式的字符串表示，如：Expires:Thu, 31 Dec 2016 23:55:55 GMT，
41 |
42 | `读取缓存数据条件：缓存过期时间（服务器的）< 当前时间（客户端的`
43 |
44 | 缺点：Expires是较老的强缓存管理header，由于它是服务器返回的一个绝对时间，这样存在一个问题，如果客户端的时间与服务器的时间相差很大（比如时钟不同步，或者跨时区），那么误差就很大，所以在HTTP 1.1版开始，使用Cache-Control: max-age=秒替代。
45 |
46 | 2）**Cache-Control**
47 |
48 | Cache-Control描述的是一个相对时间，在进行缓存命中的时候，都是利用客户端时间进行判断，所以相比较Expires，Cache-Control的缓存管理更有效，安全一些。
49 |
50 | `读取缓存数据条件：上次缓存时间（客户端的）+max-age < 当前时间（客户端的）`
51 |
52 | **Cache-Control**值可以是p`ublic、private、no-cache、no- store、no-transform、must-revalidate、proxy-revalidate、max-age`
53 |
54 | 各个消息中的指令含义如下：
55 |
56 | **Public** 指示响应可被任何缓存区缓存。
57 |
58 | **Private** 指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当前用户的部分响应消息，此响应消息对于其他用户的请求无效。
59 |
60 | **no-cache** 指示请求或响应消息不能缓存，该选项并不是说可以设置”不缓存“，而是需要和服务器确认
61 |
62 | **no-store** 在请求消息中发送将使得请求和响应消息都不使用缓存，完全不存下來。
63 |
64 | **max-age** 指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应。上次缓存时间（客户端的）+max-age（64200s）<客户端当前时间
65 |
66 | **min-fresh** 指示客户机可以接收响应时间小于当前时间加上指定时间的响应。
67 |
68 | **max-stale** 指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。
69 |
70 | **注意**：这两个header可以只启用一个，也可以同时启用，当response header中，**Expires和Cache-Control同时存在时，Cache-Control优先级高于Expires：**
71 |
72 | 3）**Last-Modified/If-Modified-Since：Last-Modified/If-Modified-Since要配合Cache-Control使用。**
73 |
74 | **Last-Modified**：标示这个响应资源的最后修改时间。web服务器在响应请求时，告诉浏览器资源的最后修改时间。
75 |
76 | **If-Modified-Since**：当资源过期时（强缓存失效），发现资源具有Last-Modified声明，则再次向web服务器请求时带上头 If-Modified-Since，表示请求时间。web服务器收到请求后发现有头If-Modified-Since 则与被请求资源的最后修改时间进行比对。若最后修改时间较新，说明资源又被改动过，则响应整片资源内容（写在响应消息包体内），HTTP 200；若最后修改时间较旧，说明资源无新修改，则响应HTTP 304 (无需包体，节省浏览)，告知浏览器继续使用所保存的cache。
77 | 缺点：
78 |
79 | **Last-Modified** **标注的最后修改只能精确到秒级，如果某些文件在1秒钟以内，被修改多次的话，它将不能准确标注文件的修改时间（无法及时更新文件）**
80 |
81 | **如果某些文件会被定期生成，当有时内容并没有任何变化，但Last-Modified却改变了，导致文件没法使用缓存，有可能存在服务器没有准确获取文件修改时间，或者与代理服务器时间不一致等情形（无法使用缓存）**。
82 |
83 | HTTP1.1中Etag解决了上述问题。
84 |
85 | 4）**Etag/If-None-Match：Etag/If-None-Match也要配合Cache-Control使用。**
86 |
87 | **Etag**：web服务器响应请求时，告诉浏览器当前资源在服务器的唯一标识（生成规则由服务器决定）。Apache中，ETag的值，默认是对文件的索引节（INode），大小（Size）和最后修改时间（MTime）进行Hash后得到的。
88 |
89 | **If-None-Match**：当资源过期时（使用Cache-Control标识的max-age），发现资源具有Etage声明，则再次向web服务器请求时带上头If-None-Match （Etag的值）。web服务器收到请求后发现有头If-None-Match 则与被请求资源的相应校验串进行比对，决定返回200或304。
90 |
91 | Etag是服务器自动生成或者由开发者生成的对应资源在服务器端的唯一标识符，能够更加准确的控制缓存。**Last-Modified与ETag一起使用时，服务器会优先验证ETag。**
92 |
93 | #### 2. 浏览器请求流程图
94 |
95 | 浏览器第一次请求流程图
96 |
97 | 
98 |
99 | 浏览器再次请求时
100 |
101 | 
102 |
103 | #### 3. 用户行为与缓存
104 |
105 | 浏览器缓存行为还有用户的行为有关，引用文章<<浏览器 HTTP 协议缓存机制详解>>的结论
106 | 
107 |
108 | ### CDN缓存
109 |
110 | CDN缓存属于Cache服务器的一种。
111 |
112 | CDN的全称是Content Delivery Network，即内容分发网络。其目的是通过在现有的Internet中增加一层新的网络架构，将网站的内容发布到最接近用户的网络"边缘"，使用户可 以就近取得所需的内容，解决Internet网络拥塞状况，提高用户访问网站的响应速度。从技术上全面解决由于网络带宽小、用户访问量大、网点分布不均等 原因，解决用户访问网站的响应速度慢的根本原因。
113 | 
114 |
115 | 通过上图，我们可以了解到，使用了CDN缓存后的网站的访问过程为：
116 |
117 | 1)、用户向浏览器提供要访问的域名；
118 |
119 | 2)、浏览器调用域名解析库对域名进行解析，由于CDN对域名解析过程进行了调整，所以解析函数库一般得到的是该域名对应的CNAME记录，为了得到实际IP地址，浏览器需要再次对获得的CNAME域名进行解析以得到实际的IP地址；在此过程中，使用的全局负载均衡DNS解析，如根据地理位置信 息解析对应的IP地址，使得用户能就近访问。
120 |
121 | 3)、此次解析得到CDN缓存服务器的IP地址，浏览器在得到实际的IP地址以后，向缓存服务器发出访问请求；
122 |
123 | 4)、若请求文件并未修改，返回304（充当服务器的角色）。若当前文件已过期，则缓存服务器根据浏览器提供的要访问的域名，通过Cache内部专用DNS解析得到此域名的实际IP地址，再由缓存服务器向此实际IP地址提交访问请求；
124 |
125 | 5)、缓存服务器从实际IP地址得得到内容以后，一方面在本地进行保存，以备以后使用，二方面把获取的数据返回给客户端，完成数据服务过程；
126 |
127 | 6)、客户端得到由缓存服务器返回的数据以后显示出来并完成整个浏览的数据请求过程。
128 |
129 | 资料来源：
130 | 1. [说说web缓存](https://segmentfault.com/a/1190000006741200)
131 |
--------------------------------------------------------------------------------
/docs/杂记-26.css优化与盒子模型.md:
--------------------------------------------------------------------------------
1 | 写了太久的css，从来没有总结过，所有有必要总结一下css的代码优化方式。
2 |
3 | 第一：在css外联文件上传到服务器前，压缩css文件，可以使用网上的一些css压缩工具。这样做的好处是，当我们在css的时候，为了代码的可读性跟可维护性，多出来了很多空格。这样的话，浏览器解析css时候，会多一部分精力来去除这些空格，造成时间上的浪费，所以有必要用压缩工具把这些空格去掉，最小化css文件。
4 |
5 | 第二：使用简写方式。如果要同时改变字体大小，行高，粗体。各自的属性有，font-size,font-weight,line-height.我们可能为每个属性去赋值，但是我们可以这样做
6 |
7 | font:bold 12px/20px "微软雅黑"；这样写是最好，因为大大的减少了代码量。同样有margin、padding、border、background等...
8 |
9 | 第三：尽量使用css外联文件，少使用内联和内嵌样式。如果使用内联样式的话，一方面有相同样式的标签都要加等量代码的样式，另外一方面权重比较大，外联样式要覆盖的话需要在属性后面加important。内嵌样式的话，我觉得对性能没有什么大碍，主要提到外联文件里是因为便于维护，如果有需要修改的地方，可以去分类好的相应样式表里面修改，不必要老是在html文件里面修改，另外可能是因为html文件是最先加载的，提出去html代码量减少了。（值得注意的是：不要把带有style的内嵌样式加在body标签中，因为这样的话style会被解析两次，第一次是在构建dom时，第二次是渲染样式时）。
10 |
11 | 第四：少使用hack。从网上看到，为了不同的浏览器写不同的样式，会添加更多的代码量，让css文件变得更加冗余。有更好的解决方法就是，使用条件注释方式，如：
12 |
13 | ```css
14 |
15 |
16 |
17 |
18 | ```
19 | 这样写的话，如果打开的浏览器不是ie或者不是ie8，因为不是识别注释条件，所以会忽略这段代码，从而不加载ie8.css。这样就可以正对ie8写专属代码了。不过对于ie8来说，它需要牺牲的就是多了一个http请求。
20 |
21 | 第五：使用雪碧图。这个优化其实属于图片的优化，但是它也更css有关，把很多小图标合并到一张图片里面，这样减少了很多http请求，然后通过css来控制这张雪碧图的哪个坐标定位在页面上自己想要的位置。不过使用的是小图标，也即页面中装饰的图片。
22 |
23 | 第六：css文件中代码多注释。为了可读性，可维护性，更以后能看的懂文件的组织逻辑，就要在代码中多注释。
24 |
25 | 第七：class跟id的合理使用。important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承，class的权重为10，id的权重为100，所以想要用class覆盖id的话需要写10个，而且还要放在id选择器下面。当有共同样式布局的标签时，尽可能使用class，当要标志一个标签的独一无二的时候，使用id。
26 |
27 | 第八： 避免使用 expression 和 behavior。在页面渲染的过程中， expression 和 behavior 需要大量的计算，会大量地耗费客户端资源。所以不到迫不得已，请不要使用 expression 和 behavior 。可以式javascript代替处理相应的问题。
28 |
29 | ### 优化CSS重排重绘与浏览器性能
30 |
31 | 关于CSS重排和重绘的概念，最近看到不少这方面的文章，觉得挺有用，在制作中考虑浏览器的性能，减少重排能够节省浏览器对其子元素及父类元素的重新渲染；避免过分的重绘也能节省浏览器性能；优化动画，使用3D启用GPU硬件加速；慎重选择高消耗的样式，如box-shadow、border-radius、transform、css filters等。
32 |
33 | #### 浏览器的渲染机制
34 | 浏览器渲染展示网页的过程，大致分为以下几个步骤：
35 |
36 | 1.解析HTML(HTML Parser)
37 | 2.构建DOM树(DOM Tree)
38 | 3.渲染树构建(Render Tree)
39 | 4.绘制渲染树(Painting)
40 | 
41 |
42 | #### 慎重选择高消耗的样式
43 | 什么 CSS 属性是高消耗的？就是那些绘制前需要浏览器进行大量计算的属性。
44 |
45 | - box-shadows
46 | - border-radius
47 | - transparency
48 | - transforms
49 | - CSS filters（性能杀手）
50 |
51 | #### 什么是reflow
52 | 浏览器为了重新渲染部分或整个页面，重新计算页面元素位置和几何结构的进程叫做reflow.
53 |
54 | 通俗点说就是当开发人员定义好了样式后(也包括浏览器的默认样式),浏览器根据这些来计算并根据结果将元素放到它应该出现的位置上，这个过程叫做reflow.
55 |
56 | 由于reflow是一种浏览器中的用户拦截操作，所以我们了解如何减少reflow次数，及DOM的层级，css效率对refolw次数的影响是十分有必要的。
57 |
58 | reflow(回流)是导致DOM脚本执行效率低的关键因素之一，页面上任何一个节点触发了reflow，会导致它的子节点及祖先节点重新渲染。
59 |
60 | 简单解释一下 Reflow：当元素改变的时候，将会影响文档内容或结构，或元素位置，此过程称为 Reflow。
61 |
62 | ```html
63 |
64 |
65 |
hello
66 |
Name:BDing
67 |
male
68 |
69 | - coding
70 | - loving
71 |
72 |
15 | 打印时显示
16 |
17 |
18 |
19 |
20 | 打印时不显示
21 |
22 |
23 | ```
24 |
--------------------------------------------------------------------------------
/docs/杂记-32.一个好用的图片占位图地址.md:
--------------------------------------------------------------------------------
1 | 1. 默认效果http://temp.im/ + 尺寸
2 | `http://temp.im/640x260`
3 |
4 | 2. 背景色 http://temp.im/ + 尺寸 + 背景色
5 | `http://temp.im/640x260/ccc`
6 |
7 | 3. 字体颜色 http://temp.im/ + 尺寸 + 背景色 +字体颜色
8 | `http://temp.im/640x260/ff5a5f/fff`
9 |
--------------------------------------------------------------------------------
/docs/杂记-33.flutter笔记.md:
--------------------------------------------------------------------------------
1 | ### flutter刘海问题解决
2 | 每年都有新亮点， 自从iPhoneX 出了刘海屏之后，各家安卓厂商也纷纷跟进，对于开发来说，就需要进行各种刘海屏的适配。
3 | 对于Flutter来说，刘海屏主要适配的是上下的边距， 需要把不可点击的区域留出来，同时要把背景颜色和图片放上去。
4 | 对于上面的边距， 如果使用 Scaffold ， appBar已经自动为我们做好了适配，直接使用就行了。
5 | 如果使用的是自定义布局的话， Flutter 提供了媒体查询的接口， 可与获取到上边距和下边距的值。
6 | final double topPadding = MediaQuery.of(context).padding.top;
7 | final double bottomPadding = MediaQuery.of(context).padding.bottom;
8 |
9 | 我们只需要在布局Widget的时候， 把这个值计算进去就ok了。
10 | 需要注意的是：
11 | 上边距在 iPhoneX 上的值是 44， 在其他设备上的值是 20， 是包含了电池条的高度的。
12 | 下边距在iPhoneX 上的值是34，在其他设备上的值是 0。
13 | 现在Flutter出了一个新的Widget，叫做 SafeArea ， 直接在外面包一层这个Widget， 就可以让子Widget 不会被刘海覆盖了。
14 |
15 | ### 渐变
16 | ```
17 | class _home extends StatefulWidget {
18 | @override
19 | State createState() {
20 | return _homeState();
21 | }
22 | }
23 | class _homeState extends State<_home> {
24 | @override
25 | Widget build(BuildContext context) {
26 | // TODO: implement build
27 | return new Scaffold(
28 | appBar: new AppBar(
29 | title: Text("title"),
30 | centerTitle: true,
31 | ),
32 | body: new Center(
33 | child: new Container(
34 | height: 200.0,
35 | decoration: new BoxDecoration(
36 | gradient: const LinearGradient(
37 | colors: [Colors.amberAccent, Colors.lightBlue, Colors.red]),
38 | border: Border.all(width: 5.0,color: Colors.green)
39 |
40 | ),
41 | ),
42 | )
43 | );
44 | }
45 | ```
46 | [Flutter Decoration背景设定（边框、圆角、阴影、形状、渐变、背景图像等）](https://blog.csdn.net/chenlove1/article/details/83627831)
47 |
48 | [Flutter定时器](https://www.jianshu.com/p/9f1511d74da5)
49 |
50 | [Flutter 生命周期](https://segmentfault.com/a/1190000015211309?utm_source=tag-newest)
51 |
52 | [flutter 开发中常用的list，map](https://www.jianshu.com/p/d9c9a1d82c2f)
53 |
54 | [flutter 屏幕尺寸适配 字体大小适配](https://blog.csdn.net/u011272795/article/details/82795477)
55 |
56 | [Flutter学习之旅（四）Flutter动画（1）动画基础介绍](https://blog.csdn.net/qq_17470165/article/details/81006513)
57 |
58 | [使用水平或垂直浮动按钮列表轻松创建浮动菜单](https://pub.dartlang.org/packages/unicorndial#-readme-tab-)
59 |
60 | [Flutter Widgets: Image](https://blog.csdn.net/poorkick/article/details/80458707)
61 |
62 | [flutter appBar](https://blog.csdn.net/mengks1987/article/details/85008814)
63 |
64 | [Flutter：Slivers大家族，让滑动视图的组合变得很简单！](https://blog.csdn.net/yumi0629/article/details/83305627)
65 |
66 | [Flutter知识点: Animation](https://www.jianshu.com/p/32fee75d9e70)
67 |
68 | [Flutter入门学习--(16)布局定位控件Positioned](https://blog.csdn.net/zx13525079024/article/details/86644618)
69 |
70 | [Flutter之PositionedTransition](https://blog.csdn.net/chunqiuwei/article/details/86690767)
71 |
72 | [旋转木马滑块小部件，支持无限滚动和自定义子小部件，具有自动播放功能。](https://pub.flutter-io.cn/packages/carousel_slider)
73 |
74 | [上拉下拉刷新列表](https://pub.flutter-io.cn/packages/pull_to_refresh)
75 |
76 | [轻松创建自己的浮动操作按钮列表](https://pub.flutter-io.cn/packages/unicorndial)
77 |
78 | [RFlutter Alert是Flutter的超级可定制且易于使用的警报/弹出对话框。您可以轻松创建可重复使用的警报样式或添加按钮。](https://pub.flutter-io.cn/packages/rflutter_alert)
79 |
80 | [一个Flutter插件，用于访问加速度计和陀螺仪传感器。](https://pub.flutter-io.cn/packages/sensors)
81 |
82 | [一款通知插件](https://pub.flutter-io.cn/packages/flushbar)
83 |
84 | [一个Flutter包，可以轻松实现弯曲导航栏。](https://pub.flutter-io.cn/packages/curved_navigation_bar)
85 |
86 | [一个队列动画](https://pub.flutter-io.cn/packages/flutter_sequence_animation)
87 |
88 | [介绍折叠](https://pub.flutter-io.cn/packages/expandable)
89 |
90 | [一个队列动画](https://pub.flutter-io.cn/packages/flutter_sequence_animation)
91 |
92 | [五星评级](https://pub.flutter-io.cn/packages/smooth_star_rating)
93 |
94 | [二维码生成器](https://pub.flutter-io.cn/packages/qr)
95 |
96 | [Flutter进阶—自定义主题风格](https://blog.csdn.net/hekaiyou/article/details/76533014)
97 |
98 | [Flutter WebView与JS交互简易指南](https://juejin.im/post/5ca1da31e51d4509ea3d0540)
99 |
100 |
--------------------------------------------------------------------------------
/docs/杂记-35.测试构建.md:
--------------------------------------------------------------------------------
1 | 作者：hazer
2 | 时间：2019-6-27
3 | 简介：github readme自动生成工具
4 |
--------------------------------------------------------------------------------
/docs/杂记-44.一个等待动画.md:
--------------------------------------------------------------------------------
1 | ```html
2 |
3 |
4 |
5 |
6 |
7 |
8 | Document
9 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 | ```
51 |
52 |
53 |
--------------------------------------------------------------------------------
/docs/杂记-45.Golang 在 Mac、Linux、Windows 下如何交叉编译.md:
--------------------------------------------------------------------------------
1 | Golang 支持交叉编译，在一个平台上生成另一个平台的可执行程序，最近使用了一下，非常好用，这里备忘一下。
2 |
3 | Mac 下编译 Linux 和 Windows 64位可执行程序
4 | ```
5 | CGO_ENABLED=0 GOOS=linux GOARCH=amd64 go build main.go
6 | CGO_ENABLED=0 GOOS=windows GOARCH=amd64 go build main.go
7 | ```
8 | Linux 下编译 Mac 和 Windows 64位可执行程序
9 | ```
10 | CGO_ENABLED=0 GOOS=darwin GOARCH=amd64 go build main.go
11 | CGO_ENABLED=0 GOOS=windows GOARCH=amd64 go build main.go
12 | ```
13 | Windows 下编译 Mac 和 Linux 64位可执行程序
14 | ```
15 | SET CGO_ENABLED=0
16 | SET GOOS=darwin
17 | SET GOARCH=amd64
18 | go build main.go
19 |
20 | SET CGO_ENABLED=0
21 | SET GOOS=linux
22 | SET GOARCH=amd64
23 | go build main.go
24 | ```
25 | GOOS：目标平台的操作系统（darwin、freebsd、linux、windows）
26 | GOARCH：目标平台的体系架构（386、amd64、arm）
27 | 交叉编译不支持 CGO 所以要禁用它
28 |
29 | 上面的命令编译 64 位可执行程序，你当然应该也会使用 386 编译 32 位可执行程序
30 | 很多博客都提到要先增加对其它平台的支持，但是我跳过那一步，上面所列的命令也都能成功，且得到我想要的结果，可见那一步应该是非必须的，或是我所使用的 Go 版本已默认支持所有平台。
31 |
--------------------------------------------------------------------------------
/docs/杂记-46.node日志监控.md:
--------------------------------------------------------------------------------
1 | [sentry日志](https://mp.weixin.qq.com/s/P8zP0j6hzo1KOcPnZwE8UQ)
2 | 3.1 sentry是什么？
3 |
4 | sentry是一个开源的实时错误报告工具，支持web前后端，移动应用以及游戏，支持Python, OC,Java,Go, Node, Django等主流编程语言和框架，还提供了Github、Slack、Trello等常见开发工具的集成。
5 |
6 | 3.2 文档地址
7 |
8 | 官网地址：https://sentry.io/welcome/
9 |
10 | github地址：https://github.com/getsentry/sentry
11 |
12 | 整体项目是用django开发的后端+django的后端模板渲染的前端。
13 |
14 |
15 | 3.3 安装方法
16 |
17 | 这边用官方的docker-compose的方式进行安装，关于其他安装方法，随便搜，毕竟知名呀，如果你以前没用过，说明要赶紧的了哈。
18 |
19 | 官方的一个方式：
20 |
21 |
22 | 步骤一：
23 |
24 | git clone代码.仓库地址: https://github.com/getsentry/onpremise.git，然后下载完代码后进入这个目录进行操作。
25 |
26 | git clone https://github.com/getsentry/onpremise.git
27 | 步骤二：
28 |
29 | docker volume create --name=sentry-data && docker volume create --name=sentry-postgres
30 | 步骤三：
31 | 把他的环境配置文件拷贝一份，修改。
32 |
33 | cp -n .env.example .env
34 | 步骤四：
35 | 执行build
36 |
37 | docker-compose build
38 | 步骤五：
39 | 产生一个key。
40 |
41 | docker-compose run --rm web config generate-secret-key
42 | 会提示给我们一个key的。
43 |
44 | 然后将这个key，修改vim .env然后填进去。
45 |
46 | 步骤六：
47 | 数据库orm的执行，生成数据库表和数据库初始数据
48 |
49 | docker-compose run --rm web upgrade
50 | 然后他会提示我们创建一个账号，那这时大家输入一个账号。
51 |
52 | 步骤七：
53 | 运行
54 |
55 | docker-compose up -d
56 | 步骤八：
57 | 打开我们的网页访问: http://127.0.0.1:9000，看到以下界面:
58 |
59 |
60 | 然后我们输入账号密码后，中间有一个配置页面跳过，然后我们进入后就能看到如下界面：
61 |
62 | image.png
63 | image.png
64 | 然后直接进入实战吧。
65 |
66 | 四、Node基础应用篇
67 |
68 | 4.1.1 新建项目
69 |
70 | 我们打开sentry网站，如下图，点击新建一个项目:
71 |
72 | image.png
73 |
74 | 然后我们选择nodejs
75 | image.png
76 |
77 | 然后我们就到了这个页面:
78 | image.png
79 | image.png
80 | 4.1.2 新建代码工程
81 |
82 | 我们选择一个自己的目录，然后创建一个文件夹。
83 |
84 | mkdir -p hello_world && cd hello_world
85 | 然后我们执行下面命令来初始化一个npm项目
86 |
87 | npm init -y
88 | 然后我们新建一个index.js文件，并且安装@sentry/node这个库
89 |
90 | npm install @sentry/node -s
91 | 然后index.js的代码如下:
92 |
93 | const Sentry = require('@sentry/node');
94 | Sentry.init({ dsn: 'http://dfa471316a1143a689364ff5d7517753@127.0.0.1:9000//3' });
95 | 4.1.3 构建异常
96 |
97 | 我们修改index.js文件
98 |
99 | const Sentry = require('@sentry/node');
100 | Sentry.init({ dsn: 'http://dfa471316a1143a689364ff5d7517753@127.0.0.1:9000//3' });
101 |
102 | throw new Error("hello")
103 | 然后运行这个代码.
104 |
105 | node ./index.js
106 | 4.1.4 查看异常
107 |
108 | 然后我们点开刚刚项目页面会看到异常已经报告上来了。
109 |
110 | 点击查看详情：
111 | image.png
112 | image.png
113 | 4.1.5 解决问题
114 |
115 | 然后根据异常，我们就需要去解决代码里面这个异常。比如代码修改成下面这样:
116 |
117 | const Sentry = require('@sentry/node');
118 | Sentry.init({ dsn: 'http://dfa471316a1143a689364ff5d7517753@127.0.0.1:9000//3' });
119 | console.log("hello world")
120 | 然后再执行，问题就不上报了。
121 |
122 | 然后同时我们把刚刚这个问题给resolve掉。
123 |
124 | image.png
125 | image.png
126 |
127 | 最终确保我们项目页面异常是空的，否则虽然报错了，但是问题又不改，那这个平台的价值就没了。
128 |
129 |
130 | 五、Node + Typescript + sourceMap篇
131 |
132 | 上面我们介绍了Node.js的基础使用方法，下面我们介绍一下Node + typescript + sourcemap的情况。
133 | 前两步会跟上面差不多。
134 |
135 | 5.1.1 新建项目
136 |
137 | 我们打开sentry网站，点击新建一个nodejs项目
138 |
139 | image.png
140 | image.png
141 |
142 | 然后我们就到了这个页面:
143 | image.png
144 | image.png
145 | 5.1.2 新建代码工程
146 |
147 | 我们选择一个自己的目录，然后创建一个文件夹。
148 |
149 | mkdir -p hello_world && cd hello_world
150 | 然后我们执行下面命令来初始化一个npm项目,这步开始跟基础篇不一样,然后tsc --init会给我们生成一个tsconfig.json文件
151 |
152 | npm init -y && tsc --init
153 | 修改tsconfig.json文件内容:
154 |
155 | {
156 | "compilerOptions": {
157 | "target": "es2017",
158 | "module": "commonjs",
159 | "sourceMap": true,
160 | "outDir": "./dist",
161 | "baseUrl": ".",
162 | "inlineSources": true,
163 | "strict": true,
164 | "esModuleInterop": true
165 | }
166 | }
167 | 然后我们新建一个index.js文件，并且安装@sentry/node这个库
168 |
169 | npm install @sentry/node -s
170 | 然后index.ts的代码如下: 此处代码也不一样了
171 |
172 | import * as Sentry from '@sentry/node'
173 | import * as Integrations from '@sentry/integrations';
174 | Sentry.init({ dsn: 'http://dfa471316a1143a689364ff5d7517753@127.0.0.1:9000//3', release: 'dev' ,integrations: [
175 | new Integrations.RewriteFrames()
176 | ]});
177 | 5.1.3 构建异常
178 |
179 | 为了后续根据js和sourcemap还原ts文件，还需要安装@sentry/integrations
180 |
181 | npm install @sentry/integrations -s
182 | 然后修改index.ts文件
183 |
184 | import * as Sentry from '@sentry/node'
185 | import * as Integrations from '@sentry/integrations';
186 | Sentry.init({ dsn: 'http://dfa471316a1143a689364ff5d7517753@127.0.0.1:9000//3', release: 'dev' ,integrations: [
187 | new Integrations.RewriteFrames()
188 | ]});
189 |
190 | throw new Error("hello123")
191 | 然后我们可以首先运行ts版本的:
192 |
193 | ts-node ./index.ts
194 | 然后我们来看平台上确实查看到了这个报错，虽然下面有报错，这个报错原因是没有node_modules:
195 |
196 | image.png
197 | image.png
198 | 5.1.4 编译typescript代码
199 |
200 | 我们除了本地环境以外，测试、线上都只会跑js版本。因为会将ts代码编译js。
201 | 执行编译
202 |
203 | tsc -p ./tsconfig.json
204 | 然后会生成js和sourcemap文件。
205 |
206 | 5.1.5 上传代码准备
207 |
208 | 上传这个我们需要做一个准备，在工程目录下，我们创建一个文件:
209 | 文件名: .sentryclirc
210 |
211 | [auth]
212 | token=fc8e6e2e3d12427fb005105694ac576593578d0f667946b0adbffc855c6cf39f
213 |
214 | [defaults]
215 | url=http://127.0.0.1:9000/
216 | org=sentry
217 | project=hello
218 | url的话，是sentry网站的地址
219 | org：项目有个org的，拷贝过来
220 | project：项目名字
221 | token创建方法：
222 |
223 | image.png
224 | image.png
225 |
226 | 新建一个token，并且主要勾选权限。
227 | image.png
228 | image.png
229 | 5.1.6 安装上传工具
230 |
231 | 上传工具：
232 |
233 | npm install @sentry/cli -g
234 | 5.1.7 上传js和sourcemap
235 |
236 | 首先我们创建一个release,取名: dev
237 |
238 | sentry-cli releases new dev
239 | 然后执行上传:
240 |
241 | sentry-cli releases files dev upload-sourcemaps --rewrite dist
242 | 上传完毕：
243 |
244 | image.png
245 | image.png
246 | 5.1.8 测试异常
247 |
248 | 然后我们跑编译后的，模拟测试服和线上服。
249 | 运行方式:
250 |
251 | node ./dist/index.js
252 | 然后我们去平台上查看：
253 |
254 | image.png
255 | image.png
256 | 5.1.9 解决问题
257 |
258 | 然后根据异常，我们就需要去解决代码里面这个异常。比如代码修改成下面这样:
259 |
260 | import * as Sentry from '@sentry/node'
261 | import * as Integrations from '@sentry/integrations';
262 |
263 | Sentry.init({ dsn: 'http://dfa471316a1143a689364ff5d7517753@127.0.0.1:9000//3', release: 'dev3' ,integrations: [
264 | new Integrations.RewriteFrames()
265 | ]});
266 |
267 | console.log("hello world")
268 | 然后再执行，问题就不上报了。
269 |
270 | 然后同时我们把刚刚这个问题给resolve掉。
271 |
272 | image.png
273 | image.png
274 |
275 | 最终确保我们项目页面异常是空的，否则虽然报错了，但是问题又不改，那这个平台的价值就没了。
276 | 六、其他的使用指南
277 |
278 | 文章目录其实很长，暂时只整理了Node相关的一些使用，比如react，vue，angular这类前端项目也可以用，electron这类的跨平台的也可以用。
279 |
280 |
281 |
282 | 关于Sentry这样的错误监控，在项目开发中挺有用的，有些公司采用自建，有些是用这类开源项目二次开发，所以还没学会的同学，赶紧试试吧。
283 |
284 | 七、结论
285 |
286 | 本文其实也只是讲解了sentry这块的错误监控的一小块，例如react这类前端项目里面也可以用。还有邮件报警等等。
287 |
--------------------------------------------------------------------------------
/docs/杂记-47.怎么写出美观的js代码.md:
--------------------------------------------------------------------------------
1 | ## 如何提高代码的可读性、复用性、扩展性。我们将从以下四个方面讨论：
2 |
3 | - 变量
4 | - 函数
5 | - 类
6 | - 异步
7 |
8 | ### 一、变量
9 | #### 用有意义且常用的单词命名
10 | ```
11 | // Bad:
12 | const yyyymmdstr = moment().format('YYYY/MM/DD');
13 | // Good:
14 | const currentDate = moment().format('YYYY/MM/DD');
15 | ```
16 | #### 保持统一
17 | 对同一类型的变量使用相同的命名保持统一：
18 | ```
19 | // Bad:
20 | getUserInfo();
21 | getClientData();
22 | getCustomerRecord();
23 | // Good:
24 | getUser()
25 | ```
26 | #### 每个常量(全大写)都该命名
27 | 可以用 ESLint 检测代码中未命名的常量。
28 | ```
29 | // Bad:
30 | // 其他人知道 86400000 的意思吗？
31 | setTimeout( blastOff, 86400000 );
32 | // Good:
33 | const MILLISECOND_IN_A_DAY = 86400000;
34 | setTimeout( blastOff, MILLISECOND_IN_A_DAY );
35 | ```
36 | #### 避免无意义的命名
37 | 既然创建了一个 car 对象，就没有必要把它的颜色命名为 carColor。
38 | ```
39 | // Bad:
40 | const car = {
41 | carMake: 'Honda',
42 | carModel: 'Accord',
43 | carColor: 'Blue'
44 | };
45 | function paintCar( car ) {
46 | car.carColor = 'Red';
47 | }
48 | // Good:
49 | const car = {
50 | make: 'Honda',
51 | model: 'Accord',
52 | color: 'Blue'
53 | };
54 | function paintCar( car ) {
55 | car.color = 'Red';
56 | }
57 | ```
58 | #### 传参使用默认值
59 | ```
60 | // Bad:
61 | function createMicrobrewery( name ) {
62 | const breweryName = name || 'Hipster Brew Co.';
63 | // ...
64 | }
65 | // Good:
66 | function createMicrobrewery( name = 'Hipster Brew Co.' ) {
67 | // ...
68 | }
69 | ```
70 | ### 二、函数
71 | #### 函数参数( 最好 2 个或更少 )
72 | 如果参数超过两个，建议使用 ES6 的解构语法，不用考虑参数的顺序。
73 | ```
74 | // Bad:
75 | function createMenu( title, body, buttonText, cancellable ) {
76 | // ...
77 | }
78 | // Good:
79 | function createMenu( { title, body, buttonText, cancellable } ) {
80 | // ...
81 | }
82 | createMenu({
83 | title: 'Foo',
84 | body: 'Bar',
85 | buttonText: 'Baz',
86 | cancellable: true
87 | });
88 | ```
89 | #### 一个方法只做一件事情
90 | 这是一条在软件工程领域流传久远的规则。严格遵守这条规则会让你的代码可读性更好，也更容易重构。如果违反这个规则，那么代码会很难被测试或者重用。
91 | ```
92 | // Bad:
93 | function emailClients( clients ) {
94 | clients.forEach( client => {
95 | const clientRecord = database.lookup( client );
96 | if ( clientRecord.isActive() ) {
97 | email( client );
98 | }
99 | });
100 | }
101 | // Good:
102 | function emailActiveClients( clients ) {
103 | clients
104 | .filter( isActiveClient )
105 | .forEach( email );
106 | }
107 | function isActiveClient( client ) {
108 | const clientRecord = database.lookup( client );
109 | return clientRecord.isActive();
110 | }
111 | ```
112 | #### 函数名上体现它的作用
113 | ```
114 | // Bad:
115 | function addToDate( date, month ) {
116 | // ...
117 | }
118 | const date = new Date();
119 | // 很难知道是把什么加到日期中
120 | addToDate( date, 1 );
121 | // Good:
122 | function addMonthToDate( month, date ) {
123 | // ...
124 | }
125 | const date = new Date();
126 | addMonthToDate( 1, date );
127 | ```
128 | #### 删除重复代码，合并相似函数
129 | 很多时候虽然是同一个功能，但由于一两个不同点，让你不得不写两个几乎相同的函数。
130 | ```
131 | // Bad:
132 | function showDeveloperList(developers) {
133 | developers.forEach((developer) => {
134 | const expectedSalary = developer.calculateExpectedSalary();
135 | const experience = developer.getExperience();
136 | const githubLink = developer.getGithubLink();
137 | const data = {
138 | expectedSalary,
139 | experience,
140 | githubLink
141 | };
142 | render(data);
143 | });
144 | }
145 | function showManagerList(managers) {
146 | managers.forEach((manager) => {
147 | const expectedSalary = manager.calculateExpectedSalary();
148 | const experience = manager.getExperience();
149 | const portfolio = manager.getMBAProjects();
150 | const data = {
151 | expectedSalary,
152 | experience,
153 | portfolio
154 | };
155 | render(data);
156 | });
157 | }
158 | // Good:
159 | function showEmployeeList(employees) {
160 | employees.forEach(employee => {
161 | const expectedSalary = employee.calculateExpectedSalary();
162 | const experience = employee.getExperience();
163 | const data = {
164 | expectedSalary,
165 | experience,
166 | };
167 | switch(employee.type) {
168 | case 'develop':
169 | data.githubLink = employee.getGithubLink();
170 | break
171 | case 'manager':
172 | data.portfolio = employee.getMBAProjects();
173 | break
174 | }
175 | render(data);
176 | })
177 | }
178 | ```
179 | #### 使用 Object.assign 设置默认属性
180 | ```
181 | // Bad:
182 | const menuConfig = {
183 | title: null,
184 | body: 'Bar',
185 | buttonText: null,
186 | cancellable: true
187 | };
188 | function createMenu(config) {
189 | config.title = config.title || 'Foo';
190 | config.body = config.body || 'Bar';
191 | config.buttonText = config.buttonText || 'Baz';
192 | config.cancellable = config.cancellable !== undefined ? config.cancellable : true;
193 | }
194 | createMenu(menuConfig);
195 | // Good:
196 | const menuConfig = {
197 | title: 'Order',
198 | // 不包含 body
199 | buttonText: 'Send',
200 | cancellable: true
201 | };
202 | function createMenu(config) {
203 | config = Object.assign({
204 | title: 'Foo',
205 | body: 'Bar',
206 | buttonText: 'Baz',
207 | cancellable: true
208 | }, config);
209 | // config : {title: "Order", body: "Bar", buttonText: "Send", cancellable: true}
210 | // ...
211 | }
212 | createMenu(menuConfig);
213 | ```
214 | #### 尽量不要写全局方法
215 | 在 JavaScript 中，永远不要污染全局，会在生产环境中产生难以预料的 bug。举个例子，比如你在 Array.prototype 上新增一个 diff 方法来判断两个数组的不同。而你同事也打算做类似的事情，不过他的 diff 方法是用来判断两个数组首位元素的不同。很明显你们方法会产生冲突，遇到这类问题我们可以用 ES2015/ES6 的语法来对 Array 进行扩展。
216 | ```
217 | // Bad:
218 | Array.prototype.diff = function diff(comparisonArray) {
219 | const hash = new Set(comparisonArray);
220 | return this.filter(elem => !hash.has(elem));
221 | };
222 | // Good:
223 | class SuperArray extends Array {
224 | diff(comparisonArray) {
225 | const hash = new Set(comparisonArray);
226 | return this.filter(elem => !hash.has(elem));
227 | }
228 | }
229 | ```
230 | #### 尽量别用“非”条件句
231 | ```
232 | // Bad:
233 | function isDOMNodeNotPresent(node) {
234 | // ...
235 | }
236 | if (!isDOMNodeNotPresent(node)) {
237 | // ...
238 | }
239 | // Good:
240 | function isDOMNodePresent(node) {
241 | // ...
242 | }
243 | if (isDOMNodePresent(node)) {
244 | // ...
245 | }
246 | ```
247 | #### 不要过度优化
248 | 现代浏览器已经在底层做了很多优化，过去的很多优化方案都是无效的，会浪费你的时间。
249 | ```
250 | // Bad:
251 | // 现代浏览器已对此( 缓存 list.length )做了优化。
252 | for (let i = 0, len = list.length; i < len; i++) {
253 | // ...
254 | }
255 | // Good:
256 | for (let i = 0; i < list.length; i++) {
257 | // ...
258 | }
259 | ```
260 | #### 删除弃用代码
261 | 这里没有实例代码，删除就对了
262 | 三、类
263 | 使用 ES6 的 class
264 | 在 ES6 之前，没有类的语法，只能用构造函数的方式模拟类，可读性非常差。
265 | ```
266 | // Good:
267 | // 动物
268 | class Animal {
269 | constructor(age) {
270 | this.age = age
271 | };
272 | move() {};
273 | }
274 | // 哺乳动物
275 | class Mammal extends Animal{
276 | constructor(age, furColor) {
277 | super(age);
278 | this.furColor = furColor;
279 | };
280 | liveBirth() {};
281 | }
282 | // 人类
283 | class Human extends Mammal{
284 | constructor(age, furColor, languageSpoken) {
285 | super(age, furColor);
286 | this.languageSpoken = languageSpoken;
287 | };
288 | speak() {};
289 | }
290 | ```
291 | #### 使用链式调用
292 | 这种模式相当有用，可以在很多库中都有使用。它让你的代码简洁优雅。
293 | ```
294 | class Car {
295 | constructor(make, model, color) {
296 | this.make = make;
297 | this.model = model;
298 | this.color = color;
299 | }
300 |
301 | setMake(make) {
302 | this.make = make;
303 | }
304 |
305 | setModel(model) {
306 | this.model = model;
307 | }
308 |
309 | setColor(color) {
310 | this.color = color;
311 | }
312 |
313 | save() {
314 | console.log(this.make, this.model, this.color);
315 | }
316 | }
317 | // Bad:
318 | const car = new Car('Ford','F-150','red');
319 | car.setColor('pink');
320 | car.save();
321 |
322 | // Good:
323 | class Car {
324 | constructor(make, model, color) {
325 | this.make = make;
326 | this.model = model;
327 | this.color = color;
328 | }
329 |
330 | setMake(make) {
331 | this.make = make;
332 | // NOTE: Returning this for chaining
333 | return this;
334 | }
335 |
336 | setModel(model) {
337 | this.model = model;
338 | // NOTE: Returning this for chaining
339 | return this;
340 | }
341 |
342 | setColor(color) {
343 | this.color = color;
344 | // NOTE: Returning this for chaining
345 | return this;
346 | }
347 |
348 | save() {
349 | console.log(this.make, this.model, this.color);
350 | // NOTE: Returning this for chaining
351 | return this;
352 | }
353 | }
354 |
355 | const car = new Car("Ford", "F-150", "red").setColor("pink").save();
356 | ```
357 | ### 四、异步
358 | #### 使用 promise 或者 Async/Await 代替回调
359 | ```
360 | // Bad:
361 | get('https://en.wikipedia.org/wiki/Robert_Cecil_Martin', (requestErr, response) => {
362 | if (requestErr) {
363 | console.error(requestErr);
364 | } else {
365 | writeFile('article.html', response.body, (writeErr) => {
366 | if (writeErr) {
367 | console.error(writeErr);
368 | } else {
369 | console.log('File written');
370 | }
371 | });
372 | }
373 | });
374 | // Good:
375 | get('https://en.wikipedia.org/wiki/Robert_Cecil_Martin')
376 | .then((response) => {
377 | return writeFile('article.html', response);
378 | })
379 | .then(() => {
380 | console.log('File written');
381 | })
382 | .catch((err) => {
383 | console.error(err);
384 | });
385 |
386 | // perfect:
387 | async function getCleanCodeArticle() {
388 | try {
389 | const response = await get('https://en.wikipedia.org/wiki/Robert_Cecil_Martin');
390 | await writeFile('article.html', response);
391 | console.log('File written');
392 | } catch(err) {
393 | console.error(err);
394 | }
395 | }
396 | ```
397 |
--------------------------------------------------------------------------------
/docs/杂记-48.定时任务配置.md:
--------------------------------------------------------------------------------
1 | > 每天凌晨2点 0 0 2 * * ?和每天隔一小时 0 * */1 * * ?
2 |
3 | > 例1：每隔5秒执行一次：*/5 * * * * ?
4 |
5 | > 例2：每隔5分执行一次：0 */5 * * * ?
6 |
7 | > 在26分、29分、33分执行一次：0 26,29,33 * * * ?
8 |
9 | > 例3：每天半夜12点30分执行一次：0 30 0 * * ? （注意日期域为0不是24）
10 |
11 | > 每天凌晨1点执行一次：0 0 1 * * ?
12 |
13 | > 每天上午10：15执行一次： 0 15 10 ? * * 或 0 15 10 * * ? 或 0 15 10 * * ? *
14 |
15 | > 每天中午十二点执行一次：0 0 12 * * ?
16 |
17 | > 每天14点到14：59分，每1分钟执行一次：0 * 14 * * ?
18 |
19 | > 每天14点到14：05分，每1分钟执行一次：0 0-5 14 * * ?
20 |
21 | > 每天14点到14：55分，每5分钟执行一次：0 0/5 14 * * ?
22 |
23 | > 每天14点到14：55分，和18点到18点55分，每5分钟执行一次：0 0/5 14,18 * * ?
24 |
25 | > 每天18点执行一次：0 0 18 * * ?
26 |
27 | > 每天18点、22点执行一次：0 0 18,22 * * ?
28 |
29 | > 每天7点到23点，每整点执行一次：0 0 7-23 * * ?
30 |
31 | > 每个整点执行一次：0 0 0/1 * * ?
32 |
33 | ---
34 |
35 | - 作者：hazer
36 |
37 | - 时间：2019-6-28
38 |
39 | - 简介：设置定时任务为每天凌晨2点执行和每小时执行一次？
40 |
--------------------------------------------------------------------------------
/docs/杂记-49.cache-control.md:
--------------------------------------------------------------------------------
1 | Cache-Control 通用消息头字段，被用于在http请求和响应中，通过指定指令来实现缓存机制。缓存指令是单向的，这意味着在请求中设置的指令，不一定被包含在响应中。
2 | ```
3 | Header type General header
4 | Forbidden header name no
5 | CORS-safelisted response-header yes
6 | ```
7 | 语法节
8 | 指令不区分大小写，并且具有可选参数，可以用令牌或者带引号的字符串语法。多个指令以逗号分隔。
9 |
10 | 缓存请求指令节
11 | 客户端可以在HTTP请求中使用的标准 Cache-Control 指令。
12 | ```
13 | Cache-Control: max-age=
14 | Cache-Control: max-stale[=]
15 | Cache-Control: min-fresh=
16 | Cache-control: no-cache
17 | Cache-control: no-store
18 | Cache-control: no-transform
19 | Cache-control: only-if-cached
20 | ```
21 | 缓存响应指令节
22 | 服务器可以在响应中使用的标准 Cache-Control 指令。
23 | ```
24 | Cache-control: must-revalidate
25 | Cache-control: no-cache
26 | Cache-control: no-store
27 | Cache-control: no-transform
28 | Cache-control: public
29 | Cache-control: private
30 | Cache-control: proxy-revalidate
31 | Cache-Control: max-age=
32 | Cache-control: s-maxage=
33 | ```
34 | 扩展Cache-Control指令节
35 | 拓展缓存指令不是核心HTTP缓存标准文档的一部分，使用前请注意检查兼容性！
36 | ```
37 | Cache-control: immutable
38 | Cache-control: stale-while-revalidate=
39 | Cache-control: stale-if-error=
40 | ```
41 | 指令节
42 | #### 可缓存性节
43 |
44 | > public
45 | 表明响应可以被任何对象（包括：发送请求的客户端，代理服务器，等等）缓存，即使是通常不可缓存的内容（例如，该响应没有max-age指令或Expires消息头）。
46 | > private
47 | 表明响应只能被单个用户缓存，不能作为共享缓存（即代理服务器不能缓存它）。私有缓存可以缓存响应内容。
48 | > no-cache
49 | 在发布缓存副本之前，强制要求缓存把请求提交给原始服务器进行验证。
50 | > no-store
51 | 缓存不应存储有关客户端请求或服务器响应的任何内容。
52 | #### 到期节
53 |
54 | > max-age=
55 | 设置缓存存储的最大周期，超过这个时间缓存被认为过期(单位秒)。与Expires相反，时间是相对于请求的时间。
56 | > s-maxage=
57 | 覆盖max-age或者Expires头，但是仅适用于共享缓存(比如各个代理)，私有缓存会忽略它。
58 | > max-stale[=]
59 | 表明客户端愿意接收一个已经过期的资源。可以设置一个可选的秒数，表示响应不能已经过时超过该给定的时间。
60 | > min-fresh=
61 | 表示客户端希望获取一个能在指定的秒数内保持其最新状态的响应。
62 | > stale-while-revalidate=
63 | 表明客户端愿意接受陈旧的响应，同时在后台异步检查新的响应。秒值指示客户愿意接受陈旧响应的时间长度。
64 | > stale-if-error=
65 | 表示如果新的检查失败，则客户愿意接受陈旧的响应。秒数值表示客户在初始到期后愿意接受陈旧响应的时间。
66 |
67 | #### 重新验证和重新加载节
68 |
69 | > must-revalidate
70 | 一旦资源过期（比如已经超过max-age），在成功向原始服务器验证之前，缓存不能用该资源响应后续请求。
71 | > proxy-revalidate
72 | 与must-revalidate作用相同，但它仅适用于共享缓存（例如代理），并被私有缓存忽略。
73 | > immutable
74 | 表示响应正文不会随时间而改变。资源（如果未过期）在服务器上不发生改变，因此客户端不应发送重新验证请求头（例如If-None-Match或If-Modified-Since）来检查更新，即使用户显式地刷新页面。在Firefox中，immutable只能被用在 https:// transactions. 有关更多信息，请参阅这里。
75 | #### 其他节
76 |
77 | > no-transform
78 | 不得对资源进行转换或转变。Content-Encoding、Content-Range、Content-Type等HTTP头不能由代理修改。例如，非透明代理或者如Google's Light Mode可能对图像格式进行转换，以便节省缓存空间或者减少缓慢链路上的流量。no-transform指令不允许这样做。
79 | only-if-cached
80 | 表明客户端只接受已缓存的响应，并且不要向原始服务器检查是否有更新的拷贝。
81 | #### 示例节
82 | 禁止缓存节
83 | 发送如下指令可以关闭缓存。此外，可以参考Expires和Pragma消息头。
84 |
85 | > Cache-Control: no-cache, no-store, must-revalidate
86 | 缓存静态资源节
87 | 对于应用程序中不会改变的文件，你通常可以在发送响应头前添加积极缓存。这包括例如由应用程序提供的静态文件，例如图像，CSS文件和JavaScript文件。另请参阅Expires标题。
88 |
89 | > Cache-Control:public, max-age=31536000
90 |
--------------------------------------------------------------------------------