今天完成的事情：

   完成了任务14 修改了bug，提交了任务。
明天计划的事情：

   搞懂js的基础知识，比如什么是变量什么是对象
遇到的问题：

   刚进js好多东西都不懂，很懵逼

 任务14/15总结：

任务14.15算是对于css所学的全部内容加深使用，包括像后面所学到的sass 属性的一些使用，以及组建自己所使用的组件库，bootstrap的使用

任务14.15感觉其它还好主要难点就是导航栏轮播图，花了几天时间才弄出来，特别是轮播图，很懵逼，不过，完成也有好处，对自己的提升还是有的，

比如对媒体查询的运用，动画效果的展示，后面就是bootstrap用起来是真的舒服。

任务耗时7天

深度思考：

为什么要做组件库？

1什么是组件：

组件

它的核心意义在于代码复用。功能相对单一或者独立，在整个系统的代码层次上位于最底层，被其他代码所依赖。

模块

它的核心意义在于分离职责。它的关注点在于功能划分。 例如： 视频通话、语音通话等功能就可以被分为不同的模块

2为什么要做组件库：

传统开发方式效率低以及维护成本高的主要原因在于很多时候是将一个系统做成了整块应用，而且往往随着业务的增长或者变更，系统的复杂度会呈现指数级的增长，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。

针对此弊端，其实业界早就有了一些探索，我们希望一个大且复杂的场景能够被分解成几个小的部分，这些小的部分彼此之间互不干扰，可以单独开发，单独维护，而且他们之间可以随意的进行组合。就拿电脑主机来说，一台整机包括CPU，主板，内存，硬盘等等，而这些部件其实都是由不同的公司进行生产的，他们彼此之间根据一套标准分别生产，最后组装在一起。当某个部件出现问题时，不需要将整台主机都进行维修，只需要将坏的部件拿下来，维修之后再将其组合上就可以了。这种化繁为简的思想在后端开发中的体现是微服务，而在前端开发中的体现就是组件化。

3组件化的意义：

为前端提供了很好的分治策略，可以实现独立维护，可维护性强

组件具有独立性，组件之间可以自由组合

页面只不过是组件的容器，负责组合组件即可形成功能完整的界面

4组件开发的原则：

标准性

任何一个组件都应该遵守一套标准，可以使得不同区域的开发人员据此标准开发出一套标准统一的组件。

组合性

组件之前应该是可以组合的。我们知道前端页面的展示都是一些HTML DOM的组合，而组件在最终形态上也可以理解为一个个的HTML片段。那么组成一个完整的界面展示，肯定是要依赖不同组件之间的组合，嵌套以及通信。

重用性

任何一个组件应该都是一个可以独立的个体，可以使其应用在不同的场景中。

可维护性

任何一个组件应该都具有一套自己的完整的稳定的功能，仅包含自身的，与其它组件无关的逻辑，使其更加的容易理解，使其更加的容易理解，同时大大减少发生bug的几率。

组件化的方法

我们把一个组件保存为一个文件夹，把相应的HTML, CSS, JS 文件都放在一起。在需要用的时候再引用相应的文档就可以了。

目前流行的组件库有哪些？css，js各有哪些流行的库？

1. WeUI 

          WeUI是一套  同微信原生视觉体验一致的基础样式库，微由官方信设计团队为微信内|网页微状语从句：信小程序量身设计，令用户的使用感知更加统一.https ： //weui.io / 

  2. MDUI 

         相比国外框架，MDUI更多重要中文排版，提供全中文文档，中文社区。组件丰富MDUI包含了20余个组件，且每个组件都可以适应不同主题。国内开发的mdui基于material- ui开发的.MDUI是一套用于开发Material Design网页的前端框架   https://www.mdui.org/

 3. 惊奇  UI 

          惊奇UI  称为妹子UI的开源框架，据称是中国首个开源HTML5跨屏前端框架。妹子UI以移动优先为理念，从小屏逐渐到大屏，实现响应式网页.Amaze UI包含20个以上的CSS组件，20 +个JS组件，更多多个包含不同主题的Web组件。相比国外框架，妹子UI关注中文排版提供本地化支持。面向HTML5开发，使用CSS3来实现动画交互，轻量级高性能 .http：  //amazeui.org/

