[萌新|散修弟子]JS-2171|2018年09月26日的日报-技能树.IT修真院

发表于： 2018-09-26 20:58:52

1 828

今天完成的事情：

1415任务，然后看了js介绍，学习了一下js

明天计划的事情：

学习js，继续看js教程

遇到的问题：

今天主要是js教程，看着有点困难，可能刚接触的原因。

收获：

任务总结，

任务1415难点就是在于，导航栏和轮播图，其他的都是和之前89一样，然后自己要写一个小的库，还有就是导航栏，轮播图用纯css写，就做不到完美，要么能点击，不能轮播，能轮播不能点击，用动画效果做可以点击，

但是，没有圆点背景色改变，就差太多，最后还是用的input和lable绑定写出来的，主要是一个逻辑问题，其他的并不难，做了5天因为，自己做了俩个版本的，把所有可能性都试了一下。所以时间有点多了。

深度思考：

1.为什么要做组件库？

有个自己的库是最好的。

组件: 它的核心意义在于代码复用。功能相对单一或者独立，在整个系统的代码层次上位于最底层，被其他代码所依赖。
模块: 它的核心意义在于分离职责。它的关注点在于功能划分。例如：视频通话、语音通话等功能就可以被分为不同的模块

为什么要做组件库

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

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

组件化的意义

为前端提供了很好的分治策略，可以实现独立维护，可维护性强
组件具有独立性，组件之间可以自由组合
页面只不过是组件的容器，负责组合组件即可形成功能完整的界面

组件开发的原则

标准性: 任何一个组件都应该遵守一套标准，可以使得不同区域的开发人员据此标准开发出一套标准统一的组件。
组合性: 组件之前应该是可以组合的。我们知道前端页面的展示都是一些HTML DOM的组合，而组件在最终形态上也可以理解为一个个的HTML片段。那么组成一个完整的界面展示，肯定是要依赖不同组件之间的组合，嵌套以及通信。
重用性: 任何一个组件应该都是一个可以独立的个体，可以使其应用在不同的场景中。
可维护性

1.目前流行的组件库有哪些？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公司使用自身扩展的类来创建灰烬对象，数组，字符串，函数，提供大量方法与属性用于操作

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

1.BFC是什么

定义：一个块级格式化上下文[BFC]是可视化CSS渲染网页的一部分，它是一个区域，块级布局，相互浮动在这个区域发生。它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。

2.怎样才能形成BFC

float的值不为none。

overflow的值不为visible

display的值为table-cell, table-caption, inline-block中的任何一个

position的值不为relative和static

css3中flex boxes

fieldset元素

3.BFC的作用

包含浮动元素(清除浮动)BFC会根据子元素的情况自适高度，这个特性是对父元素使用overflow:hidden/auto/scroll、 float:left/right 样式可以闭合浮动的

不被浮动元素覆盖浮动元素会无视兄弟元素的存在，覆盖在兄弟元素的上面，为该兄弟元素创建BFC 后可以阻止这种情况的出现

4.BFC规则

内部的Box会在垂直方向，从顶部开始一个接一个地放置

Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加

每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此

BFC的区域不会与float box叠加

3.谈谈以前端角度出发做好SEO需要考虑什么？

精减代码
清除网页中一些冗余的代码，网上有这样的工具，可以辅助完成，如果需要的话，我们可以把代码中的注释去掉，甚至空行之类的也去掉，尽量的减少代码量，从而减小页面体积。

4.知道css有个content属性吗？有什么作用？有什么应用？

content的意思顾名思义，是“内容”，它的作用就是在css中直接生成网页显示的内容，这个属性要结合：before和：after这俩个伪类属性来使用。

5.知道什么是微格式吗？谈谈理解。在前端构建中应该考虑微格式吗？

是开放的数据格式，面向的是普通用户，任何用户可以透过简单的程序读取微格式内容。而不是像Flickr、Amazon、Google等提供特定的面向技术人员的API（一般基于XML-PRC、REST，相对复杂）。RSS具有微格式的部分优点，但限制还是比较多的，比如有限的元数据（标题、描述、URL等），不能更好地描述语义，不太容易与已存在的工具结合等。用微格式可以来聚合外部Blog，Flickr，YouTube，MapQuest，甚至MySpace里的内容。

6.HTML5的离线储存怎么使用？

.CACHE:表示需要离线存储的资源列表，由于包含manifest文件的页面将被自动离线存储，所以不需要把页面自身也列出来。
2.NETWORK:表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在CACHE和NETWORK中有一个相同的资源，那么这个资源还是会被离线存储，也就是说CACHE的优先级更高。
3.FALLBACK:表示如果访问第一个资源失败，那么就使用第二个资源来替换他，比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了，那么就去访问offline.html。

7.渐进增强和优雅降级之间有什么不同?

1.什么是渐进增强

在网页开发中，渐进增强认为应该专注于内容本身。一开始针对低版本的浏览器构建页面，满足最基本的功能，再针对高级浏览器进行效果，交互，追加各种功能以达到更好用户体验,换句话说，就是以最低要求，实现最基础功能为基本，向上兼容。以css为例，以下这种写法就是渐进增强。

1.什么是渐进增强

8.Quirks模式是什么？它和Standards模式有什么区别？

总体会有布局、样式解析和脚本执行三个方面的区别。

盒模型：在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks 模式下，IE的宽度和高度还包含了padding和border。

设置行内元素的高宽：在Standards模式下，给<span>等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。

设置百分比的高度：在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的用margin:0 auto设置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效。

9.经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧？

1. IE6不支持png-24透明图片，问题出现的浏览器：IE6及其更低的版本

问题描述：在IE6浏览器上，使用png24为的图片不透明，出现背景。

解决方法：图片使用gif格式，或者png-8格式图片。

2. 3像素问题，问题出现的浏览器：IE6及其更低的版本

问题描述：两个相邻的div之间有3个像素的空隙，一个div使用了float,而另一个没有使用产生的。

解决方法：对另一个div也使用float;

给浮动的div添加属性margin-right:-3px,但是这样写，在其他浏览器又会不正常，所以我们需要添加IE6的hack，在属性margin-right前添加下划线 _margin-right:-3px.(IE6以及更低版本的hack，是在属性前面添加下划线 _ )

3. 浏览器默认的margin和padding不同，

解决方案是加一个全局的*{margin:0;padding:0;}来统一

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

gird布局