2020年8月

众所周知，我们在开发中，经常会遇到跨域的问题，我们处理跨域的方案也有很多 1、 JsonP 2、 CORS 3、 Domain + Ifram 4、 Nginx 5、 PostMessage 6、 NodeJS中间件代理跨域 7、 Websocket协议跨域 8、 Location.hash + Ifram 9、 window.name + Ifram 等等以上方案。

今天我们要分享的是，IE9下，CORS不能解决跨域的情况下，如何处理跨域请求。

// 兼容IE9 CORS下POST请求被拒绝
  function getVerification_ie9(param) {
    jQuery.support.cors = true;
    $.ajax({
      url: window.protocol_online + '//' + window.hostname_online + '/remixed/service_admin_platform/sendValidCode',
      type: "post",
      headers: { 'Content-Type': 'application/json;charset=UTF-8' },
      dataType: "JSON",
      data: JSON.stringify({
        'telephone': param
      }),
      success: function (data) { },
      error: function () {
        toastShow('获取证码失败！')
      }
    });
  }

// 兼容IE9 CORS下POST请求被拒绝
  function sendUserInfo_ie9() {
    var tel = document.getElementById('telNumber').value;
    var verificationCode = document.getElementById('verificationCode').value
    var userName = document.getElementById('userName').value;
    var city = document.getElementById('city').value;
    var obj = JSON.stringify({
      'telephone': tel,
      'validCode': verificationCode,
      'name': userName,
      'address': city
    })
    jQuery.support.cors = true;
    $.ajax({
      url: window.protocol_online + '//' + window.hostname_online + '/remixed/service_admin_platform/saveCustomerInfo',
      type: "post",
      headers: { 'Content-Type': 'application/json;charset=UTF-8' },
      dataType: "JSON",
      data: obj,
      success: function (data) {
        if (data.code == 100) {
          document.getElementsByClassName('getting-information')[0].style.display = "none";
          document.getElementsByClassName('success-confirm')[0].style.display = "block";
          if (data.data) {
            document.getElementById('name').innerHTML = data.data;
          }
        } else if (data.code == 102) { // 预约试听体验课失败！
          toastShow(data.message || '验证码错误～')
        }
      },
      error: function () {
        toastShow('预约信息提交失败！')
      }
    });
  }

如上所述，最关键的地方想必大家应该也注意到啦。 jQuery.support.cors = true;

还有一种方案依然可以解决这类情况， 就是放弃用XMLHttpRequest对象，转而使用IE低版本支持的XDomainRequest对象。

下面用代码实现一下这种解决方案

function fetchIe9(url, options = {}){
  if (window.XDomainRequest) {
    return new Promise((resolve, reject) => {
      const method = options.method || 'GET';
      const timeout = options.timeout || 30000;
      let data = options.body || options.params || {};
      if (data instanceof Object) {
        data = JSON.stringify(data);
      }
      const XDR = new XDomainRequest();
      XDR.open(method, url);
      XDR.timeout = timeout;
      XDR.onload = () => {
        try {
          const json = JSON.parse(XDR.responseText);
          return resolve(json.data);
        } catch (e) {
          reject(e);
        }
        return reject({});
      };

      // fix random aborting: https://cypressnorth.com/programming/internet-explorer-aborting-ajax-requests-fixed/

      XDR.onprogress = () => {};
      XDR.ontimeout = () => reject('XDomainRequest timeout');
      XDR.onerror = () => reject('XDomainRequest error');
      setTimeout(() => {
        XDR.send(data);
      }, 0);
    });
  } else {
    // native fetch or polyfill fetch(XMLHttpRequest)
    // fetch...
  }
}

该问题是我在前半年实现我们部门的官网时，遇到的较为棘手的一个问题。但是本着不抛弃不放弃一个用户的原则，进行了这些困难的攻坚。 祝大家生活愉快

双向数据绑定原理分析

十几年前，前端还处于刀耕火种的时代，作为前端开发者，对于DOM的操作那是家常便饭了，可是当要修改的规模上升至一个很高的程度时，维护的成本就变得非常巨大，而消耗的性能也自然变得更大。这是不科学的，也是不太友好的。当前端进入到现代社会文明时，对于DOM的操作就变得慎之又慎，因此虚拟DOM就孕育而生。我们把所有的DOM节点抽象为DOM树的同时，也享受到了这样做带来的开发维护高效，以及页面相应的高性能体验。 双向数据绑定就是虚拟DOM的最大受益者。也很大程度上解放了前端的开发困境。下面我们对数据双向绑定（MVVM）进行原理探索。实现mini版本的双向数据绑定。

HTML片段

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div id='app'>
        <h3>姓名</h3>
        <p>{{name}}</p>
        <h3>年龄</h3>
        <p>{{age}}</p>
    </div>
</body>
</html>

JS片段

<script>
document.addEventListener('DOMContentLoaded', function(){
    let opt = {el:'#app', data:{name:'填写中...', age:28}}
    let vm = new Vue(opt)
    setTimeout(() => {
        opt.data.name = '许浩'
    }, 2000);
}, false)
class Vue{
    constructor(opt){
        this.opt = opt
        this.observe(opt.data)
        let root = document.querySelector(opt.el)
        this.compile(root)
    }
    // 为响应式对象 data 里的每一个 key 绑定一个观察者对象
    observe(data){ 
        Object.keys(data).forEach(key => {
            let obv = new Observer() 
            data["_"+key] = data[key]
            // 通过 getter setter 暴露 for 循环中作用域下的 obv，闭包产生
            Object.defineProperty(data, key, {
                get(){
                    Observer.target && obv.addSubNode(Observer.target);
                    return data['_'+key]
                }, 
                set(newVal){
                    obv.update(newVal)
                    data['_'+key] = newVal
                }
            })
        })
    }
    // 初始化页面，遍历 DOM，收集每一个key变化时，随之调整的位置，以观察者方法存放起来    
    compile(node){
        [].forEach.call(node.childNodes, child =>{
            if(!child.firstElementChild && /\{\{(.*)\}\}/.test(child.innerHTML)){
                let key = RegExp.$1.trim()
                child.innerHTML = child.innerHTML.replace(new RegExp('\\{\\{\\s*'+ key +'\\s*\\}\\}', 'gm'),this.opt.data[key]) 
                Observer.target = child
                this.opt.data[key] 
                Observer.target = null
            }
            else if (child.firstElementChild) 
            this.compile(child)
        })
    }    
}
// 常规观察者类
class Observer{
    constructor(){
        this.subNode = []    
    }
    addSubNode(node){
        this.subNode.push(node)
    }
    update(newVal){
        this.subNode.forEach(node=>{
            node.innerHTML = newVal
        })
    }
}
</script>