Apakah antara muka dalam javascript

Dalam JavaScript, antara muka ialah pengisytiharan siri kaedah abstrak dan koleksi ciri kaedah Ia menyediakan cara untuk menerangkan kaedah yang perlu ada pada objek. Antara muka boleh menggalakkan kebolehgunaan semula kod, membantu menstabilkan komunikasi antara kelas yang berbeza, dan mengurangkan masalah yang timbul dalam proses mewarisi dua objek.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi JavaScript 1.8.5, komputer Dell G3.

Apakah itu antara muka

Antara muka ialah pengisytiharan siri kaedah abstrak dan koleksi ciri kaedah ini semuanya abstract , perlu dilaksanakan oleh kelas tertentu, dan kemudian pihak ketiga boleh memanggil set kaedah abstrak ini untuk membenarkan kelas tertentu melaksanakan kaedah tertentu.

Antara muka ialah salah satu alat yang paling berguna dalam kotak alat pengaturcara JavaScript berorientasikan objek. Salah satu prinsip reka bentuk berorientasikan objek boleh guna semula yang dicadangkan dalam corak reka bentuk ialah "pengaturcaraan untuk antara muka dan bukannya pengaturcaraan pelaksanaan", yang kita panggil pengaturcaraan berorientasikan antara muka Kepentingan konsep ini jelas.

Tetapi masalahnya ialah dalam dunia JavaScript, tiada kaedah terbina dalam untuk mencipta atau melaksanakan antara muka, dan tiada set kaedah yang boleh menentukan sama ada objek melaksanakan sama dengan objek lain , yang menjadikan hubungan antara objek Sukar untuk menggunakannya secara bergantian Nasib baik, JavaScript mempunyai fleksibiliti yang sangat baik, yang memudahkan untuk mensimulasikan antara muka berorientasikan objek tradisional dan menambah ciri ini.

Antaramuka menyediakan cara untuk menentukan kaedah yang perlu ada pada objek Walaupun ia boleh menunjukkan maksud kaedah ini, ia tidak mengandungi pelaksanaan khusus. Dengan alat ini, objek boleh dikumpulkan mengikut sifat yang mereka sediakan.

Sebagai contoh, jika A dan B dan antara muka I, walaupun objek A dan objek B sangat berbeza, selagi kedua-duanya melaksanakan antara muka I, maka A boleh digunakan secara bergantian dalam A.I( B) kaedah dan B, seperti dalam B.I(A).

Anda juga boleh menggunakan antara muka untuk membangunkan persamaan antara kelas yang berbeza. Jika fungsi yang pada asalnya memerlukan kelas tertentu sebagai parameter ditukar kepada fungsi yang memerlukan antara muka khusus sebagai parameter, maka semua objek yang melaksanakan antara muka boleh dihantar kepadanya sebagai parameter Dengan cara ini, semua objek yang tidak berkaitan antara satu sama lain boleh dihantar kepadanya sebagai parameter juga boleh dianggap sama.

Kebaikan dan keburukan antara muka

Antara muka yang ditetapkan adalah deskriptif sendiri dan boleh menggalakkan kebolehgunaan semula kod Antara muka boleh memberikan sejenis maklumat untuk memberitahu kelas luaran Apa kaedah perlu dilaksanakan. Ia juga membantu menstabilkan kaedah komunikasi antara kelas yang berbeza dan mengurangkan masalah yang timbul dalam proses mewarisi dua objek.

Ini juga berguna untuk penyahpepijatan Dalam bahasa yang ditaip lemah seperti JavaScript, ketakpadanan taip sukar dijejaki Apabila menggunakan antara muka, jika masalah berlaku, akan terdapat mesej ralat yang lebih jelas. Sudah tentu, antara muka tidak sepenuhnya tanpa kekurangan Penggunaan antara muka yang meluas akan melemahkan fleksibiliti mereka sebagai bahasa yang ditaip lemah pada tahap tertentu Sebaliknya, JavaScript tidak mempunyai sokongan terbina dalam untuk antara muka, tetapi hanya mensimulasikan objek tradisional. antara muka berorientasikan Ini menjadikan JavaScript, yang sememangnya fleksibel, lebih sukar dikawal.

Selain itu, sebarang cara untuk melaksanakan antara muka akan mempunyai kesan prestasi, sebahagiannya disebabkan oleh overhed panggilan kaedah tambahan. Masalah terbesar dengan menggunakan antara muka ialah, tidak seperti bahasa lain yang ditaip kuat, JavaScript akan gagal untuk menyusun jika ia tidak mematuhi konvensyen antara muka dengan berkesan boleh mengelakkan masalah di atas Jika ia berada dalam persekitaran pembangunan kolaboratif, Antara mukanya berkemungkinan besar akan rosak tanpa menyebabkan sebarang ralat, yang tidak dapat dikawal.

Dalam bahasa berorientasikan objek, antara muka digunakan dengan cara yang hampir sama. Maklumat yang terkandung dalam antara muka menerangkan kaedah yang perlu dilaksanakan oleh kelas dan tandatangan kaedah ini. Takrif kelas mesti menyatakan secara eksplisit bahawa mereka melaksanakan antara muka ini, jika tidak, mereka tidak akan menyusun.

Jelas sekali kami tidak boleh melakukan perkara yang sama dalam JavaScript, kerana tiada antara muka dan melaksanakan kata kunci, dan tidak akan ada semakan pada masa jalan sama ada antara muka mengikut konvensyen, tetapi kami boleh menirunya melalui kaedah tambahan dan semak eksplisit kebanyakan sifatnya.

Cara melaksanakan antara muka dalam JavaScript

