What are the new features of CSS3

Css3 has a lot more features for mobile than CSS2

• Rounded corners: border – the radius
• Box shadow: box-shadow
• Animation: Transition,transform,animation, etc

What problem does ClearFix solve?

• There are many ways to solve this, but the main goal is to make the parent element have height
  • Sets absolute positioning for the parent element* * : position: absolute * *
  • Set to the parent element**overflow:hidden; 六四运动
  • It’s done by pseudo-objects

 .clearfix:after {
     content: "";
    display: block;
    clear: both;
    height: 0; 
  }
Copy the code

CSS 3 animation:

Oh, you asked cSS3 animation ah, CSS3 animation generally includes two kinds

How to do the adaptation of the mobile terminal

There is no best method for front-end adaptation, only suitable method. At present, the main methods for front-end adaptation are: — percentage, EM, REM, media Query, Flex layout (elastic box), VW, VH, etc

• So far I use rem, Flex layouts a lot on my projects, and sometimes media queries, when doing PC responsive layouts
• The main use of a hand-washed JS library flexible. Js, when the page changes, detect the width of the page, divided by 10, dynamically assigned to the font-size. Properties. The layout of the page is carried out through REM, so it can be adapted to all mobile devices

Cookie,localStorage and sessionStorage

• Cookie can set the expiration time, but does not have its own access to the method, needs to be encapsulated, each request to follow the request sent, while localStorage and sessionStorage can have their own access methods such as:
  • setItem()
  • getItem()
  • removeItem()
  • **clear() **

1. autio,video
2. H5 provides audio and video components, can achieve video playback, I used to use it to do music player, but for a long time no use, there are play,pause and access to the current time and total time method, have a look at the AUDIO,video API, I can use quickly
3. other

How does Internet Explorer 8 support semantic tags

A library HTML5shiv. Js, directly into ok, you can baidu under this file, the principle is to translate the semantic tags in the low version of the browser into block level elements, so that the browser can parse

Sort an array

Bubble sort: Take one digit from an array and compare it to the next. If you want to sort from smallest to largest, put the smaller digit in front and the larger digit in back. Simply switch the positions of the two digits.

 var arr=[3.1.4.2.5.21.6.15.63]
  function sortA(arr){
   for(var i = 0; i<arr.length-1; i++){
      for(var j=i+1; j<arr.length; j++){// Get the first value and the next value to compare
          var cur=arr[i]
          if(cur>arr[j]){
              // Since we need to exchange values, we will replace the latter value, and we will save it fresh
           let index=arr[j]
          / / exchange value
          arr[j]=cur
          arr[i]=index
          }
      }
   }
   return arr;
  }

// Since only one maximum value can be exchanged at a time, we need to set up a layer of for loops
Copy the code

The address bar resolves into an object

Object deep copy, shallow copy cleavage

Shallow copy of an object means that changing the property value of one object also changes the property value of another object, which means mutual influence. Deep copy of an object means that changing the property value of one object does not change the property value of another object. You can implement deep copy of an object by using various methods

• throughJSON. Stringify and JSON. The parseTo implement the

 var obj={name: '1610 a'}var obj2=JSON.parse(JSON.stringify(obj))
Copy the code

• It’s done recursively

• Take a look at the code, function compatibility handling, and encapsulation

