关于前端:路由-前后端渲染-url-hash-和-html5-history

33次阅读

共计 1018 个字符,预计需要花费 3 分钟才能阅读完成。

路由

  • 路由(routing)就是通过互联的网络把信息从源地址传输到目标地址的流动
  • 路由器提供了两种机制:路由和传送

    • 路由是决定数据包从 起源 目的地 的路径
    • 转送将 输出端 的数据转移到适合的 输入端
  • 路由中有一个十分重要的概念叫路由表

    • 路由表实质上就是一个映射表,决定了数据包的指向
  • 后端路由阶段

    • 后端解决 URL 和页面之间的映射关系
    • 每个页面有本人对应的网址,就是 URL
    • URL 发送到服务器,服务器会通过正则对该 URL 进行匹配,并且最初交给一个 Controller 进行解决
    • Controller 进行各种解决,最终生成 HTML 或者数据,返回给前端
    • 这就实现一个 IO 操作
  • 前后端拆散阶段

    • 随着 AJAX 呈现,有了前后端拆散的开发模式
    • 后端只提供 API 来返回数据,前端通过 AJAX 获取数据,并且能够通过 JavaSCRIPT 将数据渲染到页面上
    • 这样做最大的长处就是前后端责任清晰,后端专一于数据,前端专一于交互和可视化上
    • 并且当挪动端呈现后,后端不须要进行任何解决,仍然应用之前的一套 API 即可

前端渲染

  • SPA 页面

    • 单页面富利用,整个网页只有一个 html 页面
  • 浏览器中显示的网页中的大部分内容,都是由前端写的 js 代码,在浏览器中执行,最终渲染进去的网页
  • 益处:网络传输数据量小。不占用服务端运算资源(解析模板),模板在前端(很有可能仅局部在前端),改构造变交互都前端本人来了,改完本人调就行。
  • 害处:前端耗时较多,对前端工作人员程度要求绝对较高。前端代码较多,因为局部以前在后盾解决的交互逻辑交给了前端解决。占用少部分客户端运算资源用于解析模板。

后端渲染

  • 服务器间接生产渲染好对应的 HTML 页面, 返回给客户端进行展现。
  • 益处:前端耗时少,即缩小了首屏工夫,模板对立在后端。前端(绝对)省事,不占用客户端运算资源(解析模板)
  • 害处:占用服务器资源。

url 的 hash 和 html5 的 history

  • URL 的 hash

    • URL 的 hash 也就是锚点(#),实质上是扭转 window.location 的 href 属性
    • 咱们能够通过间接赋值 location.hash 来扭转 href,然而页面不产生刷新
    • location.hash = ‘aaa’
  • HTML5 的 history

    • history.pushState({}, .. , ‘sss’) // 可返回
    • history.replaceState({},”,’111′) // 不可返回
    • history.go(-1) = history.back
    • history.forward() = history.go(1)
正文完
 0