前言:

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

  而现在,这些任务都抛给前端来做了。。

   前端的业务逻辑变得很复杂 有的时候甚至 比后端的更复杂。(当然这个也跟写接口的人水平有关。。。)

在这样的背景下面,如果还是以前那套 页面里面写js 或者哪里有效果写哪里的话。无论是实现,还是后面的维护都是一个很大的问题。。

  所以,我觉得富客户端web应用,很有必要组建一个自己的前端架构。来保证 项目的 低耦合,高内聚。

构思:  

  到处都听人家说架构。。那么,架构到底是什么呢。

  我这里把架构分成2个部分。。。

  

  1.这里的设计思路,就是指为了可重用代码、让代码更容易被他人理解、保证代码可靠性。一套模式化的 代码编写 规则。比如:大家比较熟悉的 mvc 模式。

  他其实就是一个设计思路。。

2.这里的必要组件,就是指包括 UI组件例如:日历插件。 也包括基础代码;比如:用与操作 数据的 一套基础方法 等等。

构建一个简单的架构:

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

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

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

3.交互层 这里包含了 所有交互逻辑 这个层面主要包括了 数据交互层 和 视觉交互层2个部分。

  第二步:我会把必要的组件进行集成 。

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

   2. 通过各种方式,生成一套适合这个项目的核心 库 。

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

总结:

  架构初期难免不够完善,以后陆续出文章完善吧。。谢谢观看。。

web富客户端应用下,前端架构问题。的更多相关文章

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

    序 我们在上面的文章中已经建立起来一个比较简单的 前端架构 虽然这个看上去很简陋. 不过毕竟也是思想的结晶. 从这一篇文章开始,我将陆续完善这一个前端架构.. 重新构思 上一篇我们把前端架构分为3个模 ...

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

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

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

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

  4. React-Navigation web前端架构

    React-Navigation 前端架构 准备 /*安装组件*/ npm install --save react-navigation npm install --save react-nativ ...

  5. IOS客户端UIwebview下web页面闪屏问题

    基于ios客户端uiwebview下的web页面,在其内容高度大于视窗高度时,如果点击超过视窗下文档的底部按钮,收缩内容高度,会发生闪屏问题. 外因是由文档的高度大于视窗的高度所致,本质原因未知. 解 ...

  6. 超级好用的前端开发测试Chrome插件-基于REST的Web服务客户端

    基于REST的Web服务客户端是一款功能强大的谷歌浏览器插件,使用基于REST的Web服务客户端(模拟REST客户端)可以让用户使用谷歌浏览器模拟REST请求来测试REST风格. 基于REST的Web ...

  7. 大型 web 前端架构设计-面向抽象编程入门

    https://mp.weixin.qq.com/s/GG6AtBz6KgNwplpaNXfggQ 大型 web 前端架构设计-面向抽象编程入门 曾探 腾讯技术工程 2021-01-04   依赖反转 ...

  8. RIA(富客户端)发展态势

    在过去的两到三年中,Web开发人员一直是想构建一种比传统HTML更丰富的客户端:这是一个用户接口,它比用HTML能实现的接口更加健壮.反应更加灵敏和更具有令人感兴趣的可视化特性.RIA技术的出现允许我 ...

  9. 前端架构-分层而治,铁打的MV流水的C

    大家好,我是Eluxjs的作者,Eluxjs是一套基于"微模块"和"模型驱动"的跨平台.跨框架『同构方案』,欢迎了解... 文前声明,以下推断和结论纯属个人探索 ...

随机推荐

  1. 【夸QT在十五】ctkPluginFrameWork插件系统Windows编译器

    采用ctkPluginFramework作为一个插件系统开发框架确实有很多优点. 有些车站最近收到的一封信,每个人都想用ctkPluginFramework但我不知道如何建立,本教程对谈ctkPlug ...

  2. APUE学习总结

    简介 本文总结了个人,一个数字,对应称号<APUE>第一版的每一章,但是,独立的二级标题和书,人需求进行编写. 3.文件I/O 本章所说明的函数常常被称之为不带缓存的I/O(与第5章中说明 ...

  3. 【Web探索之旅】第三部分第一课:服务器

    内容简介 1.第三部分第一课:服务器 2.第三部分第二课预告:IP地址和域名 第三部分第一课:服务器 大家好,欢迎来到[Web探索之旅]的第三部分.这一部分有不少原理,还是很重要的. 这一部分我们会着 ...

  4. Shell在大数据的魅力时代:从一点点思路百度大数据面试题

    供Linux开发中的同学们,Shell这可以说是一个基本功. 对于同学们的操作和维护.Shell也可以说是一种必要的技能,Shell.对于Release Team,软件配置管理的同学来说.Shell也 ...

  5. 使用dfs实现1至n全阵列

    使用dfs实现1至n全阵列. 我的方法是从所述第一位置开始,使用dfs看上去就像每个头号位置, 当某个位置.从小到大枚举1至n所有号码,打假说 尚未使用之前在这个位置上的几个选择这个号码.然后搜索下 ...

  6. linux 脚本測试网络速度

    example: ./netspeed eth0 1 #!/bin/bash 2   3 INTERVAL="1"  # update interval in seconds   ...

  7. 取缔Chrome装载电脑管家的广告过滤脚本代码

    今天Chrome调试脚本.加载在下面的脚本中找到的内容: /* 电脑管家chrome 广告过滤 */ var GJAD_CS = { elemhideElt : null, setElemhideCS ...

  8. VS找不到约束

    [问题叙述性说明] watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY3hsMDkyMQ==/font/5a6L5L2T/fontsize/400/fill/ ...

  9. Jenkins(二) 安装、新建Jobs与删除及SVN配置(转)

    官网首页(https://jenkins-ci.org/)就提供了windows版本的Jenkins安装包.可以自己下载一个用于学习.安装后自动打开http://localhost:8080,就可以看 ...

  10. Tomcat通过配置一个虚拟路径管理web工程

    关于虚拟路径.学问javaweb训练课程,如今,鉴于这种情况下老师. 当我们的项目,当在不同的文件夹项目.我们如何使用tomcat去管理web工程. 教师提出的解决方案是 使用虚拟路径方式,并按照实施 ...