1.JS Why single threading
A simple reason is that js is designed to do some simple form verification, which does not require multiple threads at all, and single threads can fully handle the job. Even if the front-end developed rapidly and the carrying capacity was increasing, it did not develop to the point where it was necessary to multi-thread.
And there is a main reason, imagine if js is multi-threaded, at runtime multiple threads at the same time to operate on DOM elements, then the specific thread is the main problem is a problem, the thread scheduling problem is a more complex problem.
The new HTML5 standard allows the use of new Worker to open a new thread to run a separate js file script, but in this new thread there are strict requirements for the functions that can be used, such as he can only use ECMAScript, can not access the DOM and BOM. This limits the possibility of dead multiple threads working on DOM elements at the same time.
The element width and height are set to 0, set by the border attribute, so that the border color in the other three directions is transparent or consistent with the background color, and the color of the remaining border is set to the desired color.
I usually only use two ways to locate or flex, which I think is enough.
The parent controls the centering of the subset
Hides the scroll bar of the div element
div::-webkit-scrollbar as a whole
div::-webkit-scrollbar-thumb The small square inside the scrollbar that can be moved up and down (or left to right, depending on whether it is a vertical or horizontal scrollbar)
div::-webkit-scrollbar-track track for scrollbars
div::-webkit-scrollbar-button buttons at both ends of the track, allowing to fine-tune the position of small squares by clicking on them.
div::-webkit-scrollbar-track-piece inner track, middle part of the scrollbar
div::-webkit-scrollbar-corner corner, the intersection of two scrollbars
div::-webkit-resizer The small control used to resize the element by dragging on the intersection of the two scroll bars
Note that this scheme has compatibility issues, generally need to hide the scroll bar when I use a color block through the positioning cover, or the child element is enlarged, the parent element uses overflow-hidden to cut off the scroll bar part. Violent and direct.
When using audio or video playback, individual models cannot achieve automatic playback, you can use the following code hack.
display-none: Elements do not take up space, are not displayed on the page, and child elements are not displayed.
opacity-0: The element transparency will be 0, but the element still exists, and the bound event is still valid and can still trigger execution.
visibility-hidden: The element is hidden, but the element still exists, occupies space, and the event in the page cannot trigger the element.
When it comes to front-end engineering, many people think of webpack, which is not right, webpack is only one part of front-end engineering. He helped us solve most of our problems throughout the engineering process, but he didn’t solve all of them.
Front-end engineering is a means of improving efficiency and reducing costs through tools.
In recent years, it has been widely concerned and discussed, the reason is mainly because of the continuous improvement of modern front-end application functional requirements, increasingly complex business logic, as the only indispensable technology in the current Internet era, front-end can be said to occupy half of the entire development industry. From traditional websites, to the current H5, mobile apps, desktop apps, and mini programs. Front-end technology is almost omnipotent and comprehensive.
Behind these appearances, in fact, the industry’s requirements for developers have undergone earth-shaking changes, in the past front-end writing demo, set of templates, adjust the page of this way of slash-and-burn has completely not met the current requirements for development efficiency, front-end engineering is in such a background to be put on the table, become one of the necessary means for front-end engineers.
Generally speaking, front-end engineering includes processes such as project initialization, project development, submission, build, deployment, testing, monitoring, etc. Engineering is to solve these problems from an engineering perspective. For example, for project initialization, we generally use npm init, create page templates using plop, we like to use ES6+ development, but need to be coded into ES5 through babel, continuous integration we use git/ci cd, but in order to maintain the development specification we introduced ESLint, deployment generally uses git/cd or jenkins and so on.
Most tags in html are not editable, but when the contenteditable attribute is added, the tags become editable.
However, after changing the label to an editable state through this property, there is only the input event, not the change event. Nor can you control the maximum length by maxlength like a form. I also forget under what circumstances I used it, so I’ll make it up later.
This is a css attribute, which I generally call a css expression. The value of css can be calculated. The most interesting thing is that he can calculate the difference between different units. A feature that works well, the downside is that it is not easy to read. The receiver can’t see at a glance what 20px is.
Gets the current time millisecond value
Create a compatibility issue for the Date object.
Proxy means proxy, which I usually call an interceptor, which can intercept an operation on an object. The usage is as follows, the object is created by new, the first parameter is the intercepted object, and the second parameter is the description of the object operation. After instantiation, a new object is returned, and when we operate on this new object, we call the corresponding method in our description.
Proxy differs from Object.definedProperty.
Object.defineProperty can only listen for the reading and writing of properties, while Proxy can also listen for the deletion of properties, the call of methods, etc. in addition to reading and writing.
Usually we want to monitor the changes in the array, basically rely on the way to override the array method to implement, which is also the implementation of Vue, and Proxy can directly monitor the array changes.
Proxy regulates the reading and writing of objects in a non-intrusive way, while defineProperty requires defining the properties of objects in a specific way.
He is a new object added to ES2015, pure static objects can not be drawn, can only be called by static methods, similar to the Math object, can only be called in a manner similar to Math.random().
Inside Reflect, there are a series of low-level operations on objects, a total of 14, of which 1 is obsolete and 13 remain.
The static method of Reflect is exactly the same as the method in the Proxy description. That is, the Reflect member method is the default implementation of Proxy to process objects.
The default method of the Proxy object is to call the processing logic inside the Reflect, that is, if we call the get method, then internally, Reflect is to give the get unchanged to Reflect, as follows.
Reflect and Proxy have no absolute relationship, and we generally put the two of them together to facilitate the understanding of the two.
So why is there a Reflect object, in fact, his biggest use is to provide a set of unified operation of the Object API.
To determine whether an object has a certain property, you can use the in operator, but it is not elegant enough, you can also use Reflect.has(obj, name); To remove a property you can use delete, or you can use Reflect.deleteProperty(obj, name); To get all property names you can use Object.keys, or you can use Reflect.ownKeys(obj); We recommend using Reflect’s API to manipulate objects, because he is the future.
By obtaining the key-value pair of parameters in url by using the replace method, you can quickly parse the get parameter.
You can obtain the properties on location objects such as protocol, pathname, origin, etc. by creating a tag and assigning href attributes to a tag.
localStorage is the permanent storage space provided by H5, which can generally store up to 5M data and supports cross-domain isolation, which greatly improves the possibility of front-end development. The use of localStorage is known to many people as setItem, getItem, removeItem, but he can also operate directly as a member.
Continued storage of localStorage without overwriting other values when full, but QuotaExceedError, and the currently stored value is emptied. The browser supports storing 5M data under each domain name.
The difference between sessionStorage and localStorage is that there is a current session, many people understand that the browser is closed, which is not right, assuming that you store sessionStorage on page A, and the new tab pastes the link of page A into the open page, and sessionStorage does not exist.
So the condition of the existence of sessionStorage is the jump between pages, A page stores sessionStorage, he has to open another page of the same domain through hyperlinks or location.href or window.open to access sessionStorage.
This is especially important in the hybrid development of nested H5 development mode, if you open the page in the way of a newly opened webview, it is likely that sessionStorage will not exist.
If the cookie is not set when setting, it means that it is a session cookie, I used to think that the session cookie disappeared when I closed the browser, however… Hi mention bug one.
This is true for Windows or Android in most cases. However, in macOS or ios systems, closing the browser does not clear the session cookie, and the browser process is ended.
The template string supports adding a function in front, the first argument is an array of fixed contents, followed by the arguments are the variables passed in, and the return value of the function is the value that the template string really shows. However, this feature personally feels useless.
Whether the string contains a string, this is not to say, in fact, it is an alternative to indexOf, which is more elegant to use,
Whether the string starts with a string, I usually use it to determine whether the url has http
Whether the string ends with a string. This is especially useful when judging suffixes.
Gets a string that repeats the number number of times. Forehead… I don’t know when it will work, but I usually use it to make test data.
The given string is stitched to a specified length at the trailing, with the first argument being the length and the second argument being the value used for stitching.
The first parameter is length and the second parameter is the value used for stitching with the given string at the header to specify the length. The first part to make up 0?
As many people should know, the array is converted to Set, and then converted to an array, but this deduplication method can only remove the basic data type of the array.
In general, we commonly use Object.keys, returning an array of keys of an object, in fact, there are Object.values, returning an array of object values, Object.entries will convert the object into an array, each element is an array of key-value pairs, you can use this function to quickly convert the object into a Map.
Gets the description information for the object
When Object.assigns copy, the properties and methods of the object are copied as normal properties, and the complete description information is not copied, such as this.
Use Object.getOwnPropertyDescriptors to get the full description
The maximum number that JavaScript can handle is 2 to the 53rd power – 1, which we can see in Number.MAX_SAFE_INTEGER.
Larger numbers can’t be handled, and ECMAScript2020 introduces the BigInt data type to solve this problem. By putting the letter n at the end, you can calculate big data.
BigInt can use arithmetic operators to add, subtract, multiply, divide, remain, and power operations. It can be constructed from numbers and hexadecimal or binary strings. It also supports bitwise operations such as AND, OR, NOTs, and XOR. The only invalid bitwise operation is the zero-padding right-shift operator.
BigInt is a large integer, so he can’t be used to store decimals.
Assuming that variable a does not exist, we want to give the system a default value, and generally we will use || Operator. But in JavaScript a blank string, 0, false will all perform || operators, so ECMAScript2020 introduced the merge null operator to solve the problem, allowing the default value to be used only when the value is null or undefined.
Business code often encounters such a situation, a object has a property b, b is also an object has a property c,
We need to access c, often written as a.b.c, but if f doesn’t exist, it goes wrong.
ECMAScript2020 defines an optional chain operator to solve the problem by using the . Before adding one? Make the key name optional
import is a set of ES Module module system defined in ECMAScript 2015, syntax features Most browsers have supported, by adding type=module attributes to the script tag you can use the ES Module standard to execute javascript code.
Under the ES Module specification, JavaScript code is run in use strict. Each ES Module runs in a separate scope, which means that variables do not interfere with each other. External js files are requested through CORS, so we are required to support cross-domain requests for external js file addresses, that is, the file server must support CORS. We can enter the following code in any website console.
It can be found that https://cdn.bootcdn.net/ajax/libs/react/17.0.1/cjs/react-jsx-dev-runtime.development.js resources were requested in the network.
The script tag of ES Module delays script loading until the web page has requested the resource before executing, in the same way that resources are loaded using deffer.
It should be noted that when importing {} from ‘xx’ to import a module, it is not a deconstruction of the object, but a fixed syntax of import, which many people are prone to mistake.
And ECMAScript2020 import began to support the dynamic import function, before the import can only be written on the top of the module code, the beginning to declare the module depends on other modules. After supporting dynamic introduction, you can introduce the corresponding modules on demand, which we have already used in SPA. A dynamic import returns a promise.
a.js
b.js
In JS, the Number type is actually a double type, and there is a precision problem when operating decimals. Because computers only know binary, when performing operations, they need to convert other base values into binary and then calculate them
Decimals are infinite when expressed in binary.
The fractional part of the double-precision floating-point number supports up to 53 bits of binary bits, so after the two are added, the binary number truncated due to the limitation of the decimal place of the floating-point number is converted to decimal, which becomes 0.30000000000000004, which will produce errors when performing arithmetic calculations.
ES6 adds a very small constant above the Number object, Number.EPSILON. According to the specification, it represents the difference between 1 and the smallest floating-point number greater than 1. For 64-bit floating-point numbers, a minimum floating-point number greater than 1 is equivalent to a binary 1.00: 001, there are 51 consecutive zeros after the decimal point. Subtracting this value from 1 equals the -52 power of 2.
Number.EPSILON is actually the smallest precision that JavaScript can represent. If the error is less than this value, it can be considered meaningless, that is, there is no error.
The purpose of introducing such a small amount is to set an error range for floating-point number calculations. We know that floating-point number calculations are imprecise.
Number.EPSILON can be used to set acceptable error ranges. For example, if the error range is set to the -50 power of 2 (i.e. Number.EPSILON * Math.pow(2, 2)), that is, if the difference between two floating-point numbers is less than this value, we consider the two floating-point numbers to be equal.
Author:
Link: https://juejin.cn/post/6908698827033837575
Below add Nealyang friends to reply to “add group”.
If you find this article helpful to you, I would like to ask you to do me 2 small favors:
Likes and looks are the biggest support