前端小记1

Posted 2020-12-04 bookchilds

1.前端布局框架

（1）Bootstrap

地址》》http://getbootstrap.com/

概述：简洁直观强悍的前端开发框架，让web开发更迅速简单。目前已有bootstrap4，是世界上最受欢迎前端框架，用于构建响应式、移动设备优先的网站。bootstrap中许多组件需要依赖javascript才能运行，具体依赖jQuery、Popper.js

安装：npm install bootstrap

盒模型：为了在CSS中更直观设置尺寸，将全局box-sizing值从content-box修改为border-box，确保padding不会影响元素最终的宽度计算，但可能会导致第三方组件出现问题。eg:Google地图和Google定制搜索。极少数情况需要充值box-sizing。

（2）Foundation

地址》》http://foundation.org.cn/

简介：Foundation类似Bootstrap，是一个免费的前端框架，用于快速开发。在Facebook、eBay、Samsung、Amazon、Disney等网站上使用。

（3）Uikit

地址》》http://www.getuikit.net/

简介：一款轻量级、模块化的前端框架，可快速构建强大的web前端界面。基于Less开发。

注意：UIkit 兼容 IE9 以上现代浏览器。在 IE8 及其以下版本中，所有JavaScript 都会失效。

（4）Web Components

地址》》https://www.jianshu.com/p/e8994b92bb7a

简介：Web Components不是一个规范，是由W3C提出的另外4个规范的合集。

对比：

与React》》Web Components是html提出的模块化，目的是复用web组件，主要思想是封装。而React是为了搭建交互式UI，主要针对不同的状态显示不同的View处理的是View与data的同步。

与React Components》》这两个组件系统相比，Web Components优点在于：HTML规范、复用性移植性高、CSS样式隔离；React Components优点在于：virtual dom支持服务器渲染，seo友好，编写测试方便、浏览器支持情况好、抽象做的更好组件状态管理。

与Vue.js》》Vue.js实现了CSS的模块化，组件的创建、注册、继承、生命周期都和Web Components很像。Vue.js和Polymer区别在于Vue.js不依赖于Web components，不需要polyfill。

 

2.构建工具及包管理器

（1）Grunt

简介》》现在前端自动化已常见，各种工具层出不穷，grunt、gulp、webpack是应用最广的三种工具，虽然grunt看似已垂垂老矣，但是以前很多项目一直是用的grunt，项目维护还是可能会用到的。

常用插件：

合并》》grunt-contrib-concat

压缩》》grunt-contrib-uglify

引用替换》》grunt-usemin(grunt-contrib-copy, grunt-contrib-clean)

（2）yeoman

简介》》帮助创建项目，提供更好的工具来使得项目更多样化。Yeoman提供generator系统，一个generator是一个插件，在完整项目上使用‘yo’命令，会运行generator。通过官方Generators推出了Yeoman工作流，工作流是一个健壮、有自己特色的客户端堆栈，包含能快速构建网络应用的工具和框架。Yeoman主要提供三个工具：脚手架（yo），构建工具（grunt）、包管理器（bower）。这三个工具是分别独立开发的，但是需要配合使用来实现高效工作流。

（3）Bower

简介》》前端包管理工具，帮助我们管理web站点上各种框架，类库等。主要作用：跟踪前端包，保证最新，管理前端里面的HTML,CSS,JS，甚至是图片，最大的好处是对前端进行了优化。如果多个包依赖于一个包，那么Bower只下载一次依赖包，这称为扁平依赖，有助于减少页面加载。

对比：与npm

    现在npm常用于Node.js模块，npm是嵌套依赖树关系。npm嵌套依赖用在服务器上很好，不用关心版本冲突问题。Bower是专门为前端创建的，对于依赖的管理属于扁平化。

（4）npm

简介》》作为node的包管理工具，通常称为node包管理器。主要功能管理node包，包括安装、卸载、更新、查看、搜索、发布等。