This article is reproduced in: Ape 2048 Website ☞ https://www.mk2048.com/blog/blog.php?id=h220212b1j
We all know that 'not forget the early heart, square was always,' but how many people know that 'early heart easy to get, always hard to defend.' Times are changing, technology development, infrastructure has not changed. When learning new technologies should not fall basis.
1 Introduction
By chance, let me countless times when the interviewer when the interviewer, and also talked to several interviewers. As we have to deal with the interviewer, I would certainly be prepared to face the questions, so I probably know what the interviewer is level. At this time, should also explain that his writing those topics. Because the problem is I wrote it myself, not online pick, so the knowledge basis for comparison, nor comprehensive. If you have any questions opposite suggestions, please advice.
2. The test sites - Object Oriented
Requirements: definition of ' I eat hot pot '
Process-oriented thinking is: action (I eat hot pot)
Code implementation aspects:
//面向过程
let eat=function(who,someThing){
console.log(`${who}吃${someThing}`);
}
eat('我','火锅');//我吃火锅
Object-oriented way redrafting this instance.
This question, just want to have an object-oriented meaning here on the line, I expect the answer is this.
let person={
name:'守候',
eat:function(someThing){
console.log(`${this.name}吃${someThing}`);
}
}
person.eat('火锅');
Better way to look at the following article: JavaScript: several error-prone points interview frequent . Here not start speaking.
3. The test sites - pre-parsed
The following code, written results
This question I'm impressed, because I was more than a year ago, it was said in the Q group to see its own variety of straight proficient, I will work out the problem to ask questions, grasping a prospective, since those various proficient person, not an answer out. Even the interview questions, it was also out of the pit.
Time before the release of an article, interview questions have mentioned this, also scolded, probably mean is: Now what age, ES do not know how many versions updated, so who write code? I saw this and did not respond, and who did not intend to tear. But I think the first thing in mind is this: previously, there are micro-blog news said 70% of the users in favor of mathematics quit college entrance examination, it was negotiated Answer: mathematics is used to eliminate the 70 percent of people. Here I want to say, although write the code development is sure to be denounced, but face questions about a problem not only on the development of the test, there are some basic knowledge test. This question is one of them. And now I feel there is a need to know this knowledge, not write to all the people of the era ES6, ES5 abandon era.
alert(a)
a();
var a=3;
function a(){
alert(10)
}
alert(a)
a=6;
a();
//------------分割线------------------
alert(a)
a();
var a=3;
var a=function(){
alert(10)
}
alert(a)
a=6;
a(); Before writing this article has written, pasted next assignment now.
In fact, on two test sites, the first variable declaration in advance, the second function declaration takes precedence over the variable declaration!
Now I will briefly analyze,
the first part of the results:
1. function declaration in preference to variable declarations, so the beginning, a is function a(){alert(10)}, you will see this function.
2 a(), execution of the function, is the emergence alert(10)
3. performed var a=3;so alert(a)that the display 3
4. As ais not a function, and so on down to the execution a()time being given.
The second part of the operating results:
1.underfind
2. error
before said, is to pre-parsed with varand functionkeywords declared in advance, but will not be assigned. So is the beginning underfind, then the error is due to the implementation of a()the time, anot a function.
//函数表达式，和变量声明同等
var a=function(){
alert(10)
}
//函数声明，优于变量声明
function a(){
alert(10)
} 4. The test sites - event delegate
A simple needs, such as the following li ul want to add a click event, click on which li, li will show that the innerHTML. This seemingly very simple! code show as below!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul id="ul-test">
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</body>
<script type="text/javascript">
var oUl=document.getElementById("ul-test");
var oLi=oUl.getElementsByTagName("li");
for(var i=0,len=oLi.length;i<len;i++){
oLi[i].addEventListener("click",function(){
alert(this.innerHTML)
})
}
</script>
</html>
The question is:
1.For cycle, the cycle is li, li 10 to 10 cycles Ge, binding 10 events, 100 to cycle 100 times, 100 times the binding event!
2. If li is not already on the page, elements of the future, is the page to load, and then came through dynamic loading js, the above wording is invalid, click li is not responding!
How to solve these problems?
In that event delegate questions of the test center, the event is tied ul above, after the li can easily be added. code show as below
var oUl=document.getElementById("ul-test");
oUl.addEventListener("click",function(ev){
var ev=ev||window.event;
var target=ev.target||ev.srcElement;
//如果点击的最底层是li元素
if(target.tagName.toLowerCase()==='li'){
alert(target.innerHTML)
}
})
But some interviewers is to answer this question from the perspective of vue - bound use v-for. While our project is to use vue, so to say yes, but I did not mention this question to vue, vue said, but rather is a term of points.
The operation of the test sites -DOM
For example, there is a demand, to which was added 10 ul Li, the following code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul id="ul-test">
</ul>
</body>
<script type="text/javascript">
var oUl=document.getElementById("ul-test");
for(var i=0;i<10;i++){
var oLi=document.createElement('li');
oLi.innerHTML=i;
oUl.appendChild(oLi);
}
</script>
</html>
Question: Here is equivalent to 10 times the operating DOM, what programs to reduce the number of operations of the DOM? You can write code simple instructions.
This question, there are still a few people to solve the problem (v-for, data) from the perspective vue, although this can not be wrong, but I did not mention anything to the topic of vue. InnerHTML test sites is the use of the form or document fragments.
code show as below
innerHTML
var oUl=document.getElementById("ul-test");
//定义临时变量
var _html='';
for(var i=0;i<10;i++){
//保存临时变量
_html+='<li>'+i+'</li>'
}
//添加元素
oUl.innerHTML=_html;
Documents debris -createDocumentFragment
var oUl=document.getElementById("ul-test"),_frag = document.createDocumentFragment();
for(var i=0;i<10;i++){
var oLi=document.createElement('li');
oLi.innerHTML=i;
//把元素添加进文档碎片
_frag.appendChild(oLi);
}
//把文档碎片添加进元素
oUl.appendChild(_frag);
6. The test sites - a deep copy of the object
A write function, to achieve deep copy of an object
Required to achieve a function clone.
let obj={
name:'小明',
age:24
}
let obj1=clone(obj);
Modify obj1, will not affect the value of obj.
This question, in obj above, I deliberately write only one, there is no subject or object nested arrays, it is to see at depth of the interviewer can think about. The results interviewers have stepped pit. However understandable, after all we are all terms for the title.
This answer is substantially similar to the following
function clone(object){
let _obj={}
for(let key in object){
_obj[key]=object[key];
}
return _obj;
}
let obj1=clone(obj);
//-------------------或者-------------
function clone(obj){
let _obj=Object.assign({},object);
return _obj;
}
let obj1=clone(obj);
The program objective has been achieved, but if obj inside the property, the object or nested array of this there is a problem. So the ideal solution would be this.
function clone(object){
let _obj=JSON.parse(JSON.stringify(obj))
} This solution, if desired property value is a function or undefined, will be filtered out. Insurance practice is so below. Principle is very simple, is traversed one by one, if the detected value is a reference type attribute to traverse with the current property.
function clone(obj){
if(!obj&& typeof obj!== 'object'){
return;
}
var newObj=obj.constructor===Object?{}:[];
for(var key in obj){
newObj[key] =(obj[key]&&typeof obj[key]==='object')?clone(obj[key]):obj[key];
}
return newObj;
}
7. Other test sites
The remaining few questions are more general problem, not the only solution, there is not a unified answer!
1. If the design uses a non-standard font you how to achieve?
Images, fonts, icons instead if English is relatively small fonts can be used css3 of @ font-face.
2. On the development project and know that the way to optimize, improve performance and reduce page load time, aspects of code quality, code readability, etc.
Performance Optimization - compressed code, lazy loading, preloaded merge request, the small picture converting base64 encoding, such as load demand resources.
Optimization code quality - meaningful naming, comment appropriate, to avoid great function, to avoid strong coupling objects, like code logic clear.
3. List Es6, used some of the new features.
References are as follows:
ECMAScript 6 Getting
30 minutes to master the ES6 / ES2015 core (on)
master ES6 / ES2015 core (lower) 30 minutes
instance feel -es6 common grammar and superiority
ES6 Promise explain usage
4.Div + css layout when the page rendering and code readability point of view, what should be?
Semantic tags, class, and id and name meaningful naming standardized, css avoid nesting depth (level 3 must pay attention), to avoid @import,! Important, and the * wildcard avoid inline style introduced css like head.
Reference:
21 CSS advanced techniques
css writing proposals and performance optimization summary
5. say under their own understanding of the modular development and the benefits of modular development.
Improve development efficiency, favorable development team collaboration,
to avoid contamination of the global variable, naming conflicts,
facilitate code reuse and maintenance.
8. Summary
This is the face questions 10, My own solution is also finished. Although heat our technology stack used mainly vue, webpack this number, when I interviewed the exchange will ask relevant questions, but I could not in my face questions about the inside vue, webpack these topics, ask these articles topic, just want to know how the interviewer basis (because of the current market, many people are focused on learning popular frameworks, libraries, tools, etc., yet came to a foundation). Good foundation, then the frame is easy to use, but the foundation is not strong, on the familiar framework twenty-three and some build tools, there may be a future technology transition resistance. Now quickly developed front-end, technology is very complex, but the foundation has not changed. Suggest that you learn at the same time, new technologies, do not forget to consolidate the foundation.
Finally, if you have any questions opposite solution suggestions or recommendations out what kinds of questions, welcome advice.
------------------------- gorgeous dividing line --------------------
think Learn more concerns are my micro-channel public number: waiting for book Club
