Recently, I was preparing to find a job. I sorted out the interview questions I was asked and the questions I searched, and made a general record. (If it involves principle and code, I will find time to supplement and improve it in the future)

javascript

Anti-shake and throttling

Image stabilization

For high frequency events, the event will be executed after the specified time when it is triggered. If it is triggered during this time, the timer will be re-timed until it is not triggered within the specified time.

For example, you can define a timer, and after the event is triggered, put the event into the timer. If within 1 second, the event is triggered again, then clear the timer, and define a new click event. The cycle goes like this. No click for a second, then execute the method in the timer.

The throttle

No matter how many times the event is triggered, only one event callback can be executed within a given period of time. You can use the timestamp class to calculate the time difference.

Es6 new features

The function is currified

If a function takes more than one argument, it can be converted to first taking one or some of the arguments, then returning a method, receiving another or some of the arguments, and finally returning the execution result.

It can reuse parameters, save code, reduce work code repeatability.

Detailed solution of JS function coriolization

Deep clone and shallow clone

Event polling

Jquery chain implementation principle

Every function inside returns this.

Understanding the callback function

A callback function is a function that is passed as an argument to another function and then does something by calling that callback function inside the external function.

css

Horizontally centered and vertically centered

Inline elements and block-level elements

Small program

The page of a small program is displayed

vue

Vue parent and child components declare periodic function order

Loading the rendering process

Father beforeCreate
The father created
Father beforeMount
The child beforeCreate
The child created
The child beforeMount
The child mounted
Father mounted

Child component update process

Father beforeUpdate
The child beforeUpdate
The child updated
Father updated

Parent component update process

Father beforeUpdate
Father updated

Destruction of the process

Father beforeDestory
The child beforeDestory
The child destoryed
Father destoryed

Parameter transfer between VUE components

Father and son components

props + $emit

<component-a @btnclick="handleChangeParentData"></component-a> // Vue.component('component-a', {template: ` <button @click="childBtnClick">btnClick</button> `, methods: { childBtnClick: $emit('btnclick') {function(){$emit emit('btnclick'); }}})Copy the code

Parameter transfer across components

provider + inject

Once some data is injected, such as Foo in the example above, it can no longer be declared in the component because it is already owned by the parent.

// Ancestor component, providing data foo
export default {
  name: "grandfather".provide(){
    return{
      foo:'halo'}}},// Descendant components
export default {
  inject: ['foo'],}Copy the code

You can also bind the provider to the topmost component (such as App) as a global variable, or return this so that all child components can be injected.

//app.vue
export default {
    name: 'App'.provide(){
        return{
            app:this}},data(){
        return{
            text:"it's hard to tell the night time from the day"}},methods: {say(){
            console.log("Desperado, why don't you come to your senses?")}}}// All other child components that need global variables just need to be injected into app as needed
export default {
    inject: ['foo'.'app'].mounted(){
        console.log(this.app.text);// Get the variables in app
        this.app.say();// You can execute a method in app and make it global!}}Copy the code

vue-router

Vue-router basic use

Install => NPM install vue-router-s
Import VueRouter from ‘vue-router’; import VueRouter from ‘vue-router’;
Use plugins => vue.use (VueRouter);
Create a routing object and configure routing rules => let router = new VueRouter({routes: [{path: ‘home’, Component: home}]})
=> new Vue({el:’#app’, router: router})
Leave a page slot in app.vue =>router-view></router-view>

// main.js import Vue from 'vue'; import VueRouter from 'vue-router'; import Home from './pages/Home'; import Index from './pages/Index'; Vue.use(VueRouter); let router = new VueRouter({ routes: [ { path: '/home', name: 'homePage', component: Home, }, { path: '/index', name: Children: [{path: '/tab1', Component: tab1,}, {path: '/tab2', Component: children: [{path: '/tab1', component: tab1,}, {path: '/tab2', Component: Tab2, } ] } ] }); New Vue({el: '#app', // pass router: router}); // app. vue <template> {/* Route placeholder */} <router-view></router-view> </template> // index.vue <template> <div> IndexPage </div> // router-view </router-view </template>Copy the code

Vue-router Indicates the nested routine

Route Configuration of Children
Corresponding to the VUE page, add<router-link></router-link>The label

Vue-router parameter transfer

Route jump mode

<router-link to="url"></router-link>
this.$router.push(url)

The ginseng

Use query to pass
- $router. Push ({path: ‘/home’, query: {id: 100}})
- Value page: this.$route.query.id // 100
- $router = router; $route = router
Write to the to property in router-link
- Router-link to=”{path: ‘/home’, query: {id: 100}}” >
  
  Name
- Values: this $route. Query. Id

Vue-router Indicates the route guard

Global guard

beforeEach((to, from, next) => { next() })
afterEach((to, from) => { … })
Next can pass false to terminate the page jump, or pass an address to change the jump. If not called, the jump is also terminated. The next.

Route exclusive guard

Declared when routing rules are configured

{
    path: '/'.component: Home,
    beforeEnter:(to, from, next ) = > { next() }
}
Copy the code

Front end test questions (in constant sorting)