Bagaimana untuk merangkum pemalam dalam jquery

Dalam pembangunan web, jquery ialah perpustakaan Javascript yang sangat popular. jquery mempunyai ekosistem pemalam yang kaya, kerana ia menyediakan kaedah enkapsulasi pemalam yang mudah, membolehkan kami merangkum kod yang digunakan semula ke dalam pemalam untuk kegunaan semula yang mudah dalam projek.

Artikel ini akan memperkenalkan kaedah enkapsulasi pemalam jquery untuk membantu anda menulis kod yang cekap dengan cepat.

1. Struktur asas pemalam

Pemalam jquery mengandungi bahagian berikut:

1. Nama pemalam
2 🎜>3. Fungsi Utama Plug-in
4. Kaedah sambungan
5. Objek contoh

Di bawah ini kami akan memperkenalkan bahagian ini satu demi satu.

1. Nama pemalam

Nama pemalam adalah penting, ia mestilah deskriptif dan jelas serta mudah difahami. Kita harus mengelak daripada menggunakan nama yang terlalu ringkas atau terlalu umum. Contohnya: "myPlugin" atau "pluginLibrary1" tidak memberikan banyak maklumat. Nama pemalam yang baik boleh membantu orang lain memahami pemalam kami dengan lebih baik.

2. Parameter lalai

Pemalam kami harus mempunyai parameter lalai untuk membolehkan pengguna menggunakan pemalam apabila tiada parameter dinyatakan. Parameter lalai harus ditakrifkan dengan teliti untuk mengelakkan sebarang tekaan yang tidak perlu.

3. Fungsi utama pemalam

Di sinilah terletaknya fungsi teras pemalam. Di dalam fungsi kami akan melengkapkan semua kod yang diperlukan. Fungsi ini harus mempunyai satu parameter, iaitu sifat objek yang digunakan untuk menghantar parameter dan maklumat konfigurasi yang ditentukan pengguna. Berikut ialah contoh kod:

(function($){

$.fn.myPlugin = function(options){
   var settings = $.extend({
        //在这里定义默认参数
    }, options);        
   //插件主体函数
}    

}(jQuery));

Barisan pertama kod ialah fungsi tanpa nama yang dijalankan sendiri , yang Parameternya ialah jQuery. Parameter $ dipetik untuk memastikan bahawa alias $ tersedia di dalam pemalam. Fungsi pemalam dipasang pada jQuery.fn, menjadikannya pemalam jQuery.

$.fn.myPlugin ialah nama pemalam dan pilihan ialah objek konfigurasi yang kami hantar ke pemalam.

4. Kaedah sambungan

Kaedah sambungan bermakna kita boleh memanjangkan pemalam kepada lebih banyak fungsi. Kami boleh menambah lebih banyak kaedah pada pemalam. Ia sepatutnya sebagai objek di dalam fungsi baharu kerana ia mempunyai fungsi yang berbeza.

Kadang-kadang kami juga menggunakan kaedah dalaman jadi tidak perlu mendedahkannya sebagai kaedah berasingan. Kaedah ini tidak digunakan oleh pemalam lain.

Contohnya:

(function($){

$.fn.myPlugin = function(options){
    var settings = $.extend({
        //默认配置项
    }, options);
    var methods = {
      init: function(){},
      verify: function(){},
      processData: function(){}
    };
    //插件主体函数
    function mainFunc(){
        methods.init();
        methods.verify();
        methods.processData();
    }
    return this.each(function(){
        mainFunc();
    });
};

}(jQuery));

Dalam contoh di atas, kami menggunakan dalam pemalam Objek "kaedah" untuk mentakrifkan kaedah "init", "sahkan" dan "prosesData".

5. Objek Instance

Akhir sekali, kita perlu mencipta objek instance untuk pemalam. Ini dicapai menggunakan jquery $.data(). Kaedah $.data() membolehkan kami melampirkan data pada elemen supaya pemalam kami boleh digunakan padanya. Berikut ialah contoh:

(function($){

$.fn.myPlugin = function(options){
   var settings = $.extend({
        //默认配置项
    }, options);
    var methods = {
        //插件方法 
    };        
    //插件主体函数
    function main(){
        //核心功能代码
    }       
    return this.each(function(){
        //获取jQuery对象
        var $this = $(this);
        
        //检测我们的插件是否已经应用
        var data = $this.data('myPlugin');
        
        //如果插件未被初始化，则初始化插件
        if(!data){
            $this.data('myPlugin', {
                target: $this,
                methods: methods
            });
            main();
        }
    });
};

}(jQuery));

