Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

1. One line of CSS text exceeds…

overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
Copy the code

2, multi-line text beyond display…

display: -webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;
overflow:hidden;
Copy the code

3, IOS mobile phone container scroll bar is not smooth

overflow:auto;
-webkit-overflow-scrolling:touch;
Copy the code

4. Modify the scroll bar style

Hide the scroll bar for the DIV element

div:-webkit-scrollbar {
	display:none;
}
Copy the code
  • Div ::- webKit-ScrollBar The overall part of the scrollbar
  • Div ::- webKit-scrollbar-touch small box inside the scrollbar that can be moved up and down
  • Div ::-webkit-scrollbar-track Specifies the track of the scrollbar

5. Use CSS to write a triangle script

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.

div {
    width: 0;
    height: 0;
    border: 5px solid #transparent;
    border-top-color: red;
}
Copy the code

6. Solve the problem that ios Audio cannot automatically play and loop play

If audio or video playback on aN ios phone cannot be automatically played, you can use the following code hack.

// Fix the problem that ios Audio cannot automatically play and loop playback
var music = document.getElementById('video');
var state = 0;

document.addEventListener('touchstart'.function(){
    if(state==0){
        music.play();
        state=1; }},false);

document.addEventListener("WeixinJSBridgeReady".function () {
    music.play();
}, false);

// Loop
music.onended = function () {
    music.load();
    music.play();
}
Copy the code

7, horizontal and vertical center

I usually only use two ways to locate or Flex, and I think that’s enough.

div {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

Copy the code

The parent control child is centered

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}
Copy the code

Hide page elements

  • Display-none: Element does not exist, removed from dom
  • Animation-0: The transparency of the element will be zero, but the element will still exist and the bound events will still be valid and trigger execution.
  • Visibility -hidden: The element is hidden, but it still exists and cannot be triggered in the page.

9. Front-end engineering

  • Thinking only of Webpack is incomplete
  • 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.

10, contenteditable

Most tags in HTML are not editable, but with the addition of the contenteditable property, they become editable.

<div contenteditable="true"></div>
Copy the code

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.

11, calc

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.

div {
    width: calc(25% - 20px);
}
Copy the code

.proxy differs from 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.

new Proxy(target, {
    get(target, property){},set(target, property){},deleteProperty(target, property){}})Copy the code

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.

const list = [1.2.3];
const listproxy = new Proxy(list, {
    set(target, property, value) {
        target[property] = value;
        return true; // Indicates that the setting is successful}}); list.push(4);
Copy the code

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.

const proxy = new Proxy(obj, {
    get(target, property) {
        return Reflect.get(target, property); }})Copy the code

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.

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.

const q = {};
location.search.replace(/([^?&=]+)=([^&]+)/g.(_,k,v) = >q[k]=v);
console.log(q);
Copy the code

Parse link urls

You can obtain the protocol, PathName, Origin and other attributes on location objects by creating a tag and assigning href attribute to a tag

// Create a tag
const aEle = document.createElement('a');
// Assign the href path to the a tag
aEle.href = '/test.html';
// Access attributes in aEle
aEle.protocol; // Get the protocol
aEle.pathname; / / get the path
aEle.origin;
aEle.host;
aEle.search;
Copy the code