前端体系结构知识概括

前端体系

前端体系简介：

• 前端开发的核心是HTML + CSS +JavaScript。
• 本质上它们构成一个MVC框架，即HTML作为信息模型（Model），CSS控制样式（View），JavaScript负责调度数据和实现某种展现逻辑（Controller）。
  

HTML基础知识点：

CSS基础知识点：
JS基础知识点：

三大框架

前端三大框架以及jquery与bootstrap这种框架有什么区别？

• 我们必须分清六个基本概念：Library，Toolkit，Framework，Design，Boilerplate，Scaffolding。
• Library就是库，而且分为两类。
• 一类是方法库，用来实现特定需求的一组API集合。最常见的就是jQuery，它是一系列操作DOM和AJAX的API组成的方法库。除了jQuery，还有早期的Prototype，Dojo，Mootools，后面这三个在当时也被称为三大前端工具库。
• 操作Data的有UnderScore和Lodash，操作Event的有现在流行的RxJS，他们都是Library，在需要的时候，正确调用他们提供的方法就可以。
• 一类是UI组件库，满足特定业务需要的高可复用的常见UI组件集合。例如Ant Design of React/Ant Design of Angular(NG-ZORRO)，Element UI，LayUI，EasyUI。早期的Yahoo UI，Extjs，jQuery UI。
• Bootstrap是一个Toolkit(工具箱)，给你提供创建现代响应式页面所需要的工具，包含一套完整的响应式CSS类库，字体，同时还有一套很完整的UI组件。只是这些组件原生是用jQuery写的，不适用于现在主流的前端。所以产生了很多衍生UI库，例如Angular实现的ng-bootstrap和ngx-bootstrap，React实现的react-bootstrap，Vue实现的bootstrap-vue。
• Framework是框架，用来构建一个应用的主体结构。然后你在这个主体结构上添砖加瓦，实现自己的需求。Web服务器端的框架基本实现的都是MVC设计模式，你在Model、View、Controller层分别去添加代码。Web前端，Angular(以及它的前身Angularjs)实现的都是MVP模式，是Model、View、Presenter三层。老一辈的其他前端框架，例如Backbone、Ember，实现的是所谓MVVM。
• 当前所谓的前端三大框架，只有Angular算作严格意义上的Framework，而且是一个Opinionated Framework，其他两个不算。
• 所以，Vue和React都是关注于View这一层的Library。也正因如此，用React或Vue搭建项目就还需要一系列其他周边库做补充支持。例如React本身没有实现路由导航，就需要react-router。等等，还有很多，俗称全家桶。
• Design是设计语言。当说到xxx Design的时候，前端应该经常听到Material Design和AntDesign，分别是Google和阿里的推出的两种前端UI设计语言。
• 设计语言(或者说设计风格)，是指导UI设计需要遵循的一些约束。这些约束包括：色彩、布局、层次、交互反馈等等。就像我们说建筑，有哥特式的、中国古典式的、希腊式的。买衣服，我们知道韩版、英伦风格、波斯米亚风格。
• Design和具体实现是松耦合的，没有直接必然关联。规范只规定这种设计语言的风格是什么样子的，从来不指定具体实现，谁都可以实现。
• Material Design起初是指导Andoid界面的，但是也存在很多Web UI的实现，例如基于Bootstrap开源的有Bootstrap Material。
• Ant Design也是一样。只是最开始只有React的实现Ant Design of React。阿里团队后期发布了Angular的实现Ant Design of Angular(NG-ZORRO)。
• Boilerplate是模板、样板的意思。一般程序员很少了解这个概念，而是Library和Framework知道的多一些。上面说过了，当你用React开发的时候，React本身不能满足全部需求，就需要周边辅助的项目。如何把这些全家桶用最佳实践(Best Practice)的方式组合在一起？就需要有人给一个样板，Ant Design Pro就产生了。所以Ant Design是设计语言、Ant Design of React是遵循这门设计语言并且用React实现的UI组件库，Ant Design Pro就是模板。
• Scaffolding是脚手架工具。前端的脚手架工具一般都是用cli提供的，cli是(Command Line Interface的缩写)，不是Client的前三个字母。例如ng-cli, create-react-app, vue cli，以及用Yeoman(YO)做出来的许多generator。
• 脚手架这个词看似陌生，但其实大家都见过。就是建筑工地大楼施工时候外面那一层钢管搭建的架子，还有很多绿色的网起到保护作用。Scaffolding的作用就是辅助你快速搭建项目。但是Scaffolding不是最终成果物的一部分！

总结：

• vue和react，就是视图层的library
• Angular(ng)稍重一点，属于大而全的framework
• jQuery是一个工具库，与underscore和lodash相比，前者侧重于DOM与BOM相关的web api，后者侧重数据与逻辑
• bootstrap，一种响应式的设计模式，同时提供了快速开发所需的css代码，ui组件和设计范式
• elementui，layui，easyui这些都属于ui库了，用于视图层快速搭建某一类风格页面的“物料”

CSS

css介绍：

• CSS 指层叠样式表 (Cascading Style Sheets)
• 样式定义如何显示 HTML 元素
• 样式通常存储在样式表中
• 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
• 外部样式表可以极大提高工作效率
• 外部样式表通常存储在 CSS 文件中
• 多个样式定义可层叠为一

HTML

html简介：

• HTML 是用来描述网页的一种语言。
• HTML 指的是超文本标记语言 (Hyper Text Markup Language)
• HTML 不是一种编程语言，而是一种标记语言 (markup language)
• 标记语言是一套标记标签 (markup tag)
• HTML 使用标记标签来描述网页

JavaScript

Javascript的前世今生：

• 话说还得从Javascript的前世今生说起。首先众所周知，工作于 Netscape 的 Brendan Eich，开始着手为即将在1995 年发行的 Netscape Navigator 2.0 开发一个称之为 LiveScript的脚本语言，当时的目的是在浏览器和服务器（本来要叫它 LiveWire）端使用它。Netscape 与 Sun 及时完成LiveScript 实现。就在 Netscape Navigator 2.0 即将正式发布前，Netscape 将其更名为JavaScript，目的是为了利用 Java 这个因特网时髦词汇。Netscape 的赌注最终得到回报，JavaScript从此变成了因特网的必备组件。从本质上来说JavaScript和Java没什么关系。
• 随后1996年8月，微软模仿JavaScript开发了一种相近的语言，取名为JS