Teilen Sie ein selbst geschriebenes jQuery-Paging-Plug-in_jquery

Ich brauche ein JS-Paging-Plugin für die Arbeit und habe darüber nachgedacht, selbst eines zu schreiben. Ich habe eines gefunden, dessen Codestruktur ich nicht kannte, und es war außerdem schwierig, das Problem zu lösen. Die Plug-Ins im Internet enthielten zu viele Funktionen und einige davon waren überhaupt nicht nützlich. Zweitens ist es nicht erforderlich, diesen Teil von JS zu laden. Also habe ich es einfach geübt. Schauen wir uns zuerst die Ergebnisse an:

http://demo.jb51.net/js/2014/EasyPage/

Lassen Sie uns kurz über die Funktionen sprechen, die dieses Plug-in implementiert

Der Hintergrund zeigt alle abgefragten Inhalte auf der Seite an. Dieses Plug-in soll den Inhalt so steuern, dass er Seite für Seite angezeigt werden kann. Es gibt Funktionen für die vorherige Seite, die nächste Seite, die Startseite und die letzte Seite. Auf der ersten Seite sollten die vorherige Seite und die Startseite ausgeblendet sein. Auf der letzten Seite sollten die letzte Seite und die nächste Seite ausgeblendet sein. Es werden jeweils nur wenige Schaltflächen angezeigt, und wenn auf die letzte Schaltfläche geklickt wird, werden die nächsten angezeigt.

Lassen Sie uns kurz über den Kodierungsprozess sprechen:

Zunächst können Sie mutig den folgenden Code schreiben:

//为了更好的兼容性，开始前有个分号
;(
function($){//此处将$作为匿名函数的形参
}
)(jQuery)//将jQuery作为实参传递给匿名函数

Dieser Code sollte jedem bekannt sein. Er ist die wichtigste Funktion von JavaScript – Schließung. Dies ist auch eine gängige Struktur für jQuery-Plugins. Warum Abschlüsse verwenden, um diese gemeinsame Struktur von jQuery zu erstellen? Einerseits kann dadurch vermieden werden, dass interne temporäre Variablen den globalen Raum beeinträchtigen, und Sie können $ weiterhin als Alias ​​für jQuery innerhalb des Plug-Ins verwenden.

Der nächste Schritt besteht darin, Ihre eigenen Methoden in dieser Struktur zu schreiben. jQuery bietet zwei Möglichkeiten, Methoden in jQuery zu erweitern. Öffnen Sie die jQuery-API und suchen Sie den Plug-in-Mechanismus. Sie können zwei Methoden sehen

• jQuery.extend(object) erweitert das jQuery-Objekt selbst. Wird verwendet, um dem jQuery-Namespace neue Funktionen hinzuzufügen.
• jQuery.fn.extend(object) erweitert den jQuery-Elementsatz, um neue Methoden bereitzustellen (die normalerweise zum Erstellen von Plug-Ins verwendet werden).
Aus dem Obigen können wir ersehen, dass jQuery.extend(object) jQuery selbst erweitert. Aus der Sicht von Sprachen wie Java oder C# entspricht dies dem Hinzufügen einer statischen Methode zu jQuery. Wir schreiben zum Beispiel so:

jQuery.extend({
 "max":function(){
  return max;
 } 
}) 

Auf diese Weise entspricht es dem Hinzufügen einer Max-Methode zum jQuery-Objekt. Beim Aufruf können Sie es wie folgt aufrufen: jQuery.max()

Was ist also jQuery.fn? Öffnen Sie den jQuery-Quellcode und Sie sehen jQuery.fn = jQuery.prototype. Dann entspricht jQuery.fn.extend dem Hinzufügen einer Mitgliedsfunktion in jQuery.

Sie sollten jetzt den Unterschied zwischen den beiden verstehen. Die statische Methode kann direkt aufgerufen werden, jQuery.max(). Mitgliedsfunktionen können nur von jQuery-Instanzen aufgerufen werden, z. B. jQuery("#my").max().

Hier verwende ich die jQuery.extend-Methode. Der Code lautet wie folgt:

