巧方法 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 常用方法总结
Jun 03 Javascript
jquery实现table鼠标经过变色代码
Sep 25 Javascript
jQuery中removeProp()方法用法实例
Jan 05 Javascript
js实现按钮颜色渐变动画效果
Aug 20 Javascript
Angularjs过滤器使用详解
May 25 Javascript
Javascript基础_标记文字的实现方法
Jun 14 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
Jul 01 Javascript
微信小程序的分类页面制作
Jun 27 Javascript
Vue2 轮播图slide组件实例代码
May 31 Javascript
Vue中的验证登录状态的实现方法
Mar 09 Javascript
微信小程序自定义组件传值 页面和组件相互传数据操作示例
May 05 Javascript
JS实现移动端在线签协议功能
Aug 22 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模板引擎smarty生成随机数的方法和math函数详解
2014/04/24 PHP
PHP实现批量修改文件后缀名的方法
2015/07/30 PHP
优化网页之快速的呈现我们的网页
2007/06/29 Javascript
常用js字符串判断方法整理
2013/10/18 Javascript
JavaScript window.location对象
2014/11/14 Javascript
实例详解JavaScript获取链接参数的方法
2016/01/01 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
2016/01/28 Javascript
逻辑表达式中与或非的用法详解
2016/06/06 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
2016/08/08 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
2016/09/05 Javascript
bootstrap-table组合表头的实现方法
2017/09/07 Javascript
jfinal与bootstrap的登出实战详解
2017/11/27 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
2017/12/07 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
2018/01/31 Javascript
微信小程序云开发 搭建一个管理小程序
2019/05/17 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
2019/06/24 Javascript
vue.js实现左边导航切换右边内容
2019/10/21 Javascript
javascript+css实现进度条效果
2020/03/25 Javascript
Python中的zip函数使用示例
2015/01/29 Python
用实例分析Python中method的参数传递过程
2015/04/02 Python
python获取指定目录下所有文件名列表的方法
2015/05/20 Python
详解Python中的文件操作
2016/08/28 Python
python3 读写文件换行符的方法
2018/04/09 Python
Python小工具之消耗系统指定大小内存的方法
2018/12/03 Python
python 整数越界问题详解
2019/06/27 Python
pycharm创建scrapy项目教程及遇到的坑解析
2019/08/15 Python
Python多线程多进程实例对比解析
2020/03/12 Python
Python+Appium实现自动化测试的使用步骤
2020/03/24 Python
英国在线房屋中介网站:Yopa
2018/01/09 全球购物
美国最大和最受信任的二手轮胎商店:Bestusedtires.com
2020/06/02 全球购物
介绍一下Linux内核的排队自旋锁
2014/01/04 面试题
南京青奥会口号
2014/06/12 职场文书
安全目标管理责任书
2014/07/25 职场文书
带香烟到学校抽的检讨书
2014/09/25 职场文书
优秀教师主要事迹材料
2015/11/04 职场文书
Java方法重载和方法重写的区别到底在哪?
2021/06/11 Java/Android