今天完成的事情：

1. 最流行的当属jQuery， 这货是用来做HTML元素选择操作、css和动画、事件绑定、ajax封装等所有网页基本业务的，其中很多设计特点，和方法名称，都被业内完全认可的，跟jQuery类似的库有很多：prototype，mootools，国内也有很多公司做了自己的类似的库。

2. 由于IE8以下浏览器不能兼容ES5的一些数组对象操作的方法，underscore.js 做了这些常用方法的兼容，并且扩展了大量的常用数据操作方法。 数据过滤、分组、选择、循环等等。

3. 模块化的库： 实在是多的数不胜数，最流行的当属requireJs和seaJs，比较纯粹的模块化库，此外，BAT以及其他顶级的(不顶级的)互联网公司几乎只有有一个技术能力不错的前端架构，都会有自己的库，百度的最出名的是esl，腾讯的JX，阿里系的seaJS和KISSY，等。

4. 还有一些专做图表制作的，比如业内最出名的矢量图库highcharts，百度的canvas图库echarts等。

5. js进行复杂的HTML拼装的时候。可能需要使用js模板引擎，这样的库也是数不胜数，handlebars，Mustache，jade等

6. 随着前端 MV* 流行，这样的框架也是多不胜数： 以前的backbone、canjs，现在的新贵angular等

前端是一个工作项目非常杂的职业岗位，以上我讲到的，只是我自己在工作中接触比较多的一些类型，其他还有很多更专业的库，例如使用D3.js进行复杂的3D图形和动画制作，随着Node.js的流行，还有更多的非浏览器平台的功能可以推广使用，甚至应用在浏览器端。

这是一个基于 Bulma 的 Vue.js 轻量级 UI 组件，而 Bulma 则是基于 Flexbox 的 CSS 库。Buefy 具备典型的 Web 应用程序所必备的所有组件，例如 modals、toast 以及 notifications 等动态元素，使开发人员可以快速添加任何用户界面到其现有的 Vue.js 项目。 

HR.js 是一个用于高亮并替换 DOM 中文本的零依赖库。它的 API 简直不能再简单了。你只需要使用 CSS 选择器来定位保存所需文本的 HTML 父元素，选择好要高亮的单词，并设置背景颜色，就可以搞定了。 

3. React VR 

React VR 是用于创建在 Web 浏览器中运行 VR 应用程序的框架。它将现代的 API（如 WebGL 和 WebVR）与 React 的声明式渲染进行搭配，从而产生可以通过各种设备使用的体验。 

4. Tippy.js 

这是一个用于动画工具提示的纯 JavaScript 库。Tippy.js 提供了丰富的悬停效果以及超过 20 个自定义选项。它也是超轻量级的库，并具备相当不错的浏览器兼容性。但如果出现个别浏览器不支持的情况，它会自动退回至常规的 title 属性。 

5. Barba.js 

Barba.js 是一个无依赖的 JavaScript 库，可用于在单页应用程序的视图间创建平滑的过渡效果。该库的逻辑是围绕 PJAX（推送状态 AJAX）来设计的，绕过正常有效的 URL，并通过 XMLHttpRequest 来加载新页面。Barba 还能确保通过 Push 状态的 API ，在应用程序的 URL 中可以正确的反映出状态的变化。 

6. UIkit 

UIkit 是一个优秀的轻量级前端框架，它包含了相应的 SVG 图标字体以及丰富的组件。无论是外观，还是框架，UIkit 的设计都十分的出彩。它不光具备统一的样式，还有易于记忆的 API，许多自定义选项以及有用的修饰器类，并且它的使用文档编写的也相当的出众。 

7. Haul 

Haul 是一个用于开发 React Native 应用程序的命令行工具。它可以直接替代 React Native packager，提供比 Webpack 更好的支持，并能够改进错误消息，大大减少编译时间。Haul 也拥有出色的使用文档，并且完全开源、可定制。 

