preface

The interview date is 19:00, April 20th. I was late for 20 minutes due to personal reasons. Fortunately, the little sister of the interviewer was willing to wait for an enigma man.

Begin by

Name the font color value for the tag below

This question involves the relationship between CSS inheritance and weight

The selector format Priority weight
The id selector #id 100
Class selectors .class 10
Label selector div 10
Descendant selector li a 0

For the priority of the selector:

  • Label selectors, pseudo-element selectors: 1
  • Class selectors, pseudo-class selectors, property selectors: 10
  • Id selector: 100
  • Inline style: 1000

Look at the code first

<style type="text/css">
	#a {font-size:12px}
	div p{ font-size:13px }
	div .c{ font-size:14px }
    .a .b .c{ font-size:15px }
    #b{ font-size:16px }
</style>
<div id="A" class="A">
	<div id="B" class="B">
        <p id="C" class="C">I’am here</p>
	</div>
</div>
Copy the code

ps: Here I labelcAnswer wrong, because come up to begin to ask, I am more nervous, saycWill inheritbFont color.

Name CSS properties that can be inherited

In fact, this is an extension of the last question. In the following interviews, the interviewer will assess me according to what I have written and said, so the interviewer is very good

  • Font family properties
    • Word-break: break-word! Important
    • Text-weight: the weight of the font
    • Font-size: indicates the size of the font
    • Word-wrap: break-word! Important
  • Text series attribute
    • Text-indent: Indicates the indent of text
    • Text-align: horizontal text alignment
    • The line – height: line height
    • Word-spacing: Indicates the spacing between words
    • Letter-spacing: Indicates the spacing between Chinese characters or letters
    • Texttransform: Changes the wrapper of the text (uppercase, lowercase and capitalize)
    • Color: Text color
  • Element visibility
    • Visibility: indicates that the control element is displayed and hidden
  • List layout property
    • List-style: indicates the list style, including list-style-type and list-style-image
  • The cursor attributes
    • Cursor: Specifies the cursor state

Ps: Here theoretical things, I am still relatively in line, the general test handwritten I pulled,

JavaScript closures

Closures are involved here, initially thought to be the execution context

var a=0,b=0;
 function A(a){
    A = function(b){alert(a + b++)}
    alert(a++);
 }
 A(1);
 A(2);
Copy the code

Function (b){alert(A + b++)} = function(b){alert(A + b++)} = function(b){alert(A + b++)} = function(b){alert(A + b++)} = function(b){alert(A + b++)} = function(b){alert(A + b++)} = function(b){alert(A + b++)} A closure is formed. The call to A(2) executes alert(A + b++), where A in scope is 2 and the parameter passed is also 2, so the result is 4.

Ps: Although I explain here have that meaning, but certainly do not intuitively say this key point.

Iterating over nested objects

To write a function to obtain the value 1 in an object, STR = ‘A.B.C’ must be used;

A better answer is here

“I’m going to give you a surprising answer, but don’t look at it right after dinner, because I don’t want you to spit it out.”

//find(obj,'a.b.c') //1
//find(obj,'a.d.c') //undefined
var obj = {
    a: {b: {c:1}}}var str = 'a.b.c';

const find = (obj,str) = > {
  let arr = []
  for (const key in str) {
    if (Object.hasOwnProperty.call(str, key)) {
      if(str[key]! ='. ') {
        arr.push(str[key])
      }
    }
  }
  try {
    return `${obj[arr[0]][arr[1]][arr[2]]}`
  } catch (error) {
    return undefined}}Copy the code

The point of this problem is to know what methods are available to retrieve the values contained in an object.

There are two ways to do this:

  1. in[]Examples of ways to include a string expression in a suffix are:obj[a]
  2. You can use.The notation is as follows:obj.a

Ps: the above solution is to use [] method to solve this problem, my scalability is not high, but here to leave a pit!

The role of the Object. The hasOwnProperty

It is to leave a pit for oneself completely have, have!!!!!

