首頁 > web前端 > js教程 > 一個透過script自訂屬性傳遞配置參數的方法_javascript技巧

一個透過script自訂屬性傳遞配置參數的方法_javascript技巧

WBOY
發布: 2016-05-16 16:36:20
原創
1411 人瀏覽過

剛開始正式的職業生涯,最近幾天在為公司做統一的頭部js,想到了一個透過script自訂屬性傳遞配置參數的方法。

有時候我們寫了一個js插件,要使用該插件需要先在html中引入該插件Js,然後再添加一個script標籤,在裡面調用。如一個圖片切換的插件。其程式碼大致如下:

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

再引進了該插件後,需要再在另外的script標籤內加入呼叫程式碼

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

這當然沒有什麼問題,但有些時候我們並不想再多加個script標籤,如果只引入script標籤,那該怎麼做怎麼傳遞配置參數呢?

這時候我們就可以利用script上的自訂屬性來傳遞配置參數。在這之前先要對該圖片切換插件進行處理。修改後程式碼如下:

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

//寫好插件後就直接呼叫
$('這裡是選擇器,需要在script標籤上取得').picSwitch('這裡是設定參數,需要在script標籤上取得');

接下來就是用script上傳遞參數了,在html頁面上如下引用該js外掛。

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

最後再修改插件為:

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

};

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

這樣就只用了一個標籤便實現了功能,配置變化只需要改變script自訂屬性即可。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板