前端发展概述

01、前端知识体系

1.1、前端三要素：HTML，CSS，JS

• HTML（结构）：超文本标记语言（Hyper Text Markup Language），决定网页结构内容
• CSS（样式）：层叠样式表（Cascading Style Sheets），设定网页的表现形式
• JavaScript（行为）：是一种弱类型脚本语言，其源码可以不需要经过编译直接被浏览器所解析执行，用于控制网页的行为

1.2、HTML

HTML：超文本标记语言，是一种用于创建网页的标准标记语言。

您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

1.3、CSS

CSS：层叠样式表也是一门标记语言，并不是编程语言，因此不可以定义变量，不可以引用等，换句话说它不具备任何语法支持，它的主要缺陷如下：

• 无法嵌套书写 ，导致模块化开发中需要写很多重复的选择器
• 没有变量和合理的样式复用机制，使的逻辑上相关的属性必须以字面量的形式重复输出，导致难以维护

由于上面的原因导致的问题，前端开发人员会使用一种叫做CSS预处理器的工具，提供CSS缺失的样式层复用机制，减少冗余的代码，提高样式代码的可维护性，提高前端开发效率

1.3.1、什么是CSS预处理器？

CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行 CSS 的编码工作。转化成通俗易懂的话来说就是用一种专门的编程语言，进行 Web 页面样式设计，再通过编译器转化为正常的 CSS 文件，以供项目使用。

常用的 CSS 预处理器有哪些

• SASS：基于 Ruby，通过服务端处理，功能强大。解析效率高。需要学习 Ruby 语言，上手难度高于 LESS。
• LESS：基于 NodeJS，通过客户端处理，使用简单。功能比 SASS 简单，解析效率也低于 SASS，但在实际开发中足够了，所以我们后台人员如果需要的话，建议使用 LESS。

1.4 、JavaScript

JavaScript是一门弱类型脚本语言，其源码可以不经过编译直接被浏览器所执行

原生的JS开发，也就是按照ECMAScript标准的开发方式，简称ES，特点是所有的浏览器都支持

1.4.1 常用的JavaScript框架

• JQuery：优点是简化了DOM操作，缺点是DOM操作太频繁会影响前端特性，在前端眼里使用它仅仅是为了兼容IE6，7，8。

• Angular：Google收购的前端框架，特点是将后台的MVC模式搬运到前端（例如：JSP），并增加了模块化开发的理念，与微软合作采用TypeScript语法开发，对于前端程序员不友好，缺点是版本迭代不合理。

• React：Facebook出品，一款高性能的JS框架，特点是提出了虚拟DOM的概念，用于减少真实DOM操作，在内存中虚拟DOM操作有效提高了前端渲染效率，缺点是使用复杂，因为还要额外学习一门语言JSX。

• Vue：一款渐进式的JS框架，所谓渐进式就是逐渐实现新特性的的意思，如实现：模块跨开发，路由，状态管理等新特性，其特点是综合了Angular（模块化）和React（虚拟DOM）的优点。

• Axios ：前端通信框架，因为Vue边界很明确，就是为了处理DOM，所以不具备通信能力，此时需要额外使用一个通信框架与服务器进行交互，也可以使用JQuery提供的AJAX通信功能。

1.5、主流UI框架(View层框架)

• Ant-Design：阿里巴巴出品，基于React的UI框架

• ElementUI，iview，ice：饿了吗出品，基于Vue的UI框架

• BootStrap：Twitter推出的一个用于前端开发的开源工具包

• AmazeUI：一款基于HTML5跨屏前端框架

1.6 JavaScript构建工具

类似后端用的Maven和Gradle

• Babel：JS编译工具，主要用于浏览器不支持ES新特性，比如用于编译TypeScript
• WebPack：模块打包器，主要作用是打包，压缩，合并及按序加载。

1.7、nodeJs

• nodeJs就是让JavaScript(JS)可以实现服务器上的开发

