zoukankan      html  css  js  c++  java
  • web富客户端应用下,前端架构、系列(二)。

    我们在上面的文章中已经建立起来一个比较简单的 前端架构 虽然这个看上去很简陋。

    不过毕竟也是思想的结晶。

    从这一篇文章开始,我将陆续完善这一个前端架构。。

    重新构思

    上一篇我们把前端架构分为3个模块;

    他们分别是 数据层,模板层,交互层。。。

    这样情况下 ,确实会 比那种混杂在一起的 纯js页面 要更有结构化 更利于维护。。

    这个也是借鉴了 MVC 模式的逻辑进行构建的。。

     但是,在实践开发过程中。我发现,仅仅是这样的分层 在交互层这一块显然还是有点杂。。在这一层 既要处理 数据逻辑 又要处理视觉逻辑。

    显然,会使控制层变得过于复杂。在维护上 ,也会变得 更难维护。。

    因此,我在这个基础上 进行重新拆分。。

    如下图。。

    重新构建我的架构

      第一步:我首先 把所有的模块抽象成 5个层面 。

      1.数据层 页面内部通过 xxxData={} 这个全局对象包装。这里包含了整个模块 必要的 数据。。

          2.模板层 这里包含了所有 模块的显示规则 这里就是比较普通的模板组件 可以通过抽离 文件的形式模块化。。

          3.视觉交互层(也叫视觉控制层) 这里包含了 所有视觉交互逻辑 。

          4.数据交互层(数据控制层) 这里包含了 所有数据交互逻辑 。

      5.观察者,观察数据交互层的变化并通知 视觉交互层,更新视觉效果 。

      第二步:还是把必要的组件进行集成 。

      1. 我会寻找合适的 模板 引擎 ,ui 组件 等 通过我自己的方式进行按模块集成到 我的核心库里面。

      (我暂时使用的是 jquey.tmpl 模板,这个没啥要求顺手就行。公用库 也是这样,。)

        2. 通过各种方式,生成一套适合这个项目的核心 库(多集成一些公用方法。) 。

          最后一步:在项目中完善整体的架构,丰富整个架构体系。并进行总结。以便后续改进。。

    总结:

      由于时间仓促(质量不是很高见谅)本来打算周末发的。。只能先发了。。谢谢观看。。

  • 相关阅读:
    android touch screen keyboard input移植记录
    共享内存示例代码如下:
    AF
    AF
    etc/fstab的内容是什么意思? 转载
    android 中如何添加新的键值,实现更多功能
    etc/fstab的内容是什么意思? 转载
    IPC框架分析 Binder,Service,Service manager
    共享内存示例代码如下:
    HDU 6125 Free from square (状压DP+分组背包)
  • 原文地址:https://www.cnblogs.com/tomblog/p/4749319.html
Copyright © 2011-2022 走看看