Daily Reflections (2020/01/02)

Topic Overview

GBK and understanding of the UTF-8
Z-index of understanding
bind, call, apply the difference?

Subject to answer

GBK and understanding of the UTF-8

meaning
- GBK encoding: refers to China in Chinese characters, it contains other Simplified Chinese and Traditional Chinese characters, in addition to one of the character "gb2312", this character can only store Simplified Chinese characters
- UTF-8 encoding: it is a coding an all countries through, and if your site is related to the languages of many countries, it is recommended that you select UTF-8 encoding
the difference
- UTF8 encoding format is very strong, supported languages of all countries, precisely because of its strong, will cause it to take up space than the size of GBK large, open sites for speed, but also have a certain influence of
- GBK encoding format, less its functions, in Chinese characters, of course, it takes up space as it will only reduce the function, open web pages faster
Garbled pages
- If the page source code is gbkwritten, and the contents of the text is utf-8, then, then open the browser HTML garbled. On the contrary it will be garbled. The solution is to use professional editing software for writing HTML pages. For example, try not to be written directly using Notepad
- HTML page encoding is gbk, but the program from the library to bring up the presented content is encoded in utf-8 encoding can also cause garbled. In this case, the database query program display data transcoded
```
mysql_query("SET NAMES 'UTF-8'") //将查询数据转码为UTF-8
```
- Browser can not automatically detect the page encoding, resulting in garbled pages, the solution is added to the page meta charsetcoding tag
```
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
```

Z-index of understanding

The value

/* 字符值 */
z-index: auto;

/* 整数值 */
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1;/* 使用负值降低优先级 */

/* 全局值 */
z-index: inherit;
z-index: initial;
z-index: unset;

characteristic

Support negative

Support css3 animation animation

@keyframes zIndex{
    0% {z-index:-1;}
    100% {z-index:51;}
}

Div two, without a positioning (z-index is set or not fail), or the positioning element and the two are the same z-index, document hierarchy displayed in the order flow, behind the front cover

<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>

If two elements are not disposed z-index, use the default auto, without locating a positioning, the positioning element is not covered with the positioning element

<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>

If the parent element z-index is valid, regardless of whether the child elements have set the z-index, and parent elements consistent, above the parent element

<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 if the parent element failure (not positioning or use the default value), then the locator element z-index settings take effect

<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>

If the sibling elements of z-index into force, then the child is determined by the relationship between the elements covered with the parent element

<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 the difference?

The same: calland applyare made to address changing thispoint. The role is the same,

Different: just a different way of parameter passing.

In addition to the first parameter, callyou may receive a parameter list

//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;
}

applyOnly accepts a parameter array.

//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;

bindReturns a new function after completion of the binding is not performed

//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))
  }
}