Eine Methode zum Übergeben von Konfigurationsparametern über benutzerdefinierte Skriptattribute_Javascript-Fähigkeiten-js-Tutorial-php.cn

Eine Methode zum Übergeben von Konfigurationsparametern über benutzerdefinierte Skriptattribute_Javascript-Fähigkeiten

WBOY

Freigeben： 2016-05-16 16:36:20

Original

1427 Leute haben es durchsucht

Ich habe gerade meine offizielle Karriere begonnen, ich habe an einem einheitlichen Header-JS für das Unternehmen gearbeitet und mir eine Methode zum Übergeben von Konfigurationsparametern über benutzerdefinierte Skriptattribute ausgedacht.

Manchmal schreiben wir ein JS-Plug-In, um das Plug-In zuerst in HTML einzuführen, dann ein Skript-Tag hinzuzufügen und es darin aufzurufen. Zum Beispiel ein Bildumschalt-Plug-in. Der Code lautet ungefähr wie folgt:

$.fn.picSwitch = function(option){
//这里是图片切换的代码
}

Nach dem Login kopieren

Nach der Einführung des Plug-Ins müssen Sie den aufrufenden Code in einem anderen Skript-Tag hinzufügen

$('#pic').picSwitch({
'speed' : '400',
'derection' : 'left'
//... 这里是配置
})

Nach dem Login kopieren

Natürlich ist das kein Problem, aber manchmal möchten wir keine weiteren Skript-Tags hinzufügen. Wenn wir nur Skript-Tags einführen, was sollen wir dann tun und wie werden Konfigurationsparameter übergeben?

Zu diesem Zeitpunkt können wir die benutzerdefinierten Attribute im Skript verwenden, um Konfigurationsparameter zu übergeben. Zuvor muss zunächst das Bildumschalt-Plugin verarbeitet werden. Der geänderte Code lautet wie folgt:

$.fn.picSwitch = function(){
//这里是图片切换的代码
};

Nach dem Login kopieren

//Nachdem Sie das Plug-In geschrieben haben, rufen Sie es direkt auf
$('Hier ist der Selektor, der im Skript-Tag abgerufen werden muss').picSwitch('Hier ist der Konfigurationsparameter, der im Skript-Tag abgerufen werden muss');

Der nächste Schritt besteht darin, ein Skript zum Übergeben von Parametern zu verwenden und wie folgt auf das js-Plug-in auf der HTML-Seite zu verweisen.

<head>
<script src='/script/picSwitch.js' id='picSwitch' obj='#pic' option='{"speed":"400","derection":"left"}'></script>
</head>
<body>
<div id="pic">
//这里是具体结构
</div>
</body>

Nach dem Login kopieren

Ändern Sie abschließend das Plug-in wie folgt:

$.fn.picSwitch = function(){
//这里是图片切换的代码

};

//写好插件后就直接调用
var script = $('#picSwitch')，//标签上的id
selector = script.attr('selector'),
option = JSON.parse(script.attr('option'));//标签上的是字符串需要转为json对象
$(selector).picSwitch(option);

Nach dem Login kopieren

Auf diese Weise wird nur ein Tag verwendet, um die Funktion zu implementieren. Konfigurationsänderungen erfordern nur die Änderung des benutzerdefinierten Skriptattributs.