1. 程式人生 > >用JavaScript獲取一個超連結的絕對URL地址

用JavaScript獲取一個超連結的絕對URL地址

對於Web程式設計師來說,處理簡單的URL格式也許會成為一場噩夢。試想一下,一個網址裡有很多組成部分都會影響你對它的解析方法:

  • 是否以/字元開頭
  • 是否以//開頭
  • 是否以?號開頭
  • 是否以#號開頭
  • …等等

當你想要這個地址的絕對地址時,如何判斷處理和解析?它有可能是http協議的,還可能是https協議的。夠頭痛吧。幸運的是,我們有個簡單的方法來確定它的絕對地址,就是建立一個A元素來輔助完成這個任務!

JavaScript程式碼

var getAbsoluteUrl = (function() {
	var a;

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

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

這個函式看起來有些複雜,它先將一個函式賦予一個變數,而這個函式裡有另外一個函式,還有一個預先定義的變數。有人可能會問,為什麼要內嵌一個函式,是否可以簡化成這樣:
var getAbsoluteUrl = function(url) {
  var a = document.createElement('a');
  a.href=url;
  return a.href;
}

當然這種簡單的寫法也不能算錯,但不夠完美,因為內嵌一個函式的做法雖然增加了程式碼的複雜度,但它能保證A元素只被建立一次,而且可以重複利用,這樣節省了時間和記憶體。

也許有人會提出另外一個問題,疑惑巢狀的第二個函式裡有個if

判斷,為什麼需要它,幹嘛不寫成下面這樣:

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

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

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

這自然也是一種可以執行的寫法,而且功能不會有任何錯誤。但微妙的是,如果沒有if判斷語句,在定義這個函式的時候,即使這個函式沒有被任何程式碼呼叫,A元素也會被初始化,而有了if判斷語句,A元素會在被實際用到時才被建立,不會浪費記憶體和CPU。

好了,有了這個方法,不論你傳入它的是什麼樣的URL地址,它都會返回絕對地址。試一下吧!