• JavaScript(前端语言)+nodeJs(JavaScript的运行环境)=实现服务器上的开发(后端技术)

前端人员为了方便开发也需要掌握一定的后端技术，但是后端技术体系很庞大，为了方便前端人员开发后台应用，就出现了NodeJS技术。

NodeJS的作者生成已经放弃了NodeJS，可能因为架构做的不好再加上笨重的node_modules的原因吧，开始开发新架构的Deno。

既然NodeJS是后台技术，肯定也需要框架和项目管理工具，NodeJS框架及项目管理工具如下：

• Express：NodeJS框架
• Koa：Express简化版
• NPM：项目综合管理工具，类似于Maven
• YARN：NPM的替代方案，类似于Maven和Gradle的关系

02、了解前后端分离的演变历史

注意：一定不要为了前后端分离而分离，前后端分离适合一些大的项目，有些小的项目不要要进行前后端分离。

2.1、后端为主的MVC时代

为了降低开发的复杂度，以后端为出发点，比如：Struts，SpringMVC等框架的使用，就是后端的MVC时代：

以SpringMVC流程为例：

工作流程：

• 浏览器发起请求到前端控制器：DispatcherServlet

• 前端控制器请求处理器映射器：HandlerMapping，查找Handler，可以根据XML配置，注解进行查找

• 处理器映射器向前端控制器返回Handler

• 前端控制器调用处理器适配器去执行Handler

• 处理器适配器去执行Handler

• Handler执行完毕给适配器返回ModelAndView，ModelAndView是SpringMVC框架的一个底层对象，包括Model（数据）和View（视图）

• 前端控制器请求视图解析器去进行视图解析，根据逻辑视图名解析成真正的视图（JSP）

• 视图解析器向前端控制器返回View

• 前端控制器进行视图渲染，视图渲染模型数据（在ModelAndView中）填充到request域

• 前端控制器向用户返回响应结果

优点：

• MVC是一个非常好的协作模式，能够有效地降低代码的耦合度，从架构上能够让开发者明白代码应该写在哪里（JSP），为了让View更纯粹，还可以使用Thymeleaf，Freemarker等模板引擎，使模板里无法写入java代码，让前后端分工更加清晰（HTML）。

缺点：

• 前端开发重度依赖开发环境，开发效率低下，这种架构下，前后端协作有两种模式：

  • 第一种：前端写Demo，写好后，让后端去套模板，好处是Demo可以本地开发，很高效，不足是需要后端套模板，有可能会套错，而且套完之后还需要前端来确定，来回沟通成本比较高
  • 第二种：前端负责浏览器端的所有开发和服务器端的View层模板开发，好处是UI相关的代码是前端来写好，后端不用太关注，不足是前端开发重度绑定后端环境，环境称为影响前后端开发效率的重要因素。

• 前后端职责纠缠不清前端指责纠缠不清，模板引擎功能强大，可以通过上下文变量来实现各种业务逻辑，只要前端弱势一些，就会被后端要求在模板层写出不少业务代码，还有个重要的是灰色地带controller层，这个层是用来实现页面路由的，而这个页面路由本来应该是前端所关注的，但是却是由后端来实现的。此外controller本身也跟model纠缠不清，让人看了咬牙的业务代码经常出现在controller层，不过这些问题不能全部归于程序员的素养，不然jsp就够了。

• 对前端发挥的局限性，性能优化之在前端做，空间非常有限，于是经常要后端来合作，但是由于后端框架限制，很难用comet，bigpipe等技术方案来优化性能。

2.2、基于AJAX带来的SPA时代

2005年ajax（Asynchronous JavaScript And XM，异步JavaScript和XML）被正式提出并开始使用CDN作为静态资源存储，于是出现了JS王者归来（在这之前js都是在网页上贴狗皮药膏的）的SPA（single page application）单页面应用时代。

优点

