• One year working experience, hangzhou post

The personnel face

  • Acceptable overtime
  • Why do you want to change your job
  • Expected salary range
  • What are your future plans

technical

  • Introduce yourself, what happened in school, what recent project, using technology stack?

Topic, Vue related (classified, simple summary)

First, work at ordinary timesVue.$set()How does it work?
  • When an ordinary JS Object is passed to a Vue instance as the data option, Vue will iterate over all the properties of the Object and use object.defineProperty to turn them into getters/setters.
  • Official definition: If a new property is added to an instance after it has been created, it does not trigger view updates.
  • Disadvantages of object.defineProperty: Cannot detect additions and deletions of Object properties
  • You can useVue.set(object, key, value)Method to add the response property to the nested object
2. Why should data in Vue be a function?
  • First of all, a lot of data is stored in data, pointing to the same address
  • Values for each component in the page are retrieved from data (same address)
  • When data is returned using a function, the data attribute of each instance is independent and does not affect each other.
  • To summarize, avoid multiple components sharing the same scope data.
3. Use, understand and operate in the Vue life cycle?
  • beforeCreateAn empty Vue instance object is initialized. Data and methods are not initialized.
  • createdWhen data and Methods are initialized, you can perform data manipulation or call methods from here
  • beforeMountThe template is compiled in the content, but not mounted to the page (the page interpolates with {{MSG}}).
  • mounted“, the Vue instance has been initialized and the browser page is displayed properly.
  • dataWhen the data changes
    • BeforeUpdate: The data in data is updated, but the old data is still on the page.
    • Updated: At this time, the data on the page has been consistent with the data, and they are all the latest.
  • beforeDestroyWhen the actual destruction process is not entered, the data and methods mounted on the instance can continue to be used
  • destroyedThe component has been completely destroyed, and the component data and method instructions are not available.
When components in Vue are nested, what is their lifecycle relationship?
  • The component normally loads the rendering process

Parent beforeCreate-> parent created-> parent beforeMount-> child beforeCreate-> child created-> child beforeMount-> Child Mounted -> parent

  • Child component update process

Parent beforeUpdate-> child beforeUpdate-> child updated-> parent updated

  • Parent component update process

Father father beforeUpdate - > updated

  • Destruction of the process

Parent beforeDestroy-> child beforeDestroy-> child Destroyed -> parent Destroyed

  • After the child component is mounted, the parent component is not mounted. Therefore, when component data is displayed, API data is obtained in the parent component mounted, but the child component mounted cannot be obtained
What are the common communication methods used by components in Vue?
  • The parent passes values to the child component
    • When referencing a child component, the data name is specified by the bind bind on the child component
    • < props > < props > < props > < props >
    • The type annotation of the data passed can be used
  • Child components pass values to parent components
    • Custom event functions are bound to child components this.$emit('childFun',data);
      • Data imaginates the values passed by the parent component for the child component
    • <child @childFun="parFun"></child>
    • The parent component needs to define the function parFun(data) fetch
  • Pass values between sibling components
    • Using eventBus eventBus implementation
  • Of course, a more appropriate solution is to use VUEX for data management.
Vi. Differences and usage scenarios between V-IF and V-show
  • V-if is a conditional statement that does not exist in the DOM. It is removed and created to achieve the display effect
    • Suitable for not changing the state of the current element much
  • V-show persists in the DOM and is set if the condition is not metdisplay:none
    • Suitable for frequent manipulation of elements to show and hide
Seven, Vue$nextTick()Why? What are the scenarios?
  • Definition: A delayed callback is performed after the next DOM update loop ends. Use this method immediately after modifying the data to get the updated DOM.
  • NextTick () is a callback function that is deferred until after the next DOM update, which is automatically executed after the update has been rendered in the DOM.
  • Background: When created, data and Methods are initialized, but the DOM is not rendered.
  • Mounted, the DOM node on the page is initialized and mounted.
  • Therefore, in the created DOM operation, we need to put js code in the callback function of vue.nextTick ().
8. Is there any performance optimization in Vue?
  • Open answer:
    • For example, when a component is in a for loop, a unique key value is set so that vue can locate the data more quickly
    • Use keep-Alive for component caching
    • Three – party libraries are introduced on demand to avoid useless loading
Vue for data defined in data, but do not need to listen to how to deal with, such asObject.freezze()
  • Definition: The object.freeze () method can freeze an Object. This object cannot be modified, added or removed
  • Using object.freeze () gives you a big performance boost when you’re sure you won’t operate on the Object
