Daily Reflections (2019/12/30)

Topic Overview

• To <form>understand enctype attribute tag
• CSS priority is how to calculate the
• Why are not equal in JavaScript 0.1 0.2 0.3?

Subject to answer

On the <form>label of enctypeunderstanding property

• enctypeDefinition and usage: enctypeproperties specified before being sent to the server how to encode the form data. By default, the form data is encoded as " application/x-www-form-urlencoded." That is, before being sent to the server, all characters are encoded (converted to spaces "+" plus sign, symbol into a special ASCII HEXvalue)

• enctype What value

  value	description
  application/x-www-form-urlencoded	Coding all the characters (default) before sending
  multipart/form-data	Not the character encoding. When using the form contains file upload control, you must use this value.
  text/plain	Spaces converted to "+" plus, but not a special character encoding.

• Explanation

  • The so-called set of MIME encoding form, is to set the value of enctype. The default value is "application / x-www-form-urlencoded", the default value does not support file uploads. If you want to get the value of the respective form fields Request by the server object, the property should be set to enctype application / x-www-form-urlencoded values ​​(i.e., default settings may not be displayed)

  • To upload a file, it is sure to set encotype multipart / form-data is provided after enctype multipart / form-data value, no character code, the data is sent to the server in the form of binary, then if request can not be accessed directly to the corresponding values ​​of the form, but rather by the stream object stream, decoding the transmitted binary data server, thereby reading the data.

    <form action="demo_post_enctype.html" method="post" enctype="multipart/form-data">
      First name: <input type="text" name="fname"><br>
      Last name: <input type="text" name="lname"><br>
      <input type="submit" value="提交">
    </form>

CSS priority is how to calculate the

• Selector species

  • Label name selection, such as: p{}that the direct use of HTML tags as a selector, especially of the pseudo-element tag name is equivalent to the selector
  • Class selector as .polaris {}, pseudo-class, attribute selector equivalent to the class of especially
  • ID selector as #polaris {},
  • Descendant selectors as .polaris span img {}, Progeny thief is actually a plurality of selectors coupled with the intermediate space to find the specific tag to be controlled
  • Group selector, such as a div, span, img {}, group selector is actually a simplified wording for CSS, but have the same definitions different selectors together, saving a lot of code

• Especially of - priority calculation

  • Meaning: The specific degree indicates a degree of importance css selector expression, a formula can be calculated by a numerical value, the larger the number, the more important.
  • A selector for css expression, especially aboard encounters an id value of 100 was added, especially met aboard a class 10 degree value is added, encounters an element specific to go out into the degree value added 1
  • !importantThe highest priority, above all else above. * Minimum selector, less than all,

• Positioning the principle of a descendant selector: CSS browser to find the match is not left to right, but right to left to find. For example div # divBox p span.red {color: red;}, browser search order is as follows: first find all html class = 'red' span elements, after finding, then find their parents if a p-element element, further determines whether there is a div element divBox id, and if there is a match of the parent element p. Benefits browser from right to left to find is to filter out some independent style rules and elements as soon as possible

• Simple, efficient CSS:

  • Do not use a label name before the ID selector, because the ID is the only choice, plus div instead of adding unnecessary match

  • Do not use before class selector label name, with the first, but if you define multiple .red, and in a different style elements are not the same, it can not be removed, such as your css file is defined as follows

    p.red{color:red;}  
    span.red{color:#ff00ff} 

  • Minimize the use of hierarchical relationships, such as #divBox p .red{color:red;}written.red{..}

  • Instead of using a class hierarchy, such as #divBox ul li a{display:block;}written.block{display:block;}

Why JavaScript 0.1 + 0.2 is not equal to 0.3?

• Root cause: the number of significant digits after the decimal EcmaScrpt specification Type Definition Number of 64-bit floating-point numbers follow the rules defined in IEEE754-2008 up to 52 leads to loss of calculation accuracy problems arise

• Analysis: encoding data stored inside the computer when simply not accurate 0.1 0.1 inside the computer, but there is a rounding error of 0.1. When the code is compiled or interpreted, 0.1 have been rounded to the digital computer inside a very close thereto, so that the calculation has not yet begun, a small rounding errors have been generated. This is the reason is not equal to 0.1 + 0.2 0.3

  对于 0.1 + 0.2 这样的运算，操作数会先被转成二进制，然后再计算：
  0.1 => 0.0001 1001 1001 1001…（无限循环）
  0.2 => 0.0011 0011 0011 0011…（无限循环）

• Results: The fractional part of a double precision floating-point support up to 52, so the two get so 0.0100110011001100110011001100110011001100 ... a bunch of binary digits due to the limitations of floating-point decimal places and truncated after the addition, at this time, then convert it to decimal , it became .30000000000000004

  console.log(0.1+0.2==0.3);//false

• Solution

  • For JS, this value is usually 2 ^ -52, in ES6, there is provided a property: Number.EPSILON, and n is equal to the value 2 ^ -52. This value is very, very small, in the bottom of the computer operation has helped us better, and infinitely close to 0, but not equal to 0. Analyzing this time we only (0.1 + 0.2) of less than -0.3 Number.EPSILON, within the scope of this error can be determined as 0.1 + 0.2 0.3 === true

    function numEqual(a,b){
    //abs()绝对值
        return Math.abs(a-b)<Number.EPSILON;
    }
    var a=0.1+0.2,b=0.3;
    console.log("Number.EPSILON:",numEqual(a,b));//true

  • The calculated number N-th power lift 10 times N divided by 10 to the power. Generally on the line by 1000

    var equl=(0.1*1000+0.2*1000)/1000==0.3;
    console.log("10的N次方倍:",equl);//true

  • toFixed () method: results of the calculation with the accuracy of floating point computation result before the determination, because during the reduction of the accuracy of the automatic always rounding

    //parseFloat((数学表达式).toFixed(digits))； toFixed() 精度参数须在 0 与20 之间
    parseFloat((0.1 + 0.2).toFixed(10))//结果为0.3
    parseFloat((0.3 / 0.1).toFixed(10)) // 结果为 3  
    parseFloat((0.7 * 180).toFixed(10))//结果为126
    parseFloat((1.0 - 0.9).toFixed(10)) // 结果为 0.1   
    parseFloat((9.7 * 100).toFixed(10)) // 结果为 970 
    parseFloat((2.22 + 0.1).toFixed(10)) // 结果为 2.32

  • Not all have floating-point rounding error. Accurately represent binary digits and the denominator is limited to a multiple of decimal 2, such as 0.5, 0.5 there is no rounding error inside the computer. Therefore, 0.5 + 0.5 1 ===