Κοινή χρήση τεχνολογίας

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

1, MVC

είναι μια λύση για τη μείωση της πολυπλοκότητας της διεπαφής χρήστη και του συσχετισμού δεδομένων.

Στις πρώτες μέρες, όταν το front-end και το back-end δεν διαχωρίζονταν, ο διακομιστής απαντούσε με ένα πλήρες HTML, συμπεριλαμβανομένων όλων των δεδομένων που απαιτούνται για τη σελίδα.Το πρόγραμμα περιήγησης είναι υπεύθυνο μόνο για την απόδοση της σελίδας και η συνολική διαδικασία είναιΑπόδοση από την πλευρά του διακομιστή。

Η ροή επεξεργασίας από την πλευρά του διακομιστή: επεξεργάζεται το αίτημα, ενσωματώνει τα απαιτούμενα δεδομένα σε HTML και στη συνέχεια τα επιστρέφει στο πρόγραμμα περιήγησης.

Προκειμένου να μειωθεί η πολυπλοκότητα αυτής της διαδικασίας, υπάρχει MVC μοντέλο.

• Ο διακομιστής λαμβάνει διαφορετικά αιτήματα και τα διανέμει σε διαφορετικά ντουπεύθυνος επεξεργασίας (ελεγκτής) για την επεξεργασία και τη συγκέντρωση των δεδομένων που απαιτούνται για αυτό το αίτημα.
• ΜΤο επίπεδο odel θα συγκεντρώσει τα δεδομένα σε ένα μοντέλο δεδομένων για απόδοση διεπαφής χρήστη.
• VΤο επίπεδο iew θα συναρμολογήσει το μοντέλο δεδομένων σε HTML και θα το επιστρέψει στο πρόγραμμα περιήγησης.

Μέρος των λόγων για το διαχωρισμό των μπροστινών και πίσω άκρων，

Στο μοτίβο MVC, το μοντέλο δεδομένων συναρμολογείται στο επίπεδο View για να δημιουργήσει το τελικό HTML, το οποίο γίνεται όλο και πιο περίπλοκο.
Θέλω λοιπόν να επιστρέψω απευθείας δεδομένα στο μπροστινό μέρος και να αφήσω τη λογική της συναρμολόγησης των δεδομένων για εμφάνιση στο μπροστινό μέρος.

2. Δυσκολίες με το front-end MVC

πλαίσιο front-end Vue、Αντιδρώ λυθείΔεδομένα --> Προβολήπρόβλημα, αλλά ο ελεγκτής είναι πολύ πιο περίπλοκος από τον διακομιστή.

1. Ο ελεγκτής front-end επεξεργάζεται στην πραγματικότητα τις λειτουργίες του χρήστη και τα σενάρια λειτουργίας είναι πολύπλοκα και υπάρχουν πάρα πολλές περιπτώσεις όπου αλλάζουν δεδομένα.

1. Διαφορετικά στοιχεία έχουν διαφορετικές λειτουργίες και αποκρίσεις και κάθε πρόγραμμα χειρισμού συμβάντων κάνει κάτι διαφορετικό.
2. Για παράδειγμα, ο διακομιστής χρειάζεται μόνο να γνωρίζει εάν καλείται μια συγκεκριμένη διεπαφή και ο ελεγκτής χειρίζεται τη λογική.
Μπορεί να υπάρχουν περισσότερα από ένα σενάρια στα οποία το μπροστινό μέρος ενεργοποιεί τη διεπαφή κλήσης: ενεργοποίηση κάνοντας κλικ σε ένα κουμπί, ενεργοποίηση με χρονόμετρο ή ενεργοποίηση μετά την εκτέλεση άλλης λογικής.

2. Το πλαίσιο διεπαφής χρησιμοποιεί μια μονόδρομη ροή δεδομένων Κατά την κοινή χρήση δεδομένων, τα δεδομένα μπορούν να προωθηθούν μόνο στο στοιχείο ανώτατου επιπέδου και να περάσουν επίπεδο προς επίπεδο, κάτι που είναι σχετικά δυσκίνητο.

Έτσι το πλαίσιο (React.createContext / prvide/inject ) για την παροχή κοινών δεδομένων. Όμως εξακολουθούν να υπάρχουν κάποιες ελλείψεις, ειδικά για μεσαίες και μεγάλες εφαρμογές.

• Το πλαίσιο χρησιμοποιείται πιο συχνά στην επικοινωνία μεταξύ στοιχείων με τοπικές και βαθιές ιεραρχικές σχέσεις και είναι γιαμεταφορά δεδομένων, είναι σπάνιο να αλλάξετε τα δεδομένα που έχουν περάσει.
• Το Vuex και το Redux έχουν σχεδιαστεί για να παρέχουν μια πιο ολοκληρωμένηΔιαχείριση κατάστασηςΟι λύσεις περιλαμβάνουν επίσης ταξίδια στο χρόνο (debugging, κατάσταση παλινδρόμησης), modularization, κ.λπ.

3, Ροή

Η μεγαλύτερη ιστορική σημασία της λύσης δεδομένων που προτείνεται από το FaceBook είναι η εισαγωγή του action έννοια.

• actionείναι ένα αντικείμενο που χρησιμοποιείται για να περιγράψει τι πρέπει να γίνει,είναι ο μόνος λόγος που προκαλεί αλλαγές δεδομένων。
• store Αντιπροσωπεύει μια αποθήκη δεδομένων (global singleton mode) για την αποθήκευση κοινόχρηστων δεδομένων.θα εξαρτηθεί από διαφορετικάaction Αλλάξτε τα δεδομένα στην αποθήκη.

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

υπάρχει Καλώδιο εισήχθη με βάσηreducer, χρησιμοποιείται σύμφωνα με action Για την επεξεργασία των δεδομένων, τα επεξεργασμένα δεδομένα θα αποθηκευτούν εκ νέου από την αποθήκη.

Συγκρίνοντας τη διαδικασία MVC από την πλευρά του διακομιστή,action Ισοδυναμεί με την ενεργοποίηση ενός αιτήματος,reducer Αντίστοιχο με τον Ελεγκτή.

Σύγκριση με vuex:

Απλό στη χρήση:

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

Σε συγκριση 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

---

πάνω από.