我是小又又，住在武汉，做了两年新媒体，准备用 6 个月时间转行前端。
今日学习目标
昨天基于搜索来基础学习 window 弹窗管理相关。然后发布文章遇见了一些问题,但是今天尝试的时候,又好了,就很奇怪.
今天主要是基于搜索来学习 BOM location 对象 和 URL 接口 ，又是适合学习的一天，加油，小又又！！！！
今日学习概要
location 对象
what
Location 接口表示其链接到的对象的位置（URL）。所做的修改反映在与之相关的对象上。 Document 和 Window 接口都有这样一个链接的Location，分别通过 Document.location和Window.location 访问。
属性
Location 接口不继承任何属性，但是实现了那些来自 URLUtils 的属性。
| 属性名 | 属性说明 |
|---|---|
| Location.href | 包含整个URL的一个DOMString |
| Location.protocol | 包含URL对应协议的一个DOMString，最后有一个":"。 |
| Location.host | 包含了域名的一个DOMString，可能在该串最后带有一个":"并跟上URL的端口号。 |
| Location.hostname | 包含URL域名的一个DOMString。 |
| Location.port | 包含端口号的一个DOMString。 |
| Location.pathname | 包含URL中路径部分的一个DOMString，开头有一个“/"。 |
| Location.search | 包含URL参数的一个DOMString，开头有一个“?”。 |
| Location.hash | 包含块标识符的DOMString，开头有一个“#”。 |
| Location.username | 包含URL中域名前的用户名的一个DOMString。 |
| Location.password | 包含URL域名前的密码的一个 DOMString。 |
| Location.origin | 只读,包含页面来源的域名的标准形式DOMString。 |
DOMString 说明 : https://developer.mozilla.org/zh-CN/docs/Web/API/DOMString
方法
Location没有继承任何方法，但实现了来自URLUtils的方法。
Location.assign()
加载给定URL的内容资源到这个Location对象所关联的对象上。
// 跳转到新的网址
document.location.assign('http://www.example.com')
Location.reload()
重新加载来自当前 URL的资源。
他有一个特殊的可选参数，类型为 Boolean，
该参数为true时会导致该方法引发的刷新一定会从服务器上加载数据。
如果是 false或没有制定这个参数，浏览器可能从缓存当中加载页面。
// 跳转到新的网址
document.location.reload(true)
执行之后页面真的重载了~~~~~~
Location.replace()
用给定的URL替换掉当前的资源。
与 assign() 方法不同的是用 replace()替换的新页面不会被保存在会话的历史 History中，这意味着用户将不能用后退按钮转到该页面。
// 跳转到新的网址
document.location.replace('http://www.example.com')
Location.toString()
返回一个DOMString，包含整个URL。
它和读取URLUtils.href的效果相同。但是用它是不能够修改Location的值的。
// 跳转到新的网址
document.location.assign('http://www.example.com')
案例
var url = document.createElement('a');
url.href = 'https://developer.mozilla.org/en-US/search?q=URL#search-results-close-container';
console.log(url.href); // https://developer.mozilla.org/en-US/search?q=URL#search-results-close-container
console.log(url.protocol); // https:
console.log(url.host); // developer.mozilla.org
console.log(url.hostname); // developer.mozilla.org
console.log(url.port); // (blank - https assumes port 443)
console.log(url.pathname); // /en-US/search
console.log(url.search); // ?q=URL
console.log(url.hash); // #search-results-close-container
console.log(url.origin); // https://developer.mozilla.org
小技巧
这个特性常常用于让网页自动滚动到新的锚点。
document.location.href = '#top';
// 等同于
document.location.hash = '#top';
直接改写
location，相当于写入href属性。
document.location = 'http://www.example.com';
// 等同于
document.location.href = 'http://www.example.com';
另外，Location.href属性是浏览器唯一允许跨域写入的属性，即非同源的窗口可以改写另一个窗口（比如子窗口与父窗口）的Location.href属性，导致后者的网址跳转。
Location的其他属性都不允许跨域写入。
URL 接口
what
URL接口用于解析，构造，规范化和编码 URLs。 它通过提供允许轻松阅读和修改URL组件的属性来工作。
通常，通过在调用URL的构造函数时将URL指定为字符串或提供相对URL和基本URL来创建新的URL对象。
然后，可以轻松读取URL的已解析组成部分或对URL进行更改。
如果浏览器尚不支持URL()构造函数，则可以使用Window中的Window.URL属性。 确保检查的任何目标浏览器是否要求对此添加前缀。
构造器
基础
URL() 构造函数返回一个新创建的 URL 对象，表示由一组参数定义的 URL。
url = new URL(url, [base])
创建并返回一个URL对象，该URL对象引用使用绝对URL字符串，相对URL字符串和基本URL字符串指定的URL。
参数
- url
是一个表示绝对或相对 URL 的 DOMString。
如果url 是相对 URL，则会将 base 用作基准 URL。
如果 url 是绝对URL，则将忽略 base，无论是否有给出。
- base 可选
是一个表示基准 URL 的 DOMString.
如果 URL 字符串是一个相对路径，那么需要表示绝对路径的第二个参数，作为计算基准。
如果未指定，则默认为 ''。
如果给定的基本 URL 或生成的 URL 不是有效的 URL 链接，则会抛出一个类型为 SYNTAX_ERROR 的 DOMException。
注意事项
如果参数是另一个 URL 实例，构造函数会自动读取该实例的href属性，作为实际参数。
var url1 = new URL('index.html', 'http://example.com');
url1.href
// "http://example.com/index.html"
var url2 = new URL('page2.html', url1);
url2.href
// "http://example.com/page2.html"
var url3 = new URL('..', 'http://example.com/a/b.html')
url3.href
// "http://example.com/"
上面代码中，返回的 URL 实例的路径都是在第二个参数的基础上，切换到第一个参数得到的。
最后一个例子里面，第一个参数是..，表示上层路径。
属性
| 属性名 | 属性说明 |
|---|---|
| hash | 包含'#'的USVString，后跟URL的片段标识符。 |
| host | 一个USVString，其中包含域（即主机名），后跟（如果指定了端口）“：”和URL的端口。 |
| hostname | 包含 URL 域名的 USVString。 |
| href | 包含完整 URL 的 USVString。 |
origin 只读 |
返回一个包含协议名、域名和端口号的 USVString。 |
| password | 包含在域名前面指定的密码的 USVString 。 |
| pathname | 以 '/' 起头紧跟着 URL 文件路径的 DOMString。 |
| port | 包含 URL 端口号的 USVString。 |
| protocol | 包含 URL 协议名的 USVString，末尾带 ':'。 |
| search | 一个USVString ，指示URL的参数字符串； 如果提供了任何参数，则此字符串包括所有参数，并以开头的“？”开头 字符。 |
| searchParams 只读 | URLSearchParams对象，可用于访问search中找到的各个查询参数。 |
| username | 包含在域名前面指定的用户名的 USVString。 |
USVString 说明: https://developer.mozilla.org/zh-CN/docs/Web/API/USVString
Location的属性和URL的属性基本一样呢~~~~,不过之前看是一直是说DOMString,这边一直说的USVString
方法
toString()
返回包含整个URL的USVString。 它是URL.href的同义词，尽管它不能用于修改值。
var url3 = new URL('..', 'http://example.com/a/b.html')
url3.toString()
toJSON()
返回包含整个URL的USVString。 它返回与href属性相同的字符串。
var url3 = new URL('..', 'http://example.com/a/b.html')
url3.toJSON()
静态方法
createObjectURL()
URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。
这个 URL 的生命周期和创建它的窗口中的 document 绑定。
objectURL = URL.createObjectURL(object);
这个新的URL 对象表示指定的 File 对象或 Blob 对象。
看了一下示例,感觉好麻烦,还是之后用到再详细了解了.
revokeObjectURL()
URL.revokeObjectURL() 静态方法用来释放一个之前已经存在的、通过调用 URL.createObjectURL() 创建的 URL 对象。
当你结束使用某个 URL 对象之后，应该通过调用这个方法来让浏览器知道不用在内存中继续保留对这个文件的引用了。
window.URL.revokeObjectURL(objectURL);
你可以在 sourceopen 被处理之后的任何时候调用 revokeObjectURL()。这是因为 createObjectURL() 仅仅意味着将一个媒体元素的 src 属性关联到一个 MediaSource 对象上去。
调用revokeObjectURL() 使这个潜在的对象回到原来的地方，允许平台在合适的时机进行垃圾收集。
看了一下示例,感觉好麻烦,还是之后用到再详细了解了.
今日学习总结
今日心情
今日主要是基于搜索来基础学习 BOM location 对象 和URL 接口，希望明天学到更多的内容~~~~
本文使用 mdnice 排版
