It’s been exactly two months since my last blog post. In the past two months, I have had a lot of experiences, such as resignation, interview and entry. In fact, a good interview, even if not successful entry will have a lot of harvest.
I interviewed with three companies and got offers from two of them, but I didn’t get offers from the interview I most liked. The reason was that I went to the interview in the afternoon, and I was not in good mental state. I was a little tired and a little slow, which led to the terrible interview. However, the interviewer was nice enough to sort out my ideas, expand my thinking and give me some suggestions in the subsequent communication. It was actually a successful interview and a great improvement.
20 days after I joined the new company, I followed up a project, which is the only app that the project team is working on at the same time on both PC and mobile terminals. Sometimes I feel confused, and the first reaction when I open the editor is to check which end of the code it is. I helped my colleagues fix several bugs in both projects.
1. Improve a city selection component you’ve written
I wrote a blog post “Independently complete a city selection component” and shared the code of this component on Github, the address is github.com/lunlunshiwo… . In this project, I have introduced an excellent plug-in, Better scroll, which provides me with a scroll event. There is a code like this:
This.scroll. On ('scroll', (pos) => {
this.$emit('distance', Math.abs(pos.y))
this.$emit('scrollStore'.true)})Copy the codeAbove this code when I was designed to trigger the scroll event should return to me the position of the scroll, I in the following code is used in the pos. The variable y for my component provides an indicator when rolling, such as A click on the right side of the navList, city list will roll to A place, there will be A suspended card at this time show A.
// Scroll to the corresponding DOM node singleLetter (dom) {this.$refs.suggest.scrollToElement(dom, 200, false.false}, // Display the word distance (val) {for (let i = 0, len = this.arrHeight.length; i < len; i++) {
if (val < this.arrHeight[i]) {
this.flagText = this.cityIndexList[i]
return false}}}Copy the codeIn previous code, a scrollToElement is an event provided by the component.
Ideal is full, reality is very skinny. It was not until one day when I went home after the Dragon Boat Festival holiday, a person added me to my wechat and told me a bug: at a certain rate, when I clicked E from the top down, the list would scroll to E, but only D would be displayed on the suspended card, while it would not exist when I clicked from the bottom up. Later, it has been confirmed that the existence of several. But as my first post on Github, I wanted it to be perfect. Therefore, I spent the Dragon Boat Festival holiday studying the cause of the problem, until a few days ago, I occasionally thought of the cause. When we fire an event like Mousemove, we should ideally fire one pixel at a time, but this is not the case because of the performance of the machine. “Trigger” is an action that sends an interrupt from the hardware, and then the OS generates a message, and in this process, the hardware itself generates a hardware signal when it determines how far it has moved, 800dpi or something. The processing speed of interrupt chips on the motherboard also affects. This time slice may vary for each version of the system + hardware itself. There is also uncertainty about the time consumed by the program itself due to the GetMessage function and the time needed to capture mouse movement messages (as judged by the switch branch). When your mouse moves slowly, it may trigger once per pixel. When the mouse is fast, you might find that it takes n pixels to trigger once.
This leads to the above bug, when clicking navList from the top down, it may trigger once when scrolling to the first 10 pixels of the list E, while scrolling to the list E may not trigger because the time is too short, at this time, the pixel value of the position is the last 10 pixels of D, Loyal logic code would not return me the letter E for a 10-pixel error. So all we need to do is have the list continue to generate a scroll event when the scroll is done, scroll another pixel.
Fortunately, the same scroll event above, scrollToElement, provided me with a parameter
scrollToElement(el, time, offsetX, offsetY, easing)
- Parameter: Returned value: none
- DOM | {String} el scroll to a target element, if it is a String, internal will try to call querySelector into a DOM object.
- {Number} time Duration of scrolling animation execution (ms)
- {Number | Boolean} offsetX transverse offset relative to the target element, if set to true, then rolled into the center of the target element
- {Number | Boolean} offsetY longitudinal axis offset relative to the target element, if set to true, then rolled into the center of the target element
- {Object} Easing is not recommended. If you want to ease it, refer to ease.js in the source code
- Action: Scrolls to the specified target element.
We can change the above function to:
// Scroll to the corresponding DOM node singleLetter (dom) {this.$refs.suggest.scrollToElement(dom, 200, false, 1)}Copy the codeScroll down one pixel to the relevant DOM node, trigger a scroll event again, resolve.
The relevant code has been updated, please rest assured to use github.com/lunlunshiwo… Find a star.
2. Bind and unbind eventBus in VUe2.0s
In the mobile project, two pages shared a list component that I encapsulated, and both pages had a pull-up for more functionality, so I used eventBus as a staging post for the sibling component. Pass an event to the list component when the page scrolls to the bottom and fires a pull-up event, bind a fetch more event to the list page, and fire. The code is as follows:
// Scroll component pullup(event) {Bus.$emit('getMore'); } // List componentscreated() {
Bus.$on('getMore', this.getMoreList);
},
methods: {
getMoreList() {// // //}}Copy the codeUnfortunately, I shared a component between the two list components, which resulted in the following problem: when the two lists were switched several times, the pulled-up refresh would trigger multiple getMoreList events, and would set off as many times as the two lists were switched. Bus.$on(‘getMore’, this.getmorelist) ¶
AddEventListener ("getMore",getMoreList);
function getMoreList(){
alert("hello world!");
}Copy the codeIn the above problem, if the event getMore is bound to getMoreList in the component, the binding remains even if the component is destroyed. When the component is rendered again, the Created life cycle binds the event once more, and the previous binding relationship is still there. Now there are two binding relationships in the component that are identical. Therefore, when the component is destroyed, we should clear this binding from the component:
destroyed() {
Bus.$off('getMore', this.getMoreList);
}Copy the code3. Dynamic route switchover when the route is forward or backward
When opening the mobile app page, when the page moves forward, the switching effect is generally swiping from right to left. When backing up, we expect it to exit from left to right, but the transition effect provided by vue only allows us to have one effect, unless the name value of the transition binding is changed according to the route switch. In achieving this effect, I improved the original method. My first thought was to overwrite the router.back() event, but because I didn’t think that was a good idea, I wrapped it:
//router file router.prototype. goBack =function () {
store.commit("changeIsBack".true) this.back(-1)} //vuex file const state = {isBack:false
}
const mutations = {
changeIsBack(state, flag) {
state.isBack = flag
}
}
export default {
state,
mutations
}Copy the codeThis. Back (-1) is this.$router. Back (-1). Add the Vuex store file to the router and use commit to change the value of state.
//pageMain. Vue file methods: {... mapMutations(['changeIsBack'
])
}
beforeRouteUpdate (to, from, next) {
let isBack = this.$store.state.routerState.isBack
if (isBack) {
this.transitionName = 'enter-right'
} else {
this.transitionName = 'enter-left'
}
this.changeIsBack(false) next()} // The rest of the page returns the next level this.$router.goback()Copy the codeThe display page uses the beforeRouteUpdate hook function to detect isBack values in the store. The this.$router.goback() method is called when the page returns, which changes the value of isBack in store. When the route is updated, check whether isBack is true. If so, isBack is the returned page. At this time, update the name of transition to achieve the purpose of update. Solution address: github.com/lunlunshiwo… .
The above is the problem that encounters recently and improve solution train of thought.
At the beginning because I thought it was cool to choose this road, you should go on well, good night.
