WEB开发模式浅析
WEB技术随着互联网的崛起而崛起,又随着移动互联网的发展而呈现更加多样化的趋势。
- 黑暗时代:大约在2005年以前,所谓的WEB开发主要还是美工的活,HTML/CSS占主导,Dreamwaver做为页面设计三剑客之一,成为大多数WEB程序员的必备利器。Javascript能不用就不用,能少用就少用,浏览器只考虑IE。那时候的Javascript显得非常异类、原型继承、语法灵活多变、调试困难(还记得在IE中调试Javascript的痛苦经历吗?),一般程序员都不愿意干前端的活。好不容易出来一个Bindows,被许多程序员捧为神器。但稍加试用就发现慢如蜗牛,问题不断,根本不能实用。由此可见那时的浏览器也不重视Javascript引擎的优化。那是WEB开发的黑暗时代。
- 文艺复兴:到了2005年左右,大家慢慢也都注重用户体验了,AJAX技术也日益普及了,WEB2.0的提法也甚嚣尘上,自己的应用若不贴上WEB2.0的标签都不好意思和人打招呼了。那时候的Java社区在Struts/Spring/Hibernate的带领下风风火火、异常活跃。此时,Ruby On Rails出现了!其约定优先的理念,简直让SSH模式下繁杂的XML配置方式无地自容。在新技术新理念层出不穷的大背景下,jQuery于2006年横空出世。jQuery的出现,彻底终结了WEB开发的黑暗时代,迎来了WEB领域的“文艺复兴”。Ajax技术的广泛运用、WEB标准化的逐步推进、浏览器市场的缓慢变化,等等,都是这种“复兴”的佐证。
- 百花齐放:如今,在距离Apple于2007年推出首部IPhone以来,时间已过去6年多,这正是移动互联网从起步到高速发展的年份。对用户体验的极致追求,导致WEB技术发生了更加深刻的变化。Javascript走向服务端成就了node.js,而Flush技术由于商业和技术的原因似乎正逐步走向衰落,各种基于Javascipt的MVC框架层出不穷,流式布局、响应式布局、自适应、拟物化设计、扁平化设计等概念不断涌现,现今正是WEB领域百花齐放的时代。
现在做WEB开发,也如同做Java服务端开发一样,要在众多的基础库、开发框架当中做出合适的选择:
- jQuery:以简洁的链式操作而闻名,封装了底层浏览器的API,屏蔽浏览器实现的差异,是当前最流行的基础库;不过随着HTML5标准逐渐被各大浏览器厂商所接受,jQuery的作用也大打折扣,其发行包大小也常常为人们所诟病。
- mootools:当年与jQuery一较高下的框架有prototype.js和mootools。当年prototype得到ruby社区的大力支持,一度与jQuery较量得不相上下。而mootools则得到Java阵营的支持,虽然比不上前两者,但由于其api设计比较符合java程序员的习惯,因此也发展得风生水起。前段时间看到prototype作者撰文承认了prototype的失败,如今在底层库的选择上还是jQuery一家独大的局面;
- dojo:dojo是类似于java swing的完整框架,既包含了基础库,也包含了大量的UI组件。尽管dojo得到了struts2的大力支持,但还是无法扭转其江湖地位;
- extjs:类似当年的Bindows,在WEB中实现类似桌面程序的效果。当年Bindows因为性能问题惨死沙场,只能说它生不逢时。不过extjs如今的命运也让人堪忧,一成不变的界面风格和操作模式其实是违背WEB千变万化的本质特征的;
- easyui:基于jQuery的声明式UI组件库。所谓声明式组件,是指不需要象传统桌面程序一样通过写代码的方式创建和设置组件,只需要遵循最原始的HTML声明式理念,在原始HTML Tag上设置属性就能得到想要的效果;类似easyui的国产框架DWZ也是类似思路;
- backbone:基于Javascript的MVC框架,MVC理念在浏览器中的完整实现。可以想见,这类框架在处理客户端多视图数据同步方面具有很大的优势,可以大大简化客户端展现及交互逻辑的开发过程;
选择上述某一种或某几种基础库或开发框架,就意味着选择了一种开发模式。从开发模式的角度我们可简单总结一下:
- 传统的HTML+CSS+JS模式:这种模式下,开发人员需要编写大量的HTML代码,用于实现页面的展现逻辑,编写JS代码用于实现交互逻辑。这是最传统的开发方式,同时也是运用最广泛的开发方式,不论企业级管理系统还是电商类网站、拟或手机WEB应用,都可以采用这种方式实现;该方式的缺点是实现单页面应用或复杂交互应用时JS代码量较大;
- 桌面应用开发模式:如EXTJS,页面全部使用JS来实现,开发人员基本不需要编写HTML代码,大量的展现逻辑和交互逻辑使用JS代码完成。这种方式用于实现单页面应用非常方便;但要求开发人员对JS及开发框架的组件库有深入了解;思维模式上要适应基于组件的事件机制;
- 声明式UI开发模式:如easyui及国产DWZ,页面的展现逻辑如同第一种模式一样使用HTML实现,但是相比第一种模式,这种模式对组件的抽象做得更好,部分传统模式下用JS实现的展现逻辑甚至是交互逻辑也可以使用声明方式实现。可以说这是对第一种模式的增强;
- 客户端MVC开发模式:如backbone,这种模式与桌面模式相似,通过大量的JS代码实现页面的展现和交互逻辑,但通过在客户端维护数据模型及其状态,再运用视图与模型的绑定机制,可以大大减少JS代码量;
第一种模式与第三模式相似,都是以HTML代码实现展现逻辑、以JS代码实现交互逻辑,只是第三种模式通过更多的抽象组件,尽量使用HTML实现尽可能多的展现和交互逻辑;第二种模式与第四种模式类似,都是偏重于尽量使用JS实现展现逻辑和交互逻辑,HTML仅仅做为页面布局或页面容器。相对来讲,第二种模式偏重于使用JS实现界面视图的组装,而第四模式偏重于使用JS实现完整的MVC机制,在backbone中,视图也通常是使用基于HTML代码片断的模板方式来实现。
由于第三种模式是第一种模式的增强,因此在实际项目中可以尽量选择第三种开发模式;第二种模式相比第一种和第三种模式来讲,主要是开发方式的不同,前者侧重于JS,后两者侧重于HTML,除此之外,两者的应用场景和应用范围都很相似。
尽管第四模式与第二种模式一样也是偏重于使用JS实现页面逻辑,但由于其强大的MVC机制,因此它与第二种模式有着本质的不同。试想对于gmail之类的应用,如果客户端底层没有维护一套邮件的数据模型的话,要单纯使用前面三种方式实现当前gmail的页面交互效果将是非常困难的。
总之,对于WEB开发模式的选择,现阶段个人建议优先选择第三种模式。如果应用交互非常复杂,或者需要实现更好的交互体验(比如支持本地存储、undo、redo等),而导致大量的JS代码的话,则可以考虑使用第四模式。
WEB开发模式浅析的更多相关文章
- Web开发模式【Mode I 和Mode II的介绍、应用案例】
开发模式的介绍 在Web开发模式中,有两个主要的开发结构,称为模式一(Mode I)和模式二(Mode II) 首先我们来理清一些概念吧: DAO(Data Access Object):主要对数据的 ...
- Web 开发模式演变历史和趋势
前不久徐飞写了一篇很好的文章:Web 应用的组件化开发.本文尝试从历史发展角度,说说各种研发模式的优劣. 一.简单明快的早期时代 可称之为 Web 1.0 时代,非常适合创业型小项目,不分前后端,经常 ...
- [转] Web 开发模式演变历史和趋势
文章转自梦想天空--前端文摘:Web 开发模式演变历史和趋势 一.简单明快的早期时代 可称之为 Web 1.0 时代,非常适合创业型小项目,不分前后端,经常 3-5 人搞定所有开发.页面由 JSP.P ...
- Java Web开发模式
一 Java Web开发模式的变迁 1 最初的Java web服务器端编程技术是Servlet,利用Servlet就可以开发出一个Web应用程序. 2 为了解决Servlet缺陷,SUN推出了JSP技 ...
- Web开发模式
原文链接 开发模式的介绍(完善版) 在Web开发模式中,有两个主要的开发结构,称为模式一(Mode I)和模式二(Mode II). 首先我们来理清一些概念吧: DAO(Data Access Obj ...
- 用框架名唬人谁都会,那你知道Web开发模式吗?——莫问前程莫装逼
前言:这两天总结了一些Servlet和JSP里面的知识,写了几篇博客,果然有种“温故而知新”的感觉,学完这些,继续前行,开始整合框架里的知识,框架虽好,可底层原理该掌握的也得掌握,防止以后做项目的时候 ...
- 前端文摘:Web 开发模式演变历史和趋势
今天的<前端文摘>给大家分享一篇玉伯的文章.文章详细介绍了 Web 开发的四种常用模式以及未来可能成为流行趋势的 Node 全栈开发模式,相信你看了以后一定会有收获. 您可能感兴趣的相关文 ...
- Web开发模式演变(转)
add by zhj:目前用的最多应该是模式二,其次是三.四,而模式五比较新,我自己也不太懂. 模式二--前后台交互的方式为整个页面,即每次请求,服务器都将HTML模板渲染后发给客户端,每次请求都返回 ...
- web开发模式小结:页面乱码和跳转
本文由付老师总结书写 java开发模式: (1)第一种开始模式:javaBean+jsp : 优点:可以为web程序在jsp中减少java代码量 适用于该开发模式的jsp的动作元素:<jsp:u ...
随机推荐
- noip模拟赛 寻宝之后
题目背景 还记得NOIP2011的寻宝吗?6年之后,小明带着他的妹子小芳,再次走上了寻宝的道路. 然而这次他们寻宝回来之后,小明被困在了一个迷宫中. 题目描述 迷宫是一个n*m的字符矩阵. 小明在这个 ...
- android中listview点击监听器onItemClick四个参数的含义
public void onItemClick(AdapterView<?> arg0, View view, int position, long arg3) X, Y两个listvie ...
- Lein: Exception in thread "Thread-3" java.net.ConnectException: Connection refused
leiningen Leiningen是你的主要工具, 它用于: 启动一个 REPL 下载+安装类库 运行你的程序 启动一个服务器, 运行你所写的webapps 安装 brew install lei ...
- python字符串截取
python字符串截取 str = 'abcd' str[0:-1],-1表示末尾开始的位置,但是[]操作符不取尾下标所对应的字符: 所以str[0:-1] ---->‘abc' str[0:1 ...
- jeewx 微信管家 - 举办商业版本号免费试用活动
jeewx 微信管家 举办商业版本号免费试用活动 1,关注微信账号:jeecg_scott 2.输入:"jeewx商业版本号试用活动: 你的邮箱(比如:zhangsan@11.com)&qu ...
- 从hbase读取数据优化策略和实验对照结果
起因:工作须要.我须要每5分钟从hbase中.导出一部分数据,然后导入到ES中.可是在開始阶段编写的python脚本,我发现从hbase读取数据的速度较慢,耗费大量的时间.影响整个导数过程,恐怕无法在 ...
- JavaScript解析顺序和变量作用域
JavaScript基础之变量作用域. 一. 1.全局变量:全局变量的意思就是,在代码的不论什么地方都能够訪问到.注意:未定义 直接赋值的变量拥有全局属性. 2.局部变量:局部变量的意思就是,变量的作 ...
- 基于FPGA的简易数字时钟
基于FPGA的可显示数字时钟,设计思路为自底向上,包含三个子模块:时钟模块,进制转换模块.led显示模块.所用到的FPGA晶振频率为50Mhz,首先利用它得到1hz的时钟然后然后得到时钟模块.把时钟模 ...
- poj-1635 Subway tree systems(推断两个有根树是否同构)-哈希法
Description Some major cities have subway systems in the form of a tree, i.e. between any pair of st ...
- C#程序猿学习 Python
孙广东 2016.1.1 交互: C# 运行Python代码: http://stackoverflow.com/questions/11779143/run-a-python-script-fro ...