New features for H5 and C3

New features of the H5

  • Semantic tags: Header, footer, section, nav, aside, article,
    • The header in the head
    • Footer footsteps
    • Nav navigation
    • Dialog prompt box
  • Enhanced form: Type in input
    • Color is used to select colors
    • Data selects a date from the date picker
    • Number Specifies the input field of a numeric value
    • Search is used for searching
  • New form elements: datalist, KeyGen, Output
  • Added form properties: placeholder, Required, min, and Max
    • Placeholder Input prompt box
    • Required Requires that the input field cannot be empty
    • Multiple input elements allow multiple selections
  • Audio and video: Audio and video
  • canvas
  • geolocation
  • Drag and drop
  • LocalStorage: localStorage – data store with no time limit; SessionStorage – A data store for a session that is deleted when the user closes the browser window
  • H5 New events: onresize, onDrag, onScroll, onMouseWheel, onError, onPlay, onPause
    • Onresize Triggers the function when the window is resized
    • Ondrag Triggers the function when you drag an element
    • Onerror Fires the function when an error occurs
    • Onplay Triggers the function when media data is about to start playing
    • Onpause Triggers the function when media data is paused
  • WebSocket: a protocol used for full-duplex communication over a single TCP connection

New features for C3

  • The selector
    • Pseudo-class selectors: pseudo-class selectors are used to find elements that cannot be retrieved by regular CSS selectors, and information that does not exist in the Dom tree, such as a:link a link that is not accessed; A. visited B. visited C. visited D. visited

  • Pseudo-element selector; Create elements that don’t exist in the Dom tree and style them. For example, we can create text before an element with ::before
a::before{
    content:'',
}
Copy the code
  • Background and border
    • Background-size :100% 100% no-repeat
    • Border-radius, box-shadow, border-image
  • The 2 d transformation transform
    • The translate(x,y) element moves from its current position
    • The scale(x,y) element in its current size resembles the x – and Y-axis magnification
    • Rotate (30deg) Rotates clockwise by 30°
    • Skew (30DEg, 20DEg) element flips
  • Animation and transitions
  • Animation works with @keyFrames
  • Width 2s,height 2s,transform 2s

