巧方法 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 相关文章推荐
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
Apr 17 Javascript
js实时获取系统当前时间实例代码
Jun 28 Javascript
9行javascript代码获取QQ群成员具体实现
Oct 16 Javascript
关于延迟加载JavaScript
May 05 Javascript
jQuery切换所有复选框选中状态的方法
Jul 02 Javascript
jQuery满屏焦点图左右滚动特效代码分享
Sep 07 Javascript
跟我学习javascript的垃圾回收机制与内存管理
Nov 23 Javascript
javascript使用 concat 方法对数组进行合并的方法
Sep 08 Javascript
详解如何使用Vue2做服务端渲染
Mar 29 Javascript
Angular2开发环境搭建教程之VS Code
Dec 15 Javascript
JavaScript实现的DOM绘制柱状图效果示例
Aug 08 Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
Aug 19 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
PHP4与PHP5的时间格式问题
2008/02/17 PHP
让php处理图片变得简单 基于gb库的图片处理类附实例代码下载
2011/05/17 PHP
php中实现记住密码下次自动登录的例子
2014/11/06 PHP
php实现excel中rank函数功能的方法
2015/01/20 PHP
导入extjs、jquery 文件时$使用冲突问题解决方法
2014/01/14 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
2014/04/30 Javascript
JavaScript中的splice()方法使用详解
2015/06/09 Javascript
JS绘制生成花瓣效果的方法
2015/08/05 Javascript
jquery之别踩白块游戏的简单实现
2016/07/25 Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
2016/12/26 Javascript
AngulerJS学习之按需动态加载文件
2017/02/13 Javascript
微信小程序发送短信验证码完整实例
2019/01/07 Javascript
vue-cli2 构建速度优化的实现方法
2019/01/08 Javascript
监听element-ui table滚动事件的方法
2019/03/26 Javascript
JavaScript实现单英文金山打字通
2020/07/24 Javascript
jquery获取input输入框中的值
2019/11/13 jQuery
vue实现表单未编辑或未保存离开弹窗提示功能
2020/04/08 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
2021/02/18 Vue.js
[45:15]Optic vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
Python的MongoDB模块PyMongo操作方法集锦
2016/01/05 Python
python3制作捧腹网段子页爬虫
2017/02/12 Python
安装Python的教程-Windows
2017/07/22 Python
手把手教你用python抢票回家过年(代码简单)
2018/01/21 Python
PyQt5每天必学之带有标签的复选框
2018/04/19 Python
python pprint模块中print()和pprint()两者的区别
2020/02/10 Python
详解如何使用Pytest进行自动化测试
2021/01/14 Python
Python中对象的比较操作==和is区别详析
2021/02/12 Python
联想澳大利亚官网:Lenovo Australia
2018/01/18 全球购物
英国鹦鹉店:Parrot Essentials
2018/12/03 全球购物
欧姆龙医疗欧洲有限公司:Omron Healthcare Europe B.V
2020/06/13 全球购物
暑期研修感言
2014/02/17 职场文书
开业典礼主持词
2014/03/21 职场文书
销售岗位职责范本
2014/06/12 职场文书
三严三实心得体会范文
2014/10/13 职场文书
2019企业给员工的慰问信
2019/06/24 职场文书
Python中的嵌套循环详情
2022/03/23 Python