常用前端知识积累

j一、s规范：

1.

不要在代码中留大段注释掉的代码

2.

适当地换行

适当的添加注释，但不要疯狂的添加注释

3.

将类似行为、命名的代码归类在一起

在不破坏语义性的情况下，'能省则省'

// bad
arr.map(a => {
  return add(a)
})
setTimeout(() => {
  doSomething()
}, 1000)
// good
arr.map(add)
setTimeout(doSomething, 1000)

　　

// bad
const a = (v) => {
  return v + 1
}
// good
const a = v => v + 1
// bad
const b = (v, i) => {
  return {
    v,
    i
  }
}
// good
const b = (v, i) => ({v, i})
// bad
const c = () => {
  return (dispatch) => {
    // doSomething
  }
}
// good
const c = () => dispatch => {
  // doSomething
}

　　4.

合理使用各种表达式

// bad
if (cb) {
  cb()
}
// good
cb && cb()
// bad
if (a) {
  return b
} else {
  return c
}
// good
return a ? b : c
// bad
if (a) {
  c = a
} else {
  c = 'default'
}
// good
c = a || 'default'

　　5.

链式调用写法

// bad
fetch(url).then(res => {
  return res.json()
}).then(() => {
  // doSomething
}).catch(e => {
})
// good
fetch(url)
  .then(res => {
    return res.json()
  })
  .then(() => {
    // doSomething
  })
  .catch(e => {
  })

　二.概念理解

闭包的理解

使用闭包主要是为了设计私有的方法和变量。 优点是可以避免全局变量的污染， 缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露

Cookie

第一：每个特定的域名下最多生成20个cookie

1. IE6或更低版本最多20个cookie

2. IE7和之后的版本最后可以有50个cookie。

3. Firefox最多50个cookie

4. chrome和Safari没有做硬性限制

第二：cookie的最大大约为4096字节，为了兼容性，一般不能超过4095字节

优点:极高的扩展性和可用性

1. 通过良好的编程，控制保存在cookie中的session对象的大小。

2. 通过加密和安全传输技术（SSL），减少cookie被破解的可能性。

3. 只在cookie中存放不敏感数据，即使被盗也不会有重大损失。

4. 控制cookie的生命期，使之不会永远有效。偷盗者很可能拿到一个过期的cookie。

缺点:

1. Cookie数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉。

2. 安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。

3. 有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。

浏览器本地存储

sessionStorage

本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。 因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储

localStorage

用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的

web storage和cookie的区别

Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用 cookie需要前端开发者自己封装setCookie，getCookie

link 和@import 的区别是

1. link属于HTML标签，而@import是CSS提供的;

2. 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

3. import只在IE5以上才能识别，而link是HTML标签，无兼容问题;

4. link方式的样式的权重 高于@import的权重.

box-sizing属性

box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-box

• content-box：让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定，设置width/height属性指的是content部分的宽/高

• border-box：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置width/height属性指的是border + padding + content

BFC规范的理解

级格式化上下文，是CSS中的一个渲染机制，BFC就相当于一个盒子，内部的元素与外界的元素互不干扰。它不会影响外部的布局，外部的布局也不会影响到它.

创建BFC

• float的值不是none

• position 的值不是static或者relative

• display的值是inline-block,table-cell,flex,table-caption或者inline-flex

• overflow的值不是visible

BFC的特性

• 内部的BOX会在垂直方向上一个接一个的放置

• 于同一个BFC的俩个相邻的BOX的margin会发生重叠，与方向无关。

• 每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此

• BFC的区域不会与float的元素区域重叠

• 计算BFC的高度时，浮动子元素也参与计算

• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

BFC在布局中的应用

要阻止margin重叠，只要将俩个元素别放在一个BFC中即可

使得父元素包含子元素，常见的方式是为父元素设置overflow：hidden或者浮动父元素。根本原因在于创建BFC的元素，子浮动元素也会参与其高度计算，即不会产生高度塌陷问题

与浮动元素相邻的已生成BFC的元素不能与浮动元素互相覆盖。利用该特性可以作为多栏布局的一种实现方式. 特点在于左右俩栏的宽度固定，中间栏可以根据浏览器宽度自适应

null和undefined的区别

undefined

undefined是一个表示"无"的原始值，转为数值时为NaN

• 变量被声明了，但没有赋值时，就等于undefined

• 调用函数时，应该提供的参数没有提供，该参数等于undefined

• 对象没有赋值的属性，该属性的值为undefined

• 函数没有返回值时，默认返回undefined

null

null是一个表示"无"的对象，转为数值时为0

• 作为函数的参数，表示该函数的参数不是对象

• 作为对象原型链的终点

documen.write和 innerHTML的区别

document.write只能重绘整个页面 innerHTML可以重绘页面的一部分

HTML5的离线存储

原理

HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示

使用

• 在文档的 html 标签设置 manifest 属性，如 manifest="/offline.appcache"

