前端技术的发展与演变

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

一、基础层(浏览器原生支持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 条评论
登录 后参与评论

相关文章

来自专栏linux驱动个人学习

dm-verity

一、Device Mapper: dm-verity是内核子系统的Device Mapper中的一个子模块,所以在介绍dm-verity之前先要介绍一下Devi...

2996
来自专栏自动化测试

DIY自动化测试【智能音箱】

    笔者从事智能音箱系统测试,这是一款基于android系统的智能语音助手产品。基本功能特性和测试方法都已稳定,目前多产品快速迭代,涉及的场景较多且数据量大...

3303
来自专栏小狼的世界

RSS的相关知识

rss是RDF Site Summary 的缩写(RDF是Resource Description Framework的缩写 ),是指将网站摘要用xml语言描述...

953
来自专栏企鹅号快讯

抓取百度指数引发的图像数字识别

作者介绍: 叶成,数据分析师,就职于易居中国,热爱数据分析和挖掘工作,擅长使用Python倒腾数据。 前言 学习爬虫也有段时间了,闲着无趣,想找点项目练练手,于...

3786
来自专栏九彩拼盘的叨叨叨

web前端网站收藏

1332
来自专栏听雨堂

Mapx用xml创建点图层

     Mapx4.*中,并不支持xml,到5以后,创建ds支持xml了,听起来很美,但是,在网上居然没有找到一个说这个的,难道mapx就没人用了吗?    ...

1778
来自专栏性能与架构

小程序优秀开发资源

下面是一些 github 上比较受欢迎的小程序项目,包括开发框架、UI组件等 labrador (开发框架) 特性: 支持加载海量NPM包 支持ES6/7标准代...

3495
来自专栏更流畅、简洁的软件开发方式

【自然框架】—— 全貌

补充:忘记了一件很重要的事情,我建立了一个小组 http://space.cnblogs.com/group/nature/ 欢迎大家加入。我们可以组织一些话...

2067
来自专栏大数据挖掘DT机器学习

腾讯、网易、新浪新闻网站爬虫编写记录及评论格式分析

作者:reetsee.com首席运营官 http://blog.csdn.net/qq_17754181/article/details/45179667 至...

3545
来自专栏九彩拼盘的叨叨叨

前端知识点列表

641

扫码关注云+社区