1, Problem solving
Repeat the question
The list data is not sorted by id, and it is scrambled
// list data
[
{
id: 4, pid: 1, name: "Secondary data 2-1"
},
{
id: 5, pid: 1, name: "Secondary data 2-2"
},
{
id: 6, pid: 1, name: "Secondary data 2-3"
},
{
id: 1, pid: 0, name: "Primary data 1"
},
{
id: 2, pid: 0, name: "Primary data 2"
},
{
id: 3, pid: 0, name: "Primary data 3"
},
{
id: 7, pid: 3, name: "Level III data 3-1"
},
{
id: 8, pid: 3, name: "Secondary data 3-2"
},
{
id: 9, pid: 8, name: "Level III data 3-1"
}
]
The data obtained by using the listToArray method will have problems.
resolvent:
listData.sort((a, b) => { return Number(a[idMap]) - Number(b[idMap]) });
Yes, that's the line of code. Add this line of code and it's solved.
Triggered thinking
The previous method only needs one traversal. However, it is now found that the premise of the previous method is that the data is already in order.
What if something goes wrong? Then you have to do a sort sort. In that case, it's still traversed twice? (plus a sort sort traversal)
Analyze the principle again
As we know, the core principle is that itemMap[id] = item; Store the list data in the attribute and value of the object for easy access.
In one traversal, you can add attributes to the itemMap object and get its parent node at the same time. If the order is out of order, there will be problems naturally.
2, Resolve parameters in URL
This method is aimed at the hash routing mode of vue items
// http://localhost:9090/#/test/url?id=34&name=%E6%86%A8%E6%86%A8
function getUrlParams() {
let index = window.location.href.indexOf('?');
let urlSearchParams = new URLSearchParams(window.location.href.slice(index + 1));
let params = Object.fromEntries(urlSearchParams.entries());
return params;
}
3, CSS3 transition and animation
The difference between the two is simple,
Transition means literally. For example, the width increases slowly from 1px to 10px, which is a transition;
Animation also means literally, but the biggest difference from transition is the final state. No matter what animation is executed, the final state will be restored. For example, the width will slowly increase from 1px to 10px. After the animation is completed, it will be restored to 1px.
Take a few examples and draw inferences from one instance.
1. Transition properties:
transition: width 1s linear 2s; // Equivalent to transition-property: width; transition-duration: 1s; transition-timing-function: linear; transition-delay: 2s;
Instance (the mouse hovers over the div, the width increases from 150px after 3 seconds, and then stops after 2 seconds)
div {
width: 150px;
height: 100px;
background: blue;
transition: width 1s linear 3s;
}
div:hover {
width: 400px;
}
2. Animation properties
animation-name: myfirst; animation-duration: 5s; animation-timing-function: linear; animation-delay: 2s; animation-iteration-count: infinite;// Animation cycles, permanent animation-direction: alternate;// After a cycle of animation ends, the animation is played in reverse order. Normal is normal animation-play-state: running; // Equivalent to animation: myfirst 5s linear 2s infinite alternate;
// Two ways to write animation names
@keyframes myName1 {
from {
background: red;
}
to {
background: yellow;
}
}
@keyframes myName2 {
0% {
background: red;
}
50% {
background: green;
}
100% {
background: blue;
}
}
Instance (the background color of div changes from red - > Green - > blue, blue - > Green - > red, infinite loop)
div
{
animation: myfirst2 5s linear 2s infinite alternate;
}
4, Event bus
We know the use and difference of apply, call and bind in JavaScript.
There is a place to use, that is, the event bus.
First, briefly describe the principle.
It's actually very simple.
First declare an object bus, in which the object is used to store the event name and its value is used to store the method to be executed. When emit sends an event, add the event name and method to the bus, and on receives the event name to trigger the corresponding method.
It's simple!
The code is as follows:
class EventBus {
constructor() {
this.bus = {};
}
$on(busName, fn) {
if (this.bus.hasOwnProperty(busName)) {
console.log('The event name has already been subscribed');
return;
}
this.bus[busName] = fn;
}
$emit(busName, ...args) {
this.bus[busName].apply(null, args);
}
$off(busName) {
delete this.bus[busName]
}
}
After reading the code, you must be confused. It's too simple! That's true. The above is the simplest event bus code. I use this myself. After all, it's simple and rude.
Learning technology should be persistent, but not too persistent!