Maison > Article > interface Web > Une méthode pour transmettre les paramètres de configuration via des compétences d'attributs_javascript personnalisées de script

Une méthode pour transmettre les paramètres de configuration via des compétences d'attributs_javascript personnalisées de script

WBOYoriginal: 2016-05-16 16:36:201348parcourir

Je viens de commencer ma carrière officielle. Ces derniers jours, j'ai travaillé sur un en-tête js unifié pour l'entreprise et j'ai trouvé une méthode pour transmettre les paramètres de configuration via des attributs personnalisés de script.

Parfois, nous écrivons un plug-in js. Pour utiliser le plug-in, nous devons d'abord introduire le plug-in JS en html, puis ajouter une balise de script et l'appeler à l'intérieur. Comme un plug-in de changement d'image. Le code est à peu près le suivant :

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

Après avoir introduit le plug-in, vous devez ajouter le code d'appel dans une autre balise de script

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

Bien sûr, cela ne pose aucun problème, mais parfois nous ne voulons pas ajouter plus de balises de script. Si nous introduisons uniquement des balises de script, que devons-nous faire et comment transmettre les paramètres de configuration ?

À ce stade, nous pouvons utiliser les attributs personnalisés du script pour transmettre les paramètres de configuration. Avant de faire cela, le plug-in de commutation d'image doit d'abord être traité. Le code modifié est le suivant :

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

//Après avoir écrit le plug-in, appelez-le directement
$('Voici le sélecteur, qui doit être obtenu sur la balise de script').picSwitch('Voici le paramètre de configuration, qui doit être obtenu sur la balise de script');

L'étape suivante consiste à utiliser un script pour transmettre les paramètres et à référencer le plug-in js sur la page html comme suit.

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

Modifiez enfin le plug-in pour :

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

};

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

De cette façon, une seule balise est utilisée pour implémenter la fonction. Les modifications de configuration nécessitent uniquement de modifier l'attribut personnalisé du script.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Solution à l'erreur lors de la modification de l'attribut type d'entrée sous les compétences IE8_javascriptArticle suivant：Solution à l'erreur lors de la modification de l'attribut type d'entrée sous les compétences IE8_javascript

Articles Liés

Voir plus