阿里巴巴校招2017前端笔试题目：
1）路由有什么缺点？
2）原生js/html5 实现一个路由

缺点:
* 使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存
* 单页面无法记住之前滚动的位置，无法在前进，后退的时候记住滚动的位置

路由的概念：
* 路由是根据不同的 url 地址展示不同的内容或页面
* 前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做，之前是通过服务端根据 url 的不同返回不同的页面实现的。

我们直接来看两个例子，一个是hash结构的，这是在Html5 的history api出现之前的解决方案；一个是基于history api实现的。
- hash

http://10.0.0.1/
http://10.0.0.1/#/about
http://10.0.0.1/#/concat

history

http://10.0.0.1/
http://10.0.0.1/about
http://10.0.0.1/concat

前端的路由和后端的路由在实现技术上不一样，但是原理都是一样的。

1.hash

关键是监控两个事件，一个是页面加载进来的时候触发load,一个是hash改变的时候触发hashchange。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title>
</head>
<body><ul><li><a href="#/">turn white</a></li><li><a href="#/blue">turn blue</a></li><li><a href="#/green">turn green</a></li></ul><script>class Router {constructor() {this.routes = {};this.curUrl = "";}route(path, callback) {this.routes[path] = callback || function() {};}refresh() {this.curUrl = location.hash.slice(1) || '/';this.routes[this.curUrl]();}init() {window.addEventListener('load', this.refresh.bind(this), false);window.addEventListener('hashchange', this.refresh.bind(this), false);}}var router = new Router();router.init();var content = document.querySelector('body');// change Page anythingfunction changeBgColor(color) {content.style.backgroundColor = color;}router.route('/', function() {changeBgColor('white');});router.route('/blue', function() {changeBgColor('blue');});router.route('/green', function() {changeBgColor('green');});</script>
</body></html>

2.history api

html5 增加了两个方法，分别是pushState，replaceState.

两个方法均有三个参数：一个状态对象、一个标题（现在会被忽略），一个可选的URL地址
状态对象（state object） — 一个JavaScript对象，与用pushState()方法创建的新历史记录条目关联。无论何时用户导航到新创建的状态，popstate事件都会被触发，并且事件对象的state属性都包含历史记录条目的状态对象的拷贝。

任何可序列化的对象都可以被当做状态对象。因为FireFox浏览器会把状态对象保存到用户的硬盘，这样它们就能在用户重启浏览器之后被还原，我们强行限制状态对象的大小为640k。如果你向pushState()方法传递了一个超过该限额的状态对象，该方法会抛出异常。如果你需要存储很大的数据，建议使用sessionStorage或localStorage。

pushState 用于向 history 添加当前页面的记录，而 replaceState 和 pushState 的用法完全一样，唯一的区别就是它用于修改当前页面在 history 中的记录。

两者的一个表现的区别是：在浏览器上点击后退键的时候，使用pushState的会正常按照点击的顺序依次返回，而使用replaceState的只是替换，不会返回，会直接返回到pushState的记录。

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Simple History</title>
</head>
<body><a class="push" href="?push-one">Push One</a><a class="push" href="?push-two">Push Two</a><a class="push" href="?push-three">Push Three</a><a class="replace" href="?replace-one">Replace One</a><a class="replace" href="?replace-two">Replace Two</a><a class="replace" href="?replace-three">Replace Three</a><ul id="log"></ul><script src="simple-history.js"></script><script src="https://cdn.bootcss.com/jquery/1.7.1/jquery.min.js"></script><script>(function() {if (!SimpleHistory.supported) {return;}SimpleHistory.start(function(path) {console.log("match", path);document.title = "Simple History - " + path;$("<li>").text("match: " + path).appendTo("#log");});$("a:not([href^=http])").click(function(event) {if (event.metaKey || event.shiftKey || event.ctrlKey) {return;}event.preventDefault();var path = $(event.target).attr("href");if ($(event.target).is(".push")) {SimpleHistory.pushState(event.target.href);} else {SimpleHistory.replaceState(event.target.href);}});}())</script>
</body></html>

**
simple-history.js**

