suchen

Heim >Web-Frontend >js-Tutorial >Beispiel für ein JavaScript-Tab-Plug-in, code_javascript-Kenntnisse

Beispiel für ein JavaScript-Tab-Plug-in, code_javascript-Kenntnisse

WBOY
WBOYOriginal
2016-05-16 15:14:221355Durchsuche

Heute beginnen wir mit der einfachsten Variante: dem Umschreiben einer vorhandenen Tab-Umschaltfunktion in ein Javascript-Plug-in.

So schreiben Sie native Funktionen

Der einfachste Weg, eine Javascript-Methode als JS-Plug-in umzuschreiben, besteht darin, diese Methode unter dem globalen Fensterobjekt bereitzustellen

Werfen wir zunächst einen Blick auf den originellsten Code, der mit Funktionen geschrieben wurde:

tab.html

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="renderer" content="webkit">
<title>jquery_hjb_tab插件demo</title>
<link rel="stylesheet" href="h.css"/>
</head>
<body>
<div id="tab">
<div class="tabs">
<ul>
<li><a href="#">tab1</a></li>
<li><a href="#">tab2</a></li>
<li><a href="#">tab3</a></li>
<li><a href="#">tab4</a></li>
</ul>
</div>
<div class="tabCons">
<section>内容一</section>
<section>内容二</section>
<section>内容三</section>
<section>内容四</section>
</div>
</div>
<script>
window.onload = h_tab('tab');
function h_tab(tabId){
var oLinks = document.getElementById(tabId).getElementsByTagName("a");
var oCons = document.getElementById(tabId).getElementsByTagName("section");
for(var i = 0; i<oLinks.length; i++){
oLinks[i].index = i;
oLinks[i].onclick = function () {
for(var j =0; j<oLinks.length; j++){
oLinks[j].className="";
oCons[j].style.display = "none";
}
this.className="cur";
oCons[this.index].style.display ="block";
}

}
}
</script>

h.css