Ten,V-htmlHow does it work?
  • The JSON data coming in the background contains HTML tags to avoid displaying them as characters
  • V-html is required for tag parsing

Feelings: Vue pays more attention to practical use and scenario solution in production, but routing and Vuex are not surprising.

HTTP related

One, common request method
  • The GET method to request data from the specified resource. (GET request has length limit, can be cached and cannot be modified)
  • POST method, data transfer used to create or update resources (POST has no length limit and cannot be cached)
  • The PUT method, which is very similar to the POST method, except that when the request is the same PUT overwrites the previous one, and POST does not
  • The DELETE method is used to DELETE the specified resource
Two, communication frequently used status code
  • 200 OK: The client request is processed properly on the server. [Direct browser cache]
  • 3XX redirection: Indicates that the browser needs to perform some special processing to process the request correctly.
    • 301 Moved Permanently (permanent redirection)
    • 302 Found (temporary redirection)
    • 304 Not Modified The client’s cache resource is up to date and requires the client to use the cache.
  • 4XX Client error
    • 400 Bad Request: Indicates that a syntax error exists in the Request packet
    • 403: The resource is not available, the server understands the client’s request but refuses to process it, usually due to permission issues
    • 404 Not Found Indicates that the requested resource could Not be Found on the server
  • 5XX Server error
    • 500 Internal Server Error
    • 503 Service Unavailable
How long is the cache set in the HTTP header
  • The cache expiration time, which specifies the expiration time of the resource, is a specific point in time on the server
  • Expires=max-age + request time, in combination with last-Modified
  • Usually cache-control, relative time
    • For example, set cache-control :max-age=31536000
    • Valid for (31536000/24/60 * 60) days
Strong cache and negotiated cache
  • Strong caching requires the server to set Expires and cache-control.
    • Strong caching is the most effective approach to caching in performance tuning and can greatly improve performance
    • The strong cache does not send requests to the server, so the pressure on the server is greatly reduced
    • Strong cache hit shows: 200 OK(From disk cache)or(From memory cache)
  • Negotiate the cache
    • The negotiation cache needs to send a request to the server to determine whether it is expired, similar to a cache verification
    • If the strong cache does not match, the negotiation cache is initiated.
    • Negotiation caching does not reduce the number of requests made, but it does reduce the body size returned
    • Negotiation cache hit: 304 Not Modified
What are the current mainstream VERSIONS of HTTP?
  • The mainstream is HTTP 1.0/ HTTP 1.1 / HTTP 2.0(not widely used)
  • The content is too much to repeat
Step 6: Enter url from browser address bar to display page (QAQ, bad street problem)
  1. The domain name must be resolved and converted into the corresponding public IP address.
    • The domain name is resolved to an Ip address. The DNS service resolves the domain name to an Ip address. If the DNS server at this level cannot find the domain name, the DNS server at the next level forwards the query request to the DNS server at the next level. Until the root DNS server. If the corresponding public Ip address is found, the Ip address is returned at the next level. If the public Ip address is not found, an error message is displayed, indicating that domain name resolution fails.
  2. According to the public IP address through the huge Internet routing to the corresponding server;
    • After obtaining the public IP address, you can find the corresponding server through the router.
  3. Establish reliable TCP data connection;
    • Before using THE TCP protocol, a data link must be established between the client and the server. It consists of three steps, also known as the TCP three-way handshake.
  4. The server processes and distributes the request in this URL, returning an HTML;
    • The client distributes and processes the URL according to the different information it carries. Through the corresponding URL format dispatch to different background processing Java classes, data processing, and then return the corresponding HTML file to the client
  5. The browser or client renders the HTML;
    • Web pages are mostly dynamic HTML. It contains a lot of JS code. In order to load the page as soon as possible, the current browser generally adopts the principle of loading while parsing
The browser’s parsing is described in more detail
  • It describes the rules and procedures of how to load HTML and CSS while parsing.

Experience: HTTP is very basic and simple, interwoven with TCP handshake SYN data and ACK confirmation packets, and symmetric and asymmetric encryption (whether the secret key is shared or not).

JavaScript related

First, JavaScript roughly two types of data, what is the difference in memory storage?
  • This refers to basic data types and reference data types
  • Basic data type
    • Stored in the stack memory, it occupies a small space, the size of the fixed, easy to frequent use.
  • Reference data type
    • Reference data types are stored in heap memory
    • Stack memory holds a reference to the actual object in heap memory (which is actually the address)
