1. The Scroll Bar of the iOS Mobile Phone Container Does Not Slide Smoothly
overflow: auto; -webkit-overflow-scrolling: touch;
2. Solve the Problem That iOS Audio Cannot Be Automatically Played and Played in a Loop
When iOS mobile phones use audio or video to play, some models cannot realize automatic playback. At this point, you can use the following code hack.
// Solve the problem that ios audio cannot be played automatically and played in a loop
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();
}
3. Modify the Scroll Bar Style
Hide the scrollbar of the div element.
div::-webkit-scrollbar {
display: none;
}
4. CSS Line of Text Exceeds
overflow: hidden; text-overflow:ellipsis; white-space: nowrap;
5. Multi-line Text Exceeds Display
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
6. Use CSS to Write a Triangle Corner Mark
Element width and height are set to 0. Set by the border property to make the border color in the other three directions transparent or consistent with the background color. The color of the remaining border is set to the desired color.
div {
width: 0;
height: 0;
border: 5px solid #transparent;
border-top-color: red;
}
7. Horizontal and Vertical Centering
I generally only use two ways positioning or flex.
div {
width: 100px;
height: 100px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
The parent controls the centering of the subset.
.parent {
display: flex;
justify-content: center;
align-items: center;
}
8. Hide Page Elements
display-none: The element does not exist. removed from the dom.
opacity-0: The element opacity will be 0. However, 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 but the page cannot fire the event for that element.
9. contenteditable
Most tags in HTML are not editable. But after adding the contenteditable attribute, the label becomes editable.
<div contenteditable="true"></div>
However, after making the label editable through this property, there is only an input event, no change event. Also, you can't control the maximum length through maxlength like a form.
10. calc
This is a CSS property, and I generally call it a CSS expression. The value of CSS can be calculated. The most interesting thing is that he can calculate the difference between different units. It's a nice feature, but not easy to read. You may not be able to see at a glance what 20px is.
div {
width: calc(25% - 20px);
}
11. Reflect
The default method of the Proxy object is to call the processing logic inside Reflect. That is to say, if we call the get method, internally, the proxy will hand over the get intact to Reflect. An example is shown below.
const proxy = new Proxy(obj, {
get(target, property) {
return Reflect.get(target, property);
}
})
Reflect and Proxy have no absolute relationship. We generally put the two of them together to facilitate the understanding of the two.
So why is there a Reflect object? In fact, its greatest use is to provide a set of APIs for unified manipulation of Objects. To determine whether an object has a certain property, the in operator can be used, but it is not elegant enough. You can also use Reflect.has(obj, name); . To delete a property you can use delete or Reflect.deleteProperty(obj, name); . To get all property names, you can use Object.keys or Reflect.ownKeys(obj);. Here, we prefer to use Reflect's API to manipulate objects.
12. Parse get Parameters
The parameter key value in the URL can be obtained by the replace method, and the get parameter can be quickly parsed.
const q = {};
location.search.replace(/([^?&=]+)=([^&]+)/g,(_,k,v)=>q[k]=v);
console.log(q);
13. Parse the Connection URL
By creating a tag and assigning the href attribute to the tag, you can get the protocol, pathname, origin, and other attributes on the location object.
// Create a tag const aEle = document.createElement( a ); // Assign the href path to the a tag aEle.href = /test.html ; // Access properties in aEle aEle.protocol; // Get the protocol aEle.pathname; // Get path aEle.origin; aEle.host; aEle.search;
14. Difference Between Proxy and Object.defineProperty
Proxy means proxy, and I generally call it an interceptor, which can intercept an operation on an object. The usage is as follows. Create an object with new. The first parameter is the intercepted object, and the second parameter is a description of the operation on the object. Returns a new object after instantiation. When we operate on this new object, the corresponding method in our description is called.
new Proxy(target, {
get(target, property) {
},
set(target, property) {
},
deleteProperty(target, property) {
}
})
Object.defineProperty can only monitor the read and write of properties. In addition to reading and writing, Proxy can also monitor the deletion of properties, invocation of methods, etc. Usually, we want to monitor the changes of the array, which basically depends on the way of overriding the array method. This is also how vue is implemented. A proxy can directly monitor changes in the array.
const list = [1, 2, 3];
const listproxy = new Proxy(list, {
set(target, property, value) {
target[property] = value;
return true; // Flag set successfully
}
});
list.push(4);
Proxy supervises the reading and writing of objects in a non-invasive way, and defineProperty needs to define the properties of objects in a specific way.