Actually, by this point in the interview, I was already out of rhythm, but I wasn’t panicking,

The interviewer’s little sister laughed and instantly relaxed the nerves.

MDN’s official explanation

Ps: MY answer is to judge whether null or undefined, in the interviewer repeatedly encouraged, I said to judge the prototype chain ~~

Here the interviewer little sister smile good look 😊😊😊

Understanding prototypes and prototype chains

Based on the last question, the interviewer’s sister asked another question,

const b = 2
a = b
// q: who does a's prototype chain point to? What is the search order
// A. is b. is C. is D. is

// q: how to modify a's prototype orientation
// Answer: depth copy
// Q: Except copy
// A: After thinking over, I said construvtor.
// Answer: by the constructor

// the next question (: : ≦ ≦)
Copy the code

Correct answer: the stereotype of A refers not to B, but to Number. B is the base type, so a is reassigned, and the stereotype of A refers to Number. (After being reminded by the big guy in the comment area, I knew I was wrong.)

Ps: Here is completely the foundation is not good, because the project experience is more, ignore these things of the principle, which leads to in the technical assessment, this is a weak item.

Project data visualization,Vue high-level components

Here is my resume, there is a data visualization project in the project, and the project used Vue high order components (components lazy loading).

Components lazily load code

const MonthlyAddition = () = > ({
  // The component to be loaded (which should be a 'Promise' object)
	component: import('@/components/Echart/MonthlyAddition.vue'),
  // Display the delay time of the component when loading. The default value is 200 milliseconds
	delay: 900.// Lazy loading, 200 milliseconds by default
  // The component used when the load fails
	error: Hebberror, // Failed to load the display component
  // The component used when the asynchronous component is loaded
	loading: Hebberror, // Use components when loading
  // If the timeout period is provided and the component loading has timed out,
  // Use the component used when the load failed. The default value is' Infinity '
	timeout: 2000.// The default timeout is Infinity
});
Copy the code

JSX

export default { props: { nowTime: { type: String, default: '', }, }, render() { return ( <time class="head__time" datetime={this.nowTime}> {this.nowTime} </time> ); }};Copy the code

Ps: Here actually shows some of their own project experience, mainly the high-level components.

Higher-order components extend the topic

From the high-level component of the previous question, extend the Promise and timer, according to the state to determine whether the abnormal component is displayed

/ * * * *@param {Object} Falg logo *@param {Object} The date data *@returns * /
function componentsShow(falg = true,date) {
  let componentsTime = null
    return new Promise(function (resolve,reject) {
      if (falg) {
        componentsTime = setTimeout(function () {
          resolve()
        },200)}else{
        clearTimeout(componentsTime)
        if (date) {
          resolve()
        }else{
          reject()
        }
      }

  })
}
Copy the code

Project optimization

Here is actually a send points, optimization aspect I am still relatively good at, in an instant, feel

  • Lazy loading
  • CDN
  • File optimization
  • Webpack optimization

Participate in company template encapsulation in the project

Encapsulate multiple environments,Ecahrts plug-ins, Axios, Common Css styles,Esilit,

Ps here is a rough look at my project, I will also do their own roughly say.

Webpack uses those loaders

  • Babel-loader → escape code
  • Css-loader → Loads the CSS, supporting file import
  • Style-loader → inject CSS code into javaScript,
  • SCSS -loader → Escape SCSS

Ps: Here is a review of my understanding of Webpack, in fact, the answer is not very much, I feel my answer is not particularly good.

conclusion

Is the evaluation of the interviewer on my principle or poor, project experience is ok,

From her words revealed that I was not appropriate, basically after the third layer of questions, in fact, both sides know the result of the interview tacitly.

Through this interview, I have learned my own shortcomings. During the interview, I did not guide the interviewer into what I think is strong in theory. After the interview, I will learn the principles according to the interview and try to become a colleague with this little sister.

Looking better at the interviewer sister, did not summon up the courage to ask for a wechat what, too much loss, I hope she is still in half a year.