首頁 > 開發者 > JavaScript
一個通過script自訂屬性傳遞配置參數的方法，script自訂
剛剛開始正式的職業生涯，最近幾天在給公司做統一的頭部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')，//標籤上的idselector = script.attr('selector'),option = JSON.parse(script.attr('option'));//標籤上的是字串需要轉為json對象$(selector).picSwitch(option);
這樣就只用了一個標籤便實現了功能，配置變化只需要改變script自訂屬性即可。
<script type="text/javascript">
//<![CDATA[
// OBJECT的HTML代碼.
var C_PLAYER_HTML = '<object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" width="460" height="360" align="middle" id="player9"><param name="URL" value="{PlayerID}"><param name="EnableContextMenu" value="0"><param name="stretchToFit" value="-1"><param name="Volume" value="50"></OBJECT>';
// 頁面載入時將播放代碼插入到指定的位置中,注意 body 下面的<div id="playerLoc"></div>
window.onload = function() {
document.getElementById("playerLoc").innerHTML = C_PLAYER_HTML.replace("{PlayerID}", GetPlayerID());
}
// 擷取URL參數ID
function GetPlayerID() {
var args = document.location.toString().split('?');
if (args.length == 0) return "";
if (args[1].split('=')[0] == "id")
return args[1].split('=')[1];
return "";
}
//]]>
</script>
</head>
<body>
<div id="playerLoc"></div>
</body>
一個頁面傳遞參數到已有頁面怎做？
兩個頁面：
a.html:添加歌曲的頁面
<SCRIPT language=javascript>
/**
* This js provide a simple way to operate cookie in javascript
* function getCookie(name);
* function setCookie(name,value[,expireDays]);
* function deleteCookie(name);
*/
function getCookie(name)
{
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen)
{
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieVal(j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return "";
}
function setCookie(name, value)
{
var argv = setCookie.arguments;
var argc = setCookie.arguments.length;
var expDay = (argc > 2) ? argv[2] : -1;
try
{
expDay = parseInt(expDay);
}
catch(e)
{
expDay = -1;
}
if(expDay < 0) {
setCookieVal(name, value);
} else {
var expDate = new Date();
// The expDate is the date when the cookie should expire, we will keep it for a month
expDate.setTime(expDate.getTime() + (expDay * 24 * 60 * 60 * 1000));
setCookieVal(name, value, expDate);
}
}
function deleteCookie(name)
{
var exp = new Date();
exp.setTime(exp.getTime() - 1);
// This cookie is history
var cval = getCookie(name);
document.cookie = name + "=" + cval + "; expires=" + exp.toGM......餘下全文>>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