• 在项目中新建 manifest 文件，manifest 文件的命名建议：xxx.appcache

• 在 web 服务器配置正确的 MIME-type，即 text/cache-manifest

css各种居中

水平居中

1. .parent{

2.    text-align: center;

3. }

4. .child{

5.    display: inline-block;

6. }

1. .child{

2.    display:table;

3.    margin: 0 auto;

4. }

1. .parent{

2.    position:relative;

3. }

4. .child{

5.    position:absolute;

6.    left:50%;

7.    transform: translateX(-50%);

8. }

垂直居中

• table-cell配合vertical-align

1. .parent{

2.    display: table-cell;

3.    vertical-align:middle;

4. }

absolute配合tranform

1. .parent{

2.    position:relative;

3. }

4. .child{

5.    position:absolute;

6.    top: 50%;

7.    transform: translateY(-50%);

8. }

水平+垂直居中

• inline-block配合text-align加上table-cell配合vertical-align

1. .parent{

2.    display: table-cell;

3.    vertical-align:middle;

4.    text-align:center;

5. }

6. .child{

7.    display: inline-block;

8. }

1. .parent{

2.    position: relative;

3. }

4. .child{

5.    position: absolute;

6.    left: 50%;

7.    top: 50%;

8.    transform: translate(-50%,-50%);

9. }

全能的flex

1. .parent{

2.    display: flex;

3.    justify-content: center;

4. }

1. .parent{

2.    display: flex;

3.    align-items: center;

4. }

1. .parent{

2.    display: flex;

3.    justify-content: center;

4.    align-items: center;

5. }

6.  

　

1.js的基本数据类型：数字，字符串，布尔，数组，对象，null,undefined

2.js对象设置属性的两种方式：

　　var person = {};

　　person.name = 'sss';//只能取对象自身的属性

　　person[age] ;//age可以是变量

 　  var nameA = 'name';

　　var nameB = 'name111';

　　console.log(person[nameA]);//sss

　　console.log(person[nameB]);//undefined

//删除属性

　　delete o.name;

　　delete o[age];

//检测属性 

// 1 in 运算符

var o ={};

o.name = 'xxx';

console.log( 'name' in o) ;//true

console.log( name in o) ;//false

//2 hasOwnProperty()

console.log(o.hasOwnProperty('name')) ; // true

 = 赋值== 判断值相等 === 对类型和值进行判断

//3.属性遍历 枚举

// for in 

var o = {x:1,y:2,z:3};

for(a in o){

console.log(a);// x  y  z

console.log(o[a]); //1 2 3  

}

var arr =[{x:1},{y:2},{z:3}];

for ( a in arr){

console.log(a);// 0 1 2 输出的是index

console.log(arr[a]);// {x:1}  {y:2}   {z:3}

}

//同步

for(var a =0;a<arr.length;a++){

console.log(arr[a]) ;

}

//异步 如果变量是从其他接口来，在循环中使用，建议用for 循环

$.each(arr,function(index,item)){

console.log(item);

}

//序列化

var o2 = {x:1,y:2,z:3};

console.log(JSON.stringify(o2));//{"x":1,"y":2,"z":3}

console.log(typeof(JSON.stringify(o2));//string

var str = JSON.stringify(o2);

console.log(JSON.parse(str));//{x: 1, y: 2, z: 3}

//深拷贝和浅拷贝 深拷贝就相当于双胞胎，各自互不影响。浅拷贝相当于人和影子，引用关系，互相影响

var o3 = {x:1,y:2,z:3};

var p =o3; 

4 this 关键字 代表函数的拥有者 

1.函数中引用 2.对象调用 3.构造函数调用 4.this指向

call(this,name,age)和apply(this,[]) 在一个对象中调用另一个对象

var a = '111';

function test(){

　　return this.a;

};

var o = {};

o.a = 1;

o.b = test;

console.log(o.b.call()); //111

console.log(o.b.call(o)); //1 

console.log(o.b.apply()); //111

console.log(o.b.apply(o)); //1 

//继承

Function.apply(obj,args)方法能接收两个参数 obj：这个对象将代替Function类里this对象 args：这个是数组，它将作为参数传给Function（args-->arguments）

Function.call(obj,[param1[,param2[,…[,paramN]]]]) obj：这个对象将代替Function类里this对象 params：这个是一个参数列表

//构造函数 this指向这个实例化新对象

function Fun(name,age){

　　this.name = name;

　　this,age = age;

};

var fun = new Fun('lili',22);

var fun2 = new Fun('qq',23);

console.log(fun2.name);//qq

var number = 1;

var obj = { 

　　number : 2,

　　showNumber:function(){

　　　　this.number = 3;

　　　　(function(){

　　　　　　console.log(this.number); //1 闭包函数自调函数，函数自执行，this是指向window.this

　　　　})();

　　　　console.log(this.number);// 3 对象中this指向对象

　　}

};

obj.showNumber();