zoukankan      html  css  js  c++  java
  • 《SPA设计与架构》之MV*框架

    原文

      简书原文:https://www.jianshu.com/p/39f8f0aefdc2

    大纲

      1、认识MV*框架

      2、传统UI设计模式
      3、对框架的本质认识——框架有效性和框架分类
      4、MV*基础概念
      5、为什么要用MV*框架

    1、认识MV*框架

    MV*术语表示基于浏览器的一系列框架,用于构建应用程序的关注分离。这些框架立足于传统
    的UI设计模式,但在整个实现过程中,其遵循某种模式的程度是变化的。
    
        在MV*概念中,M代表模型(Model),V代表视图(View)
        
        模型:典型的模型包含了数据、业务逻辑以及验证逻辑。从概念上讲,其代表诸如某个客
    户或某条支付之类的东西。模型从不关心数据的展示
        
        视图:视图即用户所见以及交互的界面,是模型数据的可视化呈现。有赖于框架其他部分
    (这些部分负责用户交互的更新和相应),其可以是一个简单结构:或者同样有赖于MV*实现,
    其也包含逻辑。
        
        第三部分:传统UI设计模式包含了第三个组成部分,该部分帮助管理模型与视图间的关系,
    以及模型、视图与用户间的关系。尽管大多数MVC/MVVM结构的现代Web UI设计框架都包含了
    模型与视图的一些概念,但第三个组成部分在名称及履行职责上却不尽相同。因此,人们通常用
    通配符*来泛指这个组成部分
    

    2、传统UI设计模式

    2.1、MVC模式

      MVC模式包含模型、视图和控制器
      控制器:控制器是应用程序的入口点,接受来自UI控件的信号。它还包含了处理用户输入的逻辑,以及基于接受到的输入,发送命令给模型以更新模型状态的处理逻辑。
      与控制器的交互引发一个事件链,最终产生视图更新。在此模式中,视图能够捕获模型变化,并在观察到模型改变时 进行视图更新。

    2.2、MVP模式

       MVC的变体结构,模型-视图-表示器,简称MVP。
      该模式的出发点是进一步解耦模型与MVC其他两个组件的关系。在MVP里,类似控制器的对象与视图一起表示用户界面或呈现(Presentation),模型则继续表示数据管理。MVP里没有充当守护者角色的控制器。每个视图都由一个被称为表示器的组件来支持
      表示器:表示器包含视图的展示逻辑。视图通过将职责委托给表示器,其仅仅用于相应用户交互。表示器直接反问模型以获取任何更新,并将数据更新传给视图。在这种方式下,表示器在模型和视图之间扮演了中间人的角色。
      表示器负责保持视图与模型的更新。在视图与模型中间建立一个对象,有利于视图和模型聚焦于各自的职责。

     

    2.3、MVVM模式

       如同MVP一样,MVVM的视图也是入口点,而且MVVM的模型也有一个对象位于模型与视图之间。在此模式中,第三个组成部分被称为视图模型:
      视图模型:视图模型是视图的模型或展示代码,此外,其还是模型与视图之间的中间人。所有定义及管理视图的代码都包含在视图模型中。其包含了数据Property及展示逻辑。在模型中,每个需要在视图里得到反映的数据点,都映射到视图模型的对应Property上。就像MVP的表示器,每个视图都由一个视图模型所支持。视图模型能够掌握视图与模型的变化,并保持两者同步。

     

    3、对框架的本质认识——框架有效性和框架分类

        框架有效性优于框架分类
        视图用传统设计模式来一一匹配现今的MV*是徒劳的
        我希望看到开发者构建经过良好设计并遵循关注分离的强大应用,而非看到他们浪费时间
    争论什么MV*的废话。
        大多数MV*框架实现知识松散地以原始传统设计模式为基础进行设计,了解这一点,就能认
    识到框架属于哪种模式并不重要
    

    4、MV*基础概念

        模型:模型代表应用数据。其包含了访问及管理数据所需的Property,处理逻辑与验证。
    模型常常还包含了业务逻辑。
        视图:视图是用户所见并与之交互的部分,模型在这里得以可视化呈现。在某些MV*实现中
    ,视图还可能包含展示逻辑。
        模板:模板是视图的可复用构件块,用来处理视图中的动态内容。其包含数据的占位符以
    及其他模板内容渲染的指令。在SPA应用中通常会用到一个或多个模板来创建视图。
        绑定:该属于描述模型数据模板元素的关联处理。某些MV*实现中还提供了其他类型绑定,
    如事件与CSS样式间的绑定。
        下图(2.6)便展示了一个全局视图,用来描述上述概念在SPA应用中的相互关系。这些概念
    可能是SPA应用构建过程所需的最基本要求了。其他的一些特性,注入路由,也很常见(甚至必
    须),但未必得以普遍提供。
    

      

    4.1、模型

        模型常常包含了业务逻辑与验证,其也代表了应用数据。然而,模型所包含数据不应该
    是无关信息的大杂烩。之所以称之为模型,是因为它是一个对应用逻辑而言很重要的、显示存在
    的实体。
        每个模型都代表现实中的某个对象。
        系统越大越复杂,模型类型也就越多。
        模型对照现实世界的失误,其包含的不仅是数据,还有行为。
    

    4.2、绑定

        绑定(Binding):直接的意思是把两个东西绑/连接在一起。该术语指的是将视图的UI元素
    与代码相关部分联系起来(比如某个模型的数据)
        绑定内容并非仅限于数据。不同的库和框架支持不同的绑定类型。样式、属性以及click
    这样的事件都可以绑定到UI。依赖于所选框架,绑定类型也不尽相同。
    

    4.3、模板(Template)

        模板是HTML片段,其作为视图如何渲染的方式。渲染方式可以额外包含多种绑定及其他指
    令,决定模板及其模型数据如何处理。顾名思义,模板是可重用的。
        一个视图由一个或多个模板创建,而复杂视图通常有多个渲染模板同时呈现。无论是内建
    或借助外部库,MV*框架中将模板和模型数据结合起来的那部分,通常被称为模板引擎
    (Template Engine)
    

    4.4、视图

        如讨论模板时所述,想Knockout或AngularJs这类的框架在模板中使用声明式绑定,通常
    采用在HTML元素上添加特定属性的方式。在这些框架里,模板和视图差不多是同一类东西。因
    此,当使用这些框架构建视图时,需要考虑采取内嵌模板还是按需下载的方式。这更像一个设
    计问题。
    

    5、为什么要用MV*框架

     5.1、传统设计模式与MV*框架

        传统设计模式包括MVC、MVP、MVVM等设计模式
        MV*框架指的是概念中融入了MVC、MVP、MVVM等设计模式的框架,但是由于某个框架有
    时候并不能以某种设计模式完全概括,换句话说,一个框架中可能糅合了一个、两个甚至三个的
    设计模式的思想。需要注意的,对于框架本身所展示的设计模式哪种并不是最重要的,重要的
    是框架本身基于的是MV*这些传统设计模式的思想而实现某些对底层功能的封装。
    

    5.2、关注分离

        MV*框架提供一种手段,基于底层设计模式,将JavaScript对象划分为不同角色,代码的
    每部分都可以各司其职。
        
        代码的每部分都可以专注于各自职责——这个关注分离的首要概念有利于设计针对特定目的
    的对象。模型可以专注于数据;视图可以专注于数据展现;而诸如控制器、表示器以及视图模型
    等组成部分则可以解耦模型与视图,并维持两者间的通信。越是将对象聚焦于单一目的,编码、
    测试及上线后的更改也就变得越容易。
        
        MV*框架通过特定机制,要求我们遵循特定方式编写代码以达到松耦合目的,这样就降低了
    意大利面条式代码(指的是htmljsjsp等代码相互交缠,各种绑定各种紧密耦合的代码)产生
    的可能性。
    
        其次,通过移除内嵌的JavaScript和CSS代码,能够尽可能保持HTML代码的干净。同时避
    免JavaScript与DOM元素间的紧耦合。
    

    5.3、可扩展性

        MV*框架内在强化了关注分离的概念。反过来,这也使得项目更具有可扩展性,因为松耦合
    的对象往往稍加调整就能够在其他对象中重用。
        在MV*中,对象还可以完全交换处理以替换成新功能,同时不会再项目中产生巨大的连锁反
    应。这使得项目成长方式更优雅,因为代码改变的负面影响要小得多。
    

      

  • 相关阅读:
    iSCSI又称为IPSAN
    文档类型定义DTD
    HDU 2971 Tower
    HDU 1588 Gauss Fibonacci
    URAL 1005 Stone Pile
    URAL 1003 Parity
    URAL 1002 Phone Numbers
    URAL 1007 Code Words
    HDU 3306 Another kind of Fibonacci
    FZU 1683 纪念SlingShot
  • 原文地址:https://www.cnblogs.com/shcrk/p/9286804.html
Copyright © 2011-2022 走看看