Technology Sharing

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

1，MVC

It is a solution to reduce the complexity of UI and data association.

In the early days when the front-end and back-end were not separated, the server would respond with a complete HTML file containing all the data needed for the page. The browser only served to render the page.Server-side rendering。

The server-side processing flow is as follows: process the request, embed the required data into HTML, and then return it to the browser.

In order to reduce the complexity of this process, MVC model.

• The server receives different requests and distributes them to different CThe ontroller (controller) handles and assembles the data required for this request.
• MThe odel layer assembles the data into a data model for UI rendering.
• VThe view layer assembles the data model into HTML and returns it to the browser.

Some reasons for separation of front-end and back-end，

In the MVC mode, the data model is assembled into the View layer to generate the final HTML, which is an increasingly complex step.
Therefore, we want to return data directly to the front end and leave the logic of assembling data for display to the front end.

2. Difficulties of front-end MVC

Front-end framework Vue、React solvedData --> ViewThe Controller is much more complicated than the server.

1. The front-end Controller actually processes user operations, but the operation scenarios are complex and there are too many situations in which data needs to be changed.

1. Different components have different operations and responses, and each event handler does something different.
2. For example, the server only needs to know whether a certain interface is called and the controller handles the logic.
There may be more than one scenario in which the front-end triggers the call interface: triggering by clicking a button, triggering by a timer, or triggering after other logic is executed.

2. The front-end framework uses a one-way data flow. When sharing data, the data can only be promoted to the top-level component and passed layer by layer, which is cumbersome.

So the context is generated (React.createContext / prvide/inject) to provide shared data. But there are still some shortcomings, especially for medium and large applications.

• Context is more used for local, hierarchical communication between components, and is forData Transfer, there are very few situations where the delivered data is changed.
• Vuex and Redux are designed to provide a more completeState ManagementSolutions also include time travel (debugging, state backtracking), modularity, etc.

3，Flux

The data solution proposed by Facebook has the greatest historical significance in that it introduced action concept.

• actionis an object that describes what to do.Is the only reason that triggers the data change。
• store Represents a data warehouse (global singleton mode) that stores shared data.action Change the data in the warehouse.

// 示例
cosnt loginAction = {
    type: "login",
    payload: {
        loginId:"admin",
        loginPwd:"123123"
    }
}

const deleteAction = {
    type: "delete",
    payload: 1  // 用户id为1
}
1
2
3
4
5
6
7
8
9
10
11
12
13

4，Redux

exist Flex Based on the introductionreducer, used according to action To process the data, the processed data will be saved again in the warehouse.

Compared with the MVC process on the server side,action Equivalent to triggering a request,reducer Equivalent to Controller.

Comparison with vuex:

Simple use:

import { createStore } from "redux";

function reducer(state, action) {
    console.log(action.payload);
    if (action.type === "add") {
        return state + 1;
    } else if (action.type === "minus") {
        return state - 1;
    }
    return state;
}

const store = createStore(reducer, 10);

// 分发 action
store.dispatch({ type: "add", payload: "附加的数据" });
// 获取最新的 store
console.log(store.getState());
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Compared Vuex：

const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment (state, { amount }) {
       state.count += amount
    }
  },
  actions: {
    increment ({ commit }, payload) {
      // 触发 mutation
      commit('increment', payload)
    }
  }
})

// 分发 action
store.dispatch('increment', {
  amount: 10
})

// 以对象形式分发
store.dispatch({
  type: 'increment',
  amount: 10
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

---

above.