Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Apakah antara muka dalam javascript

Apakah antara muka dalam javascript

青灯夜游
Lepaskan: 2021-10-27 18:06:46
asal
3689 orang telah melayarinya

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.

Apakah antara muka dalam javascript

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.

Apakah itu antara muka

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.

Faedah antara muka

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.

antara muka tiruan javascript

Terdapat tiga kaedah untuk antara muka tiruan JavaScript:

  • Kaedah anotasi

  • Kaedah semakan atribut

  • Kaedah transformasi itik

Gunakan ulasan untuk menerangkan antara muka

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() {
        //...
    }
}
Salin selepas log masuk

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 semakan atribut meniru antara muka

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());
Salin selepas log masuk

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 <. 🎜>

Gunakan transformasi itik untuk mensimulasikan antara muka

Malah, tidak kira sama ada kelas mengisytiharkan antara muka yang disokongnya, asalkan ia mempunyai kaedah dalam antara muka ini . Transformasi itik menggunakan set kaedah objek sebagai satu-satunya kriteria untuk menentukan sama ada ia adalah contoh. Prinsip pelaksanaan juga sangat mudah: jika objek mempunyai kaedah dengan nama yang sama dengan kaedah yang ditakrifkan oleh antara muka, maka ia boleh dianggap bahawa ia melaksanakan antara muka.

// interface
class Interface {
    constructor(name, method) {
        if (arguments.length != 2) {
            throw new Error(&#39;两个参数:name method&#39;);
        }
        this.name = name;
        this.method = [];
        for (let i in method) {
            if (typeof method[i] != &#39;string&#39;) {
                throw new Error(&#39;method 必须是字符串&#39;);
            }
            this.method.push(method[i]);
        }
    }
    //检查接口方法
    static ensureImplements(obj) {
        if (arguments.length < 2) {
            throw new Error(&#39;参数小于两个&#39;);
        }

        for (let i = 1; i < arguments.length; i++) {
            var instanceInterface = arguments[i];
            if (instanceInterface.constructor !== Interface) {
                throw new Error(&#39;你要检查的参数不属于Interface接口&#39;)
            }

            for (let j in instanceInterface.method) {
                let methodName = instanceInterface.method[j];
                if (!obj[methodName] || typeof obj[methodName] !== &#39;function&#39;) {
                    throw new Error(`请实现接口的${methodName}方法`)
                }
            }
        }
    }
}

// 实例化接口对象
var Composite = new Interface(&#39;Composite&#39;, [&#39;add&#39;, &#39;remove&#39;, &#39;getChild&#39;]);
var FormItem = new Interface(&#39;FormItem&#39;, [&#39;save&#39;]);

// CompositeForm  类
class CompositeForm {
    //...
    add() {}
    remove() {}
    getChild() {}
}

let c1 = new CompositeForm();
Interface.ensureImplements(c1, Composite, FormItem);

function addForm(formInterface) {
    ensureImplements(formInterface, Composite, FormItem);
}
Salin selepas log masuk
Saya tidak melaksanakan kaedah simpan dalam kelas CompositeForm dalam kod di atas. Menjalankan kod ini akan mengakibatkan ralat.

Bagaimanapun, kaedah pengubahsuaian itik juga mempunyai kekurangan, dan semua aspek pemeriksaan adalah wajib.

Kaedah pelaksanaan rookie ini > Saya memanggil diri saya kaedah warisan Saya menggunakan warisan kelas untuk mensimulasikan antara muka Sila lihat kod untuk pelaksanaan tertentu.

Mula-mula kita mentakrifkan kelas yang digunakan sebagai antara muka Kaedah atribut mewakili set kaedah antara muka

class Interface {
    constructor() {
        this.mehods = ['add', 'save', 'remove', 'save'];
    }
    static ensureImplements(obj) {
        //...
    }
}
Salin selepas log masuk
Tentukan kelas CompositeForm untuk mewarisi antara muka ini, dan panggil ensureImplements. kelas induk dalam kelas ini.

Atas ialah kandungan terperinci Apakah antara muka dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan