前端技术的发展与演变

近年来,前端技术的发展迅速,但因为前端知识面庞大,在实际学习当中往往无法理清其中的脉络。下面从各种库、框架、插件的层面上,对前端知识点做一些简单的梳理。从软件工程上,将前端分为四个由浅及深的层面或阶段。

一、基础层(浏览器原生支持html/css/js)

  • HTML超文本标记语言,用标签构建网页的内容。HTML5扩展了标签及其功能。
  • CSS层叠样式表,控制页面内容的表现。CSS3增加了更多的特效,比如文本效果和2D/3D转换,以及动画。
  • JavaScript的原生API(包括DOM、BOM、Style样式、Canvas、SVG、WebGL等)

有了这些以后,我们已经可以开发基本的网络应用了,但是会发现它们并不好用,或者说存在一些缺陷,有优化的余地。

  • 当前后端分离后,通过API获取到的数据,需要填充到页面中,原生DOM操作非常消耗性能,且传统JS使用字符串拼接的方式不太好用
  • CSS不能像其他程序语言一样,通过变量、计算、继承等方式很好的管理。
  • JS原生API不好用,还存在浏览器兼容等问题。

  这些问题,前端开发者通过多年的填坑,花费巨大的精力封装了各种框架层,用来减少开发工作量。

二、框架层(各类前端库)

JQuery、YUI、Zepto、以及针对H5中canvas的游戏库Lufylegend等等,主要为了解决浏览器原生API不好用和兼容问题,即对原型API做了二次封装,使其更易于开发和掌握,本质上等于依靠框架层间接操作原生浏览器的基础API。在此基础上,又针对一些常用的页面组件,扩展了为插件,即组件或插件层。

三、组件层(或插件)

常用的如:日历选择器、富文本编辑器、图片轮播等等。这些仅仅是对WEB应用中,比较常用或通用的部分进行了再次封装。除此之外,那些平台特有的业务逻辑属于应用层。

四、应用层(业务层)

如购物车,权限管理等等,应用层的业务逻辑通常随WEB应用的场景有关。

  如上只是传统的开发模式,随着前后端的分离,前端开发分担了越来越多业务逻辑。通过HTTPrequest与后台交互数据,然后通过拼接字符串的方式,生成浏览器识别的DOM结构与样式。这些都让前端开发越来越重,但js本身不能很好的实现模块化管理,所以出现了require、sea等AMD和CMD的模块加载框架。

前端的革命

Node的出现,让前端领域发生了巨大的改变,前端开发者终于可以自己开发工具了(如同猿人学会了制造工具,前端脱离了刀耕火种的年代)。随着自动化工具glup、webpack的火热,多种多样的预编译程序(如HTML模板引擎jade、Ejs等,CSS预处理器Sass、Less等),以及前端MVC、MVVM框架angular、react、vue等如雨后春笋般蜂拥出现,前端开发进入一次全面封装的时代,组件化开发模式在一定程度上,利用JS的可编程性管理html和css,最后通过编译,再生成浏览器识别的HTML/CSS/JS。

  移动端的出现,在一定程度上,也对前端技术提出了更高的要求,基于移动端的网络环境,需要用更少的资源实现最大化的效果。

  最后小程序的推出,进一步拓展了前端开发的应用领域,将应用程序存储到云端的嵌入式开发,或许是未来应用的新方向。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏phodal

分享下 Backbone、Vue、Angular、React 在项目上的使用经验

上周,知乎上有几篇关于 Angular 和 Vue 对比的文章。本来想着的是,这些文章倒是可以指导下新手,作一些技术选型。可遗憾的是,开始的文章失去了一些偏颇,...

3176
来自专栏视频咖

腾讯视频云 LiteAVSDK 升级到 5.2.5541

4.9 版本开始,短视频licence开始支持自动续期,如果有使用短视频功能申请过licence,请关注:

2392
来自专栏IMWeb前端团队

深入浅出React(一):React的设计哲学 - 简单之美

本文作者:IMWeb 刘起 原文出处:IMWeb社区 未经同意,禁止转载 编者按:自2013年Facebook发布以来,React吸引了越来越多的开发...

1965
来自专栏携程技术中心

Qnext大会 | React Web——浏览器端复用React Native代码解决方案

原创专栏|杨乾军 ? 自2008年开始接触前端,至今已有8年的前端开发经验,是一名资深前端攻城狮。目前在去哪儿平台事业部前端架构组。 1 背景 ? 一直以来...

3226
来自专栏技术/开源

TypeScript 优秀开源项目大合集

TypeScript出来有段时间了,也冒出了很多用TypeScript开发的优秀开源项目,搜寻了一些基于TypeScript项目,分享给大家:https://g...

4079
来自专栏编程微刊

css实现简单的告警提示动画效果

2163
来自专栏编程微刊

移动端iPhone系列适配问题的一些坑

1902
来自专栏知晓程序

你的微信输入速度超过全国 99.9% 的好友 | 晓技巧

1205
来自专栏KK的小酒馆

几个作品

3.拥有置于前台的服务,实现Notification的播放、暂停按钮与其他界面同步。

883
来自专栏葡萄城控件技术团队

MultiRow中文版技术白皮书

引言 Microsoft .NET是一项比较成熟的技术开发框架,很多的商业应用都是基于.NET开发的,在这些商业应用中,作为数据展示和录入的表格控件,是不可或缺...

1985

扫码关注云+社区