目录
1.前端三要素
HTML(结构):超文本标记语言(Hyper Text Markup Language),决定网页的结构和内容
CSS(表现):层叠样式表(Cascading Style Sheets),设定网页的表现样式
- CSS 预处理器:提供 CSS 缺失的样式层复用机制、减少冗余代码,提高样式代码的可维护性
- 有两种:
- SASS:基于 Ruby,通过服务端处理,功能强大。解析效率高。需要学习 Ruby 语言,上手难度高于 LESS。
- LESS:基于 NodeJS,通过客户端处理,使用简单。功能比 SASS 简单,解析效率也低于 SASS,但在实际开发中足够了,所以我们后台人员如果需要的话,建议使用 LESS。
- 有两种:
JavaScript(行为):是一种弱类型脚本语言,其源代码不需经过编译,而是由浏览器解释运行,用于控制网页的行为–>目前ES6(ECMAScript)为浏览器的主流版本。
2.JavaScript框架
2.1JQuery库
优点是简化了 DOM 操作,缺点是 DOM 操作太频繁,影响前端性能。
2.2 Angular
Google 收购的前端框架,其特点是将后台的 MVC 模式搬到了前端并增加了模块化开发的理念,与微软合作,采用 TypeScript 语法开发。
2.3 React
Facebook 出品,一款高性能的 JS 前端框架;特点是提出了新概念 【虚拟 DOM】 用于减少真实 DOM操作,在内存中模拟 DOM 操作,有效的提升了前端渲染效率;需要学习JSX语言。
2.4 Vue
一款渐进式 JavaScript 框架,所谓渐进式就是逐步实现新特性的意思,如实现模块化开发、路由、状态管理等新特性。其特点是综合了 Angular(模块化) 和 React(虚拟 DOM) 的优点。
2.5 Axios
前端通信框架;因为 Vue 的边界很明确,就是为了处理 DOM,所以并不具备通信能力,此时就需要额外使用一个通信框架与服务器交互;当然也可以直接选择使用 jQuery 提供的 AJAX 通信功能;
3.JavaScript构建工具
Babel:JS 编译工具,主要用于浏览器不支持的 ES 新特性,比如用于编译 TypeScript
WebPack:模块打包器,主要作用是打包、压缩、合并及按序加载
4.前端人员所需要的后端技术
前端人员为了方便开发也需要掌握一定的后端技术,为了方便前端人员开发后台应用,就出现了 NodeJS 这样的技术,目前NodeJS作者开始开发全新架构的 Deno。
NodeJS 框架及项目管理工具如下:
- Express:NodeJS 框架
- Koa:Express 简化版
- NPM:项目综合管理工具,类似于 Maven
- YARN:NPM 的替代方案,类似于 Maven 和 Gradle 的关系
5.UI框架
5.1 常用
- Bootstrap:Twitter 推出的一个用于前端开发的开源工具包
- AmazeUI:又叫“妹子 UI”,一款 HTML5 跨屏前端框架
- Layui:轻量级框架、
- Ant-Design:阿里巴巴出品,基于 React 的 UI 框架
- ElementUI、iview、ice:饿了么出品,基于 Vue 的 UI 框架
5.2 iView
iview 是一个强大的基于 Vue 的 UI 库,有很多实用的基础组件比 elementui 的组件更丰富,主要服务于PC 界面的中后台产品。使用单文件的 Vue 组件化开发模式 基于 npm + webpack + babel 开发,支持ES2015 高质量、功能丰富 友好的 API ,自由灵活地使用空间。
【官方网址】: https://www.iviewui.com
【Github】: https://github.com/TalkingData/iview-weapp
5.3 ElementUI
Element 是饿了么前端开源维护的 Vue UI 组件库,组件齐全,基本涵盖后台所需的所有组件,文档讲解详细,例子也很丰富。主要用于开发 PC 端的页面,是一个质量比较高的 Vue UI 组件库。
【官方网址】: http://element-cn.eleme.io/#/zh-CN
【Github】: https://github.com/ElementUI/element-starter
5.4 ICE
飞冰是阿里巴巴团队基于 React(主)/Angular/Vue 的中后台应用解决方案,飞冰包含了一条从设计端到开发端的完整链路,帮助用户快速搭建属于自己的中后台应用。
【官方网址】: https://alibaba.github.io/ice
【Github】: https://github.com/alibaba/ice
5.5 VantUI
Vant UI 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库,提供了一整套 UI 基础组件和业务组件。通过 Vant,可以快速搭建出风格统一的页面,提升开发效率。
【官方网址】: https://youzan.github.io/vant/#/zh-CN/intro
【Github】: https://github.com/youzan/vant
5.6 AtUI
at-ui 是一款基于 Vue 2.x 的前端 UI 组件库,主要用于快速开发 PC 网站产品。 它提供了一套 npm +webpack + babel 前端开发工作流程,CSS 样式独立,即使采用不同的框架实现都能保持统一的 UI 风格。
【官方网址】: https://at-ui.github.io/at-ui/#/zh
【Github】: https://github.com/at-ui/at-ui
5.7 CubeUI
cube-ui 是滴滴团队开发的基于 Vue.js 实现的精致移动端组件库。支持按需引入和后编译,轻量灵活;扩展性强,可以方便地基于现有组件实现二次开发。
【官方网址】: https://didi.github.io/cube-ui/#/zh-CN
【Github】: https://github.com/didi/cube-ui/
5.8 Flutter
Flutter 是谷歌的移动端 UI 框架,可在极短的时间内构建 Android 和 iOS 上高质量的原生级应用。Flutter 可与现有代码一起工作, 它被世界各地的开发者和组织使用, 并且 Flutter 是免费和开源的。
【官网地址】 https://flutter.dev/docs
【Github】 https://github.com/flutter/flutter
注:Google 出品,主要特点是快速构建原生 APP 应用程序,如做混合应用该框架为必选框架
5.9 Ionic
Ionic 既是一个 CSS 框架也是一个 Javascript UI 库,Ionic 是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序,它提供了很多 UI 组件来帮助开发者开发强大的应用。它使用JavaScript MVVM 框架和 AngularJS/Vue 来增强应用。提供数据的双向绑定,使用它成为 Web 和移动开发者的共同选择。
【官网地址】https://ionicframework.com/
【官网文档】https://ionicframework.com/docs/
【Github】https://github.com/ionic-team/ionic
5.10 mpvue
WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。包含 button、cell、dialog、toast、article、icon 等各式元素。
【官网地址】https://weui.io/
【Github】https://github.com/weui/weui.git
6.前后端分离的发展史
6.1 后端为主的 MVC 时代
为了降低开发的复杂度,以后端为出发点,比如:Struts、SpringMVC 等框架的使用,就是后端的 MVC时代.
缺点:前端开发重度依赖开发环境,开发效率低
- DispatcherServlet表示前置控制器,是整个SpringMVC的控制中心。用户发出请求,
DispatcherServlet接收请求并拦截请求。
我们假设请求的url为 : http://localhost:8080/SpringMVC/hello
如上url拆分成三部分:
http://localhost:8080服务器域名
SpringMVC部署在服务器上的web站点
hello表示控制器
通过分析,如上url表示为:请求位于服务器localhost:8080上的SpringMVC站点的hello控制器。 - HandlerMapping为处理器映射。DispatcherServlet调用HandlerMapping,HandlerMapping根据
请求url查找Handler。 - HandlerExecution表示具体的Handler,其主要作用是根据url查找控制器,如上url被查找控制器
为:hello。 - HandlerExecution将解析后的信息传递给DispatcherServlet,如解析控制器映射等。
- HandlerAdapter表示处理器适配器,其按照特定的规则去执行Handler。
- Handler让具体的Controller执行。
- Controller将具体的执行信息返回给HandlerAdapter,如ModelAndView。
- HandlerAdapter将视图逻辑名或模型传递给DispatcherServlet。
- DispatcherServlet调用视图解析器(ViewResolver)来解析HandlerAdapter传递的逻辑视图名。
- 视图解析器将解析的逻辑视图名传给DispatcherServlet。
- DispatcherServlet根据视图解析器解析的视图结果,调用具体的视图。
- 最终视图呈现给用户。
6.2 基于 AJAX 带来的 SPA 时代
2005 年 AJAX (Asynchronous JavaScript And XML,异步 JavaScript 和 XML,老技术新用法) 被正式提出并开始使用 CDN 作为静态资源存储,于是出现了 JavaScript 的 SPA(Single Page Application)单页面应用时代。与MVC差别不大,但是出现了浏览器端分层架构
缺点:如果后端的接口一塌糊涂,如果后端的业务模型不够稳定,那么前端开发会很困难且大量JS 代码的组织,与 View 层的绑定等,都不是容易的事情。
6.3 前端为主的MV*时代
此处的MV* 模式如下:
- MVC(同步通信为主):Model、View、Controller
- MVP(异步通信为主):Model、View、Presenter
- MVVM(异步通信为主):Model、View、ViewModel
缺点:
- 代码不能复用。比如后端依旧需要对数据做各种校验,校验逻辑无法复用浏览器端的代码。如果可以复用,那么后端的数据校验可以相对简单化。
- 全异步。
- SPA 不能满足所有需求,依旧存在大量多页面应用。URL Design 需要后端配合,前端无法完全掌控。
6.4 NodeJS全栈时代
随着 NodeJS 的兴起,JavaScript 开始有能力运行在服务端。
对前端来说,两个 UI 层各司其职:
- Front-end UI layer 处理浏览器层的展现逻辑。通过 CSS 渲染样式,通过 JavaScript 添加交互功能,HTML 的生成也可以放在这层,具体看应用场景。
- Back-end UI layer 处理路由、模板、数据获取、Cookie 等。通过路由,前端终于可以自主把控URL Design,这样无论是单页面应用还是多页面应用,前端都可以自由调控。后端也终于可以摆脱对展现的强关注,转而可以专心于业务逻辑层的开发。
通过 Node,Web Server 层也是 JavaScript 代码,这意味着部分代码可前后复用。
总结:前后分离的开发思想主要是基于 SoC (关注度分离原则),都是让前后端的职责更清晰,分工更合理高效。
7.MVVM模式
MVVM(Model-View-ViewModel)是一种软件架构设计模式,是一种简化用户界面的事件驱动编程方式。
MVVM 源自于经典的 MVC(Model-View-Controller)模式。MVVM 的核心是 ViewModel 层,负责转换 Model 中的数据对象来让数据变得更容易管理和使用,其作用如下:
- 该层向上与视图层进行双向数据绑定
- 向下与 Model 层通过接口请求进行数据交互
Vue.js就是MVVM框架
7.1 好处
MVVM 模式和 MVC 模式一样,主要目的是分离视图(View)和模型(Model):
- 低耦合: 视图(View)可以独立于 Model 变化和修改,一个 ViewModel 可以绑定到不同的 View
上,当 View 变化的时候 Model 可以不变,当 Model 变化的时候 View 也可以不变。 - 可复用: 你可以把一些视图逻辑放在一个 ViewModel 里面,让很多 View 重用这段视图逻辑。
- 独立开发: 开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计。
- 可测试: 界面素来是比较难于测试的,而现在测试可以针对 ViewModel 来写。
7.2 组成
View:
View 是视图层,也就是用户界面。前端主要由 HTML 和 CSS 来构建,为了更方便地展现ViewModel 或者 Model层的数据,已经产生了各种各样的前后端模板语言,比如 FreeMarker、Thymeleaf 等等,各大 MVVM 框架如 Vue.js,AngularJS,EJS 等也都有自己用来构建用户界面的内置
模板语言。
Model:
Model 是指数据模型,泛指后端进行的各种业务逻辑处理和数据操控,主要围绕数据库系统展开。这里的难点主要在于需要和前端约定统一的接口规则
ViewModel:
ViewModel 是由前端开发人员组织生成和维护的视图数据层。在这一层,前端开发者对从后端获取的Model 数据进行转换处理,做二次封装,以生成符合 View 层使用预期的视图数据模型。
需要注意的是 ViewModel 所封装出来的数据模型包括视图的状态和行为两部分,而 Model 层的数据模型是只包含状态的。
View 层展现的不是 Model 层的数据,而是 ViewModel 的数据,由 ViewModel 负责与Model 层交互,这就完全解耦了 View 层和 Model 层,这个解耦是至关重要的,它是前后端分离方案实施的重要一环。