Terdapat tiga cara untuk melaksanakan antara muka dalam JavaScript:

(1) Komen terangkan antara muka

(2) Antara muka pengesanan atribut

(3) Antara muka pengenalan jenis itik

1. Antara muka penerangan ulasan: Tidak disyorkan

Kelebihan: Mudah dilaksanakan, tiada kelas atau fungsi tambahan diperlukan.

Kelemahan: Kekangan dokumen tulen, program tidak boleh menyemak sama ada objek yang melaksanakan antara muka melaksanakan semua kaedah antara muka

/**
 * interface Composite{
 *         function a();
 *         function b();
 * }
 */
// CompositeImpl implements Composite
var CompositeImpl = function(){
    //业务逻辑
};
CompositeImpl.prototype.a = function(){
    //业务逻辑
};
CompositeImpl.prototype.b = function(){
    //业务逻辑
};

2

Kaedah kedua adalah lebih ketat. Semua kelas mengisytiharkan secara eksplisit antara muka yang mereka laksanakan dan objek yang ingin berinteraksi dengan kelas ini boleh menyemak pengisytiharan ini. Antara muka itu sendiri masih hanya anotasi, tetapi kini anda boleh mengetahui antara muka yang dituntut oleh kelas untuk dilaksanakan dengan memeriksa harta benda.

Kelebihan: Keupayaan untuk menyemak antara muka yang dilaksanakan

缺点：并未确保类真正实现了自称实现的接口。你只知道它是否说自己实现了接口。

var interfacesImpl = function(){
    //在实现类内部用一个数组保存要实现的方法名
    //通常这个属性名是团队中规定好的
    //声明自己实现了这两个方法，但实际上并不一定
    this.implementsInterfaces = ["Composite","FormItem"];
};

//专门为这个实现对象写一个检测函数，传入实例对象，用于检查实例对象是否实现了所有接口
function checkImplements(obj){
    //调用检查方法 obj是否实现了两个接口，如果没有都实现则抛出异常
    if(!isImplements(obj,"Composite","FormItem")){
        throw new Error("接口没有全部实现！");
    }
    //obj是要检查的对象
    function isImplements(obj){
        //传入的第0个参数是要检查的对象，所以从1开始检查
        for(var i=1; i<arguments.length; i++){
            //接收接口中每个接口的名字
            var interfaceName = arguments[i];
            //默认未实现该接口
            var foundFlag = false;
            //循环查询传入实例对象的实现接口数组，检查是否全部实现
            for(var j=0; j<obj.implementsInterfaces.length; j++){
                //如果实现了这个接口，就修改标记并跳出
                //debugger
                if(obj.implementsInterfaces[j] == interfaceName){
                    foundFlag = true;
                    break;
                }
            }
            //如果遍历实现接口数组之后没找到，返回false
            if(!foundFlag){
                return false;
            }
        }
        return true;
    }
}

//使用实例对象并检测
var o = new interfacesImpl();
checkImplements(o);

3、鸭式辨型法：推荐

背后的观点：如果对象具有与接口定义的方法同名的所有方法，那么久可以认为它实现了这个接口。

/**
 * 接口类
 *
 * @param {String} name  接口的名字
 * @param {Array} methods   要实现方法名称的数组
 */
var Interface = function (name, methods) {
    //判断参数个数
    if(arguments.length !== 2){
        throw new Error("接口构造器参数必须是两个！");
    }
    this.name = name;
    this.methods = [];
    for(var i=0; i<methods.length; i++){
        if(typeof methods[i] !== "string"){
            throw new Error("接口实现的函数名称必须是字符串！");
        }
        this.methods.push(methods[i]);
    }
}

//实例化接口对象---传入接口名和要实现的方法数组
var CompositeInterface = new Interface("CompositeInterface",["add","remove"]);
var FormItemInterface = new Interface("FormItemInterface",["update","select"]);

//实现接口的类
var CompositeImpl = function(){

}

//实现接口的方法
CompositeImpl.prototype.add = function(obj){
    //...
}
CompositeImpl.prototype.remove = function(obj){
    //...
}
CompositeImpl.prototype.select = function(obj){
    //...
}
//在这里少实现一个方法，下面检查是否全部实现了接口
// CompositeImpl.prototype.update = function(obj){
//     //...
// }

//实例化 实现接口的对象
var c = new CompositeImpl();

//检验接口里的方法是否全部实现，如果不通过则抛出异常
Interface.ensureImplements = function(obj){
    //如果接收到参数小于2，说明异常
    if(arguments.length < 2){
        throw new Error("接口检查方法的参数必须多余两个！");
    }
    //接口实现检查
    for(var i=0,len = arguments.length; i<len; i++){
        //获取当前接口
        var instanceInterface = arguments[i];
        //判断接收到的是不是接口的对象，如果不是则抛出异常
        if(instanceInterface.constructor !== Interface){
            throw new Error("接口检测函数必须传入接口对象！");
        }
        //检查实例化接口的对象是不是实现了接口里的所有方法
        for(var j=0; j<instanceInterface.methods.length; j++){
            //接收到的字符串方法
            var methodName = instanceInterface.methods[j];
            //如果obj里面没有methodsName这个方法，或者有这个属性但是不是函数，就抛出异常
            if(!obj[methodName] || typeof obj[methodName] !== "function"){
                throw new Error("接口方法" + methodName + "没有实现！");
            }
        }
    }
}

//传入要检查的类，和要实现的所有接口对象
Interface.ensureImplements(c, CompositeInterface, FormItemInterface);
c.add();

【相关推荐：javascript学习教程】

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