巧方法 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 相关文章推荐
JS不能跨域借助jquery获取IP地址的方法
Aug 20 Javascript
node.js中的url.resolve方法使用说明
Dec 10 Javascript
js实现编辑div节点名称的方法
Dec 17 Javascript
JavaScript监听和禁用浏览器回车事件实例
Jan 31 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
Feb 17 Javascript
jquery跟随屏幕滚动效果的实现代码
Apr 13 Javascript
Vue开发过程中遇到的疑惑知识点总结
Jan 20 Javascript
基于JavaScript实现五子棋游戏
Aug 26 Javascript
vue2.0使用swiper组件实现轮播效果
Nov 27 Javascript
vue2.0 实现导航守卫的具体用法(路由守卫)
May 17 Javascript
如何在Vue.JS中使用图标组件
Aug 04 Javascript
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
使用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缩略图生成程式(需要GD库支持)
2007/03/06 PHP
PHP中10个不常见却非常有用的函数
2010/03/21 PHP
PHP异步调用socket实现代码
2012/01/12 PHP
PHP使用静态方法的几个注意事项
2014/09/16 PHP
WampServer下安装多个版本的PHP、mysql、apache图文教程
2015/01/07 PHP
YII Framework框架教程之缓存用法详解
2016/03/14 PHP
解决Laravel5.5下的toArray问题
2019/10/15 PHP
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
2012/03/14 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
2013/11/18 Javascript
js检验密码强度(低中高)附图
2014/06/05 Javascript
给js文件传参数(详解)
2014/07/13 Javascript
JQuery实现展开关闭层的方法
2015/02/17 Javascript
JavaScript中的Math.atan2()方法使用详解
2015/06/15 Javascript
基于javascript实现图片预加载
2016/01/05 Javascript
JS实现HTML表格排序功能
2016/08/05 Javascript
js实现加载更多功能实例
2016/10/27 Javascript
ES6通过babel转码使用webpack使用import关键字
2016/12/13 Javascript
微信小程序的动画效果详解
2017/01/18 Javascript
xmlplus组件设计系列之列表(4)
2017/04/26 Javascript
原生JS实现自定义滚动条效果
2020/10/27 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
2020/03/07 Javascript
python连接MySQL、MongoDB、Redis、memcache等数据库的方法
2013/11/15 Python
web.py获取上传文件名的正确方法
2014/08/26 Python
Python实现利用163邮箱远程关电脑脚本
2018/02/22 Python
tensorflow实现softma识别MNIST
2018/03/12 Python
python3实现带多张图片、附件的邮件发送
2019/08/10 Python
使用pandas读取表格数据并进行单行数据拼接的详细教程
2021/03/03 Python
HTML5本地存储之IndexedDB
2017/06/16 HTML / CSS
英国买鞋网站:Charles Clinkard
2019/11/14 全球购物
数控专业大学生的自我鉴定
2013/11/13 职场文书
房产委托公证书样本
2014/04/04 职场文书
白莲教口号
2014/06/18 职场文书
试用期员工工作自我评价
2014/09/10 职场文书
导游词之藏龙百瀑景区
2019/12/30 职场文书
Python中的np.argmin()和np.argmax()函数用法
2021/06/02 Python
SQLServer之常用函数总结详解
2021/08/30 SQL Server