云计算 程序员 wordpress nginx php mysql centos 编程 Android shell Python Firefox Windows 微软 apache java 开源 google linux Ubuntu

前端开发技术的发展之刀耕火种

前端开发技术,从狭义的定义来看,是指围绕HTML、JavaScript、CSS这样一套体系的开发技术,它的运行宿主是浏览器。从广义的定义来看,包括了:

  • 专门为手持终端设计的类似WML这样的类HTML语言,类似WMLScript这样的类JavaScript语言。
  • VML和SVG等基于XML的描述图形的语言。
  • 从属于XML体系的XML,XPath,DTD等技术。
  • 用于支撑后端的ASP,JSP,ASP.net,PHP,nodejs等语言或者技术。
  • 被第三方程序打包的一种类似浏览器的宿主环境,比如Adobe AIR和使用HyBird方式的一些开发技术,如PhoneGap(它使用Android中的WebView等技术,让开发人员使用传统Web开发技术来开发本地应用)
  • Adobe Flash,Flex,Microsoft Silverlight,JAVA Applet,JavaFx等RIA开发技术。

本文从狭义的前端定义出发,探讨一下这方面开发技术的发展过程。

从前端开发技术的发展来看,大致可以分为以下几个阶段:

静态页面

最早期的Web界面基本都是在互联网上使用,人们浏览某些内容,填写几个表单,并且提交。当时的界面以浏览为主,基本都是HTML代码,有时候穿插一些JavaScript,作为客户端校验这样的基础功能。代码的组织比较简单,而且CSS的运用也是比较少的。

最简单的是这样一个文件:

<html>
    <head>
        <title>测试一</title>
    </head>
    <body>
        <h1>主标题</h1>
        <p>段落内容</p>
    </body>
</html>

带有简单逻辑的界面

这个界面带有一段JavaScript代码,用于拼接两个输入框中的字符串,并且弹出窗口显示。

<html>
    <head>
        <title>测试二</title>
    </head>
    <body>
        <input id="firstNameInput" type="text" />
        <input id="lastNameInput" type="text" />
        <input type="button" onclick="greet()" />
        <script language="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功能提交数据了,比如:

<form method="post" action="username.asp">
    <p>First Name: <input type="text" name="firstName" /></p>
    <p>last Name: <input type="text" name="lastName" /></p>
    <input type="submit" value="Submit" />
</form>

在这个阶段,由于客户端和服务端的职责未作明确的划分,比如生成一个字符串,可以由前端的JavaScript做,也可以由服务端语言做,所以通常在一个界面里,会有两种语言混杂在一起,用<%和%>标记的部分会在服务端执行,输出结果,甚至经常有把数据库连接的代码跟页面代码混杂在一起的情况,给维护带来较大的不便。

<html>
    <body>
        <p>Hello world!</p>
        <p>
        <%
            response.write("Hello world from server!")
        %>
        </p>
    </body>
</html>

组件化的萌芽

这个时代,也逐渐出现了组件化的萌芽。比较常见的有服务端的组件化,比如把某一类服务端功能单独做成片段,然后其他需要的地方来include进来,典型的有:ASP里面数据库连接的地方,把数据源连接的部分写成conn.asp,然后其他每个需要操作数据库的asp文件包含它。

上面所说的是在服务端做的,浏览器端通常有针对JavaScript的,把某一类的Javascript代码写到单独的js文件中,界面根据需要,引用不同的js文件。针对界面的组件方式,通常利用frameset和iframe这两个标签。某一大块有独立功能的界面写到一个html文件,然后在主界面里面把它当作一个frame来载入,一般的B/S系统集成菜单的方式都是这样的。

此外,还出现了一些基于特定浏览器的客户端组件技术,比如IE浏览器的HTC(HTML Component)。这种技术最初是为了对已有的常用元素附加行为的,后来有些场合也用它来实现控件。微软ASP.net的一些版本里,使用这种技术提供了树形列表,日历,选项卡等功能。HTC的优点是允许用户自行扩展HTML标签,可以在自己的命名空间里定义元素,然后,使用HTML,JavaScript和CSS来实现它的布局、行为和观感。这种技术因为是微软的私有技术,所以逐渐变得不那么流行。

Firefox浏览器里面推出过一种叫XUL的技术,也没有流行起来。

延伸阅读

评论