一個通過script自定義屬性傳遞配置參數(shù)的方法
更新時間：2014年09月15日 10:29:23 投稿：whsnow
編寫了一個js插件，要使用該插件需要先在html中引入該插件Js,然后再添加一個script標簽，在里面調(diào)用，需要的朋友可以看看
剛剛開始正式的職業(yè)生涯，最近幾天在給公司做統(tǒng)一的頭部js，想到了一個通過script自定義屬性傳遞配置參數(shù)的方法。
有時候我們編寫了一個js插件，要使用該插件需要先在html中引入該插件Js,然后再添加一個script標簽，在里面調(diào)用。如一個圖片切換的插件。其代碼大致如下：
$.fn.picSwitch = function(option){
//這里是圖片切換的代碼
}
再引入了該插件后，需要再在另外的script標簽內(nèi)加入調(diào)用代碼
$('#pic').picSwitch({
'speed' : '400',
'derection' : 'left'
//... 這里是配置
})
這當然沒有什么問題，但有些時候我們并不想再多添加個script標簽，如果只引入script標簽，那該怎么做怎么傳遞配置參數(shù)呢？
這時候我們就可以利用script上的自定義屬性進行傳遞配置參數(shù)。在這之前先要對該圖片切換插件進行處理。修改后代碼如下：
$.fn.picSwitch = function(){
//這里是圖片切換的代碼
};
//寫好插件后就直接調(diào)用
$('這里是選擇器,需要在script標簽上獲取').picSwitch('這里是配置參數(shù),需要在script標簽上獲取');
接下來就是用script上傳遞參數(shù)了，在html頁面上如下引用該js插件。
<head>
<script src='/script/picSwitch.js' id='picSwitch' obj='#pic' option='{"speed":"400","derection":"left"}'></script>
</head>
<body>
<div id="pic">
//這里是具體結(jié)構(gòu)
</div>
</body>
最后再修改插件為：
$.fn.picSwitch = function(){
//這里是圖片切換的代碼
};
//寫好插件后就直接調(diào)用
var script = $('#picSwitch')，//標簽上的id
selector = script.attr('selector'),
option = JSON.parse(script.attr('option'));//標簽上的是字符串需要轉(zhuǎn)為json對象
$(selector).picSwitch(option);
這樣就只用了一個標簽便實現(xiàn)了功能，配置變化只需要改變script自定義屬性即可。
相關(guān)文章
這篇文章主要為大家詳細介紹了基于原生js淡入淡出函數(shù)封裝，可兼容IE，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要介紹了JS實現(xiàn)鼠標箭頭變成一個燃燒燭光效果的方法,實例分析了javascript操作鼠標事件及圖片的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
js 字符串轉(zhuǎn)化成數(shù)字的代碼，需要的朋友可以參考下。2011-06-06
這篇文章主要給大家介紹了關(guān)于js中base64與file之間的轉(zhuǎn)換方法,最近項目中需要實現(xiàn)把圖片的base64編碼轉(zhuǎn)成file文件的功能,然后再上傳至服務(wù)器,需要的朋友可以參考下2023-09-09
個人總結(jié)的一些JavaScript技巧、實用函數(shù)、簡潔方法、編程細節(jié)
這篇文章主要介紹了個人總結(jié)的一些JavaScript技巧、實用函數(shù)、簡潔方法、編程細節(jié),本文講解了變量轉(zhuǎn)換、取整同時轉(zhuǎn)換成數(shù)值型、日期轉(zhuǎn)數(shù)值、類數(shù)組對象轉(zhuǎn)數(shù)組、進制之間的轉(zhuǎn)換等方法技巧,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了如何阻止小程序遮罩層下方圖層滾動,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值,需要的朋友可以參考下2019-09-09
本文主要介紹了js實現(xiàn)4個方向滾動球的實例，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
這篇文章主要介紹了bootstrap響應(yīng)式工具使用的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
微信小程序?qū)崿F(xiàn)兩邊小中間大的輪播效果的示例代碼
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)兩邊小中間大的輪播效果的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章介紹了JS異步的執(zhí)行順序，文中通過示例代碼介紹的非常詳細。對大家的學(xué)習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06