Berbagi teknologi

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

1.MVC

adalah solusi untuk mengurangi kompleksitas UI dan asosiasi data.

Pada masa-masa awal ketika front-end dan back-end tidak dipisahkan, server akan merespons dengan HTML lengkap, termasuk semua data yang diperlukan untuk halaman tersebut.Browser hanya bertanggung jawab untuk merender halaman, dan keseluruhan prosesnyaRender sisi server。

Alur pemrosesan sisi server: memproses permintaan, menyematkan data yang diperlukan ke dalam HTML, dan kemudian mengembalikannya ke browser.

Untuk mengurangi kompleksitas proses ini, ada Bahasa Inggris MVC model.

• Server menerima permintaan yang berbeda dan mendistribusikannya ke berbagai permintaan Cpengontrol (controller) untuk memproses dan mengumpulkan data yang diperlukan untuk permintaan ini.
• MLapisan odel akan merakit data menjadi model data untuk rendering UI.
• Bahasa Indonesia: VLapisan baru akan merakit model data ke dalam HTML dan mengembalikannya ke browser.

Bagian dari alasan pemisahan ujung depan dan belakang，

Dalam pola MVC, model data dirangkai ke dalam lapisan Tampilan untuk menghasilkan HTML akhir, yang menjadi semakin kompleks.
Jadi saya ingin langsung mengembalikan data ke front end dan meninggalkan logika pengumpulan data untuk ditampilkan ke front end.

2. Kesulitan dengan MVC front-end

kerangka front-end Pemandangan、Reaksi terselesaikanData --> Lihatmasalah, tetapi Pengendalinya jauh lebih rumit daripada server.

1. Pengontrol front-end sebenarnya memproses operasi pengguna, dan skenario operasinya rumit, dan ada terlalu banyak situasi di mana data diubah.

1. Komponen yang berbeda memiliki operasi dan respons yang berbeda, dan setiap event handler melakukan sesuatu yang berbeda.
2. Misalnya, server hanya perlu mengetahui apakah antarmuka tertentu dipanggil, dan pengontrol menangani logikanya.
Mungkin ada lebih dari satu skenario di mana front-end memicu antarmuka panggilan: memicu dengan mengklik tombol, memicu dengan pengatur waktu, atau memicu setelah logika lain dijalankan.

2. Kerangka kerja front-end menggunakan aliran data satu arah. Saat berbagi data, data hanya dapat dipromosikan ke komponen tingkat atas dan diteruskan lapis demi lapis, yang relatif rumit.

Jadi konteksnya (React.createContext / prvide/inject ) untuk menyediakan data bersama. Namun masih terdapat beberapa kekurangan terutama untuk aplikasi menengah dan besar.

• Konteks lebih umum digunakan dalam komunikasi antar komponen dengan hubungan hierarki lokal dan mendalam, dan untuktransfer data, jarang sekali terjadi perubahan pada data yang dikirimkan.
• Vuex dan Redux dirancang untuk memberikan yang lebih lengkapManajemen statusSolusinya juga mencakup perjalanan waktu (debugging, regresi status), modularisasi, dll.

3, Fluks

Signifikansi historis terbesar dari solusi data yang diusulkan oleh Facebook adalah pengenalan action konsep.

• actionadalah objek yang digunakan untuk menggambarkan apa yang harus dilakukan,adalah satu-satunya alasan yang memicu perubahan data。
• store Mewakili gudang data (mode tunggal global) untuk menyimpan data bersama.akan tergantung pada yang berbedaaction Mengubah data di gudang.

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

ada Melenturkan diperkenalkan berdasarkanreducer, digunakan menurut action Untuk mengolah data, data yang telah diproses akan disimpan kembali oleh gudang.

Membandingkan proses MVC di sisi server,action Setara dengan memicu permintaan,reducer Setara dengan Pengendali.

Perbandingan dengan vuex:

Mudah digunakan:

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

Dibandingkan Bahasa Indonesia: Bahasa Indonesia: 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

---

di atas.