每日思考（2020/05/12）

题目概览

• 怎么在IE8及以下实现HTML5的兼容？
• 对响应式设计的理解是什么？
• 对深浅拷贝的理解？并实现一个对数组和对象深拷贝的方法

怎么在IE8及以下实现HTML5的兼容？

• 手动创建标签

  /*默认的标签的类型都是行级元素，当设置标签样式时，首先需要将行级元素转换为块级元素，即设置display：block*/
  document.createElement("header");
  document.createElement("nav");
  document.createElement("main");
  document.createElement("article");
  document.createElement("aside");
  document.createElement("footer");
  

• 引入第三方插件html5shiv.js

对响应式设计的理解是什么？

• 原因：
  • 即便是PC或Mac用户，有查显示只有一半的人会将浏览器全屏显示，而剩下的一般人使用多大的浏览器，很难预知
  • 台式机、投影、电视、笔记本、手机、平板、手表、VR……智能设备正在不断增加，“主流设备”的概念正在消失
  • 屏幕分辨率正飞速发展，同一张图片在不同设备上看起来，大小可能天差地别
  • 鼠标、触屏、笔、摄像头手势……不可预期的操控方式正在不断出现
• 四个层次
  • 同一页面在不同大小和比例上看起来都应该是舒适的；
  • 同一页面在不同分辨率上看起来都应该是合理的；
  • 同一页面在不同操作方式（如鼠标和触屏）下，体验应该是统一的；
  • 同一页面在不同类型的设备（手机、平板、电脑）上，交互方式应该是符合习惯的。
• 基本规则
  • 可伸缩的内容区块：内容区块的在一定程度上能够自动调整，以确保填满整个页面
  • 可自由排布的内容区块：当页面尺寸变动较大时，能够减少/增加排布的列数
  • 适应页面尺寸的边距：到页面尺寸发生更大变化时，区块的边距也应该变化
  • 能够适应比例变化的图片：对于常见的宽度调整，图片在隐去两侧部分时，依旧保持美观可用
  • 能够自动隐藏/部分显示的内容：如在电脑上显示的的大段描述文本，在手机上就只能少量显示或全部隐藏
  • 能自动折叠的导航和菜单：展开还是收起，应该根据页面尺寸来判断
  • 放弃使用像素作为尺寸单位：用dp尺寸等方法来确保页面在分辨率相差很大的设备上，看起来也能保持一致。同时也要求提供的图片应该比预想的更大，才能适应高分辨率的屏幕。否则，就会像我的Photoshop一样出现一下这种情况

对深浅拷贝的理解？并实现一个对数组和对象深拷贝的方法？

• 为什么要进行拷贝：因为对象是引用类型，所以赋值时的操作仅是赋予相同的地址，当对其中一个对象进行操作时，就会影响其他的对象。解决这个问题就需要拷贝了

  var obj1={
      value: 'a'
  }
  var obj2 = obj1;
  obj2.value='b';
  console.log(obj1);//{ value: 'b' }
  

• 浅拷贝

  //使用原生的Object.assign() 方法就可以实现浅拷贝
  var obj1={
      value: 'a'
  }
  var obj2 = Object.assign({},obj1);
  obj2.value='b';
  console.log(obj1);//{ value: 'a' 
  
  

  //但是如果拷贝的源对象当中包含对象时，OBject.assign()方法只会拷贝对象的引用地址
  var obj1={
      value: 'a',
      obj3:{
          value2: 'c'
      }
  }
  var obj2 = Object.assign({},obj1);
  obj2.obj3.value2='b';
  console.log(obj1);//{ value: 'a', obj3:{ value2: 'b' } }
  

• 深拷贝：如果要拷贝的对象中包含对象，就需要深拷贝了，一般使用原生的方法JSON.parse(JSON.stringify(obj))

  j1={
      value: 'a',
      obj3:{
          value2: 'c'
      },
      arr:[1,2,3]
  }
  var obj2 = JSON.parse(JSON.stringify(obj1));
  obj2.obj3.value2='b';
  obj2.arr[0]= "a";
  console.log(obj2);//{ value: 'a', obj3:{ value2: 'b' }, arr:['a',2,3] }
  console.log(obj1);//{ value: 'a', obj3:{ value2: 'c' }, arr:[1,2,3] } 没有发生改变
  

• 实现一个对数组和对象的深拷贝的方法

  var obj={
      name: 'znl',
      age: 18,
      friend:{
          name: 'borys',
          age: 20
      },
      arr:[1,2,[3,4]]
  }
  
  function copy(obj){
      var type=Object.prototype.toString.call(obj);
      if(!(type == '[object Array]' || type == '[object Object]')){
          return 'Type Error!';
      }
      return JSON.parse(JSON.stringify(obj));
  }
  
  var obj2= copy(obj);
  console.log(obj.friend === obj2.friend)//false
  console.log(obj.arr === obj2.arr)//false