前端架构-多页面应用

5.1 为什么不需要单页面应用

从技术的复杂度与实施成本角度来评价单页应用：

• 构建成本
• 学习成本
• 后台渲染成本
• 应用架构的复杂性

5.2 简单的多页应用开发

1. 选择UI库及框架。
2. JQuery和Bootstrap仍然好用。快速开发的两大利器。
3. 不使用框架：You Don’t Need xxx。更加灵活，更容易积累经验。

5.3 复杂多页面应用的开发

需要理解的框架特性、原理：

5.3.1 模板与模板引擎原理

5.3.2 基于字符串的模板引擎设计

先渲染出HTML，再将HTML插入DOM节点中

5.3.3 基于JavvaScript的模板引擎设计

• 将模板编译为某种DSL(领域特别语言——代码+数据)；
• 使用时，调用JavaScript渲染DOM节点；
• 变更时，通过Diff算法替换对应的DOM节点

比如成熟的开源框架Virtual DOM

5.3.4 双向绑定原理及实践

双向绑定的实现方式：

• 手动绑定。
• 脏检查机制。发生指定事件时，遍历相应的元素，进行数据比较，然后对变化的数据进行操作。
• 数据劫持。利用对象原型属性setter、getter劫持。

5.3.5 前端路由原理及实践

后台的路由映射
前端的路由控制

5.3.6 两种路由类型

• History API。通过History方法无刷新更改地址栏，配合Ajax更新数据。由于基于真实的URL操作，需要配置好相应的HTTP服务器。基本方法：
  • back
  • forward
  • go
  • pushState
  • replaceState

// history示例
window.onpopstate = function(event) {
  alert(`location: ${document.location}, state: ${JSON.stringify(event.state)}`)
}

history.pushState({page: 1}, "title 1", "?page=1")
history.pushState({page: 2}, "title 2", "?page=2")
history.replaceState({page: 3}, "title 3", "?page=3")
history.back() // alerts "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back() // alerts "location: http://example.com/example.html, state: null"
history.go(2)  // alerts "location: http://example.com/example.html?page=3, state: {"page":3}"

• Hash。location.hash值（#后面的内容）改变时，监听相应的事件，绑定路由与函数的映射关系——window.addEventListener(‘hashchange’,callback,false)。

一个简单的hash路由示例，最好配合JavvaScript的模板引擎，并且需要有如下几个功能函数：

• add，用于创建路由集（Map映射），添加路由key及对应的函数
• refresh，根据路由集，跳转到相应路由处理函数
• load，初始化路由监听事件。
• navigate，跳转到具体路由函数

5.3.7 避免散弹式架构

在编写多页面应用的时候，不同的函数可能都在操作同一个节点，而这些函数可能位于不同的代码文件中，故而可以称之为散弹式架构。

降低散弹式架构的方式：

• 统一交互处理。
• 按页面拆分脚本。
• 事件绑定采用ID而非class

---

《前端架构：从入门到微前端》——知识点整理。