var EventUtil={
	
   addHandler:function(element,type,handler){ // Add events
      if(element.addEventListener){ 
         element.addEventListener(type,handler,false);  // Add events using the DOM2 level method
      }else if(element.attachEvent){                    // Add events using the IE method
         element.attachEvent("on"+type,handler);
      }else{
         element["on"+type]=handler;          // Add events using the DOM0 level method}},removeHandler:function(element,type,handler){  // Cancel the event
      if(element.removeEventListener){
         element.removeEventListener(type,handler,false);
      }else if(element.detachEvent){
         element.detachEvent("on"+type,handler);
      }else{
         element["on"+type]=null; }},getEvent:function(event){  // Use this method to retrieve the Event object across browsers
      returnevent? event:window.event;
   },
	
   getTarget:function(event){  // Return the actual target of the event
      return event.target||event.srcElement;
   },
	
   preventDefault:function(event){   // Prevent the default behavior of events
      if(event.preventDefault){
         event.preventDefault(); 
      }else{
         event.returnValue=false; }},stopPropagation:function(event){  // Stop event propagation in the DOM immediately
                                     // Avoid triggering event handlers registered with document.body
      if(event.stopPropagation){
         event.stopPropagation();
      }else{
         event.cancelBubble=true; }}}Copy the code

closure

JS inheritance (ES6 included) — or if you ask: there are two classes A and B, how can B inherit from A?

1. What is Inheritance: an official concept
   1. Js inherits es6 inheritance by [somehow] allowing one object to access properties and methods in another object
2. What good is inheritance

How to implement inheritance: Constructor inherits prototype inherits copy inheritance

Stereotype inheritance: make the stereotype of the new instance equal to the instance of the superclass

/ / parent class
function Person(name){    // Add arguments to the constructor
    this.name=name;
    this.sum=function(){
        alert(this.name)
    }
}
// Adds prototype properties to the constructor
Person.prototype.age = 10

// Prototype chain inheritance
function Per(){
    this.name='ker';
}
Per.prototype=new Person(); / / the main
var per1=new Per();
console.log(per1.age);   // Print the result: 10
// Instanceof determines whether an element is on another element's prototype chain
// Per1 inherits the property of Person and returns true
console.log(per1 instanceof Person);  // Print the result: true
Copy the code

• ** Attributes that can be inherited from an instance include: instance constructor attributes, superclass constructor attributes, and superclass prototype attributes.
• Disadvantages:
  • A new instance cannot ask a parent to construct an ominous parameter.
  • Single inheritance.
  • All new instances share the properties of the parent instance. (The properties of stereotypes are shared, so if one instance changes the properties of the stereotype, the other instance changes the properties of the stereotype as well!)

How to bind JS native events

A: There are three main types of JS native binding events:

1. HTML event handler
2. Dom0-level event handler
3. Dom2-level event handler

• HTML eventIt is not used anymore. It is to add events directly to various HTML tags, similar to CSS inline style. The disadvantage is that it is not easy to maintain, because it is scattered in the tags, that is, it is too coupled

<button onclick="Event Handler">Am I</button>
Copy the code

• DOM0 level eventsAt present, more binding events are used on the PC side, and the compatibility is good. The main method is to get the DOM element first, and then directly add events to the DOM element

var btn = document.getElementById('id elements')
      btn.onclick = function() {
         // Event logic to be processed} How to remove DOM0 event? It's simple: btn.onclick=null; Leave it blank. Advantages: Good compatibility Disadvantages: Only supports bubbling, does not support captureCopy the code

• Grade DOM2 events, mobile terminal is used more, but also has many advantages, providing specialized binding and removal

var btn=document.getElementById('id elements')
// Bind the event
 btn.addEventListener('click', the name of the bound event handler,false)
 // Remove events
 btn.removeEventListener('click', the name of the event handler to remove,false)
Copy the code

New features in ES6?

Understanding of JS interviewees

What is object orientation: abstracting what you need to do into an “object” and then calling that object over and over to do what you want

1. Object oriented usage: Object creation

<script>
  var box = new Object(a)// Create an Object
  box.name='Object Oriented Usage'  // Create a name attribute and assign it to it
  box.age = 100  // Create an age attribute and assign it to it
  // Create a run () method and return a value
box.run=function(){
 return this.name + this.age +  'Running' 
}
  alert(box.run())  // Output the values of the properties and methods
  console.log(box.run()); // Printout: Object-oriented usage 100 running
</script>
Copy the code

• Cons: Creating multiple similar objects can create a lot of code

2. The factory pattern creates objects

 // Integrate instantiated functions
  function createObject(name,age){
   var obj = new Object()
   obj.name = name
   obj.age = age
   obj.run=function(){
       return this.name + this.age +'In operation... '
   }
   return obj
  }
  var box1=createObject('less'.100)  // The first implementation
  var box2=createObject('jack'.200)  // The second implementation
  console.log(box1.run());  // Printout: Less100 running...
  console.log(box2.run());  // Printout: jack200 running...
  // alert(box2.run()) // Remain independent
Copy the code

• The factory pattern solves the problem of repeated instantiation
• Disadvantages:
  • Creating different objects where properties and methods are created repeatedly consumes memory; There are function identification issues and so on.

3. **Var obj = {}

// The constructor method creates the object
  function box(name,age){
      this.name=name
      this.age=age
      this.run = function(){
          this.name+this.age+'In operation... '}}var box1=new box('less'.100) / / new box ()
  var box2=new box('jack'.300)
  alert(box1.run()); //undefined 
  alert(box1 instanceof box);  // It is clear that it belongs to box and prints: true
Copy the code

• When constructors are used and the new constructor () is used, then new Object () is executed in the background.
• The scope of the constructor is given to the new object(that is, the object created by new object()), and this in the body of the function represents the object created by new object().
• Execute the code inside the constructor
• Return new object (background return directly)

Inheritance: Talk about object orientation in ES6

ES6 has a keyword, Class, to define classes

class User{
    / / the constructor
    constructor(name,age){
        this.name=name
        this.age=age
    }
    // Define class methods
    showName(){
        console.log(this.name); }}let user = new User('rest'.21)
console.log(user.showName());  // The print digit is undefined
Copy the code

• Classes in ES6 have specialized constructorsconstructorThe constructor is separated from the class, and the method is defined: there is no need to define the prototype, and the method is defined directly in the class
• Es6 declares the methods of classes

let Example1=class{
      constructor(a){
          this.a=a
          console.log(a); }}let ex1=new Example1(1)

  / / naming classes
  let Example2=class Example2{
      constructor(a){
          this.a=a
          console.log(a); }}let ex2=new Example1(2)
  / / the class declaration
  class Example{
      // Class body content
      constructor(a,b){
          this.a=a
          this.b=b
      }
  }
Copy the code

What are the differences between the built-in traversal methods of the JS array

** forEach:** This method is intended to replace the for loop that iterates through the array and return undefined

let arrInfo=[4.6.6.8.5.7.87]
 let as = arrInfo.forEach((item,index,arr) = >{ 
    // For example, return an array with each item value greater than 9
    return item>9
})
console.log(arrInfo); // Print the result: undefined
Copy the code

• Among them:
  • For each item that the item code traverses,
  • Index: represents the index of each item traversed,
  • Arr stands for the array itself
• Filter: * * * * is aFiltering traversalReturns a new array that satisfies the condition true if it returns true

let arrInfo=[4.5.6.6.8.9.7.98]
let resultARR = arrInfo.filter((item,index,arr) = >{ 
    // For example, return an array with each item value greater than 9
    return item>9
})
console.log(resultARR); // Print the result: 9
Copy the code

• Map: * * * * the map method is mainly used in an array of complex logic to handle more, especially the react traversal data, is also frequently used, writing and similar forEach
• **some:** This method returns true as long as there is at least one result in the array that satisfies the condition, otherwise returns fasel, and writes like forEach
• **every:** This method returns true if every item in the array satisfies the condition, and false otherwise. It is written like forEach

What happens between entering the URL and when the page loads?

It goes something like this:

1. The DNS
2. A TCP connection
3. Sending an HTTP request
4. The server processes the request and returns the required data
5. The browser parses the rendered page
6. Connect the end of the

Enter a domain name, the domain name to find the server address (IP) corresponding to the domain name through DNS resolution, through TCP request link service, through the WEB server (Apache) return data, browser based on the returned data to build the DOM tree, through the CSS rendering engine and JS parsing engine to render the page, close the TCP connection

The call, the apply, bind the difference

Call,apply,bind (),bind (

• The main difference between Call and apply is that the parameters passed after call are separated by commas
• The arguments passed by apply are of the Array form. The arguments passed by apply start with A, so they should be of the Array form.
• Bind returns a function, followed by parentheses if it is to be executed
  • Such as:Bind (obj, 1, 2,)(),bind can be separated only by commas and cannot be an array
• Hand bind case:

function bind_1(asThis, ... args) {
  const that = this; 
   // this is the fn call to bind
  function handle(. args2) {
   returnthat.apply(asThis, ... args, ... args2) }; handle.prototype= that.prototypereturn handle
}
Copy the code

How does Ajax relate to data interaction with the back end

I interact with the backend through Ajax and implement efficient development of the front and back ends through unified interface documents. If the interface documents cannot be specified in detail or the parameters in the interface documents cannot provide data, I will take the initiative to communicate with the back-end engineers until the business development related to the interface is completed. Of course, to verify some of the interface issues, there are auxiliary tools, such as runAPI, an online testing tool

How do you work if the back-end data interface is not ready

If the backend interface is not ready to, I will communicate with the back-end engineer, the format of the data returned by setting interface, and then the front through some mock data tools (the last company is using a easymock, thief simple) to mass produce false data, can let the front-end and back-end development at the same time, without having to wait for the back-end data interface to write good development again, This improves the overall development efficiency of the project

Describe your understanding of ajax’s same origin policy

The Same Origin policy, a well-known security policy introduced by Netscape, is now used by all javascript enabled browsers. Originally, it means that the Cookie set by page A cannot be opened by page B unless the two pages are “identical”. “Homologous” means “three identical”.

Ajax same origin policy is for security reasons. Ajax does not allow access to resources under different domain names.

Describe when cross-domain solutions are generated and how they are implemented.

Cross-domain access occurs in the following cases: Different protocols, different domain names, different ports, and different domain names and IP addresses.

Cross-domain solutions There are three mainstream solutions

Your understanding of synchronous and asynchronous

Sync, or sync, literally means that code is executed line by line, and subsequent code and requests are not executed until the previous code and request have been executed

The HTTP status code

Deep copy, shallow copy

• Use es6Object.assign({},{})Do object merge, if it’s an array you can use ES6Array.from, or es6’s extension operator. arr
• If you use ES5, you need to loop for shallow copy, and if you use deep copy, you need to recurse. Of course you can use it* * JSON. Parse (JSON. Stringify (object)) * *To implement deep copy

What is the biggest feature of VUE or what is the core of VUE

A common modifier for Vue

• The v-ON directive uses the following modifiers:
  • .stop– callevent.stopPropagation(), disable event bubbling.
  • .prevent– callevent.preventDefault(), to prevent the default behavior of events.
  • .capture – Use capture mode to add event listeners.
  • .self – The callback is fired only if the event is fired from the element itself to which the listener is bound.
  • . {keyCode | keyAlias} – only events from the specific trigger callback key trigger.
  • Native – Listens for native events on the component root element.
  • .once – Triggers only one callback.
  • .left – (2.2.0) Is triggered only when the left mouse button is clicked.
  • .right – (2.2.0) is triggered only when the right mouse button is clicked.
  • .middle – (2.2.0) Is triggered only when the middle mouse button is clicked.
  • .passive– (2.3.0) { passive: true }Mode to add listeners
• Note: If you are wrapping your own component or using a third-party UI library, you may find that this does not work, so you need to use the ‘·. Native modifier.

< span style =" box-sizing: border-box! Important; word-wrap: break-word! Important; "style =" box-sizing: border-box! Important;"Copy the code

• A common modifier used by the V-bind directive

Why must data in Vue be a function

<script> export default {data() {// return a unique object. Do not share an object with other components. Return {menu: MENU.data, poi: POILIST.data } } } </script>Copy the code

Since components can be shared, but their data is private, each component should return a new data object, returning a unique object instead of sharing an object with other components

The difference between v-if and V-show

• Both V-if and V-show can show and hide an element, but there are essential differences
  • V-if is lazy. If the value is false, the element will not be loaded. If the value is true, the element will be loaded dynamically
  • V-show: yes The corresponding HTML code is loaded whether the value is true or false. If the value is false, display:none is used to hide the HTML code from the page. If the value is true, display:block is used to display the HTML code on the page
• Application scenarios: V-show is used in frequent switching cases, and V-if is used in infrequent switching cases

What does vue filter do (vuE1.x vs. vuE2.x)

The VUE filter is used to format the rendered data.

For example: the gender of the data returned in the background is 0 and 1, but the rendering to the page can not be 0 and 1, I have to convert to “male” and “female”, then the filter will be used, and the commodity price read out is a common value, such as: 230035, but I want to add a currency symbol and thousands of cents in front of it, such as: How to create a filter? Similar to creating a custom directive, there are also global and local filter forms

• Global filter

Vue.filter(' filter name ',function(parameter1, the parameter2,...) {

      / /...... .
      returnFormat of data to return})Copy the code

• Local filters: Add the filters attribute inside the component to define the filters

Fitlers :{filter name (parameter)1, the parameter2,,... Parameters n) {/ /...... .
      returnFormat of data to be returned}}Copy the code

What are the forms of vUE component communication (i.e., value transmission) and how are they implemented

There are three types of vUE communication: parent-child communication, child-parent communication, and brother-to-brother communication

How to achieve vUE transition animation

Vue transitions are implemented through the Transition component provided in VUE

<transition name= "name" >< router-view></router-view> </transition>Copy the code

Vue bidirectional data binding principle

A: The core is mainly implemented using ES5 ** object.defineProperty **, and then use the getter and setter to achieve two-way data binding, and that’s about it. It’s actually a little more complicated to implement than this, but I’ve seen it

Understanding of vUE route hooks (or VUE route guards)

• A VUE route hook intercepts information about the current route and the route to be jumped during the route jump. There are three types of route hooks
  • Global routing hook

beforeEach(to,from,next){}Copy the code

• Hooks exclusive to the route

beforeEnter(to,from,next) {

  }
Copy the code

• Hooks within a component

beforeRouteEnter(to,from,next) { 
   / /...
}
beforeRouteUpdate(to,from,next) {
  / /...
}

beforeRouteLeave(to,from,next) {
   / /...
}

Copy the code

• Application scenarios: Dynamically setting the page title and determining the user login permission: Code examples

// Global Route navigation guard
vueRouter.beforeEach(function (to, from, next) {
    const nextRoute = [ 'detail'];
    const auth = sessionStorage.getItem("username");    
    let FROMPATH = from.path;
    // Go to the above three pages
    if (nextRoute.indexOf(to.name) >= 0) {
    	// The path in the array is equivalent to the page with permission, and the page in the arraylist should be logged in
        if(! auth) {let params = Object.assign({frompath:FROMPATH},from.query);
			next({path: '/newlogin'.query:params}); }}// If you have logged in, go to the login page and jump to the home page
    if (to.name === 'newlogin') {
        if (auth) {
// vueRouter.push({name: 'index'});
 			next({path: '/'});  
        }
    }
    next();
});

Copy the code

1. The route was loaded lazily. Procedure

2. The Gzip compression function is enabled

3. Use the Externals property of WebPack to separate out libraries that don’t need to be packaged, reducing the size of the packaged files

4. Server Rendering with Vue (SSR)

• Both the cross-domain front-end and back-end can be implemented. If only for VUE, VUE itself can be implemented by proxy
  • Configure proxy in index.js in config to implement this:

• “Use scaffolding reverse proxy (proxy) in the development process, and configure CORS at the back end when going online (if CORS need to automatically pass cookie, the front end also needs to be configured)

How does VUE dynamically add attributes to achieve data response?

• Vue is mainly used byThis.$set(object, 'property', value)Add, as I recall, if you change the value of a property of a reference type, you can render it automatically.

Your understanding of the Axios interceptor

The AXIos interceptor allows us to automatically intercept and handle back-end HTTP requests and responses in a project, reducing the amount of code required for requests and responses, improving development efficiency and facilitating maintenance later in the project

Such as:

Or you can manipulate public data

• CSS does not have the concept of local styles, and vue scaffolding is implemented by adding scoped to the style TAB

Vue directory structure (you may ask about the vUE project directory structure during the interview)

Say what you think of VUEX

Application scenario:

• One: sometimes need to dynamically add events for some DOM elements on the page according to the data, which requires to set when the DOM elements are rendered, but the created and Mounted functions are generally not rendered, so there will be a problem that can not get, add the event, this time will use nextTick processing
• Second, if you are using a third-party plug-in and want to reapply the plug-in when some dom generated by Vue changes dynamically, you need to perform the reapplication method in the callback function of $nextTick.
  • For example, when better- Scroll is applied

• Get focus after data changes

• Instead of updating the DOM directly when Vue sees a change in data, it starts a queue and buffers all data changes that occur in the same event loop. When buffering, duplicate data is removed to avoid unnecessary computation and DOM manipulation. Then, in the next event loop, Tick, Vue refreshes the queue and performs the actual (deduplicated) work. So if you use a for loop to dynamically change the data 100 times, it only applies the last change. Without this mechanism, the DOM would have to be redrawn 100 times, which is a lot of overhead.
• Vue preferentially uses native based on the current browser environmentPromise. Then and MutationObserverIf neither is supported, then setTimeout is used instead.
• Given how Vue asynchronously updates the DOM, the error in the above example is not difficult to understand. In fact, when this.showdiv = true is executed, the div will still not be created until the next vue event loop. The $nextTick is used to know when the DOM update is complete, so the above example code needs to be changed to:

<div id="app">
    <div id="div" v-if="showDiv">This is a text</div>
    <button @click="getText">Get div content</button>
</div>
<script>
var app = new Vue({
    el : "#app".data: {showDiv : false
    },
    methods: {getText:function(){
            this.showDiv = true;
            this.$nextTick(function(){
                  var text = document.getElementById('div').innnerHTML;
                 console.log(text); }); }}})</script>
Copy the code

Click on the event, and the console prints out the contents of the div, “This is a piece of text.” In theory, we should not have to actively operate the DOM, because the core idea of Vue is data-driven DOM, but in many businesses, we can’t avoid using some third-party libraries, such as Popper. js, Swiper, etc., which are based on native javascript have a complete life cycle of creation, update, and destruction. When used with Vue, take advantage of the $nextTick.

The priority of v-for and V-IF

When they are on the same node, V-for has a higher priority than V-if, which means that V-IF will be repeated separately in each V-for loop. This priority mechanism is useful when you want to render nodes for only a few items, such as:

<li v-for="todo in todos" v-if=! "" todo.isComplete">
  {{ todo }}
</li>
Copy the code

The above code only passes unfinished Todos. If your goal is to conditionally skip the execution of the loop, place v-if on the outer element (or

Function of the keep-alive component in vUE

Keep-alive: Used primarily to preserve component state or avoid rerendering.

Such as: Have a details list page and a page, so users will often perform open details = > to return to the list = > open details such word lists and details are very high frequency of a page, so it can be used to list component caching, so every time the user returned list, can render quickly from the cache, rather than to render.

1. Properties:
   1. Include: a string or regular expression. Only matching components are cached.
   2. Exclude: indicates a string or regular expression. Any matching components are not cached
2. Usage:
   1. When wrapping dynamic components, inactive component instances are cached rather than destroyed. and<transition>Similar,<keep-alive>Is an abstract component: it does not render a DOM element itself, nor does it appear in the parent component chain.
   2. When the component in<keep-alive>In versions 2.2.0 and later,The Activated and deactivated life cycles are triggered in all nested components in the tree.

Common interview

• To introduce myself

My name is XXX. I have been engaged in front-end development for several years. I master the following technologies: HTML, CSS, H5, C3, javascript bootstrap framework, including: Vuex Eleemntui axios Echart… React technology station React ANTd axios Redux version management tool WebPack in the past few years: Adaptation issues REM Flex responsive IE9 V -for rendering data in Option, characters are not displayed issues select style interface security issues via virtual DOm: Interface send and request unified encryption, through the key verification there are many common problems, I summarized a document, I believe these are no longer a problem, I hope to join our company to make our company’s project more humane

• Problems encountered in the project: Project introduction Self introduction