zoukankan      html  css  js  c++  java
  • 论单页Web应用和RESTful架构

    单页Web应用

    概述

    单页Web应用并不是突然诞生的一门新技术,而是web展示的一种新的尝试。它将所有的动作局限于一个Web页面,在加载站点首页的时候就加载站点需要的JavaScript和CSS。单页Web应用不会随着用户的操作而重新加载页面或者进行页面跳转,而是利用默默执行在后端的JavaScript动态的变换HTML内容,从而对用户动作做出响应。单页Web应用可以提供非常流畅的用户体验,并且在移动端Hybrid应用中有着Native应用的体验。

    原理

    根据RFC 1738中对URL的描述,URL可以分解为protocol://domain/path:port?param#hash

    即一个URL通常由协议,域名,路径,端口,参数,散列组成。

    其中如果更改其中的协议,域名,路径,端口,参数都会引起页面的重新加载,但是更新其中的散列值却不会引起页面的重新加载。以前页面中的散列值通常作为定位页面内容的瞄点,但是现在更进一步,散列可以作为切换页面的凭证。通过监听浏览器url中散列值得变换,就可以切换到不同的页面上去。

    知识点

    页面渲染

    一般来说进行一次有着以下流程:

     

    所以不论对于客户端还是服务端来说HTTP请求是需要有代价的,能省则省啊。单页Web应用只在第一次加载页面时,发起页面中资源的请求,后续都通过Ajax异步请求数据,在减少HTTP请求数量的同时也增强了用户体验。

    页面间传值

    在ASP.Net中有N多种页面间传值的方法,但是在单页面应用程序中方法就相对少了很多。我推荐的是采用LocalStorage暂存页面间参数,同时LocalStorage也可以存储Ajax请求的参数和结果,这样可以当做一种缓存来使用。

    数据源

    将页面和数量分离出来,通过Ajax来获取RESTful API提供的JSON数据。下文RESTful规约中会详细讨论。

    单页Web应用优缺点

    单页Web程序的出现是富客户端发展的必然结果,但是该技术也是有着些局限性,所以采用之前需要了解清楚它的优缺点。

    优点:

    1. 良好的交互体验

      用户不需要重新刷新页面,获取数据也是通过Ajax异步获取,页面显示流畅。

      2. 良好的前后端工作分离模式

      单页Web应用可以和RESTful规约一起使用,通过REST API提供接口数据,并使用Ajax异步获取,这样有助于分离客户端和服务器端工作。更进一步,可以在客户端也可以分解为静态页面和页面交互两个部分。

    缺点:

      1. SEO难度较高

      由于所有的内容都在一个页面中动态替换显示,所以在SEO上其有着天然的弱势,所以如果你的站点对SEO很看重,且要用单页应用,那么就做些静态页面给搜索引擎用吧。

      2. 前进、后退管理

      由于单页Web应用在一个页面中显示所有的内容,所以不能使用浏览器的前进后退功能,所有的页面切换需要自己建立堆栈管理。

      3. 初次加载耗时多

      为实现单页Web应用功能及显示效果,需要在加载页面的时候将JavaScript、CSS统一加载,部分页面可以在需要的时候加载。所以必须对JavaScript及CSS代码进行合并压缩处理,如果使用第三方库,建议使用一些大公司的CDN。

    RESTful架构

    理解RESTful

    RESTful的提出主要是为了统一个结构清晰、符合标准、易于理解、扩展方便的架构。其可以主要理解为“资源表现层状态转化”。资源一般具备“新增”、“修改”,“查看”和“删除”是种状态,对应于HTTP Method为POST,PUT,GET,DELETE。

    总的来说RESTful架构中通过一个URI表示一个资源,通过不同的Method进行资源的操作。

    例如联系人信息按RESTful架构设计URI如下:

    获取单个用户下所有联系人信息: GET- http://xxx/uid/contacts/

    新增单个用户下的某个联系人信息:POST- http://xxx/uid/contacts/

    获取单个用户下的某个联系人信息:GET- http://xxx/uid/contacts/cid

    修改单个用户下的某个联系人信息:PUT- http://xxx/uid/contacts/cid

    删除单个用户下的某个联系人信息:DELETE- http://xxx/uid/contacts/cid

    CORS(跨域请求资源)

    采用RESTful架构可以为不同的平台提供资源信息,但是如果是以公开此资源让第三方站点引用的话,就会存在跨域的问题。对于跨域访问RESTful接口请参考之前写的《一个Option请求引发的深度解析》一文,这里就不再阐述了。

    參考:

    http://msdn.microsoft.com/zh-cn/magazine/cc507641.aspx

    http://www.ibm.com/developerworks/cn/web/1302_xiaohh_onepagedojo/

    http://www.ietf.org/rfc/rfc1738.txt

    http://lovenblog.com/ued-2/276/

    http://www.ruanyifeng.com/blog/2011/09/restful.html

  • 相关阅读:
    vue响应式原理之Observer、Dep、Watcher
    vscode 常用插件
    脚手架搭建vue项目
    搭建框架
    select 自匹配问题
    Winform 根据Point截图并保存到指定路径
    C# Screen 类(多屏幕开发)
    C# WindowsService安装与卸载
    WebService WSDL动态访问
    C# 操作ini文件
  • 原文地址:https://www.cnblogs.com/virtual/p/3754794.html
Copyright © 2011-2022 走看看