Get best of the week

Kami menulis front-end yang berfungsi. Atau cara menjadi insinyur dari pengembang. Bagian 1

Pengembang adalah konsep yang sangat melekat pada teknologi tertentu, dan merekalah yang menentukan apa yang akan Anda kembangkan. Seorang insinyur adalah konsep yang jauh lebih luas, pada awalnya tidak terikat pada bidang apa pun. Pertama, Anda mendapatkan dasar teknik yang disebut, atas dasar mana Anda memilih niche di mana Anda akan bekerja, misalnya, seorang insinyur perangkat lunak. Dan hanya setelah itu insinyur mulai berspesialisasi dalam salah satu teknologi.

Basis teknik lebih tentang cara berpikir, kemampuan untuk menganalisis dan mensistematisasikan, daripada tentang kerak dari universitas. Saat Anda dapat membuktikan, baik keputusan yang dibuat maupun keputusan yang telah dibuang.

Bukan rahasia lagi bahwa front-end adalah salah satu tempat pembuangan sampah, di mana jika sesuatu berfungsi, lebih baik untuk tidak menyentuhnya, dan jika tidak, untuk menulis ulang sepenuhnya.

Lebih baik melihat sekali daripada mendengar seratus kali


Sekarang sudah menjadi mode untuk membuat antarmuka berdasarkan kartu, jadi mari kita lihat kasus di mana kita diharuskan untuk mengembangkan kartu yang dapat diseret dan diambil untuk memegang posisi tertentu sebagai hasil dari seretan ini.

Pendahuluan


  1. Kartu harus dapat menempati satu dari tiga posisi. 1 - kartu diinisialisasi, 2 - pengguna menarik kartu ke atas (membukanya), 3 - pengguna menggesek kartu ke bawah untuk mengeluarkannya.


  2. Ukuran kartu minimum adalah 50vh, maksimum tidak terbatas (itu berarti kemungkinan bergulir di posisi 2)

Setelah menerima persyaratan, pengembang kemungkinan besar sudah mencoba memutuskan kerangka mana yang akan digunakan. Dan insinyur akan mencoba menjelaskan proses secara lebih rinci dan mengidentifikasi fitur utama dari deskripsi ini

Sebagai contoh:



Diagram tindakan tingkat atas terlihat seperti ini, itu tidak terlalu rumit:



Pertimbangkan tindakan DragUp:



Di sini Anda dapat melihat langsung bahwa tindakan dragUp tidak mungkin hanya dari posisi ketika kartu digulir. , dari semua posisi lain, terlepas dari ukuran kartu, kita harus menangani aksi dragUp.

Kesulitannya hanya klasifikasi kartu dalam ukuran. Kita harus mengklasifikasikan kartu sebagai kecil untuk mencegahnya terseret lebih tinggi dari 50vh, kartu berukuran sedang tidak boleh naik di atas ketinggiannya (jika tidak hanya menggantung di "udara"), tetapi kartu berukuran besar tidak boleh diseret lebih tinggi dari Y = 0 (atas layar).

Ahli matematika yang baik adalah ahli matematika yang malas. Sulit untuk mengklasifikasikan kartu berdasarkan ukuran dan menentukan tinggi tarik maksimum, ada baiknya untuk memikirkan cara menyajikan kartu-kartu ini dengan lebih nyaman, bukan untuk menyelesaikan semuanya secara langsung (ini seperti dalam matematika ketika Anda membawa semuanya ke penyebut yang sama).

Pada tahap ini, kita dapat membayangkan bahwa kartu digambar dalam viewport virtual yang dapat bergerak naik dan turun relatif terhadap viewport nyata, ketinggian minimum viewport virtual ini adalah 50vh, maksimumnya adalah 100vh.



Sekarang parameter umum untuk kartu dari semua ukuran di posisi apa pun (inited, dibuka) adalah cadangan daya.

Diagram pemrosesan tindakan dragUp dapat digambarkan sebagai berikut:



Untuk tindakan dragDown, masih lebih sederhana (Anda bisa, tentu saja, mulai lagi dengan lingkaran Euler, tetapi semuanya terlalu jelas) - satu-satunya syarat memblokir dragDown adalah kartu telah digulir dan tindakan scrollDown akan dieksekusi, dan bukan dragdown.



Dan pemimpin dalam sikap tidak bersahabat terhadap kondisi yang membatasi adalah gulungan. Satu-satunya hal yang perlu diingat adalah bahwa scrolling menjadi mungkin hanya pada posisi terbuka, ketika viewports virtual dan nyata benar-benar berpotongan. (dan kami menerapkan kondisi ini melalui css, menentukan open overflow-y untuk posisi itu)



Dan tentu saja, kami "melewatkan" sesuatu dan acara seret ini yang menutup interaksi kami dengan kartu (dan sebenarnya dengan virtual viewport) dan pada output menentukan posisi apa yang harus kita tempati.



Total


Sebagai hasil dari bagian pertama, di mana kami melakukan pelatihan teknik, menjelaskan parameter kunci dan rencana tindakan, kami dengan lancar mendekati bagian 2, di mana dari posisi pengembang kami akan menerapkan semua ini (hal-hal seperti dragUp, tindakan dragDown, menentukan cadangan daya, deskripsi posisi akhir). Secara umum, ubah sirkuit menjadi kode.

More articles:


All Articles