Two, localStorage related and TAB communication
  • Background: localStorage is persistent compared to sessionStorage (closing the session does not delete it)
  • The limitations of localStorage
    • Not visible in browser privacy mode, that is, cannot be read
    • The value is of type stringJSON.stringify()orJSON.parse()
    • Because it is a new feature of H5, it is not supported by older browsers (such as IE8).
  • How to communicate
    • Background: Storage event, is a localStorage unique event, as long as the content of localStorage changes will trigger the event (not the page to trigger)
    • LocalStorage is a container for the browser to store data and is shared for multiple pages
    • Use storage events to monitor the changes in the localStorage in real time, without using the timer
How to find the intersection of two arrays in JavaScript?
  • The filter() method creates a new array by examining all the elements in the specified array that meet the criteria.
    var arr1 = [6.7.8];
    var arr2 = [7.8.9];
    var arr3 = arr1.filter(function(num) {
        returnarr2.indexOf(num) ! = = -1;
    }); / / [7, 8]
Copy the code
  • The array method of includes returns whether an array contains a specified element
    let intersection = arr1.filter(v => arr2.includes(v))
Copy the code
Quick array creation in JavaScript?
  • The while loop fills the array
  • use'[]'ornew Array()
  • usefill( )In combination withmap( )
    • The fill() method is used to replace the elements of an array with a fixed value
    • The map() method returns a new array whose elements are the processed values of the original array elements
    • Map () does not detect empty arrays.
let newArr = new Array(10).fill('').map( (item, index) => index+1);
Copy the code
How to sum an array in JavaScript?
  • Normal for loop implementation
  • usingevel( )Parse string
    • eval( )The function evaluates a string
    • arr.join('+')Array concatenation, then eval() parse computation (low performance)
  • By using the reduce ()
    • The reduce() method receives a function as an accumulator
    • Reduce () does not perform callbacks on empty arrays.
var sum = arr.reduce(function (prev, cur) { return prev + cur},0);
Copy the code
How to determine whether an object is an array?
  • Use the array.isarray () method.
  • Use the constructor, obj instanceof Array
  • From the perspective of the prototype, the Array. The prototype. IsPrototypeOf (obj);
    • The isPrototypeOf() method determines whether the Array is in obj’s prototype chain

Special for front – end written test

  • We have one hour, four questions
Find the sum of the KTH and MTH largest numbers in the array( 15min )
    Example: / * * * * * let arr =,2,4,4,3,5 [1], k = 2, m = 4 * findTopSum (arr, k, m) * 2 4, up to 2 * 4 so 4 * 2 + 2 * 1 = 10 * /
    var arr = [1.2.4.4.3.5], k = 2, m = 4;
    function findTopSum(arr, k, m) {
        var hash = {};
        // Record the frequency of occurrence
      for (const item of arr) {
            if (hash[item])
                hash[item] = hash[item] + 1
            else
                hash[item] = hash[item] = 1
        }
        // Remove the weight after sorting
        arr = [...new Set(arr.sort((x, y) = > { return x - y }))];
        // The KTH and MTH largest values
        var paramK = arr[arr.length - k];
        var paramM = arr[arr.length - m];
        // The KTH largest value * frequency
        var sumK = paramK * hash[paramK] ? paramK * hash[paramK] : 0;
        var sumM = paramM * hash[paramM] ? paramM * hash[paramM] : 0;
        return sumK + sumM;
    }
    findTopSum(arr, k, m)
Copy the code
2. The median value of the cleared object isUndefined or null keyAnd return the new object without modifying the original object.( 15min )
  • If it is not done with Reduce, how is it done with Reduce?
    • What if this rule allows customization?
    • What if no side effect is allowed, that is, the parameters in the Reduce callback function cannot be modified?
    • If you can do all of these at once, you can use only one function
    / * * * / subject
function clean(target){}
var target={a:undefined.b:null.c:false.d:' '.e:0};
function cleanCust(/* Custom rules */){}function cleanUseReduce(target){/* Use reduce to complete */ }
Copy the code
  • General method implementation/ * * to solve the clean (target); * /
  var target = { a: undefined.b: null.c: false.d: ' '.e: 0 };
  var rule=['string'.'boolean'];

  function clean(target) {
    let obj = {};
    for (const index in target) {
      var rule = typeof target[index] == 'undefined' || typeof target[index] == 'object';
      if(! rule) obj[index] = target[index] }return obj;
  }
