القاعدة الأولى لعناصر الاختبار هي عدم إجراء عناصر الاختبار مطلقًا!
كان هناك بالفعل العديد من الخلافات حول هذا الموضوع على حبري ، ثم أتيحت لي الفرصة لتعلم هذا الدرس على نفسي. أرسلت الحل لكني لم أتلق إجابة. حتى السلبية. لا شيئ. بالطبع ، يمكن أن يُعزى كل شيء إلى الأزمة ، حيث تم تجميد الوظيفة الشاغرة فجأة (أسمع هذا كثيرًا مؤخرًا ، لكن نفس الوظائف الشاغرة لا تزال معلقة). ومع ذلك ، فإن الأدب المبتذل كان سيكون أكثر من كاف. الاستنتاج لا لبس فيه: تحتاج إلى التحقق بعناية من موثوقية المحاور قبل العض في TZ.
ومع ذلك ، فقد اتخذت هذه الخطوة عن عمد لاختبار نفسي ، واكتساب بعض الخبرة ، حتى في حالة الفشل مع صاحب العمل. المقال لن يكون عن ذلك. ظهرت صعوبات الحل بالفعل في مرحلة قراءة البيان الفني. في بعض الأحيان ، لا تعرف حتى كيفية بدء مهمة ، وسيؤثر اختيارك في البداية على جميع مراحل التطوير.
هناك العديد من البرامج التعليمية حول كيفية إنشاء فن الجسد عبر الإنترنت ، فكيف سأكون مختلفة؟ أولاً ، لا يتم إجراؤها عادةً وفقًا للمهمة الفنية ، مما يعني أن المؤلفين "قطعوا الزاوية" ، وبشكل عام ، لا يقتصرون على أي شيء. ثانيًا ، من النادر رؤية تفسير لسبب اختيار مسار أو آخر لحل المشكلة. ثالثًا ، طلبي هو ترتيب من حيث الحجم أكثر تعقيدًا من قائمة المهام القياسية ، وأكثر من ذلك لاحقًا.
للتعرف على المهمة التي تلقيتها ، أسأل تحت المفسد:
المهمة الفنية:
استخدم Vue.js لتنفيذ تطبيق صغير لتدوين ملاحظات SPA.
كل ملاحظة لها عنوان وقائمة مهام ، ثم Todo. يتكون كل عنصر من عناصر Todo من مربع اختيار والتوقيع النصي المرتبط به.
التطبيق يتكون من صفحتين فقط.
. Todo, , . :
( )
, Todo, . :
( )
( )
Todo:
:
.
( ) .
usability.
.
/ (Ctrl+Z, Command+Z, etc.).
:
"alert", "prompt" "confirm".
JavaScript TypeScript.
, , Webpack.
UI ( Vuetify).
, .
Vue-.
:
, , , , .
.
— . ( ). .
:
(GitHub, BitBucket, GitLab) .
. Dockerfile docker-compose.yaml, docker-compose up .
يجب أن أحذرك على الفور من أن الحل الذي قدمته لا يمتلك أي نعمة معمارية خاصة. هناك أسباب لذلك. من ناحية ، بالطبع ، أريد إقناع صاحب العمل ، من ناحية أخرى ، تتم مهمة الاختبار (المشار إليها فيما يلي ببساطة TK) على حساب وقت الحياة الشخصية ، والبحث عن عروض أخرى ، والتحضير للمقابلة ، إلخ. نختار الحل الوسط فقط إذا لم تكن هذه وظيفة أحلامك.
دعنا نلقي نظرة على المهمة والطرق الممكنة لحلها:
استخدم Vue.js لتنفيذ تطبيق صغير لتدوين ملاحظات SPA. كل شيء بسيط هنا: نستخدم Vue CLI لإنشاء مشروع .
todo list, ( - Todo). Todo . - , : , .
2 . - Vue Router? . , , - . , , . , , ? - .
, :
. : , , . "" , Vue .
. SPA, Vue CLI.
( ) .
"alert", "prompt" "confirm".
Promise, . , . , , , . vue-modal-dialogs - , . Vue 3.
usability. , . , .
. - , , Cookie localStorage. , . localStorage. Vuex, , . , , .
JavaScript TypeScript. - ? , , Vue. TypeScript Vue 2 , . , Vue 3.
, ! Vue 2, , , .
, , Webpack. Vue CLI Webpack, SPA Vue.js
UI ( Vuetify) - . "" , Material Icons , . , , .
, . - flexbox .
Vue-. - : 2 , , , , - .
.
:
v-click-outside. . , . , . , - . , .
: , ? : , ? . Vue-Router . beforeRouteLeave . . , . , :
async beforeRouteLeave (to, from, next) {
if (await confirm('Do you realy want to leave this page?',
'All unsaved changes will be lost.')) {
this.clearNote()
next()
} else{
next(from)
}
}, .