简单了解前台知识
前端三要素
- HTML:结构
- CSS：表现
- JavaScript：行为
结构层（HTML）
太简单 忽略
表现层（CSS）
CSS层叠样式表是一门标记语言，并不是编程语言，因此不可以自定义变量，不可以引用等，换句话说是不具备任何语法支持的，主要缺陷是：
- 语法不够强大，无法嵌套书写，导致模块化开发中需要写很多重复的选择器
- 没有变量和合理的样式复用机制，使得逻辑上相关得属性值必须以字面得形式重复输出，导致难以维护
这就导致工作中无端增加了许多工作量。为了解决这个问题，前端人员会使用一种称之为【CSS预处理器】的工具，提供CSS缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性，大大提高了前端在样式上的开发效率。
什么是CSS预处理器
CSS预处理器定义了一种新语言，其基本意思是，用一种专门的变成语言，为CSS增加了一些编程特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行CSS编码工作。转化为通俗移动的话来说就是“用一种专门的编程语言，进行Web页面样式的设计，再通过编译器转化为正常的CSS文件，一共项目使用。”
常用的CSS预处理器有哪些
- SASS：基于Ruby，通过服务端处理，功能强大。解析效率高，需要学习Ruby语言，上手难度高于LESS
- LESS：基于NodeJS，通过客户端处理，使用简单。功能比SASS简单，解析效率也低于SASS，但实际开发中足够了，所以我们后台人员如果需要的话，建议使用LESS。
行为层（JavaScript）
? Javascript是一门弱类型脚本语言，其源代码在发往客户端运行之前不需经过编译，而将文本格式的字符代码发送给浏览器，有浏览器进行解释运行。
? Native原生JS开发
? 原生JS开发，也就是让我们按照【ECMAScript】标准的开发方式，简称是ES，特点是所有浏览器都支持。ES标准已发布如下版本：
- ES3
- ES4（内部，未正式发布）
- ES5（全部浏览器支持）
- ES6（常用，当前版本主流：webpack打包成为ES5支持）
- ES7
- ES8
- ES9（草案阶段）
区别就是逐步增加新特性
JavaScript框架
- jQuery：大家熟知的JavaScript框架，优点是简化了DOM操作，缺点是DOM操作太频繁，影响前端性能：在前端眼里使用它仅仅是为了兼容IE6、7、8；
- Angular：Google收购的前端框架，由一群Java程序员开发，对后台程序员友好，对前端不友好
- React：Facebook出品，一款高性能的JS前端框架，特点是提出了新概念【虚拟DOM】用于减少真实的DOM操作，在内存中模拟DOM操作，有效的提升了前端渲染效率；缺少是使用复杂，因为需要一门额外的【JSX】语言
- Vue：一款渐进式JavaScript框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了Angular（模块化）和React（虚拟DOM）的有点
- Axios：前端通信框架；因为Vue的边界很明确，就是为了处理DOM，所以并不具备通信能力。此时就需要额外使用一个通信框架与服务器交互；当然也可以直接选择使用jQuery提供的AJAX通信功能
UI框架
- Ant-Design：阿里巴巴出品，基于React的UI框架
- ElementUI、ivew、ice：饿了么出品，基于Vue的UI框架
- Bootstrap：Twitter推出的一个用于前端开发的开源工具包、
- AmazeUI：又叫”妹子UI”，一款HTML5跨屏前端框架
JavaScript构建工具
- Babel：JS编译工具，主要用于浏览器不支持的ES新特性，比如用于编译TypeScript
- WebPack：模块打包器，主要作用是打包、压缩、合并及按序加载
注：以上知识点已将WebApp开发所需技能全部梳理完毕
混合开发（Hybrid App）
? 主要目的是实现一套代码三端统一（PC、Android： .apk、iOS：.ipa）并能够调用到设备底层硬件（如传感器、GPS、摄像头等）、打包方式主要有一下两种：
- 云打包：HBuild->HBuildX,DCloud出品；API Cloud
- 本地打包：Cordova（前身是PhoneGap）
- 微信小程序，详情见官网，这里就是介绍一个方便微信小程序UI开发的框架：WeUI
后端技术
? 前端人员方便开发也掌握一定的后端技术，但我们Java后台人员知道后台体系及其庞大复杂，所以为了方便前端人员开发后台应用，就出现NodeJs这样的技术。
? NodeJS的作者已经声称放弃NodeJS（说是架构做的不好再加上笨重的node_modules）
开始开发全新的Deno。
? 既然是后台技术，那肯定也需要框架和项目管理工具，NodeJS框架及项目管理工具如下：
- Express：NodeJS框架
- Koa：Express简化版
- NPM：项目综合管理工具，类似于Maven
- YARN：NPM的替代方案
主流前端框架
Vue.js