• 前端后端分工非常清晰，前后端关键协作点是ajax接口，看起来很美妙，但是回过头看看的话这和jsp时代区别不大，复杂度从服务器端的JSP里面移到了浏览器的JavaScript，使得浏览器变得很复杂，类似springmvc，这个时候开始出现浏览器端的分层架构：
  

缺点

• 前后端接口的约定：如果后端接口一塌糊涂，或者说后端业务模型不够稳定，那么前端开发会很痛苦。不少团队也有类似尝试，通过接口规则，接口平台等方式来做，有了和后端一起沉淀的接口规则，还可以用来模拟数据，使得前后端可以在约定接口后实现高效并行开发
• 前端开发的复杂度控制：SPA应用大多以交互型为主，JS代码超过十万行很正常，大量的JS代码组织，与view层的绑定等，都不是容易的事。

2.3、前端为主的MV*时代

此处的MV*模式如下：

• MVC（同步通信为主）：model，view，controller
• MVP（异步通讯）：model，view，presenter
• MVVM（异步通信为主）：model，view，viewModel

​ 为了降低前端开发复杂度，涌现了大量的前端框架，比如Angular.js，React，Vue.js，ember.js等，这些框架总的原则是先按模型分层，比如Templates，Controllers，Model，然后再在层内做切分如下图：

优点

• 前后端职责清晰：前端工作在浏览器端，后端工作在服务器端，清晰的分工，可以让开发并行，测试数据的模拟不难，前端可以本地开发，后端则可以专注于业务逻辑的处理，输出用resful等接口
• 前端开发的复杂度可控：前端代码很重，但合理的分层，让前端代码能各司其职，这一块值得赞赏，简单如模板的特性选择，就有很多研究，并非越强大越好，限制什么，留下哪些自由，代码如何组织，所有的一切设计，都值得话一本书讲讲。
• 部署相对独立，可以快速改善产品体验

缺点

• 代码不能复用，比如后端依旧要对数据做各种校验，校验逻辑无法复用浏览器端的代码，如果可以复用，那么后端的数据校验相对简单化。
• 全异步，对seo不利，往往还要做服务器同步渲染的降级方案
• 性能并非最佳，特别是移动互联网的环境下
• SPA不能满足所有需求，依旧存在大量多页面应用程序，url design 依旧需要后端配合，前端无法完全掌控

2.4 NodeJs带来的全栈时代

​ 前端为主的MV*模式解决了很多很多问题，但如上所述，依旧存在不少不足之处。随着NodeJS的兴起，JavaScript 开始有能力运行在服务端。这意味着可以有一种新的研发模式：

在这种研发模式下，前后端的职责很清晰，对前端来说，两个UI层各司其职：

• Front-end UI layer处理浏览器层的展现逻辑。通过CSS渲染样式，通过JavaScript添加交互功能，HTML的生成也可以放在这层，具体看应用场景。
• Back-end UI layer处理路由、模板、数据获取、Cookie等。通过路由，前端终于可以自主把控URL Design，这样无论是单页面应用还是多页面应用，前端都可以自由调控。后端也终于可以摆脱对展现的强关注，转而可以专心于业务逻辑层的开发。

通过Node, Web Server层也是JavaScript代码，这意味着部分代码可前后复用，需要SEO
的场景可以在服务端同步渲染，于异步请求太多导致的性能问题也可以通过服务端来缓解。前一种模式的不足，通过这种模式几乎都能完美解决掉。

与JSP模式相比，全栈模式看起来是一种回归，也的确是一种向原始开发模式的回归，不过是一种螺旋上升式的回归。

基于NodeJS的全栈模式，依旧面临很多挑战:

• 要前端对服务端编程有更进一步的认识。比如TCP/IP等网络知识的掌握。
• NodeJS层与Java层的高效通信。NodeJS模式下，都在服务器端，RESTful HTTP通信未必高效，通过SOAP等方式通信更高效。一 切需要在验证中前行。
• 对部署、运维层面的熟练了解，需要更多知识点和实操经验。
• 大量历史遗留问题如何过渡。这可能是最大最大的阻力。