4.设计蚂蚁  

           一个服务于企业级产品的设计体系，基于“确定”和“自然”的设计价值观和模块化的解决方案，让设计者专注于更好的用户体验。 https://ant.design /索引-CN  

 5.易于UI 

           easyui是基于jQuery的和角用户的界面组件的集合.easyui提供了构建现代互动的JavaScript的应用程序的基本功能。使用easyui你不需要编写很多的的JavaScript代码，通常通过编写一些HTML标记来定义用户界面  .http：//www.jeasyui.com/

6. Bootstrap   

           简洁，直观，强悍的前端开发框架，让web开发更迅速，简单 .http：//www.bootcss.com/ 

7. Foundation 

            Foundation框架总体来看要比Bootstrap略显高大上一点，但他们俩的设计理念都是非常清楚的， Bootstrap有引导的意思，它尝试处理你项目中的一切所需注册有基础，地基及支柱的意思，给你项目中强有力的创造与支持。相对于引导丰富的组件及插件，基金会提供了仅有限的几种元素，其目标是，即使你使用预定义的UI元素，也不应该与大家的网站长得太像。而引导则致力于提供所有定义好的元素，这样使得看起来许多网站都差不多。基础默认不带图标集，它推荐使用开源字体图标。与引导一样，基金使用网格流式布局将网页划分为12列，针对不同的设备显示不同的列数，实现响应式布局。 https://foundation.zurb.om/sites.html

8. jQuery 

            jQuery是最常用的JavaScript库，它革命性的在客户端开发，将CSS选择器引入到DOM节点检索加链接来应用事件处理程序，动画和Ajax调用.jQuery近年来备受青睐，对于一个很需要的的JavaScript的功能的项目来说，jQuery的的的绝对是一个可行的选择。  https://jquery.com/

9.阵营

         阵营起源于实的内部项目，因为该公司对市场上所有的JavaScript的MVC框架，都不满意，就决定写自己 一套，用来架设的Instagram的的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了.React声称的英文一个用于构建用户界面的的的JavaScript库，它专注于MVC开发的“视图”部分，并且可以轻松创建保留状态的UI组件。它是实现虚拟DOM的第一个库，内存结构计算差异，有效地更新页面  .https： //reactjs.org/

10.Angular 

          AngularJS [1]诞生于2009年，由Misko Hevery等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中

 .11.Vue

           Vue.js是一个构建数据驱动的网页界面的渐进式框架。由在美的谷歌工程师尤雨溪开发.Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。它不仅仅是易于上手，还便于与第三方库或既有项目整合.Vue.js自身不是一个全能框架-聚焦它只于视图层因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js也能完美地驱动复杂的单页应用.https：//cn.vuejs.org/ 

12.Backbone

            支持jquery，自带路由，对象化视图，强大的同步机制减少页面大小从而加快页面显示   .http ：//backbonejs.org/ 

13.Ember

         一个用于创建web应用的JavaScript MVC框架，采用基于字符串的句柄条模板，支持双向绑定，观察者模式，计算属性（依赖其他属性动态变化），自动更新模板，路由控制，状态机等  。 Ember公司使用自身扩展的类来创建灰烬对象，数组，字符串，函数，提供大量方法与属性用于操作 .https：//www.emberjs.com/

请描述 BFC(Block Formatting Context) 及其如何工作

 浏览器默认边距不同

由于不同浏览器的很多标签的默认间距是有差别的，所以样式重置就显得尤为重要， 否则网页很容易在不同浏览器上出现较大差异甚至是不能使用

3.2 MARGIN加倍问题

设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug

描述一个你在实际使用中有用过什么比较好的布局方式（不拘泥于页面整体布局，页面中某一小版块也行），深入讲解下其中的原理？

拿响应式布局来说，pc站当然是把所有能呈现的东西都呈现出来，而且一般整体是纵向布局，局部用横向布局（float较多）。到了平板电脑，基本上和pc的布局也是差不多的。到了手机，才开始有了很大的变化，整体依然是纵向布局，但是横向布局却变得越来越少，因为手机能呈现在一屏的内容确实是少之又少，而且还要考虑到分辨率大小的问题，所以一般都是不用float布局，把最重要的功能呈现出来，没有pc里面那么多的效果。