DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 一個通過script自定義屬性傳遞配置參數的方法教程
一個通過script自定義屬性傳遞配置參數的方法教程
編輯:關於JavaScript     

剛剛開始正式的職業生涯,最近幾天在給公司做統一的頭部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自定義屬性即可。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved