Web前端框架（JavaScript，CSS）html组件CSS规范与第三方库

Posted 2022-02-17 小哈里

1、什么是前端框架

前端框架一般指用于简化网页设计的框架，使用广泛的前端开发套件，比如，jquery，extjs，bootstrap等等，这些框架封装了一些功能，比如html文档操作，漂亮的各种控件（按钮，表单等等），使用前端框架可以帮助快速的网站。

框架是提供一套完整的解决方案，按照规定好的代码结构来做编排，同时前端功能越来越强大而产生的前端框架，所以开发web产品就很必要用前端框架（前端架构）。

2、三大主流框架

• React
  React是一个开源的JavaScript库，由Facebook和一个大型开发者社区共同维护。此库广泛用于开发web应用程序的用户界面。React框架的主要功能是对DOM操作，声明式设计，更快的开发出Web应用系统。使用React框架，可以非常轻松地创建用户交互界面，为应用的每一个状态设计简洁的视图。甚至在数据改变时，React也可以高效地更新渲染界面。
  虽然React框架本身比较容易理解，结构很清晰，就是由十几个API组成，然后异步渲染。但是很多人反映上手还是有一定的的难度的。React是单向数据流，代码写起来会较双向数据流的多一些，但是同样的排查问题时思路清晰很多。

• Vue
  Vue框架的最大优势就是简单易上手，同时它也是目前Web前端开发的最常使用的主流框架。Vue.js是用于构建交互式的Web 界面的库。它提供了MVVM数据绑定和一个可组合的组件系统，具有简单、灵活的API。从技术上讲， Vue.js集中在MVVM模式上的视图模型层，并通过双向数据绑定连接视图和模型。实际的DOM操作和输出格式被抽象出来成指令和过滤器。所以相比其它的MVVM框架，Vue.js更容易上手。
  而且它还可以用来开发最火的小程序，毕竟用这神器，代码敲的飞快，项目也能快速上线。作为一个开源javascript框架，它能够开发单页面应用程序，还可以用作Web应用程序框架。Vue框架最大的优势就是能够在没有任何动作的情况下重新渲染，而且允许我们在需要时随时添加组件。

• Angular
  诞生于2009年于的Angular可以算得上Web前端三大主流框架中最完整的框架，它包含模板、数据双向绑定、路由、模块化、服务、过滤器、依赖注入等所有功能。虽然出生较早，但是因为其强大的功能，至今使用热度不减。对于刚开始前端初学者来讲，掌握这个框架之后，简直会颠覆之前你对前端开发的认知。更方便的是，AngularJS完全基于HTML和JavaScript，因此无需学习其他语法或语言。使用 TypeScript能够提高代码可维护性，有利于后期重构。
  当然，Angular框架也不是完全没有缺点的。虽然双向数据流很方便，但是等业务复杂之后，你可能就搞不清楚数据流了。还有令人不开心的脏值检查，以及directive的封装并没有解决视图与数据关系完全分离，有时候还要用$digist强制触发检测。

3、Web组件

• 什么是Web组件？
  Web 组件是一种与HTML 相关联（HTML-related）的技术，简单来说，它允许开发者创建自定义元素，并如同普通的html 一样使用它们。 另外，也可以创建经过自定义的标准HTML 元素。
  是指对 Web 的数据和方法进行封装实体，可以包含 JavaBean 组件，从而方便地进行业务逻辑的处理。它允许在Web文档和Web应用程序中创建可重用的小部件或组件。这样做的目的是将基于组件的软件工程引入万维网。组件模型将允许单个HTML元素的封装和互操作性。
  Web组件由四大部分组成，可单独或组合使用。

• HTML模板 html Temple
  允许文档包含惰性的DOM块

• 自定义元素 custom elements
  定义新HTML元素的API

• 影子DOM shadow DOM
  封装的DOM和样式，配以组合化

• HTML导入
  将HTML文档导入其他文档的声明方法

4、CSS体系与规范

• 什么是CSS体系与规范？
  在开始在更大的样式表和大项目上作业的时候，你会发现维护一个大型的CSS文件很有挑战性。所以我们需要一些体系与规范用来增强可维护性。
  OOCSS、SMACSS、BEM、CSS Modules、CSS in JS … 这些规范（或称心法、解法）存在的目的都是为了让程式码易懂、可重用，进而有效率地开发和维护。

