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开发模式浅析的更多相关文章

  1. Web开发模式【Mode I 和Mode II的介绍、应用案例】

    开发模式的介绍 在Web开发模式中,有两个主要的开发结构,称为模式一(Mode I)和模式二(Mode II) 首先我们来理清一些概念吧: DAO(Data Access Object):主要对数据的 ...

  2. Web 开发模式演变历史和趋势

    前不久徐飞写了一篇很好的文章:Web 应用的组件化开发.本文尝试从历史发展角度,说说各种研发模式的优劣. 一.简单明快的早期时代 可称之为 Web 1.0 时代,非常适合创业型小项目,不分前后端,经常 ...

  3. [转] Web 开发模式演变历史和趋势

    文章转自梦想天空--前端文摘:Web 开发模式演变历史和趋势 一.简单明快的早期时代 可称之为 Web 1.0 时代,非常适合创业型小项目,不分前后端,经常 3-5 人搞定所有开发.页面由 JSP.P ...

  4. Java Web开发模式

    一 Java Web开发模式的变迁 1 最初的Java web服务器端编程技术是Servlet,利用Servlet就可以开发出一个Web应用程序. 2 为了解决Servlet缺陷,SUN推出了JSP技 ...

  5. Web开发模式

    原文链接 开发模式的介绍(完善版) 在Web开发模式中,有两个主要的开发结构,称为模式一(Mode I)和模式二(Mode II). 首先我们来理清一些概念吧: DAO(Data Access Obj ...

  6. 用框架名唬人谁都会,那你知道Web开发模式吗?——莫问前程莫装逼

    前言:这两天总结了一些Servlet和JSP里面的知识,写了几篇博客,果然有种“温故而知新”的感觉,学完这些,继续前行,开始整合框架里的知识,框架虽好,可底层原理该掌握的也得掌握,防止以后做项目的时候 ...

  7. 前端文摘:Web 开发模式演变历史和趋势

    今天的<前端文摘>给大家分享一篇玉伯的文章.文章详细介绍了 Web 开发的四种常用模式以及未来可能成为流行趋势的 Node 全栈开发模式,相信你看了以后一定会有收获. 您可能感兴趣的相关文 ...

  8. Web开发模式演变(转)

    add by zhj:目前用的最多应该是模式二,其次是三.四,而模式五比较新,我自己也不太懂. 模式二--前后台交互的方式为整个页面,即每次请求,服务器都将HTML模板渲染后发给客户端,每次请求都返回 ...

  9. web开发模式小结:页面乱码和跳转

    本文由付老师总结书写 java开发模式: (1)第一种开始模式:javaBean+jsp : 优点:可以为web程序在jsp中减少java代码量 适用于该开发模式的jsp的动作元素:<jsp:u ...

随机推荐

  1. Eclipse不编译解决方案

    原文链接:http://blog.csdn.net/huahuagongzi99999/article/details/7719882    转来自己用 这两天Eclipse 不编译了,无论怎么更改保 ...

  2. hdu 1853 KM算法

    #include<stdio.h> #include<math.h> #include<string.h> #define N 200 #define inf 99 ...

  3. 1874 Bellman-ford算法 队列优化过的 用于稀疏图,有负权的图

    #include<stdio.h> #include<algorithm> #include<iostream> #include<queue> usi ...

  4. FFT快速傅里叶变换

    FFT太玄幻了,不过我要先膜拜HQM,实在太强了 1.多项式 1)多项式的定义 在数学中,由若干个单项式相加组成的代数式叫做多项式.多项式中的每个单项式叫做多项式的项,这些单项式中的最高项次数,就是这 ...

  5. 19、Java并发性和多线程-嵌套管程锁死

    以下内容转自http://ifeve.com/nested-monitor-lockout/: 嵌套管程锁死类似于死锁, 下面是一个嵌套管程锁死的场景: 线程1获得A对象的锁. 线程1获得对象B的锁( ...

  6. 【Storage】IBM DS8100开机及配置过程

     ************************************************************************ ****原文:blog.csdn.net/cla ...

  7. Android资源文件命名规范

    在复杂Android应用的开发中,资源文件的规范命名非常重要,能帮助设计人员和开发人员减小沟通成本.资源的名字尽量力求准确,可以适当长一些,但换回的价值是值得的. 关于WCC的Android开发,资源 ...

  8. Java课程设计——人事管理系统

    主界面代码: package PersonSystem; import java.awt.*; import java.awt.event.*; import javax.swing.*; impor ...

  9. centos命令行安装mysql随机密码查看方法(遇到问题及其解决办法)

    mysql初次命令行安装登录时报错: 未输入密码:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using passwo ...

  10. java 多线程——同步 学习笔记

      一.实例的同步方法 public synchronized void add(int value){ this.count += value; } Java 实例方法同步是同步在拥有该方法的对象上 ...