一個(gè)通過script自定義屬性傳遞配置參數(shù)的方法
剛剛開始正式的職業(yè)生涯，最近幾天在給公司做統(tǒng)一的頭部js，想到了一個(gè)通過script自定義屬性傳遞配置參數(shù)的方法。
有時(shí)候我們編寫了一個(gè)js插件，要使用該插件需要先在html中引入該插件Js,然后再添加一個(gè)script標(biāo)簽，在里面調(diào)用。如一個(gè)圖片切換的插件。其代碼大致如下：
$.fn.picSwitch = function(option){
//這里是圖片切換的代碼
}
再引入了該插件后，需要再在另外的script標(biāo)簽內(nèi)加入調(diào)用代碼
$('#pic').picSwitch({
'speed' : '400',
'derection' : 'left'
//... 這里是配置
})
這當(dāng)然沒有什么問題，但有些時(shí)候我們并不想再多添加個(gè)script標(biāo)簽，如果只引入script標(biāo)簽，那該怎么做怎么傳遞配置參數(shù)呢？
這時(shí)候我們就可以利用script上的自定義屬性進(jìn)行傳遞配置參數(shù)。在這之前先要對(duì)該圖片切換插件進(jìn)行處理。修改后代碼如下：
$.fn.picSwitch = function(){
//這里是圖片切換的代碼
};
//寫好插件后就直接調(diào)用
$('這里是選擇器,需要在script標(biāo)簽上獲取').picSwitch('這里是配置參數(shù),需要在script標(biāo)簽上獲取');
接下來就是用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')，//標(biāo)簽上的id
selector = script.attr('selector'),
option = JSON.parse(script.attr('option'));//標(biāo)簽上的是字符串需要轉(zhuǎn)為json對(duì)象
$(selector).picSwitch(option);
這樣就只用了一個(gè)標(biāo)簽便實(shí)現(xiàn)了功能，配置變化只需要改變script自定義屬性即可。
相關(guān)文章
這篇文章主要介紹了JavaScript把數(shù)組作為堆棧使用的方法,實(shí)例分析了javascript操作數(shù)組的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
可選鏈操作符(?.)允許讀取位于鏈接對(duì)象鏈身處的屬性的值，本文就詳細(xì)的介紹一下，感興趣的小伙伴們可以參考一下2021-06-06
解決使用layui的時(shí)候form表單中的select等不能渲染的問題
今天小編就為大家分享一篇解決使用layui的時(shí)候form表單中的select等不能渲染的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
原生JS實(shí)現(xiàn)的放大鏡特效示例【測(cè)試可用】
這篇文章主要介紹了原生JS實(shí)現(xiàn)的放大鏡特效,涉及javascript事件響應(yīng)及頁面元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-12-12
在JavaScript中使用mqtt.js的詳細(xì)過程
這篇文章主要介紹了在JavaScript中使用mqtt.js的相關(guān)知識(shí)，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04
本篇文章主要介紹了vue-router重定向不刷新問題的解決，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要介紹了JavaScript簡單計(jì)算人的年齡,涉及簡單的javascript字符串轉(zhuǎn)換及日期運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2017-04-04
javascript正則表達(dá)式之search()用法實(shí)例
這篇文章主要介紹了javascript正則表達(dá)式之search()用法,實(shí)例分析了search()的使用技巧,需要的朋友可以參考下2015-01-01
這篇文章主要為大家詳細(xì)介紹了微信小程序下拉框組件使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
本篇文章主要介紹了淺談webpack-dev-server的配置和使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05