script自訂屬性傳遞配置參數

標籤：style   blog   color   io   使用   ar   div   問題   sp   

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

 

script自訂屬性傳遞配置參數