腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

軟件下載

android MAC 驅(qū)動(dòng)下載字體下載 DLL

源碼下載

PHP ASP.NET ASP JSP

軟件編程

C# JAVA C 語(yǔ)言 Delphi Android

網(wǎng)絡(luò)編程

PHP ASP.NET ASP JavaScript

在線工具

CSS格式化 JS格式化 Html轉(zhuǎn)化為Js

數(shù)據(jù)庫(kù)

MYSQL MSSQL oracle DB2 MARIADB

CMS

PHPCMS DEDECMS 帝國(guó)CMS WordPress

常用工具

PHP開(kāi)發(fā)工具 python Photoshop 必備軟件

一個(gè)通過(guò)script自定義屬性傳遞配置參數(shù)的方法

更新時(shí)間：2014年09月15日 10:29:23 投稿：whsnow

編寫(xiě)了一個(gè)js插件，要使用該插件需要先在html中引入該插件Js,然后再添加一個(gè)script標(biāo)簽，在里面調(diào)用，需要的朋友可以看看

剛剛開(kāi)始正式的職業(yè)生涯，最近幾天在給公司做統(tǒng)一的頭部js，想到了一個(gè)通過(guò)script自定義屬性傳遞配置參數(shù)的方法。

有時(shí)候我們編寫(xiě)了一個(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)然沒(méi)有什么問(wèn)題，但有些時(shí)候我們并不想再多添加個(gè)script標(biāo)簽，如果只引入script標(biāo)簽，那該怎么做怎么傳遞配置參數(shù)呢？

這時(shí)候我們就可以利用script上的自定義屬性進(jìn)行傳遞配置參數(shù)。在這之前先要對(duì)該圖片切換插件進(jìn)行處理。修改后代碼如下：

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

//寫(xiě)好插件后就直接調(diào)用
$('這里是選擇器,需要在script標(biāo)簽上獲取').picSwitch('這里是配置參數(shù),需要在script標(biāo)簽上獲取');

接下來(lái)就是用script上傳遞參數(shù)了，在html頁(yè)面上如下引用該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(){
//這里是圖片切換的代碼

};

//寫(xiě)好插件后就直接調(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自定義屬性即可。