Une méthode pour transmettre les paramètres de configuration via des compétences d'attributs_javascript personnalisées de script-js tutoriel-php.cn

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

WBOY

Libérer： 2016-05-16 16:36:20

original

1384 Les gens l'ont consulté

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){
//这里是图片切换的代码
}

Copier après la connexion

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'
//... 这里是配置
})

Copier après la connexion

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(){
//这里是图片切换的代码
};

Copier après la connexion

//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>

Copier après la connexion

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);

Copier après la connexion

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.