zoukankan      html  css  js  c++  java
  • 每日思考(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
      
  • 相关阅读:
    53. Maximum Subarray
    64. Minimum Path Sum
    28. Implement strStr()
    26. Remove Duplicates from Sorted Array
    21. Merge Two Sorted Lists
    14. Longest Common Prefix
    7. Reverse Integer
    412. Fizz Buzz
    linux_修改域名(centos)
    linux_redis常用数据类型操作
  • 原文地址:https://www.cnblogs.com/EricZLin/p/12879861.html
Copyright © 2011-2022 走看看