;(
 function($){
  $.extend({
   "easypage":function(options){
   options = $.extend({//参数设置
   contentclass:"contentlist",//要显示的内容的class
   navigateid:"navigatediv",//导航按钮所在的容器的id
   everycount:"5",//每页显示多少个
   navigatecount:"5"//导航按钮一次显示多少个
   }, options); 
}); 

Easypage ist der Methodenname, der vom Paging-Plug-in verwendet wird, und contentclass, navigationid, everycount und navigationcount sind Parameter.

Das Grundgerüst ist eingerichtet und der nächste Schritt besteht darin, die Funktionen abzuschließen.

Als Erstes müssen Sie den Inhalt finden, der paginiert werden soll, und Navigationsschaltflächen generieren. Der Code lautet wie folgt:

var currentpage = 0;//当前页 
var contents = $("."+options.contentclass);//要显示的内容
var contentcount = contents.length;//得到内容的个数
var pagecount = Math.ceil(contentcount/options.everycount);//计算出页数
//拼接导航按钮
var navigatehtml = "<div id='pagefirst' class='pagefirst'><a href='javascript:void(0)'>首页</a></div><div id='pagepre' class='pagepre'><a href='javascript:void(0)'>上一页</a></div>";
for(var i = 1;i <= pagecount;i++){
 navigatehtml+='<div class="pagenavigate"><a href="javascript:void(0)">'+i+'</a></div>';
}
navigatehtml+="<div id='pagenext' class='pagenext'><a href='javascript:void(0)'>下一页</a></div><div id='pagelast' class='pagelast'><a href='javascript:void(0)'>尾页</a></div>";
 //加载导航按钮

$("#"+options.navigateid).html(navigatehtml) 

这段代码比较简单，就不多讲。

Der nächste Schritt besteht darin, einige Grundfunktionen zu implementieren. Hier extrahieren wir zwei davon zur Anzeige

//隐藏所有的导航按钮
$.extend({
"hidenavigates":function(){
//遍历所有的导航按钮
navigates.each(function(){
$(this).hide();
}) 
} 
});
 
//显示导航按钮
$.extend({
"shownavigate":function(currentnavigate){
$.hidenavigates();
//当前按钮如果小于要求一次显示按钮个数的，从0开始显示
var begin = currentnavigate>=options.navigatecount?currentnavigate-parseInt(options.navigatecount):0;
//这里保证从第二页开始，按钮的个数都是2*options.navigatecount
if(begin>navigates.length-2*options.navigatecount){
begin = navigates.length-2*options.navigatecount; 
}
//开始显示
for(var i = begin;i < currentnavigate+parseInt(options.navigatecount);i++){
$(navigates[i]).show();
}
} 
});

Ok, der grundlegende Codeablauf ist wie folgt. Der Quellcode des Programms befindet sich im Anhang, und die spezifische Funktionsimplementierung wurde in den Kommentaren zum Quellcode ganz klar erklärt. Wenn Sie noch Fragen zu Schließungen haben, können Sie in meinem vorherigen Blog über JavaScript-Abschlüsse sprechen.

Das Folgende fasst die grundlegenden Punkte des jQuery-Plug-Ins zusammen. Haha, es ist ein Auszug aus scharfem jQuery.

•Der empfohlene Dateiname des Plug-Ins ist jquery.[Plug-in-Name].js, z. B. jquery.color.js
• Alle Objektmethoden sollten an das jQuery.fn-Objekt angehängt werden und alle globalen Funktionen sollten an das jQuery-Objekt selbst angehängt werden

•Im Plug-in verweist this auf das jQuery-Objekt, das aktuell über den Selektor abgerufen wird, im Gegensatz zur allgemeinen Methode, wie etwa der click()-Methode, bei der das interne this auf das DOM-Element verweist

•Sie können alle Elemente durch this.each durchlaufen
•Alle Methoden- oder Funktions-Plug-Ins sollten mit einem Semikolon enden, da es sonst bei der Komprimierung zu Problemen kommen kann. Einige fügen aus Sicherheitsgründen ein Semikolon
am Anfang des Plug-Ins hinzu. •Plug-ins sollten ein jQuery-Objekt zurückgeben, das verkettbare Vorgänge des Plug-ins gewährleistet. Es sei denn, das Plug-in muss eine Menge zurückgeben, die abgerufen werden muss, z. B. eine Zeichenfolge oder ein Array usw.
•Versuchen Sie, Abschlusstechniken zu verwenden, um Konflikte mit Variablennamen zu vermeiden

Da ich zum ersten Mal ein jQuery-Plug-in schreibe, sind möglicherweise einige Dinge falsch. Bitte verzeihen Sie mir.