***
Describe yourself and your work experience (self introduction)
Self introduction: prepare well before the interview and express it fluently and methodically during the interview. It should be a bonus.
Background:
1. The interviewer has time to read your resume only when you introduce yourself. There are too many people to watch and can't remember. (so don't have the idea that the interviewer doesn't look at my resume. Be modest, sincere and patient)
2. What questions did he want to ask you in your self introduction. (don't dig a hole for yourself here. Some of the skills you said are likely to show up and ask you questions)
3. Understand your language expression ability, self-confidence and appearance.
About what:
1. Name, age, major, specialty and experience (valuable)
2. Introduce yourself in one minute and what people want to know.
Tell him something related to his recruitment. What is the position, what should be matched in a minute.
We must do the same job as the enterprise
3. Creative things. 70% of the time to highlight this piece.
What am I good at?
What is my most in-depth knowledge?
What is the best match for this position in my character?
What's the most successful thing I've ever done?
What is my main achievement?
Script (according to your actual situation)
Hello, my name is XXX. My last company was XXX., So all the projects our company does are related to XXX.
When I first entered the company, I actively participated in the interaction, project requirements, testing, coding and optimization. Because I was a newcomer, I took good advantage of every learning opportunity. I was responsible for completing my own work and the front end. At that time, although I was very busy and under great pressure, I really learned a lot. The later projects were constantly improving, and I was constantly participating.
In the last company, I gained not only in technology, but also in business ability, self-study ability and communication ability of colleagues, which I learned and I think is very important.
In terms of technology, I have been engaged in the work of web. The front-end technologies I master include ajax, js, div+css and html css. My colleagues also understand the java language and database table structure, so that the background personnel can communicate more effectively.
My personality is neither extroverted nor introverted. I get along with friends and colleagues and am extroverted. At work, I am introverted in code development. I like to devote myself to my work wholeheartedly. I also like making friends. I get together and talk with my friends occasionally. I always work with a serious, responsible and hardworking attitude.
Thank you. The above is my self introduction.
Last project done
Why introduce a recent project? Personal thinking: first, the interviewer will see whether your project experience is real and whether you really participate in it; Second, there is to see your ability, the degree of attention to a project, and how to solve problems? Teamwork ability, etc; Third, the interviewer will ask questions from the points of interest mentioned in your project experience. Therefore, in the face of introducing project experience, we must be fluent, confident and carry out good "Introduction" and "guidance".
Well, here's the text.
Combined with the words of the interviewer, give the following examples
| Key points | Rhetoric |
|---|---|
| Be able to consider the extensibility of the code and have the awareness of participating in the framework design | My project XX uses technology. The framework is Vue or React (this is the groundwork). When developing, I will first communicate with the back-end to see the prototype, clarify the logic, and discuss the rationality of some places, which interfaces and how many interfaces are needed for communication, what parameters need to be passed, request methods, and when writing the front-end page, I will use the idea of componentization, The reason for this is to better clarify the logic, turn complexity into simplicity, and facilitate the maintenance of later people. |
| Be aware of tuning, be able to find problem points through self-test, and then solve them | In the development stage, I will consider an experience, the beauty of the page and color matching, and give my own ideas. |
| Strong hands-on ability, willing to work, know a lot of things, and have a good team spirit | In the project, I not only need to do development work, but also need to test myself, find problems and locate problems in time. Or, once I find that there is a problem with the logic we began to consider, I will communicate with relevant personnel in time; If it is technical, I will check the information myself; If it is testing, I will communicate with the tester in time. |
| Strong sense of responsibility, able to adapt to high pressure environment | Asked "what if you encounter problems in the project?" Answer: in case of any problem, I'll check the information first. If I can't solve it, I won't delay. I'll ask relevant people in time. Even if I work overtime, I'll solve it within the specified time. |
| Independent, able to constantly explore new knowledge | In the project, I will tell the project manager my ideas and propose my solutions on the premise of ensuring the progress. In the development process, I will first think about using a better way, such as the most efficient method. In addition, you need to find a chance to say: usually, I will constantly look at some new technologies (such as big data Hadoop) and continuously understand the underlying implementation of some frameworks and technologies. |
Then, summarize:
- **Be sure to prepare before the interview** The deeper you learn about the technology in your project, the better. When answering, avoid asking and answering, and take the initiative to say your highlights. For example: what technology is used in this project? In addition to some basic technologies, such as JS, html and css, as well as conventional technologies in the framework, you also have to say that the idea of components is used, which can reduce the repeatability of code, or some popular UI frameworks ant design are used. In other words, you have to find every opportunity to say what you can do and what is currently very popular.
- **Avoid low-level errors** For example, the work experience stated during the interview is inconsistent with that on the resume; Inconsistencies. The following answers cannot prove your project description;
- **The above is a method, not a dogma** You can prepare according to the direction given in this article and combined with your own project background, rather than memorizing some of the words given in this article.
For details, please see, How to introduce your project experience in the interview
JS
Anti shake and throttling
Here are some inline snippets.
// Both anti chattering and throttling use closures to save variables
/**
* Function anti shake --- the task will be executed only when the task time interval exceeds the specified time interval. It mainly controls the time. It is generally used for real-time search in the input box
* @param func objective function
* @param wait Milliseconds of delayed execution
*/
function debounce(func, wait){
let timer = null;
return function(){
let context = this,
args = arguments; // Implicit parameters passed by the browser to the function, class array object arguments (function context object this, object arguments encapsulating arguments)
if(timer){
clearTimeout(timer);
}
timer = setTimeout(() => {
func.apply(context,args)
},wait)
}
}
/* Anti shake service function */
var inputDom = document.getElementById('inputDom');
inputDom.addEventListener("keyup", debounce(searchHandle,1000));
function searchHandle(e) {
console.log(e);
}
/**
* Function throttling --- specifies that the function is executed only once within the specified time interval. It mainly controls the number of times. It is generally used for scroll events
* @param func function
* @param wait Milliseconds of delayed execution
* @param type 1 Table timestamp version, 2 table timer version
*/
function throttle(func,wait,type){
if(type === 1){
var previous = 0;
}else if(type === 2){
var timeout = null;
}
return function(){
let context = this,
args = arguments;
if(type === 1){
let nowDate = new Date().getTime();
if(nowDate - previous > wait){
func.apply(context,args);
previous = nowDate;
}
}else if(type === 2){
if(!timeout){
timeout = setTimeout(() => {
func.apply(context,args);
timeout = null;
},wait)
}
}
}
}
/* Throttling business function */
function handle(e) {
console.log(e);
}
window.addEventListener('scroll', throttle(handle, 1000,1));
What is a closure
1, Closure
`Closures solve the problem that one function can access variables inside another function` Three characteristics of closures: 1,Function nested function 2,Parameters and variables outside the function can be referenced inside the function 3,Parameters and variables are not collected by the garbage collection mechanism Benefits: 1,Protect the security of variables in functions, implement encapsulation, and prevent naming conflicts when variables flow into other environments 2,Maintaining a variable in memory can be used as a cache (but using too much is also a disadvantage and consumes memory) 3,Anonymous self executing functions can reduce memory consumption Disadvantages: 1,The referenced private variables cannot be consumed, which increases the memory consumption and causes memory leakage. The solution can be after using the variables After that, manually assign it as null 2,Because closures involve cross domain access, it will lead to performance loss. We can store cross domain variables in local variables, Then directly access local variables to reduce the impact on execution speed
The following code
function f1() {
var n = 999;
function f2() {
console.log(n);
}
return f2;
}
var result = f1();
result();//999
Function f2 is included in function f1, and all local variables in f1 are visible to f2. But not the other way around. The local variables inside f2 are invisible to f1.
This is the unique "chain scope" structure of Javascript language. Child objects will look up the variables of all parent objects level by level. Therefore, all variables of the parent object are visible to the child object, and vice versa.
Since f2 can read the local variables in f1, as long as f2 is taken as the return value, its internal variables can be read outside f1.
2, Usage scenarios of closures
1. setTimeout
The first function passed by the native setTimeout cannot take parameters, and the parameter passing effect can be realized through closures.
function f1(a) {
function f2() {
console.log(a);
}
return f2;
}
var fun = f1(1);
setTimeout(fun,1000);//Print out 1 in a second
2. Callback
Define the behavior and then associate it with a user event (click or key). The code is usually bound to the event as a callback (the function called when the event is triggered).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<a href="#" id="size-12">12</a>
<a href="#" id="size-20">20</a>
<a href="#" id="size-30">30</a>
<script type="text/javascript">
function changeSize(size){
return function(){
document.body.style.fontSize = size + 'px';
};
}
var size12 = changeSize(12);
var size14 = changeSize(20);
var size16 = changeSize(30);
document.getElementById('size-12').onclick = size12;
document.getElementById('size-20').onclick = size14;
document.getElementById('size-30').onclick = size16;
</script>
</body>
</html>
3. Function anti shake
The callback is executed n seconds after the event is triggered. If it is triggered again within this n seconds, the timing will be re timed.
The key to the implementation is the setTimeOut function. Since a variable is needed to save the timing and consider maintaining the global purity, it can be implemented with the help of closed packets.
Code above, anti shake and throttling
JS prototype, prototype chain, related knowledge points
New features of ES6
Vue and React
Vue and React usage scenarios, similarities and differences
Same point
1,Both support server-side rendering
2,Both Virtual DOM fictitious DOM，Component development, both props The concept of allowing parent components to pass values to child components is implemented webComponent standard
3,All data-driven views
4,All have support native Our plan, React of React native，Vue of weex
5,Build tools[ React and Vue Each has its own build tool, which you can use to quickly build a development environment.
React have access to Create React App (CRA)，and Vue The corresponding is vue-cli.
Both tools give you a project template set according to best practices.
All have management status, React have redux,Vue Have your own Vuex(self-adaption vue，Tailored)]
difference
1,design idea
react: 1.1 Functional thinking, all in js ,jsx Grammar, js Manipulation css
1.2 Unidirectional data flow
1.3 setState Re render
1.4 Every time the state of the application is changed, all sub components will be re rendered.
Of course, this can be done through shouldComponentUpdate This life cycle approach to control,
If yes true Continue rendering false No rendering, but Vue Treat this as the default optimization
vue: 2.1 Responsive thinking, that is, based on variable data. hold html,js,css Put it together,
It can also be combined into one page through the tag engine
2.2 Two way binding, each attribute needs to be established watch Listen (the page is not used, which is used when the component update is involved)
2.3 Vue Claim to be able to calculate faster Virtual DOM This is because it will track the dependencies of each component during rendering, and there is no need to re render the whole component tree
2,performance
react ------- Large project
Optimization needs to be done manually and the state is controllable
vue -------- Small and medium-sized projects
State change required watch Monitor, if the data volume is too large, it will get stuck
3,Expansibility
react:
3.1.1 Quasi writing api Less, easier to combine ts
3.1.2 It can be extended by high-order components
vue:
3.2.1 Declarative writing, combined with ts More complex
3.2.2 Need to pass mixin Way to expand
Vue and React life cycle; What is used for each cycle (it is better to give an example)
Vue Life cycle hook function 1.beforeCreate Data observation (data observer) and event/watcher Called before event configuration. 2.created Data observation (data observer)，property And methods, watch/event After the event callback, the mount phase has not started yet 3.beforeMount Called before the instance mount starts 4.mounted After the instance is mounted, if you want to wait until the whole view is rendered, you can mounted Internal use vm.$nextTick 5.beforeUpdate Called when data is updated, which occurs in the virtual machine DOM Before patching 6.updated After data update, virtual DOM After patching 7.beforeDestroy Before instance destruction 8.destroyed After the instance is destroyed, it is called. 9.activated cover keep-alive Call [not commonly used] when the cached component is activated 10.deactivated cover keep-alive Call [not commonly used] when the cached component is disabled React Life cycle hook function React The life cycle can be divided into three processes: mount, update and uninstall [Life cycle that is about to become obsolete, avoid using componentWillMount，componentWillReceiveProps，componentWillUpdate] 1.mount A.constructor Before the component is mounted, its constructor is called B.componetWillMount Call before component mount C.render Is a pure function that returns DOM D.componentDidMount After component mount, call 2.to update A.componentWillReceiveProps Parent component props To update the execution B.shouldComponentUpdate judge React Whether the output of the component is affected by the current state or props Impact of changes [props Modification and state All active updates will call] C.render Update re render D.componentDidUpdate Execute after component update 3.uninstall A.componentWillUnmount Called directly before component unloading and destruction
Vuex and ReactX
Both are state management tools Vuex Core concept of state Storage state, single state tree[ mapState] getters from store Medium state Some states are derived from[ mapGetters] mutations change Vuex of store The only way to the status in is to commit mutation [mapMutations] actions be similar to mutations，But what it submitted was mutation Instead of changing the state directly, it can include any asynchronous operation modules take store Divided into modules Related operation call mutation use commit call actions use dispatch React Core concept of state Storage status reducer amount to vuex of mutation,Used to modify state action Call use dispatch and vuex of action similar Maintain application state provide getState() Method acquisition state provide dispatch(action) Method update state adopt subscribe(listener) Register listener adopt subscribe(listener) The returned function unregisters the listener React-Redux yes Redux of React Binding library relevant Api Provider,connect,mapStateToProps,mapDispatchToProps Redux-Thunk Is processing Redux Recommended middleware for asynchronous logic. Redux Thunk Middleware can make your Action The create function returns a function instead of a normal object. Enable Redux-Thunk Need to use applyMiddleware().
Two methods of Vue routing [hash, history] Detailed introduction
1,hash There is no compatibility in this way, history Because it's a call history.pushState(),Therefore, there is a browser compatibility problem.
2,hash The working principle of the mode is hashchange Events can be found in window monitor hash Changes in.
We are url Just add one later#xx triggers this event.
window.onhashchange = function(event){
console.log(event);
}
3,history The pattern works by calling window.history