2.5.总结

​ 综上所述，模式也好，技术也好，没有好坏优劣之分，只有合适不合适，前后端分离的开发思想主要是基于SOC（关注度分离原则），上面几种模式，都是让前后端职责更加清晰，分工更加高效合理。

03、MVVM

3.1、什么是mvvm？

一种软件架构模式，MVVM 源自于经典的 MVC（Model-View-Controller）模式。MVVM 的核心是 ViewModel 层，负责转换 Model 中的数据对象来让数据变得更容易管理和使用，其作用如下：

• 该层向上与视图层（View）进行双向绑定
• 向下与model层通过接口请求进行数据交互
  
• Vue.js就是一个mvvm架构的框架

3.2、为什么要用MVVM？

MVVM 模式和 MVC 模式一样，主要目的是分离视图（View）和模型（Model），有几大好处：

• 低耦合： 视图（View）可以独立于 Model 变化和修改，一个 ViewModel 可以绑定到不同的 View 上，当 View 变化的时候 Model 可以不变，当 Model 变化的时候 View 也可以不变。
• 可复用： 你可以把一些视图逻辑放在一个 ViewModel 里面，让很多 View 重用这段视图逻辑。
• 独立开发： 开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。
• 可测试： 界面素来是比较难于测试的，而现在测试可以针对 ViewModel 来写。

3.3、mvvm的组成部分

View

• View 是视图层，也就是用户界面。前端主要由 HTML 和 CSS 来构建，为了更方便地展现 ViewModel 或者 Model 层的数据，已经产生了各种各样的前后端模板语言，比如 FreeMarker、Thymeleaf 等等，各大 MVVM 框架如 Vue.js，AngularJS，EJS 等也都有自己用来构建用户界面的内置模板语言。

Model

• Model 是指数据模型，泛指后端进行的各种业务逻辑处理和数据操控，主要围绕数据库系统展开。这里的难点主要在于需要和前端约定统一的 接口规则

ViewModel

• ViewModel 是由前端开发人员组织生成和维护的视图数据层。在这一层，前端开发者对从后端获取的 Model 数据进行转换处理，做二次封装，以生成符合 View 层使用预期的视图数据模型。

• 需要注意的是 ViewModel 所封装出来的数据模型包括视图的状态和行为两部分，而 Model 层的数据模型是只包含状态的

• 比如页面的这一块展示什么，那一块展示什么这些都属于视图状态（展示）
  页面加载进来时发生什么，点击这一块发生什么，这一块滚动时发生什么这些都属于视图行为（交互）

• 视图状态和行为都封装在了 ViewModel 里。这样的封装使得 ViewModel 可以完整地去描述 View 层。由于实现了双向绑定，ViewModel 的内容会实时展现在 View 层，这是激动人心的，因为前端开发者再也不必低效又麻烦地通过操纵 DOM 去更新视图。

• MVVM 框架已经把最脏最累的一块做好了，我们开发者只需要处理和维护 ViewModel，更新数据视图就会自动得到相应更新，真正实现事件驱动编程。

• View 层展现的不是 Model 层的数据，而是 ViewModel 的数据，由 ViewModel 负责与 Model 层交互，这就完全解耦了 View 层和 Model 层，这个解耦是至关重要的，它是前后端分离方案实施的重要一环。

3.4、MVVM模式的实现者

• Model：模型层，在这里表示JavaScript对象（数据）
• View：视图层，在这里表示DOM (HTML操作的元素)
• ViewModel：连接视图和数据的中间件，Vue.js 就是MVVM中的ViewModel层的实现者

在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信,而
ViewModel就是定义了一个Observer观察者

• ViewModel 能够观察到数据的变化，并对视图对应的内容进行更新
• ViewModel能够监听到视图的变化，并能够通知数据发生改变

至此，我们就明白了，Vue.js就是一个MVVM的实现者，它的核心就是实现了DOM监听与数据绑定。