巧方法 JavaScript获取超链接的绝对URL地址


Posted in Javascript onJune 14, 2016

对于Web程序员来说,处理简单的URL格式也许会成为一场噩梦。试想一下,一个网址里有很多组成部分都会影响你对它的解析方法:

····是否以/字符开头
····是否以//开头
····是否以?号开头
····是否以#号开头
…等等
当你想要这个地址的绝对地址时,如何判断处理和解析?它有可能是http协议的,还可能是https协议的。够头痛吧。幸运的是,我们有个简单的方法来确定它的绝对地址,就是创建一个A元素来辅助完成这个任务!

JavaScript代码

这里我将使用一个返回函数的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地址,它都会返回绝对地址。

大家试一下吧!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript之ESC(第二类混淆)
May 06 Javascript
在子窗口中关闭父窗口的一句代码
Oct 21 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
Sep 20 Javascript
学JavaScript七大注意事项【必看】
May 04 Javascript
微信小程序 UI布局常用技巧整理总结
Dec 05 Javascript
JS实现的全排列组合算法示例
Oct 09 Javascript
原生JS控制多个滚动条同步跟随滚动效果
Dec 22 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
Dec 07 Javascript
webpack4 optimization使用总结
Nov 10 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
Nov 29 Javascript
将Vue组件库更换为按需加载的方法步骤
May 06 Javascript
JavaScript面向对象核心知识与概念归纳整理
May 09 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
Jun 14 #Javascript
返回函数的JavaScript函数
Jun 14 #Javascript
js数组的五种迭代方法及两种归并方法(推荐)
Jun 14 #Javascript
Web程序员必备的7个JavaScript函数
Jun 14 #Javascript
Javascript中的迭代、归并方法详解
Jun 14 #Javascript
JavaScript接口的实现三种方式(推荐)
Jun 14 #Javascript
jQuery处理XML文件的几种方法
Jun 14 #Javascript
You might like
木翼下载系统中说明的PHP安全配置方法
2007/06/16 PHP
基于header的一些常用指令详解
2013/06/06 PHP
PHP使用finfo_file()函数检测上传图片类型的实现方法
2017/04/18 PHP
PHP大文件分片上传的实现方法
2018/10/28 PHP
Thinkphp5框架简单实现钩子(Hook)行为的方法示例
2019/09/03 PHP
laravel框架查询数据集转为数组的两种方法
2019/10/10 PHP
js取消单选按钮选中示例代码
2013/11/14 Javascript
调用HttpHanlder的几种返回方式小结
2013/12/20 Javascript
jQuery 中DOM 操作详解
2015/01/13 Javascript
JavaScript 动态加载脚本和样式的方法
2015/04/13 Javascript
基于jQuery实现的旋转彩圈实例
2015/06/26 Javascript
AngularJS 实现JavaScript 动画效果详解
2016/09/08 Javascript
js自定义input文件上传样式
2018/10/26 Javascript
对vue生命周期的深入理解
2020/12/03 Vue.js
[01:01:18]VP vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
[02:12]Dota 2 推出全新英雄—— 电炎绝手
2019/08/23 DOTA
python安装与使用redis的方法
2016/04/19 Python
Python的SQLalchemy模块连接与操作MySQL的基础示例
2016/07/11 Python
利用aardio给python编写图形界面
2017/08/21 Python
python中字符串内置函数的用法总结
2018/09/13 Python
python查找指定文件夹下所有文件并按修改时间倒序排列的方法
2018/10/21 Python
浅谈python中str字符串和unicode对象字符串的拼接问题
2018/12/04 Python
Python给定一个句子倒序输出单词以及字母的方法
2018/12/20 Python
python3+selenium实现qq邮箱登陆并发送邮件功能
2019/01/23 Python
python的pytest框架之命令行参数详解(下)
2019/06/27 Python
香港莎莎官网Sasa.com:亚洲著名国际化妆品商城
2019/11/10 全球购物
应届生自荐信范文
2014/02/21 职场文书
少先队学雷锋活动总结范文
2014/03/09 职场文书
献爱心活动总结
2014/05/07 职场文书
入职担保书范文
2014/05/21 职场文书
校园绿化美化方案
2014/06/08 职场文书
爱护花草树木的标语
2014/06/11 职场文书
公司开会通知
2015/04/20 职场文书
2015年教学管理工作总结
2015/05/20 职场文书
安装配置mysql及Navicat prenium的详细流程
2021/06/10 MySQL
NodeJs使用webpack打包项目的方法详解
2022/02/28 NodeJs