为面试补一些基础知识

2020年06月17号 21:37 — Written by Z1206

为了即将到来的面试，复习一些相对容易疏忽的知识点进行一遍复习巩固。纯手打比较辛苦。

Redux Saga

What is Redux Saga?

Redux Saga is a middleware library for redux, to manage side effects.

What is a side effect?

A side effect can be any interactions (except the returned value) in a function. But for Redux Saga, it is more specifically refering to some asynchronous things like data fetching, accessing browser cache and sort of things.

What is a generator function?

A generator function is a function can stop middleway and then continue from where it stopped. A generator function can generate a series of results. In JavaScript, a generator is a function which returns an object on which you can call next(). Every invocation of next() will return an object of shape:

{
	value: Any,
	done: true | false
}

Explain put, call, takeEvery, takeLatest.
put(action): creates an Effect description that instructs the middleware to schedule the dispatching of an action to the store.
takeEvery(pattern, saga, ...args): spawns a saga on each action dispatched to the store that matches pattern.
takeLatest(pattern, saga, ...args): only take the last saga task on each action dispatched to the store that matches pattern.
call(fn, ...args): creates an Effect description that instructs the middleware to call the function fn with args as arguments.

Redux

Store: A container stores all the data. There is only one single store in whole application.

State: Kind of a snapshot of Store at a particular moment.

Action: A plain object, usally contains a type and payload.

Action Creator: A function which creates an Action.

store.dispatch(): The only way of triggering an Action.

Reducer: A function given a state and action as paramaters, and always return a state.

CSS

box-sizing: sets how the total width and height of an element is calculated. content-box: width only contains its content. border-box: width includes the element's border.

display: Block elements are: block, list-item, table. Usually next block element will be in the next line. Inline block: inline,inline-block, inline-table, can be displayed in one line with other inline blocks.

NOTE: For inline elements, margin-top or margin-bottom (the same as padding top or bottom) will not effect anything.

position:

static： default value.
relative: relative to its parent. Can use top bottom right left to position this element.
absolute: absolute positioning, find its nearest parent with position value is not static. Positioning with its top bottom right left.
fixed: absolute positioning to browser window. Positioning with its top bottom right left.

Horizontally and Vertically center a element using flex:

.parent {
	display: flex;
	align-items: center;
	justify-content: center;
}

.child {
	max-width: 50%;
}

overflow:

visible: default value. Content is not clipped.
hidden: hide the content exceeding the container. No scrollbar is provided.
scroll: Given a scrollbar all the time.
auto: Show scrollbar when needed.

Some Q&A:

Question: Does css properties are case sensitive?

Answer: no.

Question: Why css selectors mixed up with cases don't apply the styles?

Answer: because, html ID and classes are case sensitive.

Question: Does margin-top or margin-bottom has effect on inline element?

Answer: no.

Question: Does padding-top or padding-bottom has effect on inline element?

Answer: no.

Question: Does padding-left or padding-right or margin-left or margin-right has effect on inline element?

Answer: yes.

Question: If you have a

element with font-size: 10rem, will the text be responsive when the user resizes / drags the browser window?

Answer: no.

Question: The pseudo class :checked will select inputs with type radio or checkbox, but not

Answer: False

Question: In a HTML document, the pseudo class :root always refers to the element.

Answer: True

Question: The translate() function can move the position of an element on the z-axis.

Question: What are the differences between visibility hidden and display none?

Answer: display: none removes the element from the normal layout flow and allow other elements to fill in. visibility: hidden tag is rendered, it takes space in the normal flow but doesn't show it.

Question: What are the differences between inline, block and inline-block?

Answer:

inline, elements do not break the flow. think of span it fits in the line. Important points about inline elements, margin/ padding will push other elements horizontally not vertically. Moreover, inline elements ignores height and width.

block, breaks the flow and dont sits inline. they are usually container like div, section, ul and also text p, h1, etc.

inline-block, will be similar to inline and will go with the flow of the page. Only differences is this this will take height and width.