web前端发展简史.docx

Web前端发展简史 有人说“前端开发”是IT界最容易被误解的岗位，这不是空穴来风。如果你还认为前端只是从美工那里拿到切图， JS和CSS一番乱炖，难搞的功能就去网上信手拈来，CtrlC + Ctrl V的话，那就正中了这份误解的下怀。经过十几年的发展，web前端早已脱离了原来边缘化的形态，扮演了移动互联网开发链条中最关键的角色，是应用或产品能否打动用户的踹门砖。那么什么是前端开发，其又包含了哪些内容？ 前端开发的定义 从狭义的定义来看，“前端开发”是指围绕HTML、JavaScript、CSS这样一套体系的开发技术，它的运行宿主是浏览器。从广义的定义来看，其应该包括： 专门为手持终端设计的类似WML这样的类HTML语言，以及类似WMLScript的类JavaScript语言。 VML和SVG等基于XML的描述图形的语言。 从属于XML体系的XML，XPath，DTD等技术。 用于支撑后端的ASP，JSP，ASP.net，PHP，Nodejs等语言或者技术。 被第三方程序打包的一种类似浏览器的宿主环境，比如Adobe AIR和使用HyBird方式的一些开发技术，如PhoneGap。 Adobe Flash，Flex，Microsoft Silverlight，Java Applet，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=firstNameInputtype=text/ inputid=lastNameInputtype=text/ inputtype=buttononclick=greet()/ scriptlanguage=JavaScript function greet(){ var firstName = document.getElementById(firstNameInput).value; var lastName = document.getElementById(lastNameInput).value; alert(Hello, + firstName +.+ lastName); } /script /body /html由于静态界面不能实现保存数据等功能，出现了很多服务端技术，早期的有CGI（Common Gateway Interface，多数用C语言或者Perl实现的），ASP（使用VBScript或者JScript），JSP（使用Java），PHP等等，Python和Ruby等语言也常被用于这类用途。 有了这类技术，在HTML中就可以使用表单的post功能提交数据了，比如： formmethod=postaction=username.asp pFirst Name: inputtype=textname=firstName//p pLast Name: inputtype=textname=lastName//p inputtype=submitvalue=Submit/ /form在这个阶段，由于客户端和服务端的职责未作明确的划分，比如生成一个字符串，可以由前端的JavaScript做，也可以由服务端语言做。所以通常在一个界面里，会有两种语言混杂在一起，用%和%标记的部分会在服务端执行，输出结果，甚至经常有把数据库连接的代码跟页面代码混杂在一起的情况，给维护带来了很大的问题。 html body pHello world!/p p %response.write(Hello world from server!)% /p /body /html 青铜时代 青铜时代的典型标志是出现了组件化的萌芽，着眼点主要在文件的划分上。后端组件化比较常见的做法是，把某一类后端功能单独做成片段，然后其他需要的地方来include进来，典型的有：ASP里面数据库连接的地方，把数据源连接的部分