巧方法 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从头学起第一讲
Jul 04 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
Feb 27 Javascript
使用GruntJS构建Web程序之安装篇
Jun 04 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
Aug 20 Javascript
JavaScript通过事件代理高亮显示表格行的方法
May 27 Javascript
Bootstrap输入框组件使用详解
Jun 09 Javascript
详解在express站点中使用ejs模板引擎
Sep 21 Javascript
在 React、Vue项目中使用SVG的方法
Feb 09 Javascript
vue项目首屏加载时间优化实战
Apr 23 Javascript
浅谈vuex中store的命名空间
Nov 08 Javascript
在Vue 中获取下拉框的文本及选项值操作
Aug 13 Javascript
js面向对象封装级联下拉菜单列表的实现步骤
Feb 08 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作的文本留言本的例子(六)
2006/10/09 PHP
php !function_exists("T7FC56270E7A70FA81A5935B72EACBE29"))代码解密
2011/01/07 PHP
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
yii用户注册表单验证实例
2015/12/26 PHP
javascript 贪吃蛇实现代码
2008/11/22 Javascript
JavaScript入门教程(9) Document文档对象
2009/01/31 Javascript
判断一个对象是否为jquery对象的方法
2014/03/12 Javascript
深入分析原生JavaScript事件
2014/12/29 Javascript
浅谈JavaScript中的string拥有方法的原因
2015/08/28 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
2016/05/24 Javascript
解析js如何获取css样式
2016/12/11 Javascript
用nodejs搭建websocket服务器
2017/01/23 NodeJs
jsonp跨域请求实现示例
2017/03/13 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
2017/08/07 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
2018/05/04 Javascript
基于JavaScript实现单例模式
2019/10/30 Javascript
Vue.js中使用Vuex实现组件数据共享案例
2020/07/31 Javascript
[01:02:45]完美世界DOTA2联赛 LBZS vs Forest 第三场 11.07
2020/11/09 DOTA
wxpython中Textctrl回车事件无效的解决方法
2016/07/21 Python
Python爬虫中urllib库的进阶学习
2018/01/05 Python
python opencv 图像尺寸变换方法
2018/04/02 Python
python实现统计文本中单词出现的频率详解
2019/05/20 Python
python matplotlib中的subplot函数使用详解
2020/01/19 Python
python subprocess pipe 实时输出日志的操作
2020/12/05 Python
详解matplotlib中pyplot和面向对象两种绘图模式之间的关系
2021/01/22 Python
美国隐形眼镜网上商店:Lens.com
2019/09/03 全球购物
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/01/13 面试题
秋季运动会加油稿200字
2014/01/11 职场文书
公司企业表扬信
2014/01/11 职场文书
思想品德自我评价
2014/02/04 职场文书
六年级学生评语
2014/04/22 职场文书
2015年城市管理工作总结
2015/05/23 职场文书
2015年信息化建设工作总结
2015/07/23 职场文书
JavaScript 中for/of,for/in 的详细介绍
2021/11/17 Javascript
MySQL磁盘碎片整理实例演示
2022/04/03 MySQL
vue配置型表格基于el-table拓展之table-plus组件
2022/04/12 Vue.js