文档介绍：Web前端发展简史有人说“前端开发”是IT界最容易被误解的岗位,这不是空穴来风。如果你还认为前端只是从美工那里拿到切图,JS和CSS一番乱炖,难搞的功能就去网上信手拈来,CtrlC+CtrlV的话,那就正中了这份误解的下怀。经过十几年的发展,web前端早已脱离了原来边缘化的形态,扮演了移动互联网开发链条中最关键的角色,是应用或产品能否打动用户的踹门砖。那么什么是前端开发,其又包含了哪些内容?前端开发的定义从狭义的定义来看,“前端开发”是指围绕HTML、JavaScript、CSS这样一套体系的开发技术,它的运行宿主是浏览器。从广义的定义来看,其应该包括:专门为手持终端设计的类似WML这样的类HTML语言,以及类似WMLScript的类JavaScript语言。VML和SVG等基于XML的描述图形的语言。从属于XML体系的XML,XPath,DTD等技术。用于支撑后端的ASP,JSP,,PHP,Nodejs等语言或者技术。被第三方程序打包的一种类似浏览器的宿主环境,比如AdobeAIR和使用HyBird方式的一些开发技术,如PhoneGap。AdobeFlash,Flex,MicrosoftSilverlight,JavaApplet,JavaFx等RIA开发技术。本文主要从“web前端”,也即狭义前端的角度出发,以人类科技进步划时代的方式,将前端开发划分为几个重要的时代,带领大家领略一下前端这十几年来的发展历程。石器时代最早期的Web界面基本都是在互联网上使用,人们浏览某些内容,填写几个表单并且提交。当时的界面以浏览为主,基本都是HTML代码,我们来看一个最简单的HTML文件:<html><head><title>测试一</title></head><body><h1>主标题</h1><p>段落内容</p></body></html>为了执行一些动作或进行一定的业务处理,有时候会穿插一些JavaScript,如作为客户端校验这样的基础功能。代码的组织比较简单,而且CSS的运用也是比较少的。譬如:下面这个文档将带有一段JavaScript代码,用于拼接两个输入框中的字符串,并且弹出窗口显示。<html><head><title>测试二</title></head><body><inputid="firstNameInput"type="text"/><inputid="lastNameInput"type="text"/><inputtype="button"onclick="greet()"/><scriptlanguage="JavaScript">functiongreet(){varfirstName=("firstNameInput").value;varlastName=("lastNameInput").value;alert("Hello,"+firstName+"."+lastName);}</script></body></html>由于静态界面不能实现保存数据等功能,出现了很多服务端技术,monGatewayInterface,多数用C语言或者Perl实现的),ASP(使用VBScript或者JScript),JSP(使用Java),PHP等等,Python和Ruby等语言也常被用于这类用途。有了这类技术,在HTML中就可以使用表单的post功能提交数据了,比如:<formmethod="post"action=""><p>FirstName:<inputtype="text"name="firstName"/></p><p>LastName:<inputtype="text"name="lastName"/></p><inputtype="submit"value="Submit"/></form>在这个阶段,由于客户端和服务端的职责未作明确的划分,比如生成一个字符串,可以由前端的JavaScript做,也可以由服务端语言做。所以通常在一个界面里,会有两种语言混杂在一起,用<%和%>标记的部分会在服务端执行,输出结果,甚至经常有把数据库连接的代码跟页面代码混杂在一起的情况,给维护带来了很大的问题。<html><body><p>Helloworld!</p><p><%("Helloworldfromserver!")%></p></body></html>青铜时代青铜时代的典型标志是出现了组件化的萌芽,着眼点主要在文件的划分上。后端组件化比较常见的做法是,把某一类后端功能单独做成片段,然后其他需要的地方来include进来,典型的有:ASP里面数据库连接的地方,把数