web富客户端应用下,前端架构、系列(二)。
序
我们在上面的文章中已经建立起来一个比较简单的 前端架构 虽然这个看上去很简陋。
不过毕竟也是思想的结晶。
从这一篇文章开始,我将陆续完善这一个前端架构。。
重新构思
上一篇我们把前端架构分为3个模块;
他们分别是 数据层,模板层,交互层。。。
这样情况下 ,确实会 比那种混杂在一起的 纯js页面 要更有结构化 更利于维护。。
这个也是借鉴了 MVC 模式的逻辑进行构建的。。
但是,在实践开发过程中。我发现,仅仅是这样的分层 在交互层这一块显然还是有点杂。。在这一层 既要处理 数据逻辑 又要处理视觉逻辑。
显然,会使控制层变得过于复杂。在维护上 ,也会变得 更难维护。。
因此,我在这个基础上 进行重新拆分。。
如下图。。
重新构建我的架构
第一步:我首先 把所有的模块抽象成 5个层面 。
1.数据层 页面内部通过 xxxData={} 这个全局对象包装。这里包含了整个模块 必要的 数据。。
2.模板层 这里包含了所有 模块的显示规则 这里就是比较普通的模板组件 可以通过抽离 文件的形式模块化。。
3.视觉交互层(也叫视觉控制层) 这里包含了 所有视觉交互逻辑 。
4.数据交互层(数据控制层) 这里包含了 所有数据交互逻辑 。
5.观察者,观察数据交互层的变化并通知 视觉交互层,更新视觉效果 。
第二步:还是把必要的组件进行集成 。
1. 我会寻找合适的 模板 引擎 ,ui 组件 等 通过我自己的方式进行按模块集成到 我的核心库里面。
(我暂时使用的是 jquey.tmpl 模板,这个没啥要求顺手就行。公用库 也是这样,。)
2. 通过各种方式,生成一套适合这个项目的核心 库(多集成一些公用方法。) 。
最后一步:在项目中完善整体的架构,丰富整个架构体系。并进行总结。以便后续改进。。
总结:
由于时间仓促(质量不是很高见谅)本来打算周末发的。。只能先发了。。谢谢观看。。
web富客户端应用下,前端架构、系列(二)。的更多相关文章
- web富客户端应用下,前端架构问题。
前言: 以前的工作大部分都是,前端做页面 稍微写几个js效果就算是 有复杂的效果 也没有涉及到 需要去调用后端数据的层面.总体来说,以前的页面逻辑会相对简单后端会做更多的事. 而现在,这些任务都抛给前 ...
- Windows系统下Memcached缓存系列二:CouchbaseClient(c#客户端)的详细试用,单例模式
在上一篇文章里面 ( Windows系统下Memcached缓存系列一:Couchbase(服务器端)和CouchbaseClient(c#客户端)的安装教程 ),我们介绍了服务器端的安装和客户端的安 ...
- 我的前端架构之二--统一扩展Js方法
我的前端架构汇总 MyJs_Core.js 这是一个核心的Js文件,它扩展了原生的Js方法.如下: Array对象: 1) indexOf 2) max 3) min 4) removeAt 5) i ...
- 前端进阶系列(二):css常见布局解决方案
水平居中布局 margin+定宽 <div class="parent"> <div class="child">Demo</di ...
- Linux下ipv6配置系列
Linux下ipv6配置系列一:如何配置Linux系统ipv6环境 Linux下ipv6配置系列二:如何为Nginx添加ipv6模块 Linux下ipv6配置系列三:如何为Nginx配置IPv6端口监 ...
- 我的前端架构(jquery)汇总
目录 我的前端架构之一--页面作用域 我的前端架构之二--统一扩展Js方法 我的前端架构之三 -- 页面规范 我的前端架构之四 -- UI控件 我的前端架构之五 -- 一些方案实现 判断对象是否是 e ...
- 用“MEAN”技术栈开发web应用(一)AngularJs前端架构
前言 不知何时突然冒出“MEAN技术栈”这个新词,听起来很牛逼的样子,其实就是我们已经熟悉了的近两年在前端比较流行的技术,mongodb.express.angularjs.nodejs,由于这几项技 ...
- 前后端分离之Web前端架构设计
架构设计:前后端分离之Web前端架构设计 在前面的文章里我谈到了前后端分离的一些看法,这个看法是从宏观的角度来思考的,没有具体的落地实现,今天我将延续上篇文章的主题,从纯前端的架构设计角度谈谈前后端分 ...
- 【PC网站前端架构探讨系列】关于中小型PC网站前端架构方案的讨论与实践
目 录 1.遇到的问题 2.目标 3.探讨 4.架构设想 5.流程 6.初步实现 7.存在问题 8.最后 遇到的问题 我在这个系列上篇文章 已经讲解并开始逐步应用模块化思想,不知大家还记不记得,题 ...
随机推荐
- 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 ...
- 什么是流利语法Fluent Syntax
出处:http://blog.csdn.net/u010019717 author:孙广东 时间:2015.3.18 23:00 编程新概念:什么是流利语法fluent synta ...
- iOS Crash获取闪回日志和上传server
首先我们整理常常会闪退的异常哪些:数组越界.空引用.引用没有定义方法.内存空间不足等等. 怎样获取crash闪退日志 -- 工具查看 先看第一个问题怎样查看,我搜索的方法有下面几个: 第一个方法:XC ...
- wcf例子01
一.概述 Windows Communication Foundation(WCF)是由微软发展的一组数据通信的应用程序开发接口,可以翻译为Windows通讯接口,它是.NET框架的一部分.由 .NE ...
- VS2010程序打包操作
摘录:http://www.cnblogs.com/daban/archive/2012/06/27/2565449.html 1. 在vs2010 选择“新建项目”----“其他项目类型”-- ...
- twrp gui/actions.cpp 中的功能实现 tw_action ,tw_action_param ,第二章
继续分析 twrp ui.xml中的相关内容,以<page name="reboot">为讲解内容 <object type="button" ...
- 【原创】leetCodeOj --- Intersection of Two Linked Lists 解题报告(经典的相交链表找交点)
题目地址: https://oj.leetcode.com/problems/intersection-of-two-linked-lists/ 题目内容: Write a program to fi ...
- 【Linux】lvm基础操作
新增两块硬盘,来进行实验: [root@jp ~]# fdisk -l Disk /dev/sda: 107.3 GB, 107374182400 bytes 255 heads, 63 sector ...
- DHCP Option 60 认识
原文地址: http://blog.163.com/chenqioulin_1983/blog/static/83216232010109104430251/ 首先还是看看RFC咋说的吧.DHCP ...
- Android搜索芽发展clientVersion1.0结束(过程和结果显示)
本文原:http://blog.csdn.net/minimicall 转载标明. 博士生.找我,我希望有一个合作伙伴.为了帮助他解决了移动终端产品.他给了我他的想法的叙述性说明,搜索布.要搜索布图像 ...