Kata pengantar
Menggunakan Node untuk memisahkan model pengembangan ujung depan dan belakang membawa beberapa keuntungan dan keunggulan proses pengembangan, tetapi juga menghadapi banyak tantangan. Di bawah bisnis dan arsitektur teknis Taobao yang kompleks, backend harus bergantung pada Java untuk membangun infrastruktur dan menyediakan antarmuka bisnis yang relevan untuk digunakan oleh front-end. Salah satu tugas node yang paling penting di seluruh lingkungan adalah dengan proksi antarmuka bisnis ini untuk memfasilitasi integrasi data di front-end (sisi simpul dan sisi browser) untuk rendering halaman. Bagaimana melakukan pekerjaan yang baik dalam pekerjaan agensi sehingga setelah pengembangan ujung depan dan belakang masih dapat terhubung dengan mulus dalam prosesnya, adalah masalah yang perlu kita pertimbangkan. Artikel ini akan membahas masalah ini dan mengusulkan solusi.
Karena backend menyediakan berbagai antarmuka, pengembang mungkin juga memiliki berbagai cara untuk menulis kode sisi simpul untuk mengakses antarmuka ini. Jika kami tidak melakukan pemrosesan arsitektur terpadu dalam metode dan penggunaan akses antarmuka, itu akan menyebabkan masalah berikut:
1. Setiap pengembang menggunakan gaya kodenya sendiri untuk menulis kode akses antarmuka, menyebabkan kebingungan dalam direktori proyek dan gaya pengkodean, yang membuatnya relatif sulit untuk dipertahankan.
2. Setiap pengembang menulis metode data tiruannya sendiri. Setelah pengembangan selesai, ia perlu memodifikasi kode secara manual untuk menghapus tiruan.
3. Untuk mewujudkan pergantian lingkungan yang berbeda dari antarmuka (harian, pra-masalah, online), setiap pengembang dapat memelihara beberapa file konfigurasi.
4. Metode panggilan antarmuka data tidak dapat dengan mudah digunakan kembali oleh berbagai model bisnis.
5. Perjanjian deskripsi untuk antarmuka data tersebar di setiap sudut kode, yang mungkin tidak konsisten dengan dokumen antarmuka yang disepakati oleh personel backend.
6. Setelah seluruh proyek didistribusikan, biaya penghubung antarmuka atau regresi pengujian masih sangat tinggi, dan perlu melibatkan setiap penyedia dan pengguna antarmuka.
Jadi kami berharap memiliki kerangka kerja yang menggunakan mekanisme yang disediakan oleh kerangka kerja ini untuk menggambarkan semua antarmuka eksternal yang bergantung pada proyek-proyek teknik, mengelolanya dengan cara yang terpadu, dan menyediakan metode pemodelan antarmuka dan panggilan yang fleksibel, serta lingkungan online dan lingkungan pengalihan lingkungan yang nyaman untuk menggabungkan pengembangan front-end dan akhir yang mulus. ModelProxy adalah kerangka kerja ringan yang memenuhi persyaratan tersebut. Ini adalah salah satu komponen inti dari kerangka kerja tengah dan juga dapat digunakan sendiri. Menggunakan ModelProxy dapat membawa keunggulan berikut:
1. Pengembang yang berbeda telah menyatukan metode penulisan kode akses antarmuka, makna yang jelas, dan mengurangi kesulitan pemeliharaan.
2. Kerangka kerja mengadopsi mode pabrik + singleton untuk mewujudkan beberapa multiplexing konfigurasi antarmuka sekaligus. Dan pengembang dapat menyesuaikan dan mengumpulkan model bisnis mereka sendiri (injeksi ketergantungan).
3. Ini dapat dengan mudah beralih lingkungan secara online, setiap hari, dan pra-masalah.
4. Mesin tiruan bawaan seperti River-Mock dan Mockjs, memberikan data tiruan sangat nyaman.
5. Gunakan file konfigurasi antarmuka untuk mengelola deskripsi ketergantungan antarmuka secara seragam untuk menghindari tersebar di berbagai kode.
6. Mendukung berbagi model di sisi browser, yang dapat digunakan untuk membuat data front-end. Seluruh proses proxy transparan ke browser.
7. File konfigurasi antarmuka itu sendiri adalah dokumen deskripsi terstruktur, dan dokumen dapat secara otomatis dihasilkan menggunakan koleksi alat sungai. Ini juga dapat digunakan untuk pengujian antarmuka otomatisasi terkait untuk membentuk loop tertutup di seluruh proses pengembangan.
Diagram Prinsip Kerja ModelProxy dan Diagram Proses Pengembangan Terkait
Pada gambar di atas, pengembang pertama -tama perlu menggambarkan semua dependensi antarmuka backend dalam proyek dan menulisnya ke file konfigurasi antarmuka.json sesuai dengan format JSON yang ditentukan. Jika perlu, file aturan perlu ditulis untuk setiap antarmuka, yaitu, antarmuka aturan bagian dari gambar. File aturan ini digunakan untuk mengejek data selama tahap pengembangan atau menggunakan alat sungai yang diatur untuk memverifikasi antarmuka selama tahap debugging bersama. Isi file aturan tergantung pada mesin tiruan mana yang digunakan (seperti mockjs, river-mock, dll.). Setelah konfigurasi selesai, Anda dapat membuat model bisnis Anda sendiri dalam kode sesuai dengan kebutuhan Anda.
Berikut adalah contoh sederhana:
【Contoh 1】
Langkah pertama adalah membuat antarmuka file konfigurasi antarmuka.
Salinan kode adalah sebagai berikut:
{
"Judul": "Definisi Pengumpulan Antarmuka Data Proyek Pad Taobao",,
"Versi": "1.0.0",
"mesin": "mockjs",
"RuleBase": "./interfacerules/",
"Status": "Online",
"Antarmuka": [{
"Nama": "Antarmuka Pencarian Utama",
"ID": "Search.GetItems",
"URLS": {
"Online": "http://smtaobao.com/client/search.do"
}
}]
}
Langkah 2 Buat dan gunakan model dalam kode
Salinan kode adalah sebagai berikut:
// Perkenalkan modul
var modelProxy = membutuhkan ('modelProxy');
// Inisialisasi global memperkenalkan file konfigurasi antarmuka (Catatan: Inisialisasi hanya berfungsi sekali)
Modelproxy.init ('./interface.json');
// Untuk mode pembuatan lainnya, silakan merujuk ke artikel berikut
var searchModel = new ModelProxy ({
SearchItems: 'Search.GetItems' // Metode Kustom Nama: ID Antarmuka yang Ditentukan dalam File Konfigurasi
});
// Gunakan model, Catatan: Parameter yang diperlukan untuk memanggil metode ini adalah parameter yang diperlukan untuk antarmuka yang sebenarnya.
SearchModel.SearchItems ({Q: 'iPhone6'})
//! Perhatikan bahwa Anda harus memanggil metode yang dilakukan untuk menentukan fungsi panggilan balik untuk mendapatkan data yang diperoleh dengan memanggil SearchItems secara tidak sinkron di atas!
.done (function (data) {
console.log (data);
})
.Error (function (err) {
console.log (err);
});
Kekayaan fitur ModelProxy adalah mendukung berbagai bentuk profil untuk membuat model bisnis yang membutuhkan bisnis:
Buat objek menggunakan ID Antarmuka> akan mengambil kata setelah yang terakhir '.' jumlah id sebagai nama metode
Salinan kode adalah sebagai berikut:
ModelProxy.Create ('Search.GetItem');
Gunakan Nilai Kunci Objek JSON> Nama Metode Kustom: ID Antarmuka
Salinan kode adalah sebagai berikut:
ModelProxy.Create ({
getName: 'session.getusername',
getMycarts: 'cart.getcarts'
});
Gunakan Formulir Array> Ambil kata setelah yang terakhir. Nomor sebagai nama metode
Metode nama panggilan yang dihasilkan dalam contoh berikut adalah: cart_getitem, getItem, sarankan, getName
Salinan kode adalah sebagai berikut:
ModelProxy.Create (['cart.getItem', 'search.getItem', 'search.suggest', 'session.user.getname']);
Formulir awalan> semua ID antarmuka yang memenuhi awalan akan dimasukkan ke dalam objek dan bagian terakhir diambil sebagai nama metode
Salinan kode adalah sebagai berikut:
ModelProxy.Create ('Search.*');
Pada saat yang sama, menggunakan model ini, Anda dapat dengan mudah menerapkan permintaan gabungan atau permintaan ketergantungan dan membuat templat terkait
[Contoh 2] Permintaan Gabungkan
Salinan kode adalah sebagai berikut:
var model = new ModelProxy ('Search.*');
// Permintaan Gabungkan (metode model yang disebut di bawah ini ditentukan saat mengkonfigurasi ID antarmuka kecuali untuk selesai)
model.suggest ({q: 'betina'})
.list ({kata kunci: 'iPhone6'})
.getnav ({key: 'pakaian populer'})
.done (function (data1, data2, data3) {
// Urutan parameter konsisten dengan urutan panggilan metode
console.log (data1, data2, data3);
});
[Contoh 3] Permintaan ketergantungan
Salinan kode adalah sebagai berikut:
var model = new ModelProxy ({
getuser: 'session.getUser',
getMyOrderList: 'order.getorder'
});
// Dapatkan ID pengguna terlebih dahulu, dan kemudian dapatkan daftar pesanan berdasarkan nomor ID
model.getUser ({sid: 'fdkaldjfgsakls0322yf8'})
.done (function (data) {
var uid = data.uid;
// Permintaan data sekunder tergantung pada nomor ID yang diperoleh pertama
this.getMyOrderList ({id: uid})
.done (function (data) {
console.log (data);
});
});
Selain itu, ModelProxy dapat digunakan tidak hanya di sisi simpul, tetapi juga di sisi browser. Cukup perkenalkan ModelProxy-client.js yang disediakan oleh paket resmi ke dalam halaman.
[Contoh 4] Menggunakan ModelProxy di sisi browser
Salinan kode adalah sebagai berikut:
<!-Memperkenalkan Modul ModelProxy, yang dengan sendirinya merupakan modul standar yang dienkapsulasi oleh Kissy->
<Script src = "ModelProxy-client.js"> </script>
<type skrip = "Teks/JavaScript">
Kissy.use ("ModelProxy", Function (S, ModelProxy) {
//! Konfigurasikan jalur dasar, yang konsisten dengan jalur intersep yang dikonfigurasi pada langkah kedua!
// Dan ada konfigurasi global dan hanya sekali!
ModelProxy.configBase ('/model/');
// Buat model
var SearchModel = ModelProxy.Create ('Search.*');
Pencarian Model
.list ({q: 'ihpone6'})
.list ({q: 'shangchao'})
.suggest ({q: 'i'})
.getNav ({q: 'skateboard'})
.done (function (data1, data2, data3, data4) {
console.log ({
"list_ihpone6": data1,
"list_shocksuit": data2,
"Sarankan_i": data3,
"getNav_skateboard": data4
});
});
});
</script>
Pada saat yang sama, ModelProxy dapat digunakan dengan Midway-XTPL, komponen inti lain dari Midway, untuk mewujudkan berbagi data, templat, dan proses rendering terkait di sisi browser dan server. Untuk tutorial dan dokumentasi terperinci tentang ModelProxy, silakan pindah ke https://github.com/purejs/modelproxy
Meringkaskan
ModelProxy ada sebagai kerangka kerja ringan yang dikonfigurasi, menyediakan rakitan model antarmuka yang ramah dan metode penggunaan, dan pada saat yang sama ia memecahkan masalah spesifikasi penggunaan antarmuka dalam pemisahan mode pengembangan front-end dan back-end. Selama seluruh proses pengembangan proyek, antarmuka selalu perlu didefinisikan dan dijelaskan sekali, dan pengembang front-end dapat merujuknya. Pada saat yang sama, alat sungai digunakan untuk secara otomatis menghasilkan dokumen, membentuk kontrak dengan pengembang back-end, dan melakukan tes otomatis terkait, sangat mengoptimalkan seluruh proses pengembangan rekayasa perangkat lunak.
【Catatan】 Sungai adalah istilah umum untuk spesifikasi antarmuka terpadu front-end dan alat terkait yang dikembangkan oleh Alibaba Group dan dikembangkan oleh Alibaba Group.