以“桥”的视⻆来聊聊前端开发模式的变迁-变化吧

2020年2月9日22:23:37IT专区评论阅读模式

以“桥”的视⻆来聊聊前端开发模式的变迁

我国是桥的家乡，自古以来就会有“桥的之族”之称,发展趋势于隋,兴盛于宋。遍及在大江南北的桥、织成四通八达的道路网，联接着中华民族的四面八方。伴随着经济发展的发展趋势及其社会发展的变化，桥减少了人们掌握当然与社会发展在时间与空间上的距离。在中国有太多大家耳熟能详的大桥，例如：北京卢沟桥、南京长江大桥、武汉长江大桥、杭州钱塘江大桥、深圳湾大桥、虎门大桥等等。本篇文章以“桥”为点粗略地将前端开发模式的变迁串联起来。

那么什么是桥？

维基百科给出这样的定义：桥或桥梁是跨越峡谷、山谷、道路、铁路、河流、其他水域、或其他障碍而建造的结构，是一种由水面或地面突出来的高架，用来连着桥头桥尾两边路。

桥是一种用来跨越障碍的大型构造物。确切的说是用来将交通路线（如道路、铁路、水道等）或者其他设施（如管道、电缆等）跨越天然障碍（如河流、海峡、峡⾕等）或人工障碍（高速公路、铁路线）的构造物。

背景介绍

近期正在参与某移动端项目的开发，其实现方案是采用Hybrid App（混合应用）开发模式， H5页面端一方面通过jsBridge与Native webview进行交互实现对应的交互效果，另一方面通过Node中间层与Backend进行交互实现对数据接口的对接（如下图所示）。在这个过程中我们把其中的一段交互方式进行抽象化且将联结着“桥头”（ Native App）和“桥尾”（ H5 Webpage）的中介（ jsBridge）称为“桥”。

以“桥”的视⻆来聊聊前端开发模式的变迁

在计算机世界里有很多这样的中介构建了无数座虚拟的“桥”，编织成四通八达的计算机信息网络，连接着各项应用程序。

本文希望通过“桥”作为切入点从前端知识体系出发取其中的三个关键词ActiveX、 Webkit、 Android来分别代表基于IE浏览器的网页开发以及基于近标准化的前端开发和基于智能设备的全栈开发三个不同阶段的中介，然后根据它们各自的特性以及起到的联结作用，抽象化的比喻为三座具有时代色彩的“桥”来体现前端开发模式的变迁。

本篇文章适合前端开发人员、后端开发人员、客户端开发人员、产品经理、技术经理以及所有对前端开发感兴趣的小伙伴，通过阅读该文章你会了解到如下信息：

基于IE浏览器的网页开发
基于近标准化的前端开发
基于智能设备的全栈开发

基于IE浏览器的网页开发

ActiveX是什么？

ActiveX是微软针对Internet Explorer开发的一个标准COM接口来实现对象链接与嵌入（ OLE）的ActiveX控
件。

通过ActiveX控件可以提供很多当时网页本身不能直接支持的功能，例如：安全密码框、在线预览pdf、Flash播放器、在线预览PPT等。

通过对ActiveX的了解，在该阶段我们把ActiveX这个中介抽象化的比喻成“桥”，并赋予一个阶段色彩的名
称“古石拱桥”。

前端开发在本阶段会产生哪些变化呢？

1. 开发⼯具
Frontpage网页制作、网页三剑客（ Dreamweaver、 Fireworks、 Flash）为本人接触或使用过的最早的前端开发工具。

2. 需兼容的浏览器
主要是兼容IE浏览器或以IE内核为基础的第三方浏览器。

3. 遵行相关标准和规范
HTML4.01标准+CSS2.1规范
主要采用Table布局+内联样式
原生JS操作+Flash动画效果
数据传递的格式主要是XML

该阶段前端开发主要工作是负责网页制作，因此开发人员常常会被叫做页面仔。