剛剛開始正式的職業生涯，最近幾天在給公司做統一的頭部js，想到了一個通過script自定義屬性傳遞配置參數的方法。
有時候我們編寫了一個js插件，要使用該插件需要先在html中引入該插件Js,然后再添加一個script標簽，在里面調用。如一個圖片切換的插件。其代碼大致如下：
|
1
2
3
|
$.fn.picSwitch = function(option){//這里是圖片切換的代碼} |
再引入了該插件后，需要再在另外的script標簽內加入調用代碼
|
1
2
3
4
5
|
$('#pic').picSwitch({'speed' : '400','derection' : 'left'//... 這里是配置}) |
這當然沒有什么問題，但有些時候我們并不想再多添加個script標簽，如果只引入script標簽，那該怎么做怎么傳遞配置參數呢？
這時候我們就可以利用script上的自定義屬性進行傳遞配置參數。在這之前先要對該圖片切換插件進行處理。修改后代碼如下：
|
1
2
3
|
$.fn.picSwitch = function(){//這里是圖片切換的代碼}; |
//寫好插件后就直接調用
$('這里是選擇器,需要在script標簽上獲取').picSwitch('這里是配置參數,需要在script標簽上獲取');
接下來就是用script上傳遞參數了，在html頁面上如下引用該js插件。
|
1
2
3
4
5
6
7
8
|
<head><script src='/script/picSwitch.js' id='picSwitch' obj='#pic' option='{"speed":"400","derection":"left"}'></script></head><body><div id="pic">//這里是具體結構</div></body> |
最后再修改插件為：
|
1
2
3
4
5
6
7
8
9
10
|
$.fn.picSwitch = function(){//這里是圖片切換的代碼};//寫好插件后就直接調用var script = $('#picSwitch')，//標簽上的idselector = script.attr('selector'),option = JSON.parse(script.attr('option'));//標簽上的是字符串需要轉為json對象$(selector).picSwitch(option); |
這樣就只用了一個標簽便實現了功能，配置變化只需要改變script自定義屬性即可。
