update article

okaychen · Mar 21, 2018 · 9381562 · 9381562
1 parent 8c8223c
commit 9381562
Show file tree

Hide file tree

Showing 6 changed files with 152 additions and 4 deletions.
diff --git a/_posts/cross-domain-cors.md b/_posts/cross-domain-cors.md
@@ -0,0 +1,26 @@
+---
+title: 浏览器同源政策
+date: 2018-03-15 10:51:07
+comments: true
+tags:
+    - 跨域
+    - 同源政策
+categories:
+    - JavaScript
+---
+
+我们都知道浏览器的“同源政策”是浏览器安全的基石，根本目的是为了保护用户信息安全，防止恶意的网站窃取数据。
+1995年，同源政策由Netscape 公司引入。目前，所有浏览器都执行这个政策。
+随着互联网的发展，保障用户的信息安全也越来越重要。非同源将受到三种行为的限制：
+> - Cookie、localstorage、IndexDB无法读取
+- DOM无法获得
+- AJAX无法发送
+
+所谓"同源"即指三个相同，
+> - 域名相同
+- 协议相同
+- 端口相同
+
+举个栗子，http://www.chenqaq.com我的网址，协议就是http://,域名是www.chenqaq.com，端口默认为80。
+
+ing...
diff --git a/_posts/css-box-model.md b/_posts/css-box-model.md
@@ -59,9 +59,7 @@ categories:
 
 在怪异模式下的盒模型如下图所示，盒子的总宽度和高度是包含内边距padding和边框border宽度在内的
 
-盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;
-
-也即是说 `width = 内容区宽度 + padding + border`
+盒子总宽度/高度=width/height + margin = width/height + margin;
 
 ![怪异盒模型](http://www.chenqaq.com/assets/images/box-model2.png)
 

diff --git a/_posts/js-debounce-throttle.md b/_posts/js-debounce-throttle.md
@@ -0,0 +1,124 @@
+---
+title: 跟着underscore学习防抖和节流
+date: 2018-03-20 15:54:44
+comments: true
+tags:
+    - underscore
+    - 防抖与节流
+categories:
+    - JavaScript
+---
+
+# 有个开始吧！
+
+网上有很多的防抖与节流的文章，自己也早有耳闻，之前看underscore的代码，也发现了两个与众不同的函数debounce和throttle，仿佛是有特定的用途。学习实践之后便总结下这篇文章。
+
+在前端开发中经常遇到一些频繁触发的事件，比如
+- 键盘事件：keyup、keydown...
+- window：resize、scroll...
+- 鼠标事件：mousedown、mousemove...
+
+那么什么是事件的频发触发呢？让我们写一个例子来了解事件的频繁触发；
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>学习事件的频发触发</title>
+  <style>
+    * {
+      padding: 0;
+      margin: 0;
+    }
+
+    .container {
+      width: 50vw;
+      height: 30vh;
+      margin: 50px auto;
+      background: yellowgreen;
+      border-radius: 5px;
+      text-align: center;
+      line-height: 30vh;
+      font-size: 30px;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="container" class="container"></div>
+  <script src="debounce.js"></script>
+</body>
+
+</html>
+```
+debounce.js代码如下：
+```js
+'use strict'
+
+let count = 1;
+let container = document.getElementById('container');
+
+function getAction() {
+  container.innerHTML++;
+}
+
+container.onmousemove = getAction;
+```
+效果如下：
+
+![时间频发触发](http://www.chenqaq.com/assets/images/debounce1.gif)
+
+我们发现鼠标从盒子左侧平稳的滑到右侧，数字从1增加到了188，也就是说在极短的时间内getAction这个函数就触发了188次。可想而知，如果这个问题是复杂回调或者ajax请求等等，每个回调就必须在更短的时间内执行完毕，否则就会出现卡顿现象。
+
+对于这个问题，防抖和节流就是两种很好的解决方案。
+
+# 防抖与节流介绍
+
+防抖的原理就是：尽管时间触发，但是我一定要到事件触发n秒后才执行。如果在这个时间内又触发了这个事件，那就以新的事件的时间为准，触发n秒后才执行。主要是通过定时器来实现
+
+关于节流的原理：如果持续触发事件，每隔一段时间，只执行一次事件。主要通过时间戳或者定时器来实现
+
+# 实现防抖debounce
+根据原理我们就可以来写第一版debounce代码：
+```js
+function debounce(func, wait) {
+  let timeout;
+  return function () {
+      clearTimeout(timeout)
+      timeout = setTimeout(func, wait);
+  }
+}
+
+container.onmousemove = debounce(getAction, 1000);
+```
+效果如下
+
+![debounce第一版](http://www.chenqaq.com/assets/images/debounce2.gif)
+
+从效果中很明显可以看出来，无论开始怎么在盒子内移动鼠标，数值都不会加1，直到鼠标停下来，并且等待1s后，getAction函数执行使数值加1。
+
+### this带来的问题
+如果在getAction函数中`console.log(this)`，在不使用debounce函数时，`this`的值为
+```html
+<div id="container" class="container"></div>
+```
+但是我们在使用我们的debounce函数时，这个this就指向了window！（这是由于嵌套函数内部的this都会失去方向，指向window对象。可参见我写的[this四种绑定方式之间的奇淫技巧](http://www.cnblogs.com/okaychen/p/7520472.html)）
+
+所以我们必须要将this指向正确的对象：
+```js
+function debounce(func, wait) {
+  let timeout;
+
+  return function (timeout) {
+    let context = this;
+    clearTimeout(timeout);
+    timeout = setTimeout(function () {
+      func.apply(context);
+    }, wait);
+  }
+}
+```
diff --git a/assets/images/debounce1.gif b/assets/images/debounce1.gif
diff --git a/assets/images/debounce2.gif b/assets/images/debounce2.gif
diff --git a/custom/index.md b/custom/index.md
@@ -44,7 +44,7 @@ Web 技术更新很快，本站很多文章都具有时效性，我会及时更
 
 - 2018年1月21日，申请参与[「掘金翻译计划」](https://github.com/xitu/gold-miner)并通过，成为广大译者中的其中一员
 
-- 2018年1月24日，收到「阿里巴巴新零售事业群」[邀约面试](http://www.chenqaq.com/2018/01/25/life-aboutLife-job/)
+- 2018年1月24日，收到「阿里巴巴新零售事业部」[邀约面试]，#最后得到认可并收到答复#，[文章如下](http://www.chenqaq.com/2018/01/25/life-aboutLife-job/)
 
 # 项目经历