刷题总结831

在下列promise所提供的方法中，用来向成功或者失败的回调函数队列中添加回调函数的是（ ）

then 接收两个回调函数并返回一个新的 promise 对象，这两个回调函数分别对应成功回调 onFullfilled 和失败回调 onRejected，这两个回调函数接收 promise 的返回值；
always (finally) 接收一个回调函数并返回一个新的 promise 对象，回调函数在上一个 promise 解析完成之后调用，也就是不管前面是 then 还是 catch 被调用了，它都会被调用，该回调函数不会接收参数。

requestAnimationFrame(() => console.log(i))

以下代码执行后，console 输出的信息是5 5 5 5 5

for(var i = 0; i < 5; i++){
requestAnimationFrame(() => console.log(i));
}

requestAnimationFrame并非同步执行的，具体可查阅其实现细节，所以for循环中的requestAnimationFrame会在循环退出的时候才执行其中的回调，注意循环退出的时候 i 的值为 5.

window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。
该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。

当你准备更新动画时你应该调用此方法。

这将使浏览器在下一次重绘之前调用你传入给该方法的动画函数(即你的回调函数)。
回调函数执行次数通常是每秒60次，但在大多数遵循W3C建议的浏览器中，回调函数执行次数通常与浏览器屏幕刷新次数相匹配。

为了提高性能和电池寿命，因此在大多数浏览器里，当requestAnimationFrame() 运行在后台标签页或者隐藏的<iframe> 里时，requestAnimationFrame() 会被暂停调用以提升性能和电池寿命。

var a=b=3

var a,b;
(function(){
    alert(a);//这是第一个输出的,先在局部没找到a变量，然后去全局找，找到了但没定义，输出undefined
    alert(b); //这是第二个输出的，其他同上
    var a=b=3; //定义一个局部变量a=3,然后给全局变量b赋值 b=3;
    alert(a); //这是第三个输出，局部变量a=3
    alert(b);//这是第四个输出，全局变量b=3
})();
alert(a);//这是第五个输出，全局变量a=undefined
alert(b);//这是第六个输出，全局变量b=3 

输出

undefined，undefined，3,3，undefined，3

• 声明提前，但是赋值并不会提升，所以前两个是undefined。
• 函数内部定义变量不用var声明是全局变量
• var a=b=3 相当于 var a = 3；b = 3；b是全局的

这段代码其实等价于

var a,b;  //undefined 
(function(){
    var a;   //undefined 
    alert(a);  //undefined 
    alert(b);  //undefined 
    b=3;       //3
    a = b;     //3
    alert(a);  //3
    alert(b);  //3
})();
alert(a);   //undefined alert(b);   //3

angularjs1

• 前端MVVM，极大降低前端开发的耦合
• 实现了数据双向绑定
• 实现了依赖注入

M: model模型 V: view 视图 C: controller 控制

AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。
AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。

依赖注入（Dependency Injection），是这样一个过程：由于某客户类只依赖于服务类的一个接口，而不依赖于具体服务类，所以客户类只定义一个注入点。在程序 运行过程中，客户类不直接实例化具体服务类实例，而是客户类的运行上下文环境或专门组件负责实例化服务类，然后将其注入到客户类中，保证客户类的正常运行。

Angular大大减少了对DOM的访问。jQuery极大的丰富了DOM操作

触摸事件

以下是四种touch事件

touchstart:     //手指放到屏幕上时触发
touchmove:      //手指在屏幕上滑动式触发
touchend:    //手指离开屏幕时触发
touchcancel:     //系统取消touch事件的时候触发，这个好像比较少用

每个触摸事件被触发后，会生成一个event对象，event对象里额外包括以下三个触摸列表

touches:     //当前屏幕上所有手指的列表
targetTouches:      //当前dom元素上手指的列表，尽量使用这个代替touches
changedTouches:     //涉及当前事件的手指的列表，尽量使用这个代替touches

哪个css的属性能让一个标签div超过它的父节点时隐藏不显示

overflow是属性名，hidden是属性值

