Dalam JavaScript, antara muka merujuk kepada jenis rujukan yang mentakrifkan kontrak Antara muka sebenarnya memberitahu kami kaedah yang dilaksanakan oleh kelas, dengan itu membantunya menggunakan antara muka ini boleh menjadikan kod itu lebih stabil.
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi JavaScript 1.8.5, komputer Dell G3.
Tiada cara terbina dalam untuk mencipta atau melaksanakan antara muka dalam JavaScript. Ia juga tidak mempunyai kaedah terbina dalam untuk menentukan sama ada satu objek melaksanakan set kaedah yang sama dengan objek lain. Ini menjadikan objek sukar untuk digunakan secara bergantian. Tetapi JavaScript sangat fleksibel, dan kami boleh melaksanakannya dengan cara lain.
Antara muka sebenarnya mentakrifkan kaedah yang sepatutnya wujud dalam objek. Dia tidak perlu mempertimbangkan bagaimana kaedah ini dilaksanakan, tetapi mentakrifkan bahawa objek mempunyai kaedah ini.
Antara muka merujuk kepada jenis rujukan yang mentakrifkan kontrak. Jenis lain melaksanakan antara muka untuk memastikan ia menyokong operasi tertentu. Antara muka menentukan ahli yang mesti disediakan oleh kelas atau antara muka lain yang melaksanakannya. Sama seperti kelas, antara muka boleh mengandungi kaedah, sifat, pengindeks dan acara sebagai ahli.
Antara muka sebenarnya memberitahu kami kaedah mana yang dilaksanakan oleh kelas. Ini membantu mereka menggunakan kelas ini. Antara muka boleh menjadikan kod kami lebih stabil jika kami menambah kaedah pada antara muka. Jika kelas yang melaksanakannya tidak menambah kaedah ini dengan sewajarnya, ia pasti akan membuang ralat.
Terdapat tiga kaedah untuk antara muka tiruan JavaScript:
Kaedah anotasi
Kaedah semakan atribut
Kaedah transformasi itik
Menggunakan ulasan untuk menerangkan antara muka ialah kaedah yang paling mudah, tetapi kesannya adalah yang paling teruk.
/* interface Composite { function add(child); function remove(child); function getChild(index); } interface FormItem { function save(); } */ class CompositeForm { add(child) { //... } remove(child) { } getChild(index) { //... } save() { //... } }
Kaedah tiruan ini tidak begitu baik ia tidak menyemak sama ada CompositeForm melaksanakan kaedah dengan betul melalui pengaturcara secara sedar melaksanakan antara muka dalam anotasi. Walau bagaimanapun, pelaksanaan ini sangat mudah, tetapi ia tidak membantu dalam ujian dan penyahpepijatan.
Kaedah ini lebih berhati-hati, tetapi antara muka juga ditulis dalam bentuk ulasan, tetapi anda boleh mengetahui kelas tertentu dengan menyemak atribut Apakah antara muka yang dituntut untuk dilaksanakan?
class CompositeForm { constructor() { this.implementsInterface = ['Composite', 'FormItem']; } } function addForm(formInstance) { if (!implements(formInstance, 'Composite', 'FormItem')) { throw new Error('对象没有实现接口方法'); } } function implements(obj) { // 这个方法查询接口 for (let i = 1; i < arguments.length; i++) { let interfaceName = arguments[i]; let interfaceFound = false; for (let j = 1; j < obj.implementsInterface.length; j++) { if (obj.implementsInterface[j] == interfaceName) { interfaceFound = true; break; } } if (!interfaceFound) { return false; } return true; } } addForm(new CompositeForm());
Kelebihan kaedah ini ialah ia menyediakan dokumentasi untuk antara muka yang dilaksanakan oleh kelas Jika antara muka yang diperlukan bukan antara antara muka yang didakwa oleh kelas saya (iaitu, ia tidak ada my this. implementsInterface), anda akan melihat mesej ralat.
Kekurangan juga jelas Jika antara muka diisytiharkan dalam this.implementsInterface saya berbeza daripada antara muka yang ditakrifkan dalam ulasan saya tetapi semakan masih boleh lulus, ini bermakna memanggil kaedah addForm tidak akan menyebabkan ralat <. 🎜>
// interface class Interface { constructor(name, method) { if (arguments.length != 2) { throw new Error('两个参数:name method'); } this.name = name; this.method = []; for (let i in method) { if (typeof method[i] != 'string') { throw new Error('method 必须是字符串'); } this.method.push(method[i]); } } //检查接口方法 static ensureImplements(obj) { if (arguments.length < 2) { throw new Error('参数小于两个'); } for (let i = 1; i < arguments.length; i++) { var instanceInterface = arguments[i]; if (instanceInterface.constructor !== Interface) { throw new Error('你要检查的参数不属于Interface接口') } for (let j in instanceInterface.method) { let methodName = instanceInterface.method[j]; if (!obj[methodName] || typeof obj[methodName] !== 'function') { throw new Error(`请实现接口的${methodName}方法`) } } } } } // 实例化接口对象 var Composite = new Interface('Composite', ['add', 'remove', 'getChild']); var FormItem = new Interface('FormItem', ['save']); // CompositeForm 类 class CompositeForm { //... add() {} remove() {} getChild() {} } let c1 = new CompositeForm(); Interface.ensureImplements(c1, Composite, FormItem); function addForm(formInterface) { ensureImplements(formInterface, Composite, FormItem); }
class Interface { constructor() { this.mehods = ['add', 'save', 'remove', 'save']; } static ensureImplements(obj) { //... } }
Atas ialah kandungan terperinci Apakah antara muka dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!