النموذج الحقيقي
بدأ modularization في الواجهة الأمامية في وقت مبكر جدا. سواء كان ذلك مطلوبًا. js ، أو متصفح للتغليف المعياري ، أو الزاوي لحقن التبعية ، يمكننا تقسيم رمز JS إلى وحدات صغيرة وتجميعها. بعد ذلك ، سنستخدم أيضًا أقل أو SASS لكسر ملف CSS إلى وحدات صغيرة للكتابة ، وحتى نشعر بالخصائص الموجهة للكائنات للتغليف والميراث وتعدد الأشكال ، وما إلى ذلك في رمز CSS.
ومع ذلك ، قبل ظهور WebPack ، لا يمكن اعتبار ما أسماه Modularity على الإطلاق. لماذا نقول هذا؟ نظرًا لوجود مشكلة مهمة لم يتم حلها ، وهي اعتماد وحدة JS على وحدات CSS.
على سبيل المثال ، إذا كان لدينا وسيط وحدة JS ، فهل يمكننا استيرادها مباشرة ونطلق عليها لإقامة مربع حوار؟ هل هو موافق كما هو موضح في الشكل أدناه؟
من الناحية النظرية ، يجب أن يكون هذا هو الحال ، ولكن في الواقع ، يعتمد هذا الوسيط فعليًا على وحدة CSS المقابلة. إذا لم نستورد هذه الوحدة ، فلا يمكننا ظهور مربع حوار عادي. علاوة على ذلك ، فإن استيراد وحدة CSS هذه غير مكتوبة في نفس المكان مثل استيراد وحدة JS ، ولكن في ملف CSS آخر. بمعنى آخر ، التبعية هي في الواقع مثل هذا:
من أجل استخدام وحدة نمطية ، نحتاج إلى القيام بعملية استيراد في ملفين واحد تلو الآخر. هذا في الواقع شيء غريب وغير معقول! لماذا نحتاج إلى أن نكون معياريا؟ هو تغليف وحدة ، والتي يمكن استخدامها بعد استيرادها. كيف يتم تنفيذها وما هي التبعيات التي تتم معالجتها بالكامل بواسطة هذه الوحدة نفسها. وهذا هو ، يجب التعامل مع الاعتماد على modal.css في الشكل أعلاه بواسطة modal.js نفسها.
لكننا نكتب وحدات كهذه في الواجهة الأمامية التي كتبناها منذ سنوات ، ليس لأنها صحيحة ، ولكن لأننا اعتدنا على هذه الطريقة الخاطئة. الآن باستخدام VUE ، يمكننا تغليف جميع تبعيات الوحدة النمطية تمامًا. سواء كانت قوالب أو CSS أو JS ، لم نعد نحتاج إلى الاهتمام بها بعد الآن. ما عليك سوى تقديم هذه الوحدة ويمكنها استخدامها ، ويتم التعامل مع تبعيات الوحدة النمطية بنفسها.
ثم تصبح تبعيةنا:
يحتوي Modal.vue على جميع التبعيات المطلوبة ، لذلك لم نعد بحاجة إلى التعامل مع CSS المقابلة أو حتى القوالب بأنفسنا. هذا هو التأثير الذي يجب أن تحققه النموذج.
إنشاء مشروع VUE
يوفر Vue أداة Vue-Cli لإنشاء قالب مشروع: https://github.com/vuejs/vue-cli
هنا جربت أولاً مشروع قالب آخر: https://github.com/vuejs-templates/webpack
ثم يمكننا كتابة وحدات بدلاً من استخدام Pure JS ، ولكن استخدم WebPack لكتابة جميع المحتوى المتعلق بوحدة في ملف. أخذ قائمة TODO السابقة كمثال ، في الواقع ، لم يتحدث الفصل السابق إلا عن استخدام المكون ، لذلك كتبت بهذه الطريقة. دعونا نغيرها إلى طريقة كتابة أفضل على النحو التالي:
list.vue:
<implate> <ul> <li v-for = 'tode in list'> <label v-bind: class = "{done: todo.done}"> <input type = "checkbox" v-model = "tode.done"/> {{toDo.title}} النوع: Array}} ، data () {return {list: []}} ، الأحداث: {add (input) {if (input) إرجاع خطأ this.list.unshift ({title: input ، ins: false})}}} </script> <style lang = "less" scoped> ul {margin-lleft: 2rem ؛ الحشو: 0 ؛ .done {text-decoration: خط ؛ }} </style>form.vue:
<implate> <h1> {{username}}} 'S TODO LIST </h1> <form v-on: submit = "add" v-on: submit.prevent> <input type = "text" v-model = "input"/> <input type = "prisal" value =' الافتراضي: 'unlamed'}} ، data () {return {input: ''}} ، الطرق: {add () {this. $ dispatch ('add' ، this.input) this.input = ''}}} </script>TODO.VUE:
<implate> <div id = "toDo"> <toDo-form username = 'lily'> </todo-form> <toDo-list> </to-lister> </viv> </mapplate> <script> استيراد نموذج من '. الأحداث: {add (input) {this. $ broadcast ('add' ، input)}}} </script> <style> </style>app.vue:
<implate> <ooddo> </todo> </template> <script> استيراد toDo من './components/todo.vue'export الافتراضي {مكونات: {' todوبهذه الطريقة ، أعدنا كتابة قائمة TODO السابقة على أنها معيارية. النموذجية هي واحدة من الأسس لبناء تطبيقات كبيرة ، ولكن هذا لا يكفي ، ما زلنا بحاجة إلى القيام:
• أفضل إدارة الدولة ، الإدارة المستقلة للدولة التي تتقاسمها مكونات مختلفة
• الاختبار الآلي
• التوجيه ، إلخ.
هنا نقوم فقط بإجراء واحد منهم ، وهو فصل الحالة إلى وحدة منفصلة. من الواضح ، بالنسبة لتطبيق قائمة TODO ، فإن بنية البيانات التي تحفظ قائمة TOD هي الحالة المشتركة بواسطة مكونات مختلفة.
لماذا نحتاج إلى بث الأحداث من قبل؟ كان ذلك لأن البيانات التي سيتم تشغيلها بين مكونات مختلفة تم حفظها في القائمة. لذلك ، عندما ترغب في إضافة جزء من البيانات في النموذج.
بمعنى آخر ، هذه البيانات ليست خاصة حسب القائمة. الآن بعد أن أصبحت مملوكة لقائمة.
على الرغم من أن طريقة الحدث أنيقة ، إلا أنه يمكننا في الواقع أن نفعل ما هو أفضل ، وهو فصل البيانات ، بحيث يمكن لكل من Form.Vue و List.vue تعديل البيانات مباشرة دون الاضطرار إلى إرسال الإخطارات.
هنا نضيف ملف store.js:
التصدير الافتراضي {list: [] ، إضافة (عنوان) {if (! title) إرجاع this.list.unshift ({title: title ، done: false})}}}بعد ذلك ، يمكننا تغيير القائمة.
استيراد متجر من '../store.js'export الافتراضي {props: {initList: {type: array}} ، data () {return store}}Form.vue لا يتطلب البث ، يمكنك إضافته عن طريق استدعاء طريقة المتجر مباشرة:
استيراد متجر من '../store.js'export الافتراضي {props: {username: {type: string ، الافتراضي:' unamed '}} ، data () {return {input:' '}} ، الطرق: {add () {store.add (this.input) this.input =' '}}}}}بعد هذا التغيير ، سيكون المنطق بأكمله أكثر وضوحًا ، وكلما كان التطبيق أكثر تعقيدًا ، كلما كان يجب عليك استخراج المتجر العام ، وإلا فستكون هناك أحداث بث تطير في جميع أنحاء السماء.
بالإضافة إلى ذلك ، بعد استخدام قالب المشروع هذا ، يكون التحميل الساخن رائعًا للغاية ويتم حفظه المنعش.
رمز المصدر أعلاه هنا: https://github.com/lihongxun945/vue-webpack-todo-list
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.