@charset "utf-8";
/*
//author:hjb2722404
//description:
//date:2016/2/18
*/
.tabs ul { width: 100%; list-style-type: none;}
.tabs ul li { width: 48%; display: inline-block; margin: 0; padding: 0;}
.tabs ul li a {border-bottom: 3px solid #cccccc; width: 100%; height: 100%; display: block; text-align: center; min-height: 40px; line-height: 40px; text-decoration: none; font-family: "微软雅黑"; color: #a94442}
.tabs ul li a.cur { border-bottom: 3px solid #f26123;}
.tabCons section { display: none;}
.tabCons section:nth-child(1) { display: block;}

Die beiden oben genannten Codes sind Basiscodes und wir werden sie basierend auf diesem Code Schritt für Schritt verbessern.

Native Plug-in-Schreibmethode

Okay, jetzt schreiben wir diese Methode in ein Plug-In um, das unter dem Fensterobjekt gemountet wird:

tab.html

……
// 下面是第一次改动
<script type="text/javascript" src="h_tabs.js"></script>
<script>
H_tab("tab");
</script>
</body>
</html>

h_tabs.js

window.H_tab = function(tabId){
var oLinks = document.getElementById(tabId).getElementsByTagName("a");
var oCons = document.getElementById(tabId).getElementsByTagName("section");
for(var i = 0; i<oLinks.length; i++){
oLinks[i].index = i;
oLinks[i].onclick = function () {
for(var j =0; j<oLinks.length; j++){
oLinks[j].className="";
oCons[j].style.display = "none";
}
this.className="cur";
oCons[this.index].style.display ="block";
}
}
};

Wir haben jedoch festgestellt, dass diese Schreibweise zwar sehr einfach ist, aber auch Probleme mit sich bringt: Wenn wir alle unsere Methoden darunter mounten und es als Plug-In verwenden, gibt es zu viele Mit Plug-Ins ist es einfach, einen Namespace zu erstellen. Andererseits ist die Codemenge immer noch relativ groß und die Schreibmethode relativ umständlich, obwohl die Verwendung von nativem JS die externe Abhängigkeit verringern kann.

JQuery-Schreibmethode

Wir versuchen, die JQuery-Bibliothek einzuführen und dieses Plug-In in ein JQuery-Plug-In umzuschreiben.

Das JQuery-Plug-In hat drei Formen: ein Formular auf Klassenebene, ein Formular auf Objektebene und ein JQuery-UI-Komponentenformular

So schreiben Sie JQuery-Plug-Ins auf Klassenebene – Einzelmethode

Sehen wir uns zunächst die Form von Plug-Ins auf Klassenebene an.

In Form des ersten Plug-Ins auf Kategorieebene wird diese Methode als Tool-Methode direkt im Stammraum von jquery bereitgestellt:

tab.html

……
<script src="../jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="h_tabs.js"></script>
<script>
$.h_tab('tab');
</script>
</body>
</html>

h_tabs.js

$.h_tab = function(tabId){
var oLinks = document.getElementById(tabId).getElementsByTagName("a");
var oCons = document.getElementById(tabId).getElementsByTagName("section");
for(var i = 0; i<oLinks.length; i++){
oLinks[i].index = i;
oLinks[i].onclick = function () {
for(var j =0; j<oLinks.length; j++){
oLinks[j].className="";
oCons[j].style.display = "none";
}
this.className="cur";
oCons[this.index].style.display ="block";
}
}
};

So schreiben Sie JQuery-Plug-Ins auf Klassenebene – mehrere Methoden

Wenn Sie mehrere Methoden an den JQuery-Root-Space binden möchten, schreiben Sie so:

tab.html

……
<script src="../jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="h_tabs.js"></script>
<script>
$.h_tab('tab');
$.h_hello('hjb');
</script>
</body>
</html>

h_tabs.js

$.extend({
h_tab:function(tabId){
var oLinks = document.getElementById(tabId).getElementsByTagName("a");
var oCons = document.getElementById(tabId).getElementsByTagName("section");
for(var i = 0; i<oLinks.length; i++){
oLinks[i].index = i;
oLinks[i].onclick = function () {
for(var j =0; j<oLinks.length; j++){
oLinks[j].className="";
oCons[j].style.display = "none";
}
this.className="cur";
oCons[this.index].style.display ="block";
}
}
},
h_hello :function(name){
console.log("hello,",name);
}
});

Obwohl es einfach und problemlos ist, die Tool-Methode $.extend() zu verwenden, um Ihre eigenen Funktionen direkt in den JQuery-Root-Namespace einzubinden, kann diese Methode leider nicht die leistungsstarke Sizzle-Engine von JQuery nutzen, nämlich This Die Methode kann nicht auf das ausgewählte DOM-Element angewendet werden.

Daher müssen wir die Plug-In-Entwicklungsmethode auf Objektebene verwenden.

So schreiben Sie ein JQuery-Plug-in auf Objektebene

Die Plug-In-Entwicklungsmethode auf Objektebene besteht darin, die Methode $.fn.extend() zu verwenden, um ihre eigene Methode an den JQuery-Prototyp zu binden, sodass alle JQuery-Objektteams diese Methode anwenden können, um entsprechende Vorgänge auszuführen

Der Code lautet wie folgt:

tab.html

……
<script src="../jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="h_tabs.js"></script>
<script>
//对象级别的插件引用方法，注意和上面类级别插件的写法上的区分
$('#tab').h_tab('tab');
</script>
</body>
</html>

h_tabs.js

(function($){
$.fn.extend({
h_tab:function(tabId){
var oLinks = document.getElementById(tabId).getElementsByTagName('a');
var oCons = document.getElementById(tabId).getElementsByTagName('section');
for(var i = 0; i<oLinks.length; i++){
oLinks[i].index = i;
oLinks[i].onclick = function () {
for(var j =0; j<oLinks.length; j++){
oLinks[j].className="";
oCons[j].style.display = "none";
}
this.className="cur";
oCons[this.index].style.display ="block";
}
}
}
});
})(jQuery);

Hier verwenden wir einen Verschluss, um das Plug-in zu kapseln und eine Namensraumverschmutzung zu vermeiden

Hier gibt es noch einige Probleme, das heißt, unsere Methode muss Parameter übergeben, bevor sie ausgeführt werden kann. Dies führt dazu, dass wir beim Aufruf $('#tab') verwenden, um das Div mit der Tab-ID auszuwählen dann im Plug-in wir Das Element wird basierend auf der übergebenen ID erneut abgerufen.

Da wir nun den Selektor von jquery verwendet haben, können wir ihn einführen, um das redundante Problem der wiederholten Beschaffung von Elementen zu lösen.

JQuery-Plug-In-Schreibmethode auf Objektebene – stellen Sie dies vor

tab.html

……
<script src="../jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="h_tabs.js"></script>
<script>
$('#tab').h_tab();
</script>
</body>
</html>

h_tabs.js

(function($){
$.fn.extend({
h_tab:function(){
//在这里引入this
var oLinks = this.find('a');
var oCons = this.find('section');
for(var i = 0; i<oLinks.length; i++){
oLinks[i].index = i;
oLinks[i].onclick = function () {
for(var j =0; j<oLinks.length; j++){
oLinks[j].className="";
oCons[j].style.display = "none";
}
this.className="cur";
oCons[this.index].style.display ="block";
}
}
}
});
})(jQuery);

Hier muss beachtet werden, dass das Elementobjekt, das wir als Plug-In bezeichnen, ('tab') ist. Die direkte Verwendung von this.find() zu diesem Zeitpunkt entspricht also ('tab').find() , nicht $ (this).find(), achten Sie darauf, die Substitutionsmethode zu verwenden, um den Unterschied zwischen den beiden Schreibmethoden zu unterscheiden.

Als Plug-in sollte es für Entwickler steuerbar sein, daher sollte es Benutzern auch einige Konfigurationsschnittstellen zur Verfügung stellen.

So schreiben Sie ein JQuery-Plug-in auf Objektebene – fügen Sie Konfigurationselemente hinzu

tab.html

……
<ul>
<!--对照文章开始的代码， 注意这里的改动 -->
<li><a href="#" class="current">tab1</a></li>
<li><a href="#">tab2</a></li>
……
<script src="../jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="h_tabs.js"></script>
<script>
$('#tab').h_tab({
//使得当前选项卡标签的样式名称可自定义的配置
curName:'current'
});
</script>
</body>
</html>

Wir haben den anfänglichen „aktuellen Tab-Label-Stil-Klassennamen“ von „cur“ in „current“ geändert und ihn als Konfigurationselement an das Plug-in übergeben

h.css

.tabs ul { width: 100%; list-style-type: none;}
.tabs ul li { width: 48%; display: inline-block; margin: 0; padding: 0;}
.tabs ul li a {border-bottom: 3px solid #cccccc; width: 100%; height: 100%; display: block; text-align: center; min-height: 40px; line-height: 40px; text-decoration: none; font-family: "微软雅黑"; color: #a94442}
/*注意下面一行与之前的样式代码的对比变化之处*/
.tabs ul li a.current { border-bottom: 3px solid #f26123;}
.tabCons section { display: none;}
.tabCons section:nth-child(1) { display: block;}

Wir haben entsprechende Änderungen im Stylesheet vorgenommen.

h_tabs.js

(function($){
$.fn.extend({
//给方法传入一个对象作为参数
h_tab:function(opts){
//定义默认的配置
var defaults ={
curName : 'cur'
};
//将传入的参数覆盖默认参数中的默认项，最终合并到一个新的参数对象上
var Opt = $.extend({},defaults,opts);
var oLinks = this.find('a');
var oCons = this.find('section');
for(var i = 0; i<oLinks.length; i++){
oLinks[i].index = i;
oLinks[i].onclick = function () {
for(var j =0; j<oLinks.length; j++){
oLinks[j].className="";
oCons[j].style.display = "none";
}
//在这里使用配置项的值
this.className = Opt['curName'];
oCons[this.index].style.display ="block";
}
}
}
});
})(jQuery);

Hier verwenden wir die Merge-Object-Funktion der $.extend()-Methode von jquery, um die Standardkonfigurationselemente mit den vom Benutzer übergebenen Konfigurationselementen zu überschreiben und sie schließlich in einem neuen Konfigurationselement zur Verwendung durch nachfolgende Programme zusammenzuführen.

Das Obige ist der vom Herausgeber eingeführte Beispielcode für das JavaScript-Tab-Plugin. Ich hoffe, er wird für alle hilfreich sein!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Behandeln von Datenproblemen in der AJAX-Anfrage „cache_jquery“ von JQUERYNächster Artikel：Behandeln von Datenproblemen in der AJAX-Anfrage „cache_jquery“ von JQUERY

In Verbindung stehende Artikel

Mehr sehen