• BEM
  BEM是一种前端命名方法论，主要是针对CSS，意思是块（Block）、元素（Element）、修饰符（Modifier）的简写。这种命名方法让CSS便于统一团队开发规范和方便维护。

• OOCSS
  两个原则
  Separation of Structure from Skin：分离结构与样式。结构像是元素的大小，样式像是颜色等。
  Separation of Containers and Content：分离HTML 与CSS，意即尽量将可共用的样式提取到单独的class 以供使用。
  白话文解释就是「使用class 撰写样式，每个class 有其各自用途」。

• SMACSS
  具结构分类、命名规则的限制。通则如下：
  结构分类：Base、Layout、Module、State、Theme。
  命名规则：id 与class 受限制地使用、名称使用dash 分隔

5、第三方库（CSS-in-JS）

• 什么是CSS-in-JS？
  CSS-in-JS是一种技术（technique），而不是一个具体的库实现（library）。简单来说CSS-in-JS就是将应用的CSS样式写在JavaScript文件里面，而不是独立为一些.css。
  这样你就可以在CSS中使用一些属于JS的诸如模块声明，变量定义，函数调用和条件判断等语言特性来提供灵活的可扩展的样式定义。

• 不同的实现方式？
  实现了CSS-in-JS的库有很多，据统计现在已经超过了61种。虽然每个库解决的问题都差不多，可是它们的实现方法和语法却大相径庭。从实现方法上区分大体分为两种：唯一CSS选择器和内联样式（Unique Selector VS Inline Styles）。
  对应于这两种实现方式的两个比较有代表性的实现：styled-components和radium。

• styled-components
  通过styled-components，你可以使用ES6的标签模板字符串语法（Tagged Templates）为需要styled的Component定义一系列CSS属性，当该组件的JS代码被解析执行的时候，styled-components会动态生成一个CSS选择器，并把对应的CSS样式通过style标签的形式插入到head标签里面。动态生成的CSS选择器会有一小段哈希值来保证全局唯一性来避免样式发生冲突。
  官网地址：https://styled-components.com/

• Radium
  Radium是由FormidableLabs创建的在github上有超过7.2k star的CSS-in-JS库。Radium和styled-components的最大区别是它生成的是标签内联样式（inline styles）。由于标签内联样式在处理诸如media query以及:hover，:focus，:active等和浏览器状态相关的样式的时候非常不方便，所以radium为这些样式封装了一些标准的接口以及抽象。
  官网地址：https://github.com/FormidableLabs/radium

• CSSModules
  所有的class的名称和动画的名称默认属于本地作用域的CSS文件。
  所以CSS Modules不是一个官方的规范，也不是浏览器的一种机制，它是一种构建步骤中的一个进程。（构建通常需要webpack或者browserify的帮助）。通过构建工具的帮助，可以将class的名字或者选择器的名字作用域化。（类似命名空间化。）

• Styled JSX
  一个支持jsx方式编写的css-in-js插件
  可以使用npm install --save styled-jsx安装。

• Emotion
  官方文档：https://emotion.sh/docs/introduction

• Glamorous
  官方地址：https://glamorous.rocks/

6、CSS预处理器

• 什么是CSS预处理器？
  CSS 预处理器是一个能让你通过预处理器自己独有的语法来生成CSS的程序。市面上有很多CSS预处理器可供选择，且绝大多数CSS预处理器会增加一些原生CSS不具备的特性，例如代码混合，嵌套选择器，继承选择器等。这些特性让CSS的结构更加具有可读性且易于维护。
  Sass、LESS、Stylus 是目前最主流的 CSS 预处理器

• Sass
  Sass 是一个将脚本解析成 CSS 的脚本语言（SassScript），也是一款 CSS 预处理器，它减少了 CSS 的重复，也因此节省了时间。Sass 是最早的 CSS 预处理语言，有比 Less 更强大的功能。Sass 扩展了 CSS3，增加了规则、变量、混入选择器、继承等特性。

