巧方法 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加强之自定义event事件
Sep 21 Javascript
Web Uploader文件上传插件使用详解
May 10 Javascript
JavaScript实现图片轮播组件代码示例
Nov 22 Javascript
利用Vue.js实现checkbox的全选反选效果
Jan 18 Javascript
以v-model与promise两种方式实现vue弹窗组件
May 21 Javascript
微信小程序wx:for循环的实例详解
Oct 07 Javascript
微信小程序实现复选框效果
Dec 28 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
Jan 14 Javascript
es6中使用map简化复杂条件判断操作实例详解
Feb 19 Javascript
微信小程序自定义顶部组件customHeader的示例代码
Jun 03 Javascript
Vue之封装公用变量以及实现方式
Jul 31 Javascript
Postman无法正常返回结果问题解决
Aug 28 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
function.inc.php超越php
2006/12/09 PHP
PHP管理依赖(dependency)关系工具 Composer 安装与使用
2014/08/18 PHP
php实现的通用图片处理类
2015/03/24 PHP
PHP实现图片自动清理的方法
2015/07/08 PHP
PHP使用NuSOAP调用Web服务的方法
2015/07/18 PHP
php封装的smarty类完整实例
2016/10/19 PHP
详解PHP实现支付宝小程序用户授权的工具类
2018/12/25 PHP
laravel 关联关系遍历数组的例子
2019/10/10 PHP
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
2007/05/07 Javascript
jQuery获取地址栏参数插件(模仿C#)
2010/10/26 Javascript
解决js中window.open弹出的是上次的缓存页面问题
2013/12/29 Javascript
js调用百度地图及调用百度地图的搜索功能
2015/09/07 Javascript
整理Javascript流程控制语句学习笔记
2015/11/29 Javascript
学习Bootstrap滚动监听 附调用方法
2016/07/02 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
2017/04/21 jQuery
vue2.0项目中使用Ueditor富文本编辑器示例代码
2017/08/14 Javascript
Express进阶之log4js实用入门指南
2018/02/10 Javascript
vue项目中使用tinymce编辑器的步骤详解
2018/09/11 Javascript
Vue项目查看当前使用的elementUI版本的方法
2018/09/27 Javascript
qrcode生成二维码微信长按无法识别问题的解决
2019/04/04 Javascript
10种JavaScript最常见的错误(小结)
2019/06/21 Javascript
js实现图片粘贴到网页
2019/12/06 Javascript
JS原型和原型链原理与用法实例详解
2020/02/05 Javascript
node创建Vue项目步骤详解
2020/03/06 Javascript
python smtplib模块发送SSL/TLS安全邮件实例
2015/04/08 Python
Python Selenium Cookie 绕过验证码实现登录示例代码
2018/04/10 Python
Python基础学习之函数方法实例详解
2019/06/18 Python
CSS Grid布局教程之什么是网格布局
2014/12/30 HTML / CSS
科沃斯机器人官网商城:Ecovacs
2016/08/29 全球购物
伦敦剧院门票:London Theatre Direct
2018/11/21 全球购物
泰国在线书店:SE-ED
2020/06/21 全球购物
Java基础类库面试题
2013/09/04 面试题
幼儿园父亲节活动方案
2014/03/11 职场文书
高三英语教学反思
2016/03/03 职场文书
JavaWeb 入门篇:创建Web项目,Idea配置tomcat
2021/07/16 Java/Android
Python编程源码报错解决方法总结经验分享
2021/10/05 Python