一.URL(hash):
1) http://www.example.com/index.html#location1 #后面的部分即为URl的hash, 是当前页面的锚部分,浏览器读取到这部分, 就会将这部分内容滚动到可视区域;
在本页面下实现跳转的两种方式:
<div name="location1">
<div id="location2">
2)#后面的内容只对浏览器端有用, 对服务器端没有作用
3)单单改变#后面的内容, 不会刷新页面; 但会在浏览器的访问历史中增加一条历史记录, 所以可以通过"后退按钮"返回上一个位置(单页应用)
二. 单页应用spa和多页应用mpa
多页应用: 每次加载都向服务器发送一个新的http请求, 得到一个新的html页面
单页应用: 只在首次进入的时候请求一个html 文件, 跳转页面的时候,js会感知到URL的变化,js会动态的将当前页面内容清除掉, 重新加载组件, 页面内容更新
| spa 单页应用 | mpa 多页应用 | |
| URL模式收 | http://xxx/shell.html#page1 和 http://xxx/shell.html#page2 |
http://xxx/page1.html和 http://xxx/page2.html |
| 用户体验 |
因为要加载html 和js, 所以首屏加载速度慢; 但是之后不需要再向服务器送请求,所以页面之间的切换速度快 |
每加载一个页面都要向服务器发送一个请求, 所以页面间切换速度慢;在移动体验尤其差 |
| SEO优化 |
因为搜索引擎只认识html里面的内容,不认识js里面的内容,而单页应用页面的内容是通过js渲染出来的, 所以网页在百度和谷歌上的排名会比较差 优化需要单独的方案, 比较麻烦 |
排名较好 SEO可以直接做 |
| 适用 | 对用户体验要求高德应用, 比如移动端的应用 | 需要排名,对搜索引擎友好的网站 |
三. MVC 和 MVVM
1) mvc : 所有的APP都只干一件事: controller(控制器)将model(模型)里的数据展示在vier(视图)上给用户看
2) mvvm(model-view-ViewModel) : 在mvc的年代, 手机APP处理的数据都很简单; 而现在手机的功能和数据结构都越来越复杂, controller无法胜任解析数据的任务; 面向对象的思想就是用类和对象来解决问题, 所以新家如一个类view-model 来处理数据解析的工作
mvvm 里面为什么没有 c 了呢: 因为c 的存在感被大大降低了;
加入vm 后, c 不用再直接处理m中的数据, 而只需要接收vm 处理 m 中数据后的结果
四. 前端路由
前端路由的本质是检测url的变化, 截取url地址, 然后解析来匹配路由规则;
前端路由多使用在单页面应用上, 因为spa 多是前后端分离开发, 所以后端自然不会给前端提供路由
实行前端路由的两种方式:
1) hashChange(2014年以前) : url 中的hash值发生变化时, 触发 hashChange 事件, 监控到hash的变化值, 根据url就可以 替换 dom , 实现页面的更新
2) html5 api : HTML5标准发布。多了两个 API，`pushState` 和 `replaceState`，通过这两个 API 可以改变 url 地址且不会发送请求。同时还有 `onpopstate` 事件。其实现原理和 hash相同
五.路由优化
管理文件和数据