小伙伴们可能很惊奇，小剧你个贰货为毛说URL这么简单的东西。
其实还是有缘由的。一年半之前(2013年7月)小剧在写nodejs后端路由时，初次研究URL的结构，就感觉URL并没有想象中的简单；紧接着写前端路由lofox时，开始尝试拆分组合URL，发现浏览器处理URL的规则是如此简洁而丰富；最近（2015年一月）又在写基于传统页面的单页组件iframer时，对search、hash等URL的细枝末节做过不少处理的，深感URL是一个设计精妙的玩意儿。目前也算是和URL友好相gao处ji 过相当长时间。
URL由哪几部分组成？
URL全称为统一资源定位器（Uniform Resoure Locator），其在b/s架构中起着桥梁作用。如上图标示，一个完整的URL主要由protocol、hostname、port、pathname、search 、hash这六部分组成，下面小剧分别介绍这几个部分。
protocol
访问协议（也称之为方案）：它告诉浏览器如何处理将要打开的文件。web站点中最常用的模式是超文本传输协议http，其次为https协议。在URL中（http://xxx.xx/xx）协议的分隔符为//，匹配值包含:。
hostname
域名一般由英文字母和阿拉伯数字以及横"－"组成，最长可达67个字符（包括后缀），并且字母的大小写没有区别，每个层次最长不能超过22个字母。这些符号构成了域名的前缀，主体和后缀等几个部分，组合在一起构成一个完整的域名。当然，IP也可以充当domain的作用。
port
端口对应的是服务器当前应用正在监听的网络接口，浏览器默认值为80。分隔符为hostname后的:。
pathname
路径名部分，用于指明资源位于服务器的位置（相对的）。类似于分层级的文件系统。
search
查询，通过提供参数缩小数据库的检索范围，在url中search以?开始，每对参数以&分割，参数的键值分隔符为=，如?act=del&id=21。
hash
hash作为锚点，用来标记文档内的位置，此段标记仅体现在浏览器上，http请求会忽略此段内容，修改hash不会触发页面的跳转刷新。也由于其特性，目前越来越多的用在单页组件中。
页面中的URL可以怎么简写？
浏览器允许资源的引用以一定方式简写，根据地址和基础地址计算出最终引用的URL。HTML与JS是以当前页面为基础地址，CSS则是以CSS文件为基础地址。
设定当前访问的地址为http://bh-lay.com/opus/index.html，链接到的完整地址为http://bh-lay.com/topic/aboutme/index.html可简写的方式就会有下面几种。
省略协议：使用和基础地址同样的协议，可不具体指定协议名//bh-lay.com/topic/aboutme/index.html
省略域名（含端口）： 若相对于站点目录，地址以/开头即可，/topic/aboutme/index.html
省略路径：一般情况下，css内对图片的引用会图片与css的相对路径来书写，对应到这个例子则为../topic/aboutme/index.html。
同源策略指的是什么？
前端小伙伴们或多或少都会碰到跨域的问题。其实跨域问题的存在就是因为浏览器的同源策略。同源策略是对Javascript代码能够操作哪些WEB内容的一条完整安全限制。
这里的同源指的是：同协议，同域名和同端口。
URL有哪些常用操作？
页面URL的获取和修改，全部囊括在全局的location中，但是和cookie一样，location下的方法都是封装程度不高的低级接口，项目中常会针对search进行封装。
当然，在js介入路径计算的时候还会有相对路径转换为绝对路径、search二级属性等方法，这里就不展开介绍了。
常用的解析search参数
function searchParser(){
var searchStr = location.search.replace(/^\?/,''),
resultObj = {};
if(searchStr && searchStr.length > 1){
var items = searchStr.split('&');
for(var index = 0 ; index < items.length ; index++ ){
if(! items[index]){
continue;
}
var kv = items[index].split('=');
resultObj[kv[0]] = typeof kv[1] === "undefined" ? "":kv[1];
}
}
return resultObj;
}
PS：本文侧重于对http、https协议下的URl进行介绍，其他协议有更为丰富的路径规则，限于篇幅和经验，小剧不便展开。
PPS：本文的产生是基于下面三个项目的经验，有兴趣的话可以赏个光读一读。
- 小剧客栈后端路由：https://github.com/…/core
- 前端路由lofox：https://github.com/bh-lay/lofox
- 基于传统页面的单页组件：https://github.com//bh-lay/iframer