प्रौद्योगिकी साझेदारी

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

१,एमवीसी

UI तथा data association इत्यस्य जटिलतां न्यूनीकर्तुं समाधानम् अस्ति ।

प्रारम्भिकेषु दिनेषु यदा अग्रभागः पृष्ठभागः च पृथक् न आसीत् तदा सर्वरः सम्पूर्णेन HTML इत्यनेन प्रतिक्रियां ददाति स्म, यत्र पृष्ठस्य कृते आवश्यकाः सर्वे दत्तांशाः अपि सन्तिब्राउजर् केवलं पृष्ठस्य प्रतिपादनस्य उत्तरदायी भवति, समग्रप्रक्रिया च अस्तिसर्वर-पक्षीयं प्रतिपादनम्。

सर्वर-पक्षीय-प्रक्रिया-प्रवाहः: अनुरोधं संसाधयति, आवश्यकं दत्तांशं HTML मध्ये एम्बेड् करोति, ततः ब्राउजर्-मध्ये प्रत्यागच्छति ।

अस्याः प्रक्रियायाः जटिलतां न्यूनीकर्तुं अस्ति एमवीसी प्रतिकृति।

• सर्वरः भिन्नानि अनुरोधाः प्राप्य भिन्नभिन्न-अनुरोधं वितरति गअस्य अनुरोधस्य कृते आवश्यकं दत्तांशं संसाधितुं संयोजयितुं च नियन्त्रकः (नियन्त्रकः) ।
• मodel लेयर UI रेण्डरिंग् कृते दत्तांशं दत्तांशप्रतिरूपे संयोजयिष्यति ।
• विiew स्तरः data model इत्येतत् HTML मध्ये संयोजयित्वा ब्राउजर् मध्ये प्रत्यागमिष्यति ।

अग्रपृष्ठयोः पृथक्त्वस्य कारणानां भागः，

MVC-प्रतिरूपेण, अन्तिम-HTML-उत्पादनार्थं View-स्तरस्य अन्तः आँकडा-प्रतिरूपं संयोजितं भवति, यत् अधिकाधिकं जटिलं भवति ।
अतः अहं प्रत्यक्षतया अग्रभागं प्रति दत्तांशं प्रत्यागन्तुं इच्छामि तथा च प्रदर्शनार्थं दत्तांशं संयोजयितुं तर्कं अग्रभागं त्यक्तुम् इच्छामि ।

2. अग्रभागस्य MVC इत्यनेन सह कठिनताः

अग्र-अन्त-रूपरेखा वुए、प्रतिक्रियां कुरुत समाधानं कृतम्दत्तांश --> दृश्यसमस्या, परन्तु नियन्त्रकः सर्वरात् बहु अधिकं जटिलः अस्ति ।

1. अग्रभागः नियन्त्रकः वस्तुतः उपयोक्तृसञ्चालनानि संसाधयति, तथा च संचालनपरिदृश्यानि जटिलानि सन्ति, तथा च अत्यधिकाः परिस्थितयः सन्ति यत्र दत्तांशः परिवर्तितः भवति

1. भिन्न-भिन्न-घटकानाम् भिन्नाः क्रियाः प्रतिक्रियाः च भवन्ति, प्रत्येकं इवेण्ट्-हन्डलर् च किमपि भिन्नं करोति ।
2. यथा, सर्वरेण केवलं ज्ञातव्यं यत् कश्चन अन्तरफलकः आहूतः वा, नियन्त्रकः तर्कं सम्पादयति ।
एकादशाधिकं परिदृश्यं भवितुम् अर्हति यस्मिन् अग्रभागः आह्वान-अन्तरफलकं प्रेरयति: बटनं क्लिक् कृत्वा उत्प्रेरनम्, समयनिर्धारकेण प्रवर्तनं, अन्यतर्कस्य निष्पादनस्य अनन्तरं प्रवर्तनं वा

2. अग्रभागस्य रूपरेखा एकदिशायाः आँकडाप्रवाहस्य उपयोगं करोति यदा आँकडानां साझेदारी भवति तदा दत्तांशं केवलं शीर्षस्तरीयघटकं प्रति प्रवर्तयितुं शक्यते तथा च स्तरं स्तरं पारितं कर्तुं शक्यते, यत् तुल्यकालिकरूपेण बोझिलम् अस्ति।

अतः सन्दर्भः ( .React.createContext / prvide/inject ) साझादत्तांशं प्रदातुं । परन्तु अद्यापि केचन दोषाः सन्ति, विशेषतः मध्यम-बृहत्-अनुप्रयोगेषु ।

• स्थानीयगहनपदानुक्रमितसम्बन्धैः सह घटकानां मध्ये संचारणे सन्दर्भस्य अधिकतया उपयोगः भवति, तथा च कृतेदत्तांशस्थापनम्, पारितदत्तांशस्य परिवर्तनं दुर्लभम् ।
• Vuex तथा Redux अधिकं सम्पूर्णं प्रदातुं डिजाइनं कृतम् अस्तिस्थिति प्रबन्धनसमाधानेषु समययात्रा (डिबगिंग्, स्टेट् रिग्रेशन), मॉड्यूलरीकरण इत्यादयः अपि सन्ति ।

३,प्रवाहः

फेसबुकद्वारा प्रस्तावितस्य आँकडासमाधानस्य महत्तमं ऐतिहासिकं महत्त्वं... 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,रिडक्स

अस्ति नम् आधारेण प्रवर्तते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

---

उपरि।