যোগাযোগের ধরণ
কোনও ভ্যু অ্যাপ্লিকেশন ডিজাইন করার সময় (বা বাস্তবে যে কোনও উপাদান ভিত্তিক অ্যাপ্লিকেশন) ডিজাইন করার সময়, বিভিন্ন যোগাযোগের ধরণ রয়েছে যা নির্ভর করে আমরা কোন উদ্বেগ নিয়ে কাজ করছি এবং সেগুলির নিজস্ব যোগাযোগ চ্যানেল রয়েছে।
ব্যবসায়িক যুক্তি: আপনার অ্যাপ্লিকেশন এবং এর লক্ষ্য সম্পর্কিত সুনির্দিষ্ট সবকিছুকে বোঝায়।
উপস্থাপনা যুক্তি: ব্যবহারকারীর সাথে ইন্টারঅ্যাক্ট করে এমন কিছু বা ব্যবহারকারীর ইন্টারঅ্যাকশন থেকে ফলাফল।
এই দুটি উদ্বেগ এই ধরণের যোগাযোগের সাথে সম্পর্কিত:
- আবেদনের অবস্থা
- মূল সন্তান
- শিশুদের জন্য পিতা বা মাতা
- ভাইবোন
প্রতিটি ধরণের সঠিক যোগাযোগের চ্যানেল ব্যবহার করা উচিত।
যোগাযোগ মাধ্যম
একটি চ্যানেলটি একটি শিথিল শব্দ যা আমি কোনও ভ্যু অ্যাপের চারপাশে ডেটা বিনিময় করতে কংক্রিট বাস্তবায়নগুলি উল্লেখ করতে ব্যবহার করব।
প্রপস: পিতা-সন্তানের উপস্থাপনা যুক্তি
প্রত্যক্ষ পিতা-সন্তানের পক্ষে ভ্যুর মধ্যে সবচেয়ে সহজ যোগাযোগের চ্যানেল যোগাযোগের । এটি বেশিরভাগ উপস্থাপনা যুক্তির সাথে সম্পর্কিত ডেটা বা শ্রেণিবিন্যাসের নীচে ডেটাগুলির একটি সীমাবদ্ধ সেট সম্পর্কিত পাস করার জন্য ব্যবহার করা উচিত।
রেফ এবং পদ্ধতি: উপস্থাপনাটি অ্যান্টি-প্যাটার্ন
যখন কোনও সন্তানের পিতা-মাতার কাছ থেকে কোনও ইভেন্ট পরিচালনা করতে দেওয়া কোনও প্রস্তাব ব্যবহার করা অর্থহীন নয় তখন সন্তানের উপাদানগুলির উপর একটি সেট আপ করা refএবং তার পদ্ধতিগুলি কল করা ঠিক আছে।
এটি করবেন না, এটি একটি অ্যান্টি-প্যাটার্ন। আপনার উপাদান আর্কিটেকচার এবং ডেটা প্রবাহকে নতুন করে দেখুন। যদি আপনি নিজেকে কোনও পিতামাতার কাছ থেকে সন্তানের উপাদানগুলির জন্য কোনও পদ্ধতি কল করতে চান বলে মনে করেন তবে সম্ভবত রাষ্ট্রটি উপরে তুলে ধরার বা এখানে বর্ণিত অন্যান্য উপায়গুলি বা অন্য উত্তরে বিবেচনা করার সম্ভবত সময় এসেছে ।
ইভেন্টস: শিশু-পিতামাতার উপস্থাপনার যুক্তি
$emitএবং $on। সরাসরি শিশু-পিতামাতার যোগাযোগের জন্য সবচেয়ে সহজ যোগাযোগের চ্যানেল। আবার, উপস্থাপনা যুক্তি জন্য ব্যবহার করা উচিত।
ইভেন্ট বাস
বেশিরভাগ উত্তর ইভেন্ট বাসের জন্য ভাল বিকল্প দেয় যা দূরবর্তী উপাদানগুলির জন্য উপলভ্য যোগাযোগ চ্যানেলগুলির মধ্যে একটি বা বাস্তবে কোনও কিছুর জন্য উপযুক্ত বিকল্প দেয়।
এগুলি দরকারী হয়ে উঠতে পারে যখন পুরো জায়গা জুড়ে প্রপসটি খুব নীচে থেকে নীচে নেস্ট করা বাচ্চাদের উপাদানগুলিতে চলে যায়, প্রায় কোনও উপাদানগুলির মধ্যে এগুলির প্রয়োজন হয় না। সাবধানে নির্বাচিত ডেটার জন্য অল্প পরিমাণে ব্যবহার করুন।
সতর্কতা অবলম্বন করুন: ইভেন্ট বাসের সাথে নিজেকে আবদ্ধ করে রাখা উপাদানগুলির পরবর্তী সৃষ্টি একাধিকবার আবদ্ধ হবে - একাধিক হ্যান্ডলারের উদ্দীপনা এবং ফুটো হওয়া। আমি অতীতে ডিজাইন করেছি এমন একক পৃষ্ঠাগুলির অ্যাপ্লিকেশনগুলিতে ব্যক্তিগতভাবে কখনও ইভেন্ট বাসের প্রয়োজন অনুভব করিনি।
নিম্নলিখিতটি দেখায় যে একটি সাধারণ ভুল কীভাবে ফাঁসের দিকে নিয়ে যায় যেখানে Itemডিওএম থেকে সরানো হলেও উপাদানটি এখনও ট্রিগার করে।
// A component that binds to a custom 'update' event.
var Item = {
template: `<li>{{text}}</li>`,
props: {
text: Number
},
mounted() {
this.$root.$on('update', () => {
console.log(this.text, 'is still alive');
});
},
};
// Component that emits events
var List = new Vue({
el: '#app',
components: {
Item
},
data: {
items: [1, 2, 3, 4]
},
updated() {
this.$root.$emit('update');
},
methods: {
onRemove() {
console.log('slice');
this.items = this.items.slice(0, -1);
}
}
});
<script src="https://unpkg.com/vue@2.5.17/dist/vue.min.js"></script>
<div id="app">
<button type="button" @click="onRemove">Remove</button>
<ul>
<item v-for="item in items" :key="item" :text="item"></item>
</ul>
</div>
destroyedলাইফেসাইকেল হুক শ্রোতাদের অপসারণ মনে রাখবেন ।
সেন্ট্রালাইজড স্টোর (ব্যবসায়িক যুক্তি)
Vuex জন্য Vue সঙ্গে যেতে উপায় রাষ্ট্র ব্যবস্থাপনা । এটি কেবল ইভেন্টগুলির চেয়ে অনেক বেশি অফার করে এবং এটি সম্পূর্ণ স্কেল অ্যাপ্লিকেশনের জন্য প্রস্তুত।
এবং এখন আপনি জিজ্ঞাসা :
[এস] আমি প্রতিটি ছোটখাট যোগাযোগের জন্য ভেক্সের দোকান তৈরি করব?
এটি সত্যই জ্বলজ্বল যখন:
- আপনার ব্যবসার যুক্তি দিয়ে কাজ করা,
- ব্যাকএন্ডের সাথে যোগাযোগ করা (বা কোনও স্থানীয় অস্থায়ী স্তর যেমন স্থানীয় স্টোরেজ)
সুতরাং আপনার উপাদানগুলি ব্যবহারকারীর ইন্টারফেসগুলি পরিচালনা করে বোঝাতে চাইছে really
এর অর্থ এই নয় যে আপনি এটিকে উপাদান যুক্তির জন্য ব্যবহার করতে পারবেন না, তবে আমি যুক্তিটি কেবল প্রয়োজনীয় বৈশ্বিক ইউআই রাষ্ট্রের সাথে একটি নেমস্পিড ভিউেক্স মডিউলে যুক্ত করব।
বিশ্বব্যাপী সমস্ত কিছুর একটি বড় জগাখিচুড়ি মোকাবেলা এড়াতে, দোকানটি একাধিক নেমস্পিড মডিউলগুলিতে পৃথক করা উচিত।
উপাদান ধরনের
এই সমস্ত যোগাযোগকে অর্কেস্ট্রেট করতে এবং পুনরায় ব্যবহারের সহজলভ্য করার জন্য আমাদের উপাদানগুলি দুটি ভিন্ন ধরণের হিসাবে ভাবা উচিত।
- অ্যাপ্লিকেশন নির্দিষ্ট পাত্রে
- জেনেরিক উপাদান
আবার, এর অর্থ এই নয় যে জেনেরিক উপাদানটি পুনরায় ব্যবহার করা উচিত বা অ্যাপ্লিকেশন নির্দিষ্ট ধারকটি পুনরায় ব্যবহার করা যাবে না, তবে তাদের বিভিন্ন দায়িত্ব রয়েছে।
অ্যাপ্লিকেশন নির্দিষ্ট পাত্রে
এগুলি হ'ল সরল ভ্যু উপাদান যা অন্যান্য ভ্যূ উপাদানগুলি (জেনেরিক বা অন্যান্য অ্যাপ্লিকেশন নির্দিষ্ট ধারকগুলি) মোড়কে দেয়। এখানেই ভেক্স স্টোর যোগাযোগ হওয়া উচিত এবং এই ধারকটিকে অন্যান্য সহজ উপায়গুলির মাধ্যমে প্রপস এবং ইভেন্ট শ্রোতার মাধ্যমে যোগাযোগ করা উচিত।
এই পাত্রে এমনকি কোনও নেটিভ ডোম উপাদান থাকতে পারে না এবং জেনেরিক উপাদানগুলি টেম্প্লেটিং এবং ব্যবহারকারীর ইন্টারঅ্যাকশনগুলির সাথে ডিল করতে দেয়।
সুযোগ একরকম eventsবা storesভাইবোন উপাদান দৃশ্যমানতা
এখানেই স্কোপিং ঘটে। সর্বাধিক উপাদান দোকান সম্পর্কে জানি না এবং এই কম্পোনেন্ট (বেশিরভাগই) এক ব্যবহার দোকান মডিউল একটি সীমিত সেট দিয়ে namespaced উচিত gettersএবং actionsপ্রদত্ত সঙ্গে প্রয়োগ Vuex বাঁধাই সাহায্যকারী ।
জেনেরিক উপাদান
এগুলি প্রপস থেকে তাদের ডেটা গ্রহণ করা উচিত, তাদের নিজস্ব স্থানীয় ডেটাতে পরিবর্তন করা উচিত এবং সাধারণ ইভেন্টগুলি নির্গত করা উচিত। বেশিরভাগ সময় তাদের জানা উচিত নয় যে কোনও ভেক্স স্টোর রয়েছে।
এগুলিকে পাত্রেও বলা যেতে পারে কারণ তাদের একমাত্র দায়িত্ব অন্যান্য ইউআই উপাদানগুলিতে প্রেরণা হতে পারে।
ভাইবোন যোগাযোগ
সুতরাং, এত কিছুর পরেও, কীভাবে আমরা দুটি ভাইবোনের উপাদানগুলির মধ্যে যোগাযোগ করব?
উদাহরণ সহকারে এটি বোঝা সহজ: আমাদের বলুন যে আমাদের কাছে একটি ইনপুট বাক্স রয়েছে এবং এর ডেটা অ্যাপ্লিকেশন জুড়ে ভাগ করা উচিত (গাছের বিভিন্ন স্থানে ভাইবোন) এবং ব্যাকএন্ডের সাথে অবিচল থাকে।
সবচেয়ে খারাপ পরিস্থিতির সাথে শুরু করে , আমাদের উপাদান উপস্থাপনা এবং ব্যবসায়িক যুক্তি মিশ্রিত করবে ।
// MyInput.vue
<template>
<div class="my-input">
<label>Data</label>
<input type="text"
:value="value"
:input="onChange($event.target.value)">
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
value: "",
};
},
mounted() {
this.$root.$on('sync', data => {
this.value = data.myServerValue;
});
},
methods: {
onChange(value) {
this.value = value;
axios.post('http://example.com/api/update', {
myServerValue: value
})
.then((response) => {
this.$root.$emit('update', response.data);
});
}
}
}
</script>
এই দুটি উদ্বেগকে আলাদা করতে, আমাদের একটি অ্যাপ্লিকেশন নির্দিষ্ট ধারকটিতে আমাদের উপাদানটি মোড়ানো উচিত এবং উপস্থাপনার যুক্তিটি আমাদের জেনেরিক ইনপুট উপাদানটিতে রাখা উচিত।
আমাদের ইনপুট উপাদানটি এখন পুনরায় ব্যবহারযোগ্য এবং ব্যাকএন্ড বা ভাইবোনদের সম্পর্কে জানেন না।
// MyInput.vue
// the template is the same as above
<script>
export default {
props: {
initial: {
type: String,
default: ""
}
},
data() {
return {
value: this.initial,
};
},
methods: {
onChange(value) {
this.value = value;
this.$emit('change', value);
}
}
}
</script>
আমাদের অ্যাপ্লিকেশন নির্দিষ্ট ধারক এখন ব্যবসায়ের যুক্তি এবং উপস্থাপনা যোগাযোগের মধ্যে সেতু হতে পারে।
// MyAppCard.vue
<template>
<div class="container">
<card-body>
<my-input :initial="serverValue" @change="updateState"></my-input>
<my-input :initial="otherValue" @change="updateState"></my-input>
</card-body>
<card-footer>
<my-button :disabled="!serverValue || !otherValue"
@click="saveState"></my-button>
</card-footer>
</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex';
import { NS, ACTIONS, GETTERS } from '@/store/modules/api';
import { MyButton, MyInput } from './components';
export default {
components: {
MyInput,
MyButton,
},
computed: mapGetters(NS, [
GETTERS.serverValue,
GETTERS.otherValue,
]),
methods: mapActions(NS, [
ACTIONS.updateState,
ACTIONS.updateState,
])
}
</script>
যেহেতু ভেক্স স্টোর ক্রিয়াকলাপগুলি ব্যাকএন্ড যোগাযোগের সাথে যোগাযোগ করে, তাই আমাদের এখানে ধারকটি অক্ষ এবং ব্যাকএন্ড সম্পর্কে জানতে হবে না।
$emitসঙ্গেv-modelঅনুকরণ করা.sync। আমার মনে হয় আপনার ভিউক্স পথে যাওয়া উচিত