The event coordinates

Window. innerHeight = height + padding + border + horizontal scrollbar height OuterHeight = height + padding + border + horizontal scrollbar height + toolbar height Element.clientWidth = width + padding Element.clientHeight = height + padding Element.offsetWidth = width + padding + border Element.offsetHeight = height + padding + border

window apis

Window.getcomputedstyle (element) Returns all CSS attributes of the element (read-only) Window.postMessage () cannot pass function type data, Cannot pass cannot jsonized data window.open() Automatically adds the current Origin window.beforeunload() Cannot customize popups without Origin

Element apis

Element. GetBoundingClientRect () returns the Element size and its relative to the position of the window, has a top, bottom, left and right Element. GetClientRects () returns a collection of TextRectangle, TextRectangle object contains the top, left, bottom, right, width, height of six attributes Element. RequestFullscreen () into the full screen, Cannot communicate with F11 fullscreen Element. ExitFullScreen () exits full screen

umd,commonJS,ES6

Umd common module definition, a combination of AMD and CommonJS (Server modular specification).

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['b'], factory);
    } else if (typeof module === 'object' && module.exports) {
        // Node. Does not work with strict CommonJS, but
        // only CommonJS-like environments that support module.exports,
        // like Node.
        module.exports = factory(require('b'));
    } else {
        // Browser globals (root is window)
        root.returnExports = factory(root.b);
    }
}(this, function (b) {
    //use b in some fashion.

    // Just return a value to define the module export.
    // This example returns an object, but the module
    // can return a function as the exported value.
    return {}
}));
Copy the code

CommonJS is a specification for server modules that load modules using the require method, which reads a file and executes it, returning the module.exports object inside the file. ES6, load module import, export module export.

New operator

The new operator does the following three steps:

  1. A new empty object is created
  2. Then make the empty object’s __proto__ point to the function’s prototype
  3. Pass in the object as this of the function, or return the content of the return if it is an object, or return the object created if it is not
function Person1(name){
    this.name = name;
}
function Person2(name){
    this.name = name;
    return this.name;
}
const person1 = new Person1("yuer");  //Person1 {name: "yuer"}
const person2 = new Person2("yuer");  //Person2 {name: "yuer"}
Copy the code

drag

The default behavior of the onDragEnter and onDragover events is to reject any drag-and-drop elements. Therefore, we must prevent the default behavior of the browser, e.preventDefault(). Ondragleave may trigger repeatedly, and the project experimented with a solution to determine whether the event. Target is currently out of the dom element.

Multiple nested objects Multiple nested objects

1. A && a. && A.B.C / / if the property is not null, you can use object deconstruction 2. Var {b: {c: {d: {e} = {}} = {}} = {}} = a (3) the let e; Try {e = A.B.C.D.E} catch (error) {} 4Copy the code

Mp4 and GIF

Why MP4 is better than GIF:

  1. The MP4 takes up less space for the same size and picture quality
  2. Supports streaming media transmission
  3. Support hard decoding
  4. For the same size, it provides higher picture quality and a smoother experience

The little knowledge

= 0 &: even &1 = 0 / odd &1 = 1 Void 0: is an alternative to undefined. In other words, void 0 is equivalent to undefined to prevent overwriting. Number(null) // 0 Number(undefined) // NaN div tabIndex ='0'Copy the code