8. AcrossTabs 

AcrossTabs 是一个用于跨浏览器 Tabs 间进行通信的 JavaScript 库，你可以使用它在不同的浏览器 Tabs 上打开或关闭网页。由于父 Tab 可以访问子 Tab 上有用的信息（例如 UID），所以它可以判断子 Tab 是否依旧打开，或者已关闭。 

9. Stylelint 

Stylelint 是一款现代的 CSS linter 工具，它可以帮助团队在样式表中执行固定的 CSS 标准。该库非常强大，它不仅可以让你禁止或设置白名单属性，还能够捕获错误以及识别 SCSS 语法。同时，Stylelint 也可完全定制，帮助你添加或去除一些规则选项。 

10. Iconate 

这是一个非常棒的 Vanilla JavaScript 库。通过点击图标，它能够帮你完成带有丰富平滑动画效果的图标转换。你也可以将 Iconate 与所有的 CSS 图标字体一同使用。即你只需在 HTML 中添加一个图标，并使用简单的 JavaScript API 来选择要将其转换为哪一种图标，同时选择相应的动画效果就搞定了。 

11. React-Datasheet 

React-Datasheet 是一个用于向应用程序添加类似 Excel 数据表的 React 组件。你可以对单元格进行自由编辑、分组选择、复制、粘贴、删除等操作。另外，在 GitHub 上还有三个有用的示例，供你参考。即基本的表，带有公式的表以及嵌套组件的表。 

12. Pure CSS 

这是一个轻量级、响应式的纯 CSS 模块框架。整个库在 gzip 压缩后，仅有 3.8 kb 的大小，如果你仅使用其中的一部分模块，那 CSS 真是小到没有朋友了！同时，它模块包括了基本样式集、响应格网、表单组件、按钮、表格和菜单，适用于任何的 Web 项目。

使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。

HTML5引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。 应用程序缓存为应用带来三个优势：

• 离线浏览 – 用户可在应用离线时使用它们
• 速度 – 已缓存资源加载得更快
• 减少服务器负载 – 浏览器将只从服务器下载更新过或更改过的资源。

manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。

manifest 文件可分为三个部分：

• CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
• NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
• FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

在线的情况下,用户代理每次访问页面，都会去读一次manifest.如果发现其改变, 则重新加载全部清单中的资源

明天计划的事情： 

继续看CSS，把CSS打牢进入js

遇到的问题：一些东西还是需要巩固

收获：

任务总结：

成果链接：https://miboweixin.github.io/weixin/rw13/task13.html

任务耗时：2天

思维导图：

任务总结：

自适应布局（Adaptive Layout）

自适应布局（Adaptive）的特点是分别为不同的屏幕分辨率定义布局。布局切换时页面元素发生改变，但在每个布局中，页面元素不随窗口大小的调整发生变化。 

你可以把自适应布局看作是静态布局的一个系列。 

就是说你看到的页面，里面元素的位置会变化而大小不会变化；

4、流式布局（Liquid Layout）

流式布局（Liquid）的特点（也叫”Fluid”) 是页面元素的宽度按照屏幕进行适配调整，主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示 

。 

你看到的页面，元素的大小会变化而位置不会变化——这就导致如果屏幕太大或者太小都会导致元素无法正常显示。

5、响应式布局（Responsive Layout）

做手机网站必加的一句头部(head)代码

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">  

name="viewport"   名称=视图

width=device-width 页面宽度=设备宽度(可以理解为获取你手机的屏幕宽度)

initial-scale - 初始的缩放比例  

minimum-scale - 允许用户缩放到的最小比例   

maximum-scale - 允许用户缩放到的最大比例  

user-scalable - 用户是否可以手动缩放  

分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。 

可以把响应式布局看作是流式布局和自适应布局设计理念的融合。 

每个屏幕分辨率下面会有一个布局样式，同时位置会变而且大小也会变。