javascript - Proses perniagaan aplikasi web pada asasnya adalah sama, berbilang set tema (gaya pada asasnya berbeza, dan interaksi sedikit terpesong) diuruskan, dan sentiasa ada tema baharu Bagaimana untuk mereka bentuk seni bina komponen?

Question

Senario perniagaan

Satu set aplikasi satu halaman perlu disambungkan kepada rakan kongsi yang berbeza, jadi UI perlu dilaraskan, dan kadangkala beberapa interaksi perlu diubah, tetapi keseluruhan proses pada dasarnya adalah sama.

Pada masa ini, kami merancang untuk menggunakan Vue untuk membina semula projek dan telah memisahkan logik perniagaan awam ke dalam lapisan perniagaan Walau bagaimanapun, semasa menulis komponen peringkat halaman, kami mendapati bahawa masih terdapat kebanyakan kod yang boleh digunakan semula, seperti pada halaman log masuk.

 // viewModel
｛ 
    phoneNum, smsCode, loginbtn
 }

Ia wujud dalam setiap versi Pada asasnya, satu set model pandangan boleh digunakan untuk menerangkan proses perniagaan ini, saya rasa bahagian kod berulang ini boleh digunakan semula.

Untuk setiap versi baharu, kebanyakan perubahan adalah gaya dan sedikit interaksi (terdapat juga banyak interaksi, tetapi proses logik perniagaan tertentu kekal tidak berubah).

Pernah dipertimbangkan:

Pilihan 1:

1.分割viewmodel到各子组件，构建该页面时，引用这些业务组件拼凑，添加／修改样式；
2.子组件间事件通信或动态注册data。
3.交互变更大，新增某个子组件。

Walau bagaimanapun, secara amnya perlu ada komponen UI dahulu dan kemudian komponen perniagaan Reka bentuk di sini adalah untuk mempunyai komponen perniagaan dahulu dan kemudian komponen UI.

Pilihan 2:

1.先编写ui组件
2.再编写viewmodel对应的流程逻辑
3.引用ui组件，mixin对应逻辑

Ideanya sangat bercelaru, tolong beri sedikit pendapat, terima kasih.

Answer 1

Pertama sekali, sila bezakan konsep [komponen] dan modul. Komponen hanya digunakan untuk menyatakan interaksi UI dan tidak seharusnya mengandungi logik perniagaan seperti permintaan bahagian hadapan dan belakang.

Secara khusus, pembangunan tapak berasaskan Sass selalunya perlu menangani keperluan [boleh dikonfigurasikan fungsi] jenis ini Proses biasa ialah:

1. Halaman belakang membuka antara muka [Function Configuration], dan frontend memperoleh maklumat [Current Page Configuration Parameters] apabila halaman dimuatkan

2. Bahagian hadapan merangkum setiap logik perniagaan ke dalam modul JS bebas, dan menyediakan fungsi perniagaan kepada lapisan UI Vue melalui fungsi modul eksport.

3. Lapisan UI bahagian hadapan memanggil fungsi modul yang berbeza berdasarkan konfigurasi fungsi.

Ringkasnya, model pembangunan adalah konsisten dengan aplikasi satu halaman Vue Cuma tambah modul JS yang mentakrifkan logik UI berdasarkan konfigurasi fungsi dan merangkumnya.

Bagi fungsi penukaran tema dinamik, ia juga boleh dilaksanakan melalui antara muka konfigurasi. Sebagai contoh, medan gaya dalam antara muka konfigurasi menyimpan awalan className yang mengenal pasti tema pihak perniagaan semasa, dan kemudian mengikat awalan gaya ke halaman semasa melalui perintah :class Dengan css yang sepadan, penukaran tema boleh dicapai dengan mudah.

P.S. Jangan gunakan mixin pada permulaan projek. Mixin boleh membuat logik perniagaan sukar dicari dan nyahpepijat (selepas mencampurkan dalam mixin, anda boleh merujuk fungsi dan pembolehubah yang diimport dari lokasi yang tidak diketahui). Pendekatan yang betul ialah mengimport modul perniagaan atas permintaan.

Answer 2

1. Asingkan ui dan komponen berfungsi (seperti permintaan rangkaian, storan setempat), dan komponen berfungsi pada asasnya boleh digabungkan secara bebas

2. Pengekstrakan dan pemisahan komponen UI, kebutiran khusus bergantung pada seberapa besar perbezaan antara projek subjek, dan keperluan kelajuan keluaran berulang pada hakikatnya, bukanlah semakin tinggi tahap kebolehgunaan semula, lebih baik, lebih banyak tahap; , pelaksanaan Semakin rendah kecekapan, semakin besar kemungkinan ralat dan semakin tinggi kesukaran untuk menyahpepijat titik imbangan perlu dipukul.