(function(window, undefined) {var initial = location.href;window.SimpleHistory = {supported: !!(window.history && window.history.pushState),pushState: function(fragment, state) {state = state || {};history.pushState(state, null, fragment);this.notify(state);},replaceState: function(fragment, state) {state = state || {};history.replaceState(state, null, fragment);},notify: function(state) {console.log(location.pathname,location.search);this.matcher(location.pathname + location.search, state);},start: function(matcher) {this.matcher = matcher;window.addEventListener("popstate", function(event) {// workaround to always ignore first popstate event (Chrome)// a timeout isn't reliable enoughif (initial && initial === location.href) {initial = null;return;}SimpleHistory.notify(event.state || {});}, false);}};}(window));

参考阅读：
- 原生JS实现一个简单的前端路由（路由实现的原理）
- 从 React Router 谈谈路由的那些事

阿里巴巴校招2017前端笔试题目 -- 原生js/html5 实现一个路由相关推荐

原生js输出html5,原生JS+HTML5实现的可调节写字板功能示例
本文实例讲述了原生JS+HTML5实现的可调节写字板功能.分享给大家供大家参考,具体如下: 前面一篇介绍了<JS+HTML5 Canvas实现简单的写字板功能>,这里再介绍另一种实现方法. ...
html 写字版插件,原生JS+HTML5实现的可调节写字板功能示例
本文实例讲述了原生JS+HTML5实现的可调节写字板功能.分享给大家供大家参考,具体如下: 本文实例讲述了原生JS+HTML5实现的可调节写字板功能.分享给大家供大家参考,具体如下: 前面一篇介绍了& ...
html5支持原生js,HTML5怎么学原生的js？让你对前端有了新的认识
原标题:HTML5怎么学原生的js?让你对前端有了新的认识已经学习了HTML5两个月,第一个月主要学习HTML和CSS,第二个月学完了原生的js,学完原生的js后对前端有了新的认识,了解了前端并不是 ...
原生js清空上一个元素内容_原生JS实现动态添加新元素、删除元素方法
1. 添加新元素动态添加新元素 Coffee Tea Coffee Tea var child = document.getElementsByClassName("child" ...
location.hash 原生js页面跳转/路由
使用vue开发项目非常方便,vue全家桶让你想实现什么功能都更加便捷,但是使用原生js,jquery开发,页面之间跳转怎么实现呢, 下面说一下window.location.hash,概念性的东西大家 ...
html js 动画效果,原生js html5 canvas 3D云动画效果
特效描述:原生js html5canvas 3D云动画效果.3D云效果,叼炸天!可用鼠标控制方向!本地要localhost才能正常演示代码结构 1. 引入JS 2. HTML代码 varying v ...
用原生js+html写一个像素鸟游戏
前言: 用html+js+css写一个面向对象板的像素鸟游戏看一下效果把: 游戏需引用的图片:(右键保存图片) bird.png land.png pipeDown.png pipeUp.png s ...
阿里巴巴2020暑期实习笔试题目及经验分享
声明:如果侵权,请联系立即删除!! 声明:如果侵权,请联系立即删除!! 声明:如果侵权,请联系立即删除!! 阿里巴巴2020暑期实习笔试题一.考试简介二.题目详情二.经验之谈一.考试简介考试 ...
小红书前端笔试题目+解答 2023.3.26
笔试得分60%一般通过,面试答对80%才能通过单选20题40分+编程3题60分知识点覆盖到HTML+CSS+JS+数据库+操作系统+数据结构与算法小红书:前端,计算机基础,常规算法(前端:计算机 ...
58校招成都站笔试题目
6好下午参加了58的校园招聘技术类笔试. 最后一个题目想看看大家是怎么看的. 是关于六隔定理的,意思是: 你和任何一个陌生人之间所间隔的人不会超过六个,也就是说,最多通过六个人你就能够认识任何一个陌生 ...

阿里巴巴校招2017前端笔试题目 -- 原生js/html5 实现一个路由

1.hash

2.history api

阿里巴巴校招2017前端笔试题目 -- 原生js/html5 实现一个路由相关推荐

最新文章

热门文章