• PostCSS
  PostCSS是一款使用插件去转换CSS的工具，有许多非常好用的插件，例如autoprefixer,cssnext以及CSS Modules。而上面列举出的这些特性，都是由对应的postcss插件去实现的。它提供了一个解析器，它能够将 CSS 解析成抽象语法树（AST）。

• cssnext
  cssnext 是一个 CSS transpiler，允许你使用最新的 CSS 语法。cssnext 把新 CSS 规范转换成兼容性更强的 CSS，所以不需要等待各种浏览器的支持。

• LESS
  LESS是一个CSS预处理器，可以为网站启用可自定义，可管理和可重用的样式表。LESS是一种动态样式表语言，扩展了CSS的功能。 LESS也是跨浏览器友好。
  Less允许我们定义变量，使用嵌套式声明，定义函数等。严格说Less包含两部分：（1）Less的语法 （2）Less预处理器。浏览器终究只认识CSS，所以Less文件需要经过Less预处理器编译成为CSS。

• Stylus
  是一种动态样式表预处理器语言，已编译到层叠样式表中。它的设计受到Sass和LESS的影响。它被认为是CSS预处理程序语法中使用最多的第四种。
  它是由TJ Holowaychuk，对Node.js的前程序员和月神语言的创建者创建。它是用JADE和Node.js编写的。

7、CSS框架

什么是CSS框架？

• 简单地说，就是一些事先写好的css，你只需要给你的html元素加上一些特定的类，就可以快速的得到一些想要的效果。

没有JavaScript组件的CSS框架

• bootstrap（用过）
  Bootstrap 是全球最流行的 CSS 框架，并因其响应式设计而一炮而红。它也是第一个优先考虑移动设备的框架。使用 Bootstrap，无需为移动端查看单独设计——添加必要的类，网站将根据设备适应屏幕尺寸。网格是在 Bootstrap 中引入的，这导致开发人员必须编写的代码急剧减少。
  最流行的 CSS 框架之一。他们提供了大量的文档、示例和演示，可以帮你快速进行响应式 Web 开发。该框架的当前版本是 Bootstrap 5。
  官网链接： https://github.com/twbs/bootstrap
• materialize CSS
  Materialize 于 2014 年由 Google 创建。它是一个用于网站和 android 应用程序的响应式 UI 框架。它提供了许多现成的组件、类和入门模板。它与 Sass 兼容，并具有基于 Bootstrap 的 12 列网格格式的响应式布局。因此，如果你想使用 Material Design（Google 的设计语言）并在你的网站上创建类似 Google 的效果，Materialize CSS 将是你的绝佳选择。
  官网链接：https://github.com/Dogfalo/materialize
• Bulma
  最佳CSS框架合集：尽管是新的，但 Bulma 已经迅速登上了前 10 名 CSS 框架的名单。Bulma 拥有超过 20 万用户，并且还在增长。它没有 JavaScript 组件（没有 .js）和最易读的 CSS 类。为了创建网格，Bulma 有一个强大的系统称为瓷砖，使页面优雅整洁。它高度模块化且易于学习。虽然规模很小，但 Bulma 拥有一个充满热情的社区，他们希望改变 CSS 用于网站的方式。
  官网链接： https://github.com/jgthms/bulma

基于JS的CSS框架

• Tailwind
  Tailwind 可以加快前端的开发速度。你将获得预先设计的小部件菜单和实用程序类来构建你的网站，而不是默认主题或内置 UI 组件。Tailwind 具有模块化组件，如果你在一处进行更改，则代码的其他部分不会受到影响。Tailwind 需要最少的学习并且易于使用。你可以使用 CSS 助手类自定义你的网站。
  官网地址： https://github.com/tailwindlabs/tailwindcss

• Material-UI
  一组实现了谷歌Material Design设计原则的React组件集合，江湖传言使用Material-UI可以使我们的页面颜色更鲜艳，动画效果更突出

• reactstrap
  是个简单的React Bootstrap 4组件库，包含React Bootstrap 4组件，这些组件有利于组成和控制。

• Chakra UI
  Chakra UI 是一个简单的, 模块化的易于理解的 UI 组件库. 提供了丰富的构建 React 应用所需的UI组件.
  官网地址：https://chakra-ui.com/docs/getting-started