通常，为了让DIV子元素超出部分隐藏，都是在父元素设置overflow:hidden，这样即可防止子元素撑开父元素，使子元素能够溢出隐藏

但是，对于position:absolute定位的子元素，仅仅使用overflow:hidden没办法将其溢出部分隐藏，需要在父元素上也加上一个定位position:relative;才能将含有 position:absolute属性的子元素进行溢出隐藏！

代码：

    <style>
    .box{
        width:200px;
        height:150px;
        overflow:hidden;
        border:2px solid #000;
        float:left;
        margin-right:20px;
    }
    .relative{
        position:relative;
    }
    .div{
        width:200px;
        height:100px;
        background:#FF5400;
        margin-top:100px;
        position:absolute;
    }
    .zi{
        width:200px;
        height:300px;
        background:#FF0000;
    }
    </style>
    <div class="box">
    高300px的子元素溢出隐藏
    <div class="zi"></div>
    </div>
    <div class="box">
    不带relative
    <div class="div"></div>
    </div>
    <br><br><br><br><br><br>
    <div class="box relative">
    带上relative
    <div class="div"></div>
    </div>

CSS overflow属性

overflow 属性规定当内容溢出元素框时发生的事情，所有主流浏览器都支持 overflow 属性。
任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。

属性	描述
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

position属性

**position 属性规定元素的定位类型。**所有主流浏览器都支持 position 属性。
任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。

这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

属性	描述
static	默认值，没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。
inherit	规定应该从父元素继承 position 属性的值。

优先显示和优先级还是不一样的，优先显示是HTML文档加载时从上到下加载，只与标签的上下顺序有关，与标签的选用无关，优先级是帧元素比表单元素优先，表单元素比非表单元素优先

在不涉及样式情况下，页面元素的优先显示与标签选用无关。html文档加载是从上到下加载，只与标签的上下顺序有关，与标签选用无关。

css选择器优先级

CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式。

可以把样式的应用方式分为几个等级，按照等级来计算权重

1、!important，加在样式属性值后，权重值为 10000
2、内联样式，如：style=””，权重值为1000
3、ID选择器，如：#content，权重值为100
4、类，伪类和属性选择器，如： content、:hover 权重值为10
5、标签选择器和伪元素选择器，如：div、p、:before 权重值为1
6、通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0

实例一：

<style type="text/css">
    div{
        color:red !important;
    }        
</style>
......
<div style="color:blue">这是一个div元素</div>
<!-- 
两条样式同时作用一个div，上面的样式权重值为10000+1，下面的行间样式的权重值为1000，
所以文字的最终颜色为red 
-->

实例二

<style type="text/css">
    #content div.main_content h2{
        color:red;    
    }
    #content .main_content h2{
        color:blue;
    }
</style>
......
<div id="content">
    <div class="main_content">
        <h2>这是一个h2标题</h2>
    </div>
</div>
<!-- 
第一条样式的权重计算： 100+1+10+1，结果为112；
第二条样式的权重计算： 100+10+1，结果为111；
h2标题的最终颜色为red
-->

css的优先级分为4个等级，分别是A,B,C,D

A代表是否有内联样式，有为1，无为0；
B代表ID选择器个数；
C代表类选择器、属性选择器和伪类总个数；
D代表标签选择器和伪元素总个数，
比较规则就是从左往右比较。

animation transform

animation动画可以转换样式，但是需要与关键帧@keyframes配合使用
flash本来就是一种动画，但是与css无关
transform需要设计触发来使其转换为另一种样式

WEB开发

A.“#div .red”就是选择CSS class属性中包括red的所有Id为div元素
B.{“name”: “John”， “age”: 18},json数据中的键都需要添加""(双引号）
D.不同浏览器提供的编程环境不一致，所以在编程时才要使用 -ms、-webkit、-moz来实现不同浏览器的兼容性
E.JS文件按在HTML中引入的顺序依次载入（不是最后载入），在载入后马上执行，执行时会阻塞页面后续的内容（包括页面的渲染、其它资源的下载）
F.箭头函数不能调用Funciton的bind、apply、call方法（Function类具有的方法），没有继承Function类