巧方法 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 相关文章推荐
jquery 选择器部分整理
Oct 28 Javascript
jQuery UI的Dialog无法提交问题的解决方法
Jan 11 Javascript
javascript 保存文件到本地实现方法
Nov 29 Javascript
jQuery ajax调用WCF服务实例
Jul 16 Javascript
angular.element方法汇总
Jan 07 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
Jan 08 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
Apr 12 Javascript
jQuery AJAX timeout 超时问题详解
Jun 21 Javascript
Angular实现购物车计算示例代码
Feb 21 Javascript
AngularJS自定义指令实现面包屑功能完整实例
May 17 Javascript
JavaScript中错误正确处理方式小结你用对了吗
Oct 10 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
May 30 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
sphinx增量索引的一个问题
2011/06/14 PHP
Laravel 4.2 中队列服务(queue)使用感受
2014/10/30 PHP
php短址转换实现方法
2015/02/25 PHP
PHP输出缓冲控制Output Control系列函数详解
2015/07/02 PHP
php求数组全排列,元素所有组合的方法
2016/05/05 PHP
创建无限极分类树型结构的简单方法
2017/06/20 PHP
JSQL 批量图片切换的实现代码
2010/05/05 Javascript
再论Javascript下字符串连接的性能
2011/03/05 Javascript
基于jQuery.Validate验证库知识点的详解
2013/04/26 Javascript
JS注释所产生的bug 即使注释也会执行
2013/11/19 Javascript
javascript实现类似超链接的效果
2014/12/26 Javascript
JS使用cookie设置样式的方法
2016/06/30 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
2016/12/29 Javascript
js实现tab切换效果
2017/02/16 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
2017/02/23 Javascript
基于Vue.js实现tab滑块效果
2017/07/23 Javascript
knockoutjs模板实现树形结构列表
2017/07/31 Javascript
ES6 对象的新功能与解构赋值介绍
2019/02/05 Javascript
JS中实现一个下载进度条及播放进度条的代码
2019/06/10 Javascript
layui数据表格 table.render 报错的解决方法
2019/09/29 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
2020/02/11 Javascript
[00:36]DOTA2风云人物相约完美“圣”典 12月17日不见不散
2016/11/30 DOTA
pycharm 使用心得(五)断点调试
2014/06/06 Python
Python PyQt5标准对话框用法示例
2017/08/23 Python
使用python生成杨辉三角形的示例代码
2018/08/29 Python
python构建基础的爬虫教学
2018/12/23 Python
python自动化实现登录获取图片验证码功能
2019/11/20 Python
python返回数组的索引实例
2019/11/28 Python
python 使用多线程创建一个Buffer缓存器的实现思路
2020/07/02 Python
解决Python3.8运行tornado项目报NotImplementedError错误
2020/09/02 Python
纯CSS3实现图片无间断轮播效果
2016/08/25 HTML / CSS
用CSS3实现无限循环的无缝滚动的示例代码
2017/11/01 HTML / CSS
剪彩仪式主持词
2014/03/19 职场文书
2016年大学迎新晚会工作总结
2015/10/15 职场文书
MySQL中CURRENT_TIMESTAMP的使用方式
2021/11/27 MySQL
【海涛解说】史上最给力比赛,挑战DOTA极限
2022/04/01 DOTA