May-周记（1）

1.封装一个ajax

// 封装一个ajax原生写法
  function ajax(opts){
     // 1. 创建一个客户端请求服务器
      var  xhr=new XMLHttpRequest();
      // 2. 建立连接的地址
      // xhr.open('GET','/api/a.js',false);
      // 3. 客户端请求服务器发送数据
      // xhr.send(null);
       // 客户端请求数据
      var urlStr=''
      for(var key in opts.data){
        urlStr +=`${key}=${opts.data[key]}&`
      }
      urlStr=urlStr.substring(0,urlStr.length-1);
      // 判断type的值发送数据
      if(opts.type.toLowerCase()==='get'){
        xhr.open('GET',opts.url+'?'+urlStr,true);
        xhr.send();
      }
      if(opts.type.toLowerCase()==='post'){
        xhr.open('GET',opts.url+'?'+urlStr,true);
        xhr.sendRequestHeader('Content-type','application/x-www-form-urlencoded');
        xhr.send(urlStr);
      }
      // 4. 收到数据后监听状态的改变
      /**readyState   对象状态值 一旦改变就触发onreadystatechange()函数

0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）

1 (初始化) 对象已建立，尚未调用send方法

2 (发送数据) send方法已调用，但是当前的状态及http头未知

3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，

4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据 */
      xhr.onreadystatechange=function(){
        if(xhr.readyState==4){
          if(xhr.status==200){//建立通信成功
            // console.log(xhr.responseText); 从服务器进程返回数据的字符串形式。
            opts.success(JSON.parse(xhr.responseText));
          }
        }else if(xhr.readyState==4&&xhr.status!==200){
          opts.error()
        }
      }
     
     }
 

  btn.addEventListener('click',function(){
    ajax({
      url:'1.json',
      type:'POST',
      success:function(data){
        console.log(data); 
      },
      error:function(error){
        console.log('发生了错误...'); 
      }  
    })
  },false)
复制代码

2.判断两个对象相等

var obj={
  a:1
}
var obj1={
  a:1
}
var obj2={
  a:2
}
// console.log(JSON.stringify(obj)===JSON.stringify(obj2));
复制代码

3. 经典引用

var a = {n: 1};
var b = a;
a.x = a = {n: 2};

console.log(a.x) 	//undefined
console.log(b.x) //{n:2}
/**1、优先级。.的优先级高于=，所以先执行a.x，堆内存中的{n: 1}就会变成{n: 1, x: undefined}，改变之后相应的b.x也变化了，因为指向的是同一个对象。
2、赋值操作是从右到左，所以先执行a = {n: 2}，a的引用就被改变了，然后这个返回值又赋值给了a.x，需要注意的是这时候a.x是第一步中的{n: 1, x: undefined}那个对象，其实就是b.x，相当于b.x = {n: 2} */
复制代码

4.经典闭包

var data = [];

for (var i = 0; i < 3; i++) {
  data[i]=(function(j){
    return function(){
      console.log(j);
    }
  })(i)

//   (function (j) {
//     data[i]= function(){
//         console.log(j);
//     }
// })(i);
  
}

data[0]();//0
data[1]();//1
data[2]();//2

2 for(var i=0;i<btns.length;i++){
    btns[i].onclick = (function(tmpI){
       return function(){
            console.log(tmpI+1);
       } 
    })(i);
}
复制代码

5.arguments 对象

/**arguments对象 */
function bar() {
  Constructor = [].shift.call(arguments);
  console.log( Constructor);//1
  console.log(arguments);//[Arguments] { '0': 2, '1': 3 }
  for(var i=0;i<arguments.length;i++){
    console.log(arguments[i]);
  }
}
bar(1,2,3);[1,2,3]
 arguments = {
       0: 'foo',
       1: 'kevin',
       2: 18,
       length: 3
  }
  // 因为arguments是类数组对象，所以可以用for循环
  var args = [];
  for(var i = 1, len = arguments.length; i < len; i++) {
      args.push(`${arguments[i]}`)
  }
  console.log(args.toString());//'kevin,18'
复制代码

6.事件冒泡

 function bindEvent(el,type,fn){
    el.addEventListener(type,fn)
  }
  var a=document.getElementById('link');
  bindEvent(a,'click',function(e){
    e.stopPropagation();//阻止冒泡行为，触发父级的click函数行为
    e.preventDefault();//阻止默认跳转行为
    alert('3')
  })
复制代码

7. 解决跨域的几种方式 CMD Common.js区别 性能优化 安全性 xss 事件节流