快捷導(dǎo)航

巧方法 JavaScript獲取超鏈接的絕對(duì)URL地址

更新時(shí)間：2016年06月14日 15:08:43 投稿：lijiao

這篇文章主要為大家詳細(xì)介紹了一個(gè)非常巧妙的方法，JavaScript如何獲取超鏈接的絕對(duì)URL地址，感興趣的小伙伴們可以參考一下

對(duì)于Web程序員來(lái)說(shuō)，處理簡(jiǎn)單的URL格式也許會(huì)成為一場(chǎng)噩夢(mèng)。試想一下，一個(gè)網(wǎng)址里有很多組成部分都會(huì)影響你對(duì)它的解析方法：

····是否以/字符開(kāi)頭
····是否以//開(kāi)頭
····是否以?號(hào)開(kāi)頭
····是否以#號(hào)開(kāi)頭
…等等
當(dāng)你想要這個(gè)地址的絕對(duì)地址時(shí)，如何判斷處理和解析？它有可能是http協(xié)議的，還可能是https協(xié)議的。夠頭痛吧。幸運(yùn)的是，我們有個(gè)簡(jiǎn)單的方法來(lái)確定它的絕對(duì)地址，就是創(chuàng)建一個(gè)A元素來(lái)輔助完成這個(gè)任務(wù)！

JavaScript代碼

這里我將使用一個(gè)返回函數(shù)的JavaScript函數(shù)，這樣做有很多好處，下面會(huì)講。

var getAbsoluteUrl = (function() {
 var a;

 return function(url) {
 if(!a) a = document.createElement('a');
 a.href = url;

 return a.href;
 };
})();

這個(gè)函數(shù)看起來(lái)有些復(fù)雜，它先將一個(gè)函數(shù)賦予一個(gè)變量，而這個(gè)函數(shù)里有另外一個(gè)函數(shù)，還有一個(gè)預(yù)先定義的變量。有人可能會(huì)問(wèn)，為什么要內(nèi)嵌一個(gè)函數(shù)，是否可以簡(jiǎn)化成這樣：

var getAbsoluteUrl = function(url) {
 var a = document.createElement('a');
 a.href=url;
 return a.href;
}

當(dāng)然這種簡(jiǎn)單的寫(xiě)法也不能算錯(cuò)，但不夠完美，因?yàn)閮?nèi)嵌一個(gè)函數(shù)的做法雖然增加了代碼的復(fù)雜度，但它能保證A元素只被創(chuàng)建一次，而且可以重復(fù)利用，這樣節(jié)省了時(shí)間和內(nèi)存。

也許有人會(huì)提出另外一個(gè)問(wèn)題，疑惑嵌套的第二個(gè)函數(shù)里有個(gè)if判斷，為什么需要它，干嘛不寫(xiě)成下面這樣：

var getAbsoluteUrl = (function() {
 var a = document.createElement('a');

 return function(url) {
 a.href = url;

 return a.href;
 };
})();

這自然也是一種可以運(yùn)行的寫(xiě)法，而且功能不會(huì)有任何錯(cuò)誤。但微妙的是，如果沒(méi)有if判斷語(yǔ)句，在定義這個(gè)函數(shù)的時(shí)候，即使這個(gè)函數(shù)沒(méi)有被任何代碼調(diào)用，A元素也會(huì)被初始化，而有了if判斷語(yǔ)句，A元素會(huì)在被實(shí)際用到時(shí)才被創(chuàng)建，不會(huì)浪費(fèi)內(nèi)存和CPU。

好了，有了這個(gè)方法，不論你傳入它的是什么樣的URL地址，它都會(huì)返回絕對(duì)地址。

大家試一下吧！

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: