This article was adapted from: Lebyte
This article mainly explains: front-end knowledge
For more front-end related information, you can pay attention to the public number “LeByte” send: 999
1. One line of CSS text exceeds…
2. Multiple lines of text beyond display…
3. The scroll bar of the IOS phone container does not slide smoothly
4. Modify the scroll bar style
Hide the scroll bar for the div element
5. Write a triangle script using the CSS
The width and height of the element is set to 0, and the border property is set to make the other three directions transparent or consistent with the background color, and the remaining border color is set to the desired color.
6. Solve the problem that ios Audio cannot automatically play and loop playback
If audio or video playback on aN ios phone cannot be automatically played, you can use the following code hack.
7. Center horizontally and vertically
I usually only use two ways to locate or Flex, and I think that’s enough.
The parent control subset is centered
8. Hide page elements
9. Front-end engineering
A lot of people think of WebPack when they think of front-end engineering, but that’s not true. Webpack is just one part of front-end engineering. In the whole engineering process, he helped us solve most problems, but not all problems.
Front-end engineering is a tool to improve efficiency and reduce costs.
In recent years, it has been widely concerned and discussed. The main reason is that the functional requirements of modern front-end applications are constantly improving and business logic is increasingly complex. As the only indispensable technology in the Internet era, front-end can be said to occupy half of the entire development industry. From traditional websites to H5 now, mobile apps, desktop applications, and small programs. The front end is almost omnipotent in terms of comprehensive coverage.
Behind the facade, is actually the industry requirement for developers changed, ever front write demo, set of templates, the page this way of slash-and-burn has completely do not conform to the requirements of the present on the efficiency of the development, the front-end engineering is under such a background is on the table, become one of the means of front-end engineers must.
Generally speaking, front-end engineering includes, project initialization, project development, integration, construction, packaging, testing, deployment and other processes. Engineering is to solve these problems from the point of view of engineering. For example, we usually use NPM init for project initialization, plop for page template creation, we like to use ES6+ development, but need to code ES5 through Babel, we use Git for continuous integration, but we introduced ESLint to keep the development specification, Deployment usually uses CI/CD, Jenkins, etc.
Front-end engineering is a big topic that will be covered separately later.
10.contenteditable
Most tags in HTML are not editable, but with the addition of the contenteditable property, they become editable.
However, when you put the tag into editable state with this attribute, there is only an input event, not a change event. You can’t control the maximum length by maxLength as you can on a form. I also forget the circumstances in which I used it, so I’ll fix it later.
11.calc
This is a CSS property, which I usually call a CSS expression. You can calculate the CSS value. The most interesting thing was that he could calculate the difference between different units. A very useful feature, the disadvantage is that it is not easy to read. I can’t see 20px at a glance.
12. The difference between Proxy and Object.defineProperty
Proxy means Proxy, and I usually teach him that interceptors can intercept an operation on an object. The usage is as follows: create an object by new, the first parameter is the object to be intercepted, and the second parameter is the description of the object operation. Instantiation returns a new object, 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 to read and write of attributes, while Proxy can also listen to delete attributes and call methods in addition to read and write.
In general, if you want to monitor array changes, you basically override array methods, which is how Vue does it, and Proxy can monitor array changes directly.
Proxy regulates the read and write of objects in a non-intrusive manner, while defineProperty needs to define the attributes of objects in a specific way.
13.Reflect
Static objects, which cannot be drawn by instances, can only be called as static methods, similar to Math objects, which can only be called as math.random.
Reflect internally encapsulates a series of low-level operations on objects, 14 of which are deprecated, leaving 13.
Reflect’s static methods are exactly the same as those in the Proxy description. That is, the Reflect member method is the default implementation of Proxy handling objects.
The default Proxy method calls Reflect’s internal processing logic. If we call get, then internally the Proxy gives Get to Reflect, as shown below.
Reflect and Proxy do not have an absolute relationship, and we use them together to make it easier to understand them.
So why Reflect? Its main use is to provide an API for manipulating objects. To determine whether an object has an attribute, you can use the in operator, but it’s not elegant. You can also use reflect. has(obj, name); To delete a property, use either delete or reflect.deleteProperty (obj, name); Get all attribute names either object. keys or reflect.ownkeys (obj); We prefer to use Reflect’s API to manipulate objects because it’s the future.
14. Parse the GET parameter
The replace method is used to get the parameter key-value pairs in the URL and quickly parse the GET parameters.
Parse the connection URL
You can obtain the protocol, PathName, Origin and other attributes on location objects by creating a tag and assigning href attribute to a tag.
Thank you for your recognition and support, xiaobian will continue to forward “LeByte” quality articles