前端小记1

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包，包括安装、卸载、更新、查看、搜索、发布等。