web富客户端应用下,前端架构、系列(二)。

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

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

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

重新构思

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

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

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

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

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

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

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

如下图。。

重新构建我的架构

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

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

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

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

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

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

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

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

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

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

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

总结:

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

原文地址:https://www.cnblogs.com/tomblog/p/4749319.html