巧方法 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 日期时间函数(经典+完善+实用)
May 27 Javascript
jquery 查找新建元素代码
Jul 06 Javascript
浅析JQuery UI Dialog的样式设置问题
Dec 18 Javascript
JavaScript中的prototype.bind()方法介绍
Apr 04 Javascript
JavaScript实现表格快速变色效果代码
Aug 19 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
Dec 11 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
Jan 19 Javascript
基于bootstrap实现多个下拉框同时搜索功能
Jul 19 Javascript
vue路由拦截及页面跳转的设置方法
May 24 Javascript
通过实例了解js函数中参数的传递
Jun 15 Javascript
Vue开发环境跨域访问问题
Jan 22 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
Oct 02 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实现搜索类封装示例
2016/03/31 PHP
php flush无效,IIS7下php实时输出的方法
2016/08/25 PHP
PHP实现小偷程序实例
2016/10/31 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
一些相见恨晚的 JavaScript 技巧
2010/04/25 Javascript
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
2012/01/15 Javascript
JQuery判断HTML元素是否存在的两种解决方法
2013/12/26 Javascript
js中继承的几种用法总结(apply,call,prototype)
2013/12/26 Javascript
javascript中hasOwnProperty() 方法使用指南
2015/03/09 Javascript
jQuery实现简洁的轮播图效果实例
2016/09/07 Javascript
ES6中Math对象的部分扩展
2017/02/20 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
2017/04/02 jQuery
Webpack执行命令参数详解
2017/06/17 Javascript
JQuery EasyUI的一些常用组件
2017/07/12 jQuery
python监控网站运行异常并发送邮件的方法
2015/03/13 Python
python修改操作系统时间的方法
2015/05/18 Python
Python实现将目录中TXT合并成一个大TXT文件的方法
2015/07/15 Python
python读取文件名称生成list的方法
2018/04/27 Python
windows环境中利用celery实现简单任务队列过程解析
2019/11/29 Python
python如何输出反斜杠
2020/06/18 Python
详解python程序中的多任务
2020/09/16 Python
Python3.9.0 a1安装pygame出错解决全过程(小结)
2021/02/02 Python
美国高档百货Nordstrom的折扣店:Nordstrom Rack
2017/11/13 全球购物
英国男士时尚网站:Dandy Fellow
2018/02/09 全球购物
Servlet方面面试题
2016/09/28 面试题
绩效工资分配方案
2014/01/18 职场文书
银行办理业务介绍信
2014/01/18 职场文书
槐乡的孩子教学反思
2014/04/27 职场文书
人力资源求职信
2014/05/25 职场文书
电子商务专业应届毕业生求职信
2014/06/21 职场文书
邀请函模板
2015/02/02 职场文书
社区国庆节活动总结
2015/03/23 职场文书
2015年学校政教处工作总结
2015/05/26 职场文书
怎么用Python识别手势数字
2021/06/07 Python
python基础入门之普通操作与函数(三)
2021/06/13 Python
Python中的datetime包与time包包和模块详情
2022/02/28 Python