【前端】Web前端学习笔记【2】

• 【2016.02.22至今】的学习笔记。

相关博客：

• Web前端学习笔记【1】

---

1. this在 JavaScript 中主要有以下五种使用场景

---

• 在全局函数调用中，this 绑定全局对象，浏览器环境全局对象为 window 。
• 作为对象方法使用，this 绑定到该对象。
• 在对象a的方法b内部的函数c中，this 也绑定全局对象，应该绑定到方法b对应的对象a上。这是 JavaScript的缺陷，解决方法：用that捕捉。
• 在构造函数中，this 绑定到新创建的对象。
• 使用apply或call调用函数， this 将会被显式设置为传入的的第一个参数。

// 三段有意思的代码
window.test = 'test'
var obj = {
  test: 'objtest',
  getAge: function () {
    var obj2 = {
      test: 'obj2test',
      getAge2: function () {
        console.log(this.test)
      }
    }
    return obj2;
  }
};

obj.getAge().getAge2() // 'obj2test'

// ==============
var obj = {
  birth: 1990,
  getAge: function () {
    var b = this.birth; // 1990
    var fn = function () {
      return new Date().getFullYear() - this.birth; // this指向window或undefined
    };
    return fn();
  }
};

// ==============

var a = 1;
f1 = function () {
  var a = 2;
  console.log(this.a);
};
f1(); // 1

---

2. encodeURIComponent() 函数

---

定义和用法

encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。

语法

encodeURIComponent(URIstring)

返回值

URIstring 的副本，其中的某些字符将被十六进制的转义序列进行替换。

说明

该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ' ( ) 。
其他字符（比如 ：;/?&=+$,# 这些用于分隔 URI 组件的标点符号），都是由一个或多个十六进制的转义序列替换的。

例子

document.write(encodeURIComponent("http://www.w3school.com.cn")); 
document.write("<br />"); 
document.write(encodeURIComponent("http://www.w3school.com.cn/p 1/")); 
document.write("<br />"); 
document.write(encodeURIComponent(",/?:@&=+$#")); 

输出：

http%3A%2F%2Fwww.w3school.com.cn 
http%3A%2F%2Fwww.w3school.com.cn%2Fp%201%2F 
%2C%2F%3F%3A%40%26%3D%2B%24%23 

---

3. requestAnimationFrame函数和cancelAnimationFrame函数

---

初始化：

window.requestAnimFrame = (function(){
    return window.requestAnimationFrame         || 
           window.webkitRequestAnimationFrame   || 
           window.mozRequestAnimationFrame      || 
           window.oRequestAnimationFrame        || 
           window.msRequestAnimationFrame       || 
           function(callback){
               window.setTimeout(callback, 1000 / 60);
           };
})();

使用：

var id;

function draw() {
    // Do whatever...
    id = requestAnimationFrame(draw);
}

draw();

取消重绘：

window.cancelAnimationFrame(id);

---

4. 闭包

---

闭包的原理：

——《JavaScript高级程序设计》（第3版）7.5

闭包的特性：

1. 函数嵌套函数
2. 函数内部可以引用外部的参数和变量
3. 参数和变量不会被垃圾回收机制回收

使用闭包的好处：

1. 希望一个变量长期驻扎在内存中
2. 避免全局变量的污染
3. 私有成员的存在

使用闭包主要是为了：设计私有的方法和变量。

一段有意思的代码：

function foo() {
    var i = 0;
    return (function bar() {
        i++;
        console.log(i);
        setTimeout(bar, 1000);    
    })();    
}

foo();
foo();

---

5. 原生JS和jQuery的优劣对比

---

jQuery的优点：

• jQuery对不同浏览器的事件，DOM对象，都进行了封装,各种操作都可以直接兼容各种浏览器。
• jQuery拥有特有的CSS-Like选择器，链式写法，封装的各类animate函数，封装了的异步加载。
• jQuery封装了AJAX操作。

jQuery的缺点：

• jQuery比原生JS执行效率慢。

---

6. 常见的浏览器端的存储技术

---

有时需要将网页中的一些数据保存在浏览器端，这样做的好处是，当下次访问页面时，不需要再次向服务器请求数据，直接就可以从本地读取数据。目前常用的有以下几种方法：

cookie

cookie会随着每次HTTP请求头信息一起发送，无形中增加了网络流量，另外，cookie能存储的数据容量有限，根据浏览器类型不同而不同，IE6大约只能存储2K。

Flash ShareObject

缺点：需要安装Flash插件。

Google Gear

Google开发出的一种本地存储技术。
缺点：需要安装Gear组件。

userData

IE浏览器可以使用userData来存储数据，容量可达到640K，这种方案是很可靠的，不需要安装额外的插件。缺点：它仅在IE下有效。

sessionStorage

使用于Firefox2+的火狐浏览器，用这种方式存储的数据仅窗口级别有效，同一个窗口（或者Tab）页面刷新或者跳转，都能获取到本地存储的数据，当新开窗口或者页面时，原来的数据就失效了。
缺点：IE不支持、不能实现数据的持久保存。

globalStorage

使用于Firefox2+的火狐浏览器，类似于IE的userData。
缺点：IE不支持。

localStorage

localStorage是Web Storage互联网存储规范中的一部分，现在在Firefox 3.5、Safari 4和IE8中得到支持。
缺点：低版本浏览器不支持。

结论：

