English 英文
综合
【自我介绍】introduce yourself
Hi, this is XX, I graduated from Guangdong University of Finance & Economics, majoring in Information and Computing Sciences.
Upon graduation, I worked as a Front-End engineer for Wondershare, Tencent and Baidu in the past five years. And I am proficiency in React, Vue and Nodejs. in my spare time, the most things I do are recording the problems in my blog and listing the solution of the problems. So I'm quite confident to bring similar value to the organization if I have the chance to join.
Thank you.
【关于项目】about your project
About my projects. At Baidu, I worked on the WenxinQianfan model platform. My job was to build parts like data management and knowledge bases. Besides updating features regularly, I also dealt with things like connecting micro-frontends, adding multi-language support, making low-code models, setting up resume uploads, and building SDKs.
Then at Tencent, I helped make the Tencent Cloud Intelligent Service Work Order System. There, I fixed problems like compressing images, organizing CSS styles, and adding a theme switch that works everywhere.
Before that, I rebuilt component libraries and made new docs for them. I also added features like live debugging for components and a search tool for APIs using Algolia. And I made some complex components myself.
In my free time, I have open-source projects. For example, I made a reusable component library and a tool website with Node.js.
These are some of the projects I have worked on.
【困难挑战】difficulty and challenge
I developed a Component of ColorPicker, it includes color panel, hue column, transparency column and color selecter.
In order to achieve the color panel, I used HSV color value, it requires hue value and drag position, so I need to achieve the hue column to get the hue value, it requires 7 colors, and ranges from 0 to 360, I can relate it to the position of the hue column, the transparency column is achieved the same way. So if I achieve the hue column, get the hue value and drag position, I can get the color.
That was my biggest challenge / difficult.
【团队规模】team size
We have a team of 17 front-end engineers.
【团队架构】team structure
Our team includes PM, designer, front-end engineers, back-end engineers and tester.
【工作流程】development process
We issue requirements directly from the PM.
【离开原因】Why leave
Because I like the life in Guangzhou and I want to settle down and develop there.
【如果是管理者】If manager, how would
I will try my best to give every team member a chance to grow while controlling the progress of the whole project.
【优势】Strengths丨Bring to the job
I have good development habits, such as the readability of code. In addition, I have the habit of writing blog, recording the problems and listing the solution of the problems.
【是否接受英文环境】adapt English environment
I haven't worked in the English environment, but I can accept it and try to adapt.
【对公司的了解】know about the company
I know the NCS is a leading technology service provider in the Asia Pacific region, working closely with governments and businesses to promote social development.
【是否有 offer】other jobs
I currently have two offers.
【多久到岗】How soon be on duty
I can be on duty in two weeks to a month.
【期望薪资】Salary、Payment、Remuneration
Now I have fifteen thousand by Sixteen months. And I want more than nineteen thousand.
【不知道如何回答】
I think it would be better if I answered this question in Chinese.
HTML丨CSS
【语义化 HTML】Semantic HTML
Semantic HTML is about displaying content with appropriate tags, such as header, nav, footer instead of div tags. Semantic tags make code more readable and are good for SEO.
【什么是 SEO】SEO
SEO is search engine optimization, used to improve the ranking of websites in the search engine. SEO optimization can be done by Semantic HTML and setting the keyword attribute of the meta tag.
【移动端适配方案】mobile end adaptation
We can use media query, use rem plugin to adapt, or use vw、vh to adapt.
【em 和 rem 的区别】em、rem
em is relative to the font-size of the current node, and rem is relative to the font-size of the root node.
【怎么理解 BFC】BFC
The BFC is Block Formatting Context, which is an independent rendering area. The inside of the elements that create the BFC doesn't affect the outside elements in any way.
We can create BFC by setting overflow, setting float:left or float:right, setting position:absolute, or setting display:flex、inline-block、table-cell and so on.
【flex:1 写法的原理】flex: 1
Flex is an abbreviation for flex-grow, flex-shrink, and flex-basis.
The flex-grow sets the flex grow factor of a flex item. The flex-shrink sets the flex shrink factor of a flex item. And the flex-basis sets the initial main size of a flex item.
flex:1 is equal to flex-grow:1、flex-shrink:1 and flex-basis:0.
JS丨ES6
【AST 抽象语法树】AST
AST is Abstract Syntax Trees, which is a JavaScript object that contains a tree representation of the source, and can be transformed by babel to add functions.
【基本类型和引用类型的区别】Primitive values and Reference values
Primitive values are immutable, while Reference values are mutable.
Because Primitive values are stored in the stack, pointers to Reference values are stored in the stack and their contents in the heap.
In addition, the comparison of Primitive values is to determine whether they are equal, while the comparison of Reference values is to determine whether they refer to the same object.
【如何正确判断 This】This
Normal function's This points to the window.
The function executed as an object property, its This points to the parent object;
Constructor's This points to an instance of the new call;
The arrow function inherits This from the context, and since it doesn't have its own This, it cannot be changed with call(), apply() and bind().
【什么是原型和原型链】Prototype、Prototype Chain
Every object in JavaScript has a built-in property, which is called its Prototype.
The Prototype itself is an object, so the Prototype will have its own Prototype, making what's called a Prototype Chain.
【什么是闭包】Closures
The Closures gives us access to an outer function's scope from an inner function. In JavaScript, a Closures is created every time a function is created.
【GC 垃圾回收机制】Garbage Collection
JavaScript uses the Tracing Garbage Collection strategy, objects should be garbage collected by tracing which objects that are reachable by a chain of references from certain root objects.
【New 运算符的原理】New
The principle of New is to create a new object that inherits the prototype of the original constructor, then point this to the new instance, and finally return the object.
【浅拷贝和深拷贝的区别】Shallow copy、Deep copy
Shallow copy adds a pointer to the original address, which will interact with the original Object. We can achieve a Shallow copy using Object.assign() and the extension operator.
Deep copy adds a pointer to the new address, which is independent of the original object. We can achieve a Deep copy using wrapping a recursive function and using lodash's _.cloneDeep method.
【事件冒泡】Event Bubbling
In Event Bubbling, the event is first captured and handled by the innermost element and then propagated to the outer elements. We can use the method of the event.stopPropagation to prevent Event Bubbling.
【事件代理】Event Delegation
Event Delegation is a pattern for handling events. we can add an event listener to a parent element and call an event on a target using the target property of the event object instead of adding an event listener to each similar element.
【同步和异步】Synchronous and Asynchronous
Synchronous means to be in a sequence, each statement of code gets executed one by one. So a statement must wait for the earlier statement to get executed.
And Asynchronous code allows the program to be executed immediately.
【Event Loop 事件循环】Event Loop
An Event Loop in JavaScript is a constantly running process. Its function is to check if the call stack is empty, and take a callback from the task queue, then put it inside the call stack. The callback will get executed and pop out of the call stack. This loop is continued until the task queue is empty.
【微任务、宏任务】Microtask、Macrotask
The task queue includes Microtask and Macrotask.
Microtask is executed after the function that created it exits, and only if the JavaScript execution stack is empty.
And Macrotask is always executed after the execution of JavaScript and the Microtask queue is empty.
【Promise】Promise
Promise is used to handle asynchronous operations. It can handle multiple asynchronous operations easily and provides better error handling than callbacks.
【Async 和 Await】Async、Await
Async before a function makes the function return a promise.
Await makes the function to pause execution and wait for a resolved promise before continuing, but it can only be used inside an Async function.
【ES6 新特性】ES6 new features
ES6 has some features, such as Destructuring Assignment, Template Literals, New Built-In Methods, Arrow Functions, Modules, Classes, and Promise.
【箭头函数】Arrow function
Arrow function provides a short syntax for writing function expressions. But it doesn't have its own this, and it is not well suitable for defining object methods.
【Set 和 WeakSet 区别】Set、WeakSet
Set is a collection of unique values, and it can hold any data type value.
The main difference between WeakSet and Set is that WeakSet is a collection of objects, and it is weakly referenced, it means that object can be garbage collected.
【Map 和 WeakMap 区别】Map、WeakMap
Map holds key-value pairs and the keys can be any data type.
The main difference between WeakMap and Map is that key of WeakMap must be object type, and it is weakly referenced, it means that object can be garbage collected.
【CommonJS 和 ES Modules 的区别】CommonJS、ES Modules
CommonJS loads modules synchronously, ES Modules are asynchronous.
In addition, CommonJS imports are dynamically resolved at runtime, ES Modules imports are static, it means they are executed at parse time.
TypeScript
【TS 的优势】Why TypeScript
TypeScript is an object-oriented programming language, and JavaScript is a prototype-based language.
TypeScript has features such as static typing and strong typing, which means that type correctness can be checked at compile time, but JavaScript does not support these features.
In addition, TypeScript supports Interface, but JavaScript does not.
【TS 基本类型】Typescript data types
any、unknown、number、string、boolean、Array and void.
【type 和 interface 的区别】type、interface
Interface is a form of syntax. Type is a collection of data types.
And Interface supports the use of an object, but Type does not support it.
In addition, Interface cannot be used with other types of declarations. Type is used for types such as primitives, unions, and tuples.
【TS 泛型】Generics
TypeScript Generics allows creating type variables which can be used to create class, function, and type alias that don't need to explicitly define the types they use.
It also makes it easier to write reusable code.
【any 类型】any
any is a type that disables type checking and effectively allows all types to be used.
【unknown 类型】unknown
unknown represents any value, and it is similar to any but is safer, because it's illegal to do anything with an value.
【never 类型】never
never represents values which are never observed. In a return type, it means that the function throws an exception or terminates program execution. But it is rarely used, its primary use is in advanced generics.
【void 类型】void
void represents the return value of functions which don't return a value.
React
【React 生命周期】React Lifecycle
When mounting a component, it includes constructor(), getDerivedStateFromProps(), render(), componentDidMount().
When a component is updated, it includes getDerivedStateFromProps(), shouldComponentUpdate(), render(), getSnapshotBeforeUpdate(), componentDidUpdate().
When a component is unmounted, it includes componentWillUnmount().
【函数组件模拟生命周期】Functional Component simulate the lifecycle
We can replace componentDidMount and componentDidUpdate with useEffect, and replace componentWillUnmount with the return function of useEffect.
【类组件与函数组件区别】Class Component、Functional Component
The Class Component uses ES6 class syntax, and it extends React components with a render method that returns React elements.
On the other hand, Functional Component with hooks are purely JavaScript functions that also return React elements.
【useMemo 与 useCallback 区别】useMemo、useCallback
The useMemo Hook returns a memoized value. It only runs when one of its dependencies updates. This can improve performance.
The useCallback Hook is similar, but it returns a memoized function.
【setState 合并批量更新】setState
When setState is called, React doesn't immediately update the component's state and re-render the component. Instead, it batches multiple state updates and processes them in a single, optimized update cycle. This helps to improve the performance of our application by minimizing the number of re-renders.
【React 渲染机制】React rendering mechanism
When a React application is running, the virtual DOM is updated whenever there is a change in state or props.
React's rendering mechanism is fast and efficient because it only updates the parts of the UI that have changed. This avoids unnecessary updates and saves processing time.
In addition, React batches updates to reduce the number of times the DOM is manipulated, which further improves performance.
【虚拟 DOM】virtual DOM work
The virtual DOM is a lightweight representation of the real DOM that React uses to efficiently update the UI. React compares the previous version of the virtual DOM with the new version to see exactly which elements have changed.
Once the difference is known, React updates only those objects that differ on the real DOM and the browser will repaint the screen.
【diff 算法】Diff Algorithm
React compares the previous version of the virtual DOM with the new version to see exactly which elements have changed. And React uses the Diff Algorithm to make this comparison. With this, React can understand which places have changed. React then changes only the part of the dom where the change was made.
【key 的作用】key
In React, we need to give each array item a key to uniquely identify.
The key tells React which array item each component corresponds to, so that it can help React infer what exactly has happened, and make the correct updates to the DOM tree.
【React Fiber】Fiber
React Fiber is a completely backward-compatible rewrite of the old reconciler. The reconciler allows React to divide the work into multiple chunks and divide the rendering work over multiple frames.
This change also allows React to fine-tune rendering components, ensuring that the most important updates happen as soon as possible.
【高阶组件】HOC
Higher-Order Component in React, also known as HOC, allows us to abstract over actions, not just values. With HOC, we can wrap our child component and either add business logic on top of it or extend the abilities of the child component itself.
【React 18 新特性】React 18
React 18 provides automatic batching. It can prevent unnecessary renders of the component.
And React 18 provides a new API for Transition. It can distinguish between urgent and non-urgent updates.
In addition, React 18 adds support for Suspense on the server. It provides a peaceful loading state until the user experiences a network crash.
Redux / Router
【Redux 三大原则】core principles of Redux
The first is the single source of truth. And the state is read-only. In addition, changes are made with pure functions.
【Redux 的流程】Redux
Redux's primary purpose is to manage and centralize the application state. And it allows React components to read data from a Redux Store, and dispatch Actions to the Store for updating the data.
The purpose of Redux is to help applications scale well by providing means to manage the state via a unidirectional data flow model.
【Redux 如何触发 Action】redux trigger action
react-redux is the official Redux binding library. We can use its useDispatch hook to trigger an Action, match the Reducer to the Action, and then the Reducer calculates a new State to update Store data.
【redux-saga】redux-saga
The redux-saga middleware is used to handle asynchronous requests. It uses the ES6 Generator syntax, intercepts the Action, processes the asynchronous operation in a separate sagas file, and finally returns a new Action to the Reducer to update the store.
Vue
Vue 和 React 的区别
123
工程化丨性能丨浏览器
【前端优化】front-end optimization
I often use debounce and throttle, Merging resources, Implementing Tree Shaking to remove unreferenced code, using the browser cache or using SSR can improve performance.
网络丨服务端
【JWT】JWT
JWT is Json web token. It is a secure JSON-based open standard applicable to the SSO. And it does not require session information to be saved on the server.