Dalam contoh ini, kita mula-mula mendapatkan elemen semasa menggunakan objek jQuery . Kami kemudian menyemak untuk melihat sama ada elemen itu sudah mengandungi maklumat pemalam kami, dan jika tidak, tambahkan maklumat itu pada data elemen -- nama data ialah myPlugin.

Di atas adalah struktur asas. Seterusnya, kami akan menunjukkan kepada anda cara untuk menentukan beberapa fungsi biasa untuk melanjutkan pemalam anda.

2. Lanjutkan fungsi pemalam

Apabila menulis pemalam menggunakan jQuery, kita boleh menambah pelbagai fungsi untuk melanjutkan fungsi pemalam. Berikut ialah beberapa contoh untuk membantu anda memahami:

1 Tambah gaya

Anda boleh menambah gaya pada pemalam anda dengan menggunakan helaian gaya CSS. Anda boleh meletakkan gaya ini dalam pilihan konfigurasi warna pemalam anda. Seperti yang ditunjukkan di bawah:

$.fn.myPlugin = function(options){

var settings = $.extend({
    color: '#ffffff'
}, options);

return this.each(function(){
    $(this).css('color', settings.color);
});

}

Dalam contoh di atas, kami menambah warna yang ditentukan pengguna pada elemen dalam atribut gaya.

2. Pengendalian acara

Anda juga boleh menambah fungsi pengendalian acara untuk bertindak balas kepada gelagat pemalam anda. Sebagai contoh, anda boleh menambah acara klik tetikus seperti ini:

$.fn.myPlugin = function(options){

var settings = $.extend({
   onClick: function(){}
}, options);

return this.each(function(){
    $(this).click(function(event){
        event.preventDefault();
        settings.onClick.call(this, event);
    });
});

};

Dalam contoh di atas , kami mula-mula mencipta fungsi onClick lalai dan kemudian menggabungkannya dengan konfigurasi pengguna. Kemudian kami mengikat acara klik pada setiap elemen. Apabila acara dicetuskan, kami memanggil fungsi onClick yang dikonfigurasikan dan menyalakannya pada elemen semasa.

Melaksanakan panggilan berantai

jQuery sering dipanggil pustaka Javascript untuk panggilan berantai kerana ia membolehkan anda merantai semua operasi DOM bersama-sama. Ciri ini juga boleh digunakan pada pemalam anda untuk menyediakan API berantai untuk menggunakan pemalam anda.

Sebagai contoh, kami boleh menambah kaedah

pada pemalam kami dan kemudian menjadikannya boleh dirantai. Seperti yang ditunjukkan di bawah: setOption

$.fn.myPlugin = function(options){

var settings = $.extend({
   onClick: function(){},
   option: null
}, options);

var methods = {
    setOption: function(option){
        return this.each(function(){
            $(this).data('option', option);
        });
    }
}

return this.each(function(){
    //实现链式调用
    var $this = $(this).data('myPlugin',{'methods': methods});
    $this.data('option', settings.option);
    
    $this.click(function(event){
        event.preventDefault();
        settings.onClick.call(this, event, $this.data('option'));
    });
});

};

Dalam contoh di atas, kami menambah fungsi setOption dalam kaedah, Kemudian panggilan berantai dilaksanakan melaluinya. Dalam kod di bawah, kami menunjukkan cara menggunakan panggilan berantai untuk menetapkan pilihan:

$("#my-element").myPlugin().myPlugin('setOption', {

option: 'myOption'

});

Dalam contoh di atas, kaedah myPlugin() pertama kali dipanggil, yang akan mencipta objek myPlugin. Kemudian panggil kaedah setOption melalui objek ini, menghantar objek pilihan kepadanya. Dengan cara ini, kami melaksanakan panggilan berantai.

4. 对外公开API

我们可以使用 jQuery.fn.extend() 方法扩展对外公开的API。这样就可以在很多不同的方法中重用代码。下面是一个示例：

$.fn.myPlugin = function(){

var methods = {
    method1: function(){
        console.log('method1');
        return this;
    },
    method2: function(){
        console.log('method2');
        return this;
    }
};
this.method1 = methods.method1;
this.method2 = methods.method2;
return this;

};

在上面示例中，我们使用this关键字将每个方法都添加到了插件函数上。这意味着每次我们调用myPlugin()方法时，我们都可以直接调用这些方法。

我们可以通过使用如下代码来调用这个函数：

$("#my-element").myPlugin().method1().method2();

以上是本文的内容，希望通过这些例子能够帮助您更好地理解jQuery插件封装，从而开发更高效的插件。

Atas ialah kandungan terperinci Bagaimana untuk merangkum pemalam dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!