Teknologian jakaminen

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

1, MVC

on ratkaisu käyttöliittymän ja tietojen yhdistämisen monimutkaisuuden vähentämiseen.

Alkuaikoina, jolloin käyttöliittymää ja taustaosaa ei erotettu, palvelin vastasi täydellisellä HTML-koodilla, joka sisälsi kaikki sivulle tarvittavat tiedot.Selain toimii vain sivun hahmontajana, ja koko prosessi onPalvelinpuolen renderöinti。

Palvelinpuolen käsittelykulku: käsittelee pyynnön, upottaa tarvittavat tiedot HTML:ään ja palauttaa sen sitten selaimeen.

Tämän prosessin monimutkaisuuden vähentämiseksi on olemassa MVC malli.

• Palvelin vastaanottaa erilaisia ​​pyyntöjä ja jakaa ne eri tahoille Crekisterinpitäjä (rekisterinpitäjä) käsittelemään ja kokoamaan tätä pyyntöä varten tarvittavat tiedot.
• MOdel-kerros kokoaa tiedot tietomalliksi käyttöliittymän hahmontamista varten.
• VIew-kerros kokoaa tietomallin HTML-muotoon ja palauttaa sen selaimeen.

Osa syistä etu- ja takapäiden erottamiseen，

MVC-mallissa tietomalli kootaan View-kerrokseen lopullisen HTML:n luomiseksi, josta tulee yhä monimutkaisempi.
Haluan siis palauttaa tiedot suoraan käyttöliittymään ja jättää datan kokoamisen logiikan näyttöä varten käyttöliittymään.

2. Vaikeudet käyttöliittymän MVC:n kanssa

käyttöliittymäkehys Vue、Reagoi ratkaistuTiedot --> Näytäongelma, mutta ohjain on paljon monimutkaisempi kuin palvelin.

1. Käyttöliittymän ohjain itse asiassa käsittelee käyttäjien toimintoja, ja toimintaskenaariot ovat monimutkaisia, ja tilanteita, joissa tietoja muutetaan, on liian monta.

1. Eri komponenteilla on erilaiset toiminnot ja vastaukset, ja jokainen tapahtumakäsittelijä tekee jotain erilaista.
2. Esimerkiksi palvelimen tarvitsee vain tietää, onko tietty rajapinta kutsuttu, ja ohjain hoitaa logiikan.
Saattaa olla useampi kuin yksi skenaario, jossa käyttöliittymä laukaisee kutsuvan käyttöliittymän: laukaisee napsauttamalla painiketta, laukaisee ajastimella tai laukaisee sen jälkeen, kun jokin muu logiikka on suoritettu.

2. Käyttöliittymä käyttää yksisuuntaista tietovirtaa Dataa jaettaessa tiedot voidaan siirtää vain ylimmän tason komponenttiin ja välittää kerros kerrokselta, mikä on suhteellisen hankalaa.

Joten konteksti (React.createContext / prvide/inject ) tarjotakseen jaettuja tietoja. Mutta on edelleen joitain puutteita, erityisesti keskisuurissa ja suurissa sovelluksissa.

• Kontekstia käytetään yleisemmin viestinnässä komponenttien välillä, joilla on paikalliset ja syvät hierarkkiset suhteet, ja se on tarkoitettutiedonsiirto, on harvinaista muuttaa välitettyjä tietoja.
• Vuex ja Redux on suunniteltu tarjoamaan täydellisempiStatushallintaRatkaisuja ovat myös aikamatkailu (virheenkorjaus, tilaregressio), modularisointi jne.

3, Flux

FaceBookin ehdottaman dataratkaisun suurin historiallinen merkitys on esittely action konsepti.

• actionon esine, jota käytetään kuvaamaan mitä on tehtävä,on ainoa syy, joka laukaisee datamuutoksia。
• store Edustaa tietovarastoa (global singleton mode) jaettujen tietojen tallentamiseen.riippuu eriaction Muuta tietoja varastossa.

// 示例
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

olla olemassa Flex käyttöön perustuenreducer, käytetty mukaan action Tietojen käsittelyä varten varasto tallentaa käsitellyt tiedot uudelleen.

Vertaamalla MVC-prosessia palvelinpuolella,action Vastaa pyynnön käynnistämistä,reducer Vastaa Controlleria.

Vertailu vuexiin:

Yksinkertainen käyttää:

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

Verrattuna 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

---

edellä.