一、前端发展史
1.1 原始时代
早期网站开发没有“前端工程师”这个职业。开发人员负责全部的网站开发。通过ASP、JSP、PHP等语言的模版技术,直接在静态页面内调用方法,对数据进行增删改查操作。被戏称“套模板”。
缺点:在浏览器中切换页面时,页面被刷新,加上业务迭代带来的工作量增加,一个复杂的界面,少则几百行,多则上千行,让后期的业务迭代和维护陷入困境。
1.2 Ajax时代
2004年Ajax是一种在无需重新刷新页面的情况下,能更新页面部分区域的技术。使前端工程师的工作发生了质的变化,之前只需要按照设计稿实现页面布局,并添加交互动效就可以交给后端开发人员去套模板。有了Ajax后实现了前后端分离,后端开发者的任务是抛出API接口,前端工程师通过Ajax调用接口,实现数据的增删改查。
缺点:在使用原生的JavaScript的情况下,随着代码量的增加,前端工程师在大型项目的代码结构把控上力不从心。这时大量二次封装JavaScript语言的工具库应运而生。
2006年jQuery发布。优势如下:
1.原生DOM操纵
jQuery封装了原生的JavaScript的API,在使用过程中对开发者十分友好。
2.浏览器兼容
为开发者做好了兼容策略,几乎涵盖了市面上所有的浏览器,包括让开发者头痛的IE浏览器。
3.生态强大
好用的插件多。
4.版本更新及时
1.3 MVC时代
为了更好的管理数据和视图之间的关系,第一个MVC框架Backbone.js诞生服务端的MVC模式被搬到了前端。
M即Model,数据模型,主要负责与数据的相关任务,包括对数据的增删改查操作。
V即View,视图,用户可是界面。
C即Controller,控制器,负责监听视图中触发的用户事件,从而操作Model层,再将数据显示到View层。
MVC模式的优点:
1.低耦合
视图层和业务层分离,修改视图层代码不在牵扯业务层的逻辑
2.高复用
多个视图可公用一个模型,不用重复地写同样的业务逻辑大大提高工作效率
MVC模式的缺点:
1.定义不明确
MVC只是一个概念,没有明确定义开发的形式,各大厂商的MVC模式可能不同,不能通用
2.杀鸡用牛刀
在多数情况下,中小型项目注重的是快速迭代,业务更新速率极高,而MVC模式对与处理大量的业务需求变动有些捉襟见肘。
最终,MVC模式还没站位脚跟就被淘汰。
1.4 模块化时代
模块化时代的到来,让前端开发进入到了一个高速发展的时代
先说Node.js带来的CommonJS模块规范化,有如下几个概念:
1.每个文件都是一个模块,他们都有属于自己的作用域,内部定义的变量、函数都是私有的,对外不可见。
2.每个模块内部的module变量代表当前模块,是一个对象。
3.module对象的exports属性是对外的接口,加载某个模块其实就是加载模块的module.exports属性。
4.使用return关键字加载模块,require的基本功能是导入并执行一个JavaScript文件,并返回expoorts值。
这里笔者用代码解释CommonJS。
module.exports = {
//根据id,修改对应DOM节点的显示
show: function (id){
if(id){
doucument.getElementById(id).setAttribute('style','display:block');
}
},
//根据id,修改对应DOM节点的隐藏
hide: function (id){
if(id){
doucument.getElementById(id).setAttribute('style','display:none');
}
}
}
//可导出单个方法
module.exports.show=function(id){
if(id){
doucument.getElementById(id).setAttribute('style','display:block');
}
}
//引入utils.js
const utils=require('./utils.js');
//使用他
utils.show('root');
除了CommonJS模块规范外,还有以require.js为代表的AMD规范和玉伯团队开发的以sea.js为代表的CMD。
AMD的特点是异步加载模块,但前提是初始化需要将所有的依赖项加载完毕。CMD的特点是依赖延长,也是开发者所说按需加载。
显然CMD的按需加载功能对开发者更有吸引力。在AMD模式下,初始化阶段就加载所有资源,会给首屏渲染带来一定压力。而CMD的按需加载减少了首屏渲染的资源数量,加快了首屏加载的速度。
当然这些技术如今开来已过时了,ES6的出现让前端开发杨帆启航。
1.5 ES6时代
历史上,JavaScript这门弱类型语言一直没有自己的模块体系,自身无法实现文件的拆分和组合。当然,强行才分JavaScript脚本也能实现简单的模块化开发,只会“污染”全局变量,造成一些不可控的局面。
在ES6出现之前,想要比较规范地管理业务模块,就要借助上述提到的require.js和sea.js。ES6的出现,为前端开发带来了ES模块化规范,相当于给JavaScript加上一层强大的Buff,使它从早期的表单验证脚本语言摇身一变,成为一门面向对象语言。
和CommonJS规范类似,ES模块化规范把脚本文件当做一个模块,每个模块都有自己独立的作用域,不必担心“污染”全局变量问题。ES6的模块化采用导入(Import)和导出(Export),并且自动采用严格模式(Use Strict)。
使用ES模块化规范,实现上面CommonJS模块化的代码
//utils.js
const show = (id) => {
if(id) {
document.getElementById(id).setAttribute('style','display:block');
}
}
const hide = (id) => {
if(id) {
document.getElementById(id).setAttribute('style','display:none');
}
}
export {
show,
hide
}
//外部引入utils.js脚本
import {show,hide} from './utils.js'
目前并不是所有的浏览器都支持ES模块化规范,比如IE、Opera Mobile、UC、Baidu等浏览器的较低版本或全部版本都不支持ES6的模块化开发。所以,在开发阶段可以使用ES6,但在部署上线之前,需要通过babel将ES6+的代码转化为ES5的代码,从而去适配一些低版本的浏览器环境。
1.6 SPA时代
SPA(Single Page Web Application)即单页Web应用。简单理解就是由一个页面构成的网址,HTML标签都是通过JavaScript脚本动态生成的,并且插入到页面的一个根节点。通过路由跳转页面,但不会刷新页面,只是将网页内部的DOM节点替换了而已。采用SPA模式开发的网页,与服务器端只是数据上的交互不在请求服务器端的其他网址。
网页交互示意图
-----------初始化请求---------->
客户端 <----------返回HTML------------ 服务器
------------Ajax 请求----------->
<--------返回JSON数据------->
用代码描述,大致如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>SPA</title>
</head>
<body>
<div id="root"></div>
<script src='./app.js'></script>
</body>
</html>
以上代码中id为root的标签就是上述提到的根节点,网页中的所有的页面效果、数据交互都在app.js脚本文件中。而脚本做的第一件事情就是找到根节点,并通过JavaScript将页面渲染到根节点下,包括后续的页面的跳转,都只在这一个页面中进行,这就是SPA。
现在前端开发最流行的SPA框架莫过于react、Vue、Angular等。他们都采用ES6的模块化方式编写代码,用组件化开发的方式完成业务需求。通过Webpack等现代化打包工具,完成代码的自动化打包,最后部署上线。
单页面内开发框架的出现大幅地提升了用户浏览页面的体验。DOM操作都是在JavaScript内部完成的,不在向以前一样直接去操作DOM。单页面开发框架将原生APP的那套模式运用到了网页开发中来。以往的网页跳转页面都会导致浏览器中的网页刷新,而在单页面开发中,浏览器地址栏只负责变化地址,视图的更新全权交由JavaScript来完成。每个页面相当于一个组件,每个组件都有自己的生命周期,在切换组件的时候,会顺序地执行相应的生命周期,在相应的生命周期中,通过调用服务器端提供的API接口获取数据,并进行视图渲染。
1.7 小程序时代
2016年小程序的出现给前端开发带来了新的活力。各大厂商效仿微信,推出了自己的小程序应用。各大厂商的小程序应用给前端开发人员造成一定的困扰,一个业务可能需要完成多套代码去适配各个大厂商的小程序应用。
针对上述问题,React提出的虚拟DOM技术为后来的“一套代码多端使用”成为可能。在虚拟DOM的基础上,通过复杂的操作将React、Vue转换为各个技术栈需要的代码形式,比如转换为APP、小程序等代码形式,目前市面上这项技术做的比较好的有uni-app、taro。
1.8 低代码(LowCode)时代
低代码开发是一种可视化应用开发方法,即以可视化拖曳组件完成简单应用的开发工作。通过低代码开发,不同水平的开发人员能够通过图形用户界面,使用拖放式组件和模型驱动逻辑创建Web和移动应用。低代码开发减轻了非技术开发人员的压力,帮其免去了代码编写工作,同时也为专业开发人员提供了支持,帮助他们完成应用开发过程中繁琐的底层架构与基础设施任务。
业务和IT部门的开发人员可以在平台中协同,一起创建、迭代和发布应用,而所需时间只是传统方法所需时间的一小部分。这种低代码应用开发方法可针对不同用例开发各种类型的应用。
现在市面上有非常多的大厂在尝试投入研发资源,将低代码平台落地。从上述一系列前端技术的发展可以看出,前端工程师是一个技术迭代周期很短的职业,如果想成为前端工程师,就要保持不断拥抱变化的心态,不断地学习日新月异的技术,并且尝试在自己擅长的一个前端小领域内深耕,比如小程序、可视化、工程化工具、低代码、组件库等。
二、认识Vue.js
2013年,就职与Google的尤雨溪受到Angular的启发,结合自己的想法,开发出一款名为Seed的轻量级框架。
2013年12月,该框架更名为Vue,版本号为0.6。
2014年1月24日,Vue正式对外发布,版本号为0.8。
2014年2月25日,Vue有了自己的代号——Animatrix来自动漫版(黑客帝国),版本号为0.9。
2015年6月13日,Vue代号——Dragon Ball(龙珠),这时Vue已经被前段大多数开发人员所熟知。
Vue1.0版本的代号是Evangelion(新福岛福音战士)。这个版本是Vue历史上的第一个里程碑,同年,Vue-Router、Vuex、Vue-CLI相继发布,这意味着Vue从一个视图库层发展成为一个渐进式框架。
Vue2.0版本的代号为Ghost in the Shell(攻壳机动队),它是Vue历史上的第二个里程碑。该版本吸取了React提出的Virtual DOM概念,并且开发出服务器端渲染的功能。在为框架提高效率的同时,也为用户提供更多业务场景的使用方法。与此同时,组件化开发思想深入人心。大量与Vue相关的UI组件库如雨后春笋相继发布,如Vant、ElementUI、Ant Design of Vue、Vuetify、iView等。
2020年9月19日发布的Vue3.0版本你的代号为One Piece(海贼王动漫),引进了全新的Component API,并且兼容Options API开发模式、在性能上,与Vue2相比,Vue3的包更小(使用Tree-Shaking时可减少41%),初始渲染速度提升55%,更新速度提升133%,内存使用率降低54%。单从性能方面来说,用户会毫不犹豫地升级为Vue3。
和Vue3一同问世的还有Vite,官方称它为下一代前端开发与构建工具,简单来说,它是类似于Vue-CLI的存着,但是不同的是,Vite利用的是原生ESM能力,开发环境下不构建代码。
三、结语
本文章是笔者在学习的道路上留存的学习知识,笔者使用的书是《Spring Boot+Vue 3大型前后端分离项目实战》十三 尼克陈/著。