看博文，做笔记

[ONE-SUNDAY]

2017年2月19号：什么是前端路由？

路由、指引、指路之意，前端路由大部分的应用场景，就是我们现在熟知的单页应用SPA。

使用客户端来接管本该由服务端来实现的任务（切换页面），浏览器请求不同的 URL，服务器接收后，通过解析 URL 去拼接需要的 HTML 或者模版，再将结果返回给客户端渲染。

服务端实现优势在于更加安全，反之则是增加服务器的负荷，并且每次都需要 reload 页面。前端路由则是用于减轻负荷、没有网络延迟、没有刷新过程，提升用户体验。

实现方式：

1、hash 方式

http://www.google.com#123

location.hash // 返回 #123

2、History API

可以访问浏览器历史的 history 对象

widnow.history

back() 加载 history 列表中的前一个 URL。
forward() 加载 history 列表中的下一个 URL。
go() 加载 history 列表中的某个具体页面。

// 将指定的 url 直接压入历史记录栈顶
history.replaceState(dataObj, title, url);

// 将当前历史记录栈顶替换成传入的数据
history.pushState(dataObj, title, url);

跟踪 url 变化：

hash 方式用 hashchange 时间监听

HTML5 新增的 popstate 事件也可监听 hash 变化，低版本浏览器不支持。

但是 history.replaceState() 和 history.pushState() 不会触发 popstate 事件，仍需要额外的触发 back() 或 forward() 方法。

所以，我们选择 haschange 事件，但 IE 6 不支持，可使用心跳模拟，但性能有损。

var oldHash = location.hash;
var oldURL = location.href;

setInterval(function() {
    var newHash = location.hash;
    var newURL = location.href;
    
    if (newHash !== oldHash && typeof window.onhaschange === 'function') {
        // 执行 onhashchange 回调
        window.onhaschange({
            'type': 'hashchange',
            'oldURL': oldURL,
            'newURL': newURL
        });
        oldHash = newHash;
        oldURL = newURL;
    }
});

// router.js
function FrontRouter() {
    this.routes = {};
    window.addEventListener('load', this.resolve.bind(this), false);
    window.addEventListener('haschange', this.resolve.bind(this), false);
}

FrontRouter.prototype.route = function(path, callback) {
    this.routes[path] = callback || function() {};
};

FrontRouter.prototype.resolve = function() {
    this.curHash = location.hash.slice(1) || '/';
    typeof this.routes[this.curHash] === 'function' && this.routes[this.curHash]();
};

<!-- index.html -->
<ul>
    <li><a href="#blue">blue</a></li>
    <li><a href="#yellow">yellow</a></li>
    <li><a href="#red">red</a></li>
<ul>

// index.js
var router = new FrontRouter();

router.route('blue', function() {
    document.body.style.backgroundColor = 'blue';
});

router.route('yellow', function() {
    document.body.style.backgroundColor = 'yellow';
});

router.route('red', function() {
    document.body.style.backgroundColor = 'red';
});

单页应用的缺陷

单页应用最根本的缺陷就是不利于 SEO，因为界面的绝大部分都是动态生成的，所以搜索引擎很不容易索引它。

参考资料：
前端路由一探
构建单页 Web 应用

localStorage、sesstionStorage、cookie 区别

Cookie 是小甜饼的意思。顾名思义，cookie 确实非常小，它的大小限制为 4KB 左右，是网景公司的前雇员 Lou Montulli 在 1993 年 3 月的发明。它的主要用途有保存登录信息，比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。

localStorage 和 sessionStorage 一样都是用来本地存储客户端临时信息的对象，存储限制为 5MB 左右。

localStorage 生命周期是永久。

sessionStorage 生命周期为当前窗口或标签页，一旦窗口或标签页被关闭了，那么 sessionStorage 存储的数据也就被清空了。

不同浏览器无法共享 localStorage 或 sessionStorage 的信息，相同浏览器不同页面可以共享 localStorage（相同域名和端口），但不同页面或标签页无法共享 sessionStorage 的信息。

这里需要注意的是，页面及标签页仅指顶级窗口，如果一个标签页包含多个 iframe 标签且他们属于同源页面，那么他们之间是可以共享 sessionStorage 的。

localStorage 和 sesstionStorage 使用相同的 API：

存储一个值：

localStorage.setItem("name", "th");

获取一个值：

localStorage.setItem("name"); // th

删除一个值：

localStorage.removeItem("name"); // 删除 Key 为 name 的值

清除所有值：

localStorage.clear();

参考资料：
localStorage 和 sessionStorage 区别
详说 Cookie, LocalStorage 与 SessionStorage