前端技术的发展与演变

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

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

相关文章

来自专栏携程技术中心

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

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

3066
来自专栏张善友的专栏

微软以Apache许可协议开源ASP.NET MVC

微软开发部门副总裁Scott Guthrie宣布,ASP.NET MVC及相关项目将在Apache许可证下开源,托管在CodePlex上。ASP.NET MVC...

1849
来自专栏企鹅号快讯

浅谈Web自适应

前言 ? 随着移动设备的普及,移动web在前端工程师们的工作中占有越来越重要的位置。移动设备更新速度频繁,手机厂商繁多,导致的问题是每一台机器的屏幕宽度和分辨率...

1808
来自专栏腾讯NEXT学位

简单粗暴的移动端适配方案 - REM

34910
来自专栏进击的君君的前端之路

初识React

962
来自专栏web前端教室

浅浅的聊一下React

image.png 要写一个组件,当然是从需求开始设计它。但要组件的边界,就是这个组件,它的最多能做什么?一个通用的组件,它也是有倾向性的,不可能适合完全所有的...

2009
来自专栏张善友的专栏

微软“.Net社区虚拟大会”dotnetConf2015:关键词:.NET 创新、开源、跨平台

去年 11 月的时候,微软开源了 .NET CoreFX,然后是今年 2 月份的 .NET CoreCLR。自那时以来,已经有大约 3500 人在 GitHu...

1727
来自专栏程序你好

Build 2018大会:.NET概述和路线图

551
来自专栏玄魂工作室

每周一书--《Bootstrap基础教程》

Bootstrap 讨论 现今,移动互联网已经成为热门话题之一。近年来 HTML 5 发展迅猛,各大浏览器都 开始纷纷支持 HTML 5 的标准规范。手机端的浏...

3419
来自专栏IT大咖说

沪江:React Native三端融合应用实践

摘要 ReactNative给前端提供了一套两端共用代码和快速实现热更新的框架,但在实际落地中,需要进行大量的保障工作和优化工作来让业务能够平稳上线,另一方面,...

3965

扫描关注云+社区