码迷,mamicode.com
首页 > 其他好文 > 详细

每日思考(2020/01/02)

时间:2020-01-03 00:06:34      阅读:93      评论:0      收藏:0      [点我收藏+]

标签:app   它的   传参   ack   影响   height   content   names   了解   

题目概览

  • 对GBK和UTF-8的理解
  • 对z-index的理解
  • bind、call、apply的区别?

题目解答

对GBK和UTF-8的理解

  • 含义

    • GBK编码:是指中国的中文字符,其它它包含了简体中文与繁体中文字符,另外还有一种字符“gb2312”,这种字符仅能存储简体中文字符
    • UTF-8编码:它是一种全国家通过的一种编码,如果你的网站涉及到多个国家的语言,那么建议你选择UTF-8编码
  • 区别

    • UTF8编码格式很强大,支持所有国家的语言,正是因为它的强大,才会导致它占用的空间大小要比GBK大,对于网站打开速度而言,也是有一定影响的
    • GBK编码格式,它的功能少,仅限于中文字符,当然它所占用的空间大小会随着它的功能而减少,打开网页的速度比较快
  • 网页乱码

    • 如果网页源代码是gbk编写的,而内容中的文字是utf-8的,那么,此时打开浏览器就会出现HTML乱码。反之也会出现乱码。解决办法是使用专业的编辑软件进行HTML网页的编写。例如,尽量不要直接使用记事本进行编写

    • HTML网页编码是gbk,但是程序从程序库中调出呈现的是utf-8编码的内容也会造成编码乱码。此时,程序查询数据库数据显示数据进行转码即可

      mysql_query("SET NAMES 'UTF-8'") //将查询数据转码为UTF-8
    • 浏览器不能自动检测网页编码,造成网页乱码,解决办法是网页加入meta charset编码标签

      <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />

对z-index的理解

  • 取值

    /* 字符值 */
    z-index: auto;
    
    /* 整数值 */
    z-index: 0;
    z-index: 3;
    z-index: 289;
    z-index: -1;/* 使用负值降低优先级 */
    
    /* 全局值 */
    z-index: inherit;
    z-index: initial;
    z-index: unset;
  • 特性

    • 支持负值

    • 支持css3 animation动画

      @keyframes zIndex{
          0% {z-index:-1;}
          100% {z-index:51;}
      }
    • 两个div,无设置定位(z-index设置与否都是失效的)或者两个都已定位元素且z-index相同,层级关系按照文档流的顺序显示,后面的覆盖前面的

      <div style="width:100px;height:100px;background-color:red;position:relative;top:10px;"></div>
      <div style="width:50px;height:50px;background-color:blue;"></div>
      
      <div style="width:100px;height:100px;background-color:red;position:relative;z-index:1;"></div>
      <div style="width:50px;height:50px;background-color:blue;position:relative;top:-50px;z-index:1;"></div>
    • 如果两个元素都没有设置z-index,使用默认值auto,一个定位一个没有定位,那么定位元素覆盖未定位元素

      <div style="width:100px;height:100px;background-color:red;"></div>
      <div style="width:50px;height:50px;background-color:blue;position:relative;top:-50px;"></div>
      
      <div style="width:100px;height:100px;background-color:red;"></div>
      <div style="width:50px;height:50px;background-color:blue;position:relative;top:-25px;z-index:-5;"></div>
    • 如果父元素z-index有效,那么子元素无论是否设置z-index都和父元素一致,在父元素上方

      <div style="width:100px;height:100px;background-color:red;position:relative;z-index:10;">
          <div style="width:50px;height:50px;background-color:blue;position:relative;z-index:-5;"></div>
      </div>
    • 如果父元素z-index失效(未定位或者使用默认值),那么定位子元素的z-index设置生效

      <div style="width:100px;height:100px;background-color:red;position:relative;">
          <div style="width:50px;height:50px;background-color:blue;position:relative;z-index:-5;"></div><!--z-index为-5所以在父元素的后面>
      </div>
    • 如果兄弟元素的z-index生效,那么其子元素覆盖关系由父元素决定

      <div style="width:100px;height:100px;background-color:red;position:relative;z-index:5;">
          <div style="width:50px;height:250px;background-color:blue;position:relative;z-index:50;"></div>
      </div>
      <div style="width:100px;height:100px;background-color:yellow;margin-top:-40px;position:relative;z-index:10;">
          <div style="width:30px;height:150px;background-color:black;position:relative;z-index:-10;"></div>
      </div>

bind、call、apply的区别?

  • 相同:callapply都是为了解决改变this的指向。作用都是相同的,

  • 不同:只是传参的方式不同。

    • 除了第一个参数外,call可以接收一个参数列表

      //fun.call(obj, arg1, arg2, arg3,...) 指定作用域 同时执行函数
      Function.prototype.myCall = function (context = window) {
        context.fn = this;
        var args = [...arguments].slice(1);
        var result = context.fn(...args);
        // 执行完后干掉
        delete context.fn;
        return result;
      }
    • apply只接受一个参数数组。

      //fun.apply(obj, [arg1, arg2, arg3, ...]) 指定作用域 同时执行函数,后面的参数是数组
      Function.prototype.myApply = function (context = window) {
        context.fn = this;
        var result
        // 判断 arguments[1] 是不是 undefined
        if (arguments[1]) {
          result = context.fn(...arguments[1])
        } else {
          result = context.fn()
        }
        delete context.fn
        return result;
    • bind绑定完之后返回一个新的函数,不执行

      //const fb = fun.bind(obj) fb(arg1, arg2, ...) 返回一个函数,在使用 bind 之后,只会返回一个修改了作用域的函数,等再次调用时才会执行
      Function.prototype.myBind = function (context) {
        if (typeof this !== 'function') {
          throw new TypeError('Error')
        }
        var _this = this
        var args = [...arguments].slice(1)
        // 返回一个函数
        return function F() {
          // 因为返回了一个函数,我们可以 new F(),所以需要判断
          if (this instanceof F) {
            return new _this(...args, ...arguments)
          }
          return _this.apply(context, args.concat(...arguments))
        }
      }

每日思考(2020/01/02)

标签:app   它的   传参   ack   影响   height   content   names   了解   

原文地址:https://www.cnblogs.com/EricZLin/p/12142867.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!