前端体系结构知识概括
前端体系结构知识概括
- 前端体系
- 三大框架
- CSS
- HTML
- JavaScript
- AJAX
- axios
- UI 组件
- Node.JS
- MVMM
前端体系
前端体系简介:
- 前端开发的核心是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
ling0707007: 国内Java还是主流
R瑞: 学习到了思路,感谢作者分享
「已注销」: 格式好乱
骑着蜗牛赶火车: 死锁的处理策略,老师还讲过鸵鸟算法,就是置之不理
CSDN-Ada助手: 云原生时代,YAML配置到处都是,是否可以说运维也是YAML程序员?