feat: curry、jsonp、xhr-request、add-event-listeners

articles/js/deep/js_this.md

@@ -328,7 +328,7 @@ this的四种绑定规则：
 
 分别对应函数的四种调用方式：
 
-- 独立调用，执行window
-- 方法调用，执行该方法属于的那个对象
+- 独立调用，指向window
+- 方法调用，指向该方法属于的那个对象
 - 间接调用，指向call，apply传入的对象
 - 构造函数调用，指向实例对象

articles/optimization/actual/event-proxy.md

@@ -0,0 +1,6 @@
+---
+title: 事件代理
+author: lvzl
+---
+
+利用事件冒泡的机制，可在父元素代理子元素事件的处理，详情请参考[设计模式——代理模式一节](/designmode/proxy.html)

articles/write/add-event-listeners.md

@@ -0,0 +1,53 @@
+---
+title: 通用的添加事件监听器
+author: lvzl
+---
+
+```js
+class bindEvent {
+    constructor(element) {
+        this.element = element;
+    }
+    addEventListener = (type, handler) => {
+        if (this.element.addEventListener) {
+            this.element.addEventListener(type, handler, false);
+        } else if (this.element.attachEvent) {
+            const element = this.element;
+            this.element.attachEvent('on' + type, () => {
+                handler.call(element);
+            });
+        } else {
+            this.element['on' + type] = handler;
+        }
+    }
+
+    removeEventListener = (type, handler) => {
+        if (this.element.removeEventListener) {
+            this.element.removeEventListener(type, handler, false);
+        } else if (this.element.detachEvent) {
+            const element = this.element;
+            this.element.detachEvent('on' + type, () => {
+                handler.call(element);
+            });
+        } else {
+            this.element['on' + type] = null;
+        }
+    }
+
+    static stopPropagation(e) {
+        if (e.stopPropagation) {
+            e.stopPropagation();
+        } else {
+            e.cancelBubble = true;
+        }
+    }
+
+    static preventDefault(e) {
+        if (e.preventDefault) {
+            e.preventDefault();
+        } else {
+            e.returnValue = false;
+        }
+    }
+}
+```

articles/write/curry.md

@@ -0,0 +1,15 @@
+---
+title: 函数柯里化
+author: lvzl
+---
+
+```js
+function curry(fn) {
+  return function curried(...argu) {
+    if(argu.length >= fn.length) {
+      return fn.apply(null, argu)
+    }
+    return curried.bind(null, ...argu)
+  }
+}
+```

articles/write/hex2Rgb.md

@@ -6,27 +6,18 @@ author: lvzl
 ## 颜色转rgb
 ```js
 function hex2Rgb(hex) {
-  let _hex = hex
-  // 如果不是字符串，直接返回传入的参数
-  if(Object.prototype.toString.call(_hex) !== '[object String]') { 
-    return _hex
-  }
+  const regx = /^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/
   // 如果第一个字符不是#，直接返回传入的参数
-  if (_hex.charAt(0) !== '#') {
-    return _hex
-  }
-  const REG_HEX = /^[0-9a-fA-F]{6}/g  // 正则用于校验除去 # 后面的字符是否符合要求
-  _hex = _hex.substring(1) // 除去 #
-  let c1, c2, c3
-  if (_hex.length === 3) {  // 特殊处理 #123 这种情况
-    _hex = _hex[0] + _hex[0] + _hex[1] + _hex[1] + _hex[2] + _hex[2] 
+  if (!hex || !regx.test(hex)) {
+    return hex
   }
-  if (REG_HEX.test(_hex)) {
-    c1 = parseInt(_hex.substring(0, 2), 16)
-    c2 = parseInt(_hex.substring(2, 4), 16)
-    c3 = parseInt(_hex.substring(4, 6), 16)
-    return `RGB(${c1},${c2},${c3})`
+  hex = hex.substring(1) // 除去 #
+  let rgbArr = []
+  if (hex.length === 3) {  // 特殊处理 #123 这种情况
+    rgbArr = [hex[0] + hex[0], hex[1] + hex[1], hex[2] + hex[2]]
+  } else {
+    rgbArr = [hex.substring(0,2), hex.substring(2,4), hex.substring(4,6)]
   }
-  return hex
+  return `rgb(${rgbArr.map(rgb => Number.parseInt(rgb, 16)).join(',')})`
 }
 ```

articles/write/jsonp.md

@@ -0,0 +1,31 @@
+---
+title: jsonp
+author: lvzl
+---
+
+```js
+function jsonp(url, data, callback) {
+  const symbol = 'jsonp' + Date.now()
+  const script = document.createElement('script')
+
+  let src = url.includes('?') ? src : url + '?'
+  let params
+  const dataKeys = Object.keys(data)
+  if(data && dataKeys.length > 0) {
+    params = dataKeys.map(key => `${key}=${encodeURIComponent(data[key])}`).join('&') + '&callback=' + symbol
+  } else {
+    params = 'callback=' + symbol
+  }
+
+  src += params
+
+  window[symbol] = function(data) {
+    delete window[symbol]
+    document.removeChild(script)
+    callback(data)
+  }
+
+  script.src = src
+  document.body.appendChild(script)
+}
+```

articles/write/xhr-request.md

@@ -0,0 +1,74 @@
+---
+title: 封装xhr请求
+author: lvzl
+---
+
+```js
+function ajax(options) {
+    // 参数读取
+    const {
+        url,
+        method,
+        async,
+        data,
+        timeout
+    } = options;
+
+    // 实例化
+    const xhr = new XMLHttpRequest()
+
+    return new Promise((resolve, reject) => {
+        // 成功
+        xhr.onreadystatechange = () => {
+            if (xhr.readyStatus === 4) {
+                if (xhr.status === 200) {
+                    // 逻辑
+                    resolve && resolve(xhr.responseText)
+                } else {
+                    reject && reject()
+                }
+            }
+        }
+
+        // 失败
+        xhr.ontimeout = () => reject && reject('超时')
+        xhr.onerror = () => reject && reject(err)
+
+        // 传参处理
+        let _params = []
+        let encodeData
+
+        if (data instanceof Object) {
+            for (let key in data) {
+                _params.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]))
+            }
+            encodeData = _params.join('&')
+        }
+
+        // methods处理
+        // get类型拼接到url
+        if (method === 'get') {
+            const index = url.indexOf('?')
+            if (index === -1) {
+                url += '?'
+            } else if (index !== url.length -1) {
+                url += '&'
+            }
+
+            url += encodeData
+        }
+
+        // 建立连接
+        xhr.open(method, url, async)
+
+        if (method === 'get') {
+            xhr.send(null)
+        } else {
+            xhr.setRequestHeader(
+                'Content-type', 'application/x-www-form-urlencoded;chartset=UTF-8'
+            )
+            xhr.send(encodeData)
+        }
+    })
+}
+```