可以结合使用userData(IE6+)和globalStorage(Firefox2+)和localStorage(chrome3+)实现跨浏览器。

---

7. 创建块状链接

---

<style>
    a:link, a:visited {
        display: block;
        text-align: center;
        text-decoration:none;
         120px;
        background-color: #98bf21;

        /* not important: */
        color: #FFFFFF;
        font-weight: bold;
        padding: 4px;
    }
    
    /* not important: */
    a:hover, a:active {background-color:#7A991A;}
</style>

效果：

---

8. CSS中 display:none 和 visibility:hidden 的区别

---

• display: none;隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，
  就当他从来不存在。
• visibility: hidden;隐藏对应的元素，但是在文档布局中仍保留原来的空间。

---

9. CSS中 link 和 @import 的区别

---

1. link属于HTML标签，而@import是CSS提供的;
2. 页面被加载时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
3. @import只在IE5以上才能识别，而link是HTML标签，无兼容问题;
4. link方式的样式的权重 高于@import的权重.

---

10. CSS中position: absolute与position: fixed共同点与不同点

---

共同点：

• 改变行内元素的呈现方式，display被置为block；
• 让元素脱离普通流，不占据空间；
• 默认会覆盖到非定位元素上。

不同点：

• absolute的”根元素“是可以设置的，而fixed的”根元素“固定为浏览器窗口。当你滚动网页，fixed元素与浏览器窗口之间的距离是不变的。

---

11. CSS选择器总结

---

1. id选择器（#myid）
2. 类选择器（.myclassname）
3. 标签选择器（div) (h1) (p）
4. 相邻兄弟选择器（h1 + p）
5. 子选择器（ul > li）
6. 后代选择器（li a）
7. 通配符选择器（ * ）
8. 属性选择器（a[rel="external"]）
9. 伪类选择器（a:hover) (li:nth-child(3))

优先级为:

• !important > id > class > tag
• !important > 内联样式 > 内部样式表(style标签) > 外部样式表 > 浏览器缺省设置

CSS3新增伪类举例：

p:first-of-type       选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type        选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type        选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child          选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2)        选择属于其父元素的第二个子元素的每个 <p> 元素。
:enabled , :disabled  控制表单控件的禁用状态。
:checked              单选框或复选框被选中。

!important用法示例：

color:blue !important;

CSS定义的权重

权重的规则：标签的权重为1，class的权重为10，id的权重为100。以下例子是演示各种定义的权重值：

/*权重为1*/
div{
}
/*权重为10*/
.class1{
}
/*权重为100*/
#id1{
}
/*权重为100+1=101*/
#id1 div{
}
/*权重为10+1=11*/
.class1 div{
}
/*权重为10+10+1=21*/
.class1 .class2 div{
} 

如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现。

---

12. 解释下浮动和它的工作原理？清除浮动的技巧

---

浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

1. 使用空标签清除浮动。
   这种方法是在每一个浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。

2. 对布局中的所有东西进行浮动，然后使用适当的有意义的元素（常常是站点的页脚）对这些浮动进行清理。（这有助于减少或消除不必要的标记。）

---

13. new操作符具体干了什么呢?

---

Preconditions:

function PrimaryStudent() {
    this.grade = 1;
}

PrimaryStudent.prototype.sayHi = function(){
    alert('hi');
}

var p = new PrimaryStudent();

相当于

var p  = {};
p.__proto__ = PrimaryStudent.prototype; // p.sayHi()
PrimaryStudent.call(p); // p.grade

---

14. for...in和for...of的区别

---

JavaScript原有的for...in循环，只能获得对象的键名，不能直接获取键值。ES6提供for...of循环，允许遍历获得键值:

var arr = ['a', 'b', 'c', 'd'];

for (let a in arr) {
  console.log(a); // '0' '1' '2' '3'
}

for (let a of arr) {
  console.log(a); // a b c d
}

上面代码表明，for...in循环读取键名，for...of循环读取键值。

for...of循环调用遍历器接口，数组的遍历器接口只返回具有数字索引的属性。这一点跟for...in循环也不一样:

let arr = [3, 5, 7];
arr.foo = 'hello';

for (let i in arr) {
  console.log(i); // "0", "1", "2", "foo"
}

for (let i of arr) {
  console.log(i); //  "3", "5", "7"
}

上面代码中，for...of循环不会返回数组arr的foo属性。

---

15. XHR对象

---

XMLHttpRequest这个对象的属性：

它的属性有：

• onreadystatechange 每次状态改变所触发事件的事件处理程序。
• responseText 从服务器进程返回数据的字符串形式。
• responseXML 从服务器进程返回的DOM兼容的文档数据对象。
• status 从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）
• status Text 伴随状态码的字符串信息

当XHR对象把一个HTTP请求发送到服务器的过程中会经历几个状态，直到请求被处理，然后才接收一个回应。readyState就是XHR请求的状态属性，它本身有5个属性值：

• 0（未初始化）还没有调用open()方法
• 1（载入）已调用send()方法，正在发送请求
• 2（载入完成）send()方法完成，已收到全部响应内容
• 3（解析）正在解析响应内容
• 4（完成）响应内容解析完成，可以再客户端使用了

---

16. 防止子float元素超出父元素的方法

---

/*方法一：*/
.clearfix {
    overflow: auto;
}

/*方法二：*/
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

---

17. 获取选中的文本

---

var selectedTxt = window.getSelection().toString();

---