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

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

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

重新构思

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

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

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

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

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

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

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

如下图。。

重新构建我的架构

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

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

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

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

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

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

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

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

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

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

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

总结:

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

web富客户端应用下,前端架构、系列(二)。的更多相关文章

  1. web富客户端应用下,前端架构问题。

    前言: 以前的工作大部分都是,前端做页面 稍微写几个js效果就算是 有复杂的效果 也没有涉及到 需要去调用后端数据的层面.总体来说,以前的页面逻辑会相对简单后端会做更多的事. 而现在,这些任务都抛给前 ...

  2. Windows系统下Memcached缓存系列二:CouchbaseClient(c#客户端)的详细试用,单例模式

    在上一篇文章里面 ( Windows系统下Memcached缓存系列一:Couchbase(服务器端)和CouchbaseClient(c#客户端)的安装教程 ),我们介绍了服务器端的安装和客户端的安 ...

  3. 我的前端架构之二--统一扩展Js方法

    我的前端架构汇总 MyJs_Core.js 这是一个核心的Js文件,它扩展了原生的Js方法.如下: Array对象: 1) indexOf 2) max 3) min 4) removeAt 5) i ...

  4. 前端进阶系列(二):css常见布局解决方案

    水平居中布局 margin+定宽 <div class="parent"> <div class="child">Demo</di ...

  5. Linux下ipv6配置系列

    Linux下ipv6配置系列一:如何配置Linux系统ipv6环境 Linux下ipv6配置系列二:如何为Nginx添加ipv6模块 Linux下ipv6配置系列三:如何为Nginx配置IPv6端口监 ...

  6. 我的前端架构(jquery)汇总

    目录 我的前端架构之一--页面作用域 我的前端架构之二--统一扩展Js方法 我的前端架构之三 -- 页面规范 我的前端架构之四 -- UI控件 我的前端架构之五 -- 一些方案实现 判断对象是否是 e ...

  7. 用“MEAN”技术栈开发web应用(一)AngularJs前端架构

    前言 不知何时突然冒出“MEAN技术栈”这个新词,听起来很牛逼的样子,其实就是我们已经熟悉了的近两年在前端比较流行的技术,mongodb.express.angularjs.nodejs,由于这几项技 ...

  8. 前后端分离之Web前端架构设计

    架构设计:前后端分离之Web前端架构设计 在前面的文章里我谈到了前后端分离的一些看法,这个看法是从宏观的角度来思考的,没有具体的落地实现,今天我将延续上篇文章的主题,从纯前端的架构设计角度谈谈前后端分 ...

  9. 【PC网站前端架构探讨系列】关于中小型PC网站前端架构方案的讨论与实践

    目   录 1.遇到的问题 2.目标 3.探讨 4.架构设想 5.流程 6.初步实现 7.存在问题 8.最后 遇到的问题 我在这个系列上篇文章 已经讲解并开始逐步应用模块化思想,不知大家还记不记得,题 ...

随机推荐

  1. Codeforces Round #191 (Div. 2) D. Block Tower

    D. Block Tower time limit per test 2 seconds memory limit per test 256 megabytes input standard inpu ...

  2. 什么是流利语法Fluent Syntax

     出处:http://blog.csdn.net/u010019717 author:孙广东      时间:2015.3.18   23:00 编程新概念:什么是流利语法fluent synta ...

  3. iOS Crash获取闪回日志和上传server

    首先我们整理常常会闪退的异常哪些:数组越界.空引用.引用没有定义方法.内存空间不足等等. 怎样获取crash闪退日志 -- 工具查看 先看第一个问题怎样查看,我搜索的方法有下面几个: 第一个方法:XC ...

  4. wcf例子01

    一.概述 Windows Communication Foundation(WCF)是由微软发展的一组数据通信的应用程序开发接口,可以翻译为Windows通讯接口,它是.NET框架的一部分.由 .NE ...

  5. VS2010程序打包操作

    摘录:http://www.cnblogs.com/daban/archive/2012/06/27/2565449.html   1.  在vs2010 选择“新建项目”----“其他项目类型”-- ...

  6. twrp gui/actions.cpp 中的功能实现 tw_action ,tw_action_param ,第二章

    继续分析 twrp ui.xml中的相关内容,以<page name="reboot">为讲解内容 <object type="button" ...

  7. 【原创】leetCodeOj --- Intersection of Two Linked Lists 解题报告(经典的相交链表找交点)

    题目地址: https://oj.leetcode.com/problems/intersection-of-two-linked-lists/ 题目内容: Write a program to fi ...

  8. 【Linux】lvm基础操作

    新增两块硬盘,来进行实验: [root@jp ~]# fdisk -l Disk /dev/sda: 107.3 GB, 107374182400 bytes 255 heads, 63 sector ...

  9. DHCP Option 60 认识

    原文地址: http://blog.163.com/chenqioulin_1983/blog/static/83216232010109104430251/   首先还是看看RFC咋说的吧.DHCP ...

  10. Android搜索芽发展clientVersion1.0结束(过程和结果显示)

    本文原:http://blog.csdn.net/minimicall 转载标明. 博士生.找我,我希望有一个合作伙伴.为了帮助他解决了移动终端产品.他给了我他的想法的叙述性说明,搜索布.要搜索布图像 ...