Copy the code
  • Method implementation with custom rules/ * * answer cleanCust (target); * /
 function cleanCust(target,rule) {
  let obj = {};
  // Check rules
  for (const i in target) {
    var filter= rule.some(function(item,index,array){
      return typeof target[i]==item;
    })
    if(! filter) obj[i] = target[i] }console.log(obj);
  return obj;
}
cleanCust(target,rule);
Copy the code
  • Reduce method implementation
    • This written test is written cannot come out, afterwards thought for a long time, write of very ugly, do not know how to realize ability good
/ * * *@params* transArr [{x:'23'}, {a: undefined}..... {e: 0}] * newobj Stores qualified objects */
 var target = {x:'23'.a: undefined.b: null.c: false.d: ' '.e: 0 };
 function cleanUseReduce(target,rules){ rules=rules? rules:['undefined'.'object']
  var transArr = [];
  var newobj={};
  for (let i in target) {
      let obj = {};
      obj[i] = target[i]; 
      transArr.push(obj)
  }
  transArr.reduce((currentValue, currentIndex, arr) = >{
    for (var index in currentIndex) {
      var falg=rules.includes(typeof currentIndex[index])
    }
    if(! falg) newobj[index]= target[index] },[])return newobj;
}
cleanUseReduce(target)
Copy the code
Three, anti-shaking throttling( 15min )
  • Events are triggered consecutively, only once in a period of time
  • Events are triggered continuously. After event triggering stops, the event is triggered once.
        btn.addEventListener('click',throttle(submit,3000))
        function submit(e){
          console.log(The '-');
        }
        function throttle(cbk,delay){
          // Set the initial value
          var begin=0;
          return(. args) = >{
              var cur=new Date().getTime();
              // The time between each click and the last click is greater than the defined interval
              if(cur-begin>delay){
                  cbk.apply(this,args)
                  // Update the initial valuebegin=cur; }}}Copy the code
        btn = document.getElementById('btnId');
        btn.addEventListener('click',debounce(submit,2000))
        function submit(e){
            console.log(The '-');
        }
        function debounce(cbk,wait){
            let timer=null;
            return(. args) = >{
                if(timer) clearTimeout(timer)
                // Avoid the function itself polluting external arguments
                timer=setTimeout(() = > {
                  timer=null ;
                  cbk.apply(this,args) }, wait); }}Copy the code
4. Data screening( 15min )
  • A group of students, the test of Chinese and mathematics two, screened out the total score of the first student
  • The data type is customized, the total score is the same and the first, then the filter is tied
/ * * *@params* Grade * pickName */
  var math = { xiaoMing: 66.xiaoHua: 66.xiaoHong: 95.xiaoLan: 99.xiaoBai: 68 };
  var chinese = { xiaoMing: 66.xiaoHua: 66.xiaoHong: 88.xiaoLan: 87.xiaoBai: 95 };
  function pick(M, C) {
    var Grades = 0;
    var pickName = ' ';
    for (const key in M) {
      M[key] = M[key] + C[key];
      if (M[key] > Grades)
        // If the latter score is greater than the former, the highest score is reset
        [Grades, pickName] = [M[key], key]
      else if (M[key] == Grades)
        // The same as the highest score is recorded together
        pickName += key;
    }
    console.log('The highest score is${Grades}--${pickName}`);
  }
  pick(math, chinese)
Copy the code

expand

First, you have written PHP on your resume. Do you know any API design specifications? Such as RESTful API

  • Well, I dug a big hole for myself, and I wrote, and I added, and I revised, and I checked, and I didn’t know
  • Vague casually said, finally said that he is not very good at this aspect.
  • Ruan Yifeng teacher RESTful API design specification

2. How are front-end projects generally deployed?

  • I have not deployed this in production, according to their own demo answer is very bad
  • Webpack automation projects
  • Generate dist files through the NPM Run build project
  • The generated dist file is ported to the Tomcat server

Use Git in your work

  • I didn’t say pull and push
  • Express the common checkout, and how to tag different requirements nodes
  • When it comes to code merges, dev and release develop branch distinctions
  • How are conflicts resolved, and how do I choose several of the multiple Commits
    • I replied that I usually use cherry-pick
  • How to keep the company’s code (set up a private server internally)

Fourth, expand the content

  • Understanding and using The Docker Linux Nginx mock
  • What is it like to associate at work, the company’S API rules
  • Through which channels to obtain technical information, what learning habits
Something you want to know?
  • The company’s current project business development direction and technical stack, the situation of technical members, work location.
conclusion
  • The feeling is to solve the production practicability is given priority to, the original JS grammar and the relevant development skills ask will be less.