script自定義屬性傳遞配置參數

時間 2019-11-08

標籤 script 自定義屬性傳遞配置參數简体版

原文原文鏈接

剛剛開始正式的職業生涯，最近幾天在給公司作統一的頭部js，想到了一個經過script自定義屬性傳遞配置參數的方法。html

有時候咱們編寫了一個js插件，要使用該插件須要先在html中引入該插件Js,而後再添加一個script標籤，在裏面調用。如一個圖片切換的插件。其代碼大體以下：json


        $.fn.picSwitch = function(option){
            //這裏是圖片切換的代碼
            
        }

再引入了該插件後，須要再在另外的script標籤內加入調用代碼spa

$('#pic').picSwitch({
            'speed' : '400',
            'derection' : 'left'
            //... 這裏是配置
        })

這固然沒有什麼問題，但有些時候咱們並不想再多添加個script標籤，若是隻引入script標籤，那該怎麼作怎麼傳遞配置參數呢？插件

這時候咱們就能夠利用script上的自定義屬性進行傳遞配置參數。在這以前先要對該圖片切換插件進行處理。修改後代碼以下：code

$.fn.picSwitch = function(){
    //這裏是圖片切換的代碼

};

//寫好插件後就直接調用
$('這裏是選擇器,須要在script標籤上獲取').picSwitch('這裏是配置參數,須要在script標籤上獲取');

接下來就是用script上傳遞參數了，在html頁面上以下引用該js插件。htm

<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);