ES6 new features

  • Promise
  • let const
  • Deconstruction assignment
  • Arrow function
  • Template string
  • Default values for function arguments
  • for… of; for.. in
    • for… Of is used to iterate over an iterator, such as an array
    Let ary = [1, 2, 3, 4]; For (let I of ary){console.log(I)//1,2,3,4}Copy the code
    • for… In is used to iterate over properties in an object
    let obj = {k:5,l:6}
for(let i in obj){
    console.log(i)//k,l
}
Copy the code
  • Class class

CSS box model

  • Standard box model, width is equal to content-width
  • Ie box model, width equals Content-width +padding+border
  • Use box-size:border-box to set the IE box model

Prototype and prototype chain

Prototype chain: Each function has a prototype attribute, which refers to the prototype object from which the function class was constructed. Each object has a __proto__ attribute, which points to the prototype of its class.

scope

  • Scope refers to the accessible scope of a variable. Scope is a search mechanism for a variable. It looks up the variable one level at a time, and if it does not find the variable, the code will report an error. ua

The principle of MVVM

  • The observer data listener in vue passes a common object to data in the vue instance. Vue iterates through all properties of the object and converts them to setter and getter methods using object.defineProprety(). The setter is triggered when the data changes, and the setter immediately calls notify in the DEP. The DEP starts iterating through all the subscribers and calls the update method of the traverser. The subscribers are notified and respond to changes in the view.

Resume the project

To introduce myself

Interviewer: hello, my name is Mr Chung, the first company is salty ying culture technology co., LTD., Beijing participated in the development of cloud services market, cloud sign, hundred hui clinic three projects of cloud, the cloud labor market is mainly done by helping b end user c end labor registration is individual and industrial and commercial door income tax services, cloud is mainly committed to signing b end users to realize online electronic contract function, Baihui Clinic is mainly for doctors typesetting and access to medical records, test reports and so on.

Thank you for the interview before you leave

My last company was CLP 15 Research Institute, which developed the 418 military management background. The main modules include original data, business data, achievement data, authority management, data evaluation and so on. I have mastered H5, C3, JS, ES6, Eacharts, and technical stack mainly using VUE to understand VUe3.0.

418 Military management background system

Use the element – the UI

Use its layout, general background management system layout structure is the head header, sidebar ASider, main content, tail footer composition, directly take over to modify the style can be used, the development of the speed will be faster.

SCSS avi

  • Use the dropdown box value to bind to the class name and change the theme color by the class name.
  • Use $to define the color variable first, and then define the theme library of the corresponding color. Bind the corresponding theme and the corresponding parent element class name through the @each loop theme library, and then obtain the defined color variable through the function combined with the map-get method, and assign the value to the CSS property through @Centent to achieve one-key theme change.
    • Knowledge points used
      • $definition variable
      • @each inLoop through the theme and get the style of the thememaps(equivalent to an object that defines the theme’s style, such as fontSize fontSize:$black)
      • Then loop through the corresponding style, usingmap-mergeExtract this corresponding style into a one-dimensional map
      • Reuse function returnmap-getGet the value of the style.
      • The placeholder @centent is used again
      • And then we just have to use@includeCall the mixer, then call the function method to get the corresponding style value, and assign the style property to achieve one-touch skin.

SVG attachment

  • There are three groups of data on the display page of the first page of the project, which need to be connected by lines, using LINE and Polyline of SVG.
    • Line is a straight line. The syntax gets the starting and ending coordinates, sets the line color with the stroke property, and sets the line width with stroke-width.
    • Ployline is a broken line, set the line color with stroke, and stroke-width sets the line width.

Large file slice upload and breakpoint continuation

  • usingelement-uitheuploadUpload the component usingauto-uploadCustom upload: Converts the uploaded file tobufferData type, usingSparkMD5theArrayBufferThe instance will be handledbufferFile associated and utilizedsendGenerate associatedhashValue.
  • The next step is to divide the files according to their size by a fixed number. Take 100 files as an example to calculate the size of each file. Loop these 100 files, set a variable equal to 0 to receive loop’s current file progress, utilizefile.sliceFor segmentation, and then in the file name splicing. The partitioned and named files are then placed into the array.
  • And then we’re going to create a set of 100 requests that we’re going to do in preparation for breakpoint continuation. After uploading each slice successfully, it will be deleted from this set. If a breakpoint occurs, the next upload will be from the current position, which will realize the continuation of power failure. After uploading all files successfully, the background can be requested to merge the video.

Axios encapsulation

  • The AXIos instance is secondary encapsulated 
    let instance = axios.create({
    // Set baseURL, which automatically precedes the URL
    baseURL:'url'.// Process parameters before sending to the server. This setting only applies to post, PUT, and patch requests
    transformRequest:(data) = >{
        // Process the pass parameter to formData format
        return qs.stringify(data)
    },
    // Process the response data before passing it to THEN
    transformRespon:(res) = >{
        // Perform any conversion to the data
        return res
    }
    // The request timed out
    timeout:4000,})// Request interception
let reqinterceptors =  instance.interceptors.request.use((data) = >{
    // What to do before requesting
    return data
},
// What do I do about the request error
(err) = >{
    rerutn Promise.reject(err)
})
// Response interceptor
let resinsterceptors =  instance.interceptors.response.use((res) = >{
// What to do with the response data
    return res
},(err) = >{
// Do something about the response data error
    return Promise.reject(err)
})
// If you want to remove the request interceptor
instance.interceptors.request.eject(reqinterceptors)
// If you want to move out of the response interceptor
instance.interceptors.response.eject(resinterceptors)
Copy the code

eacharts

  • Initialize an Eacharts instance
  • Then specify the configuration and data for the icon
  • Display the page using the configured data
  • For example, if the line chart and bar chart have similar configuration items but different types under a series, they can be encapsulated into a component and a Type value can be passed to them. I also made this background color gradient, the color of each line is not consistent (options has a color property, set an array of colors), etc.

Route guard + AXIOS request and response interception, page login interception

  • Global front route guard 
    router.beforeEach((to,from,next) = >{
    if(to.meta.requireAuth){
        if(window.sessionStorage.getItem('token')){
               next()
        }else{
            next('/login')}}else{
        next()
    }
})
Copy the code
  • Request interception, request preceded by token 
    instace.interceptors.request.use((config) = >{
    config.headers.token = 'token'
    return config
})
Copy the code
  • Response interception. If the token expires or is incorrect, the background will return data to inform the login page 
    instance.interceptors.response.use((res) = >{
    if(res.data.errno===501){
        alert('You are not logged in, please log in first')
        window.location.href = '/login'
    }
    return res
})
Copy the code