前端冲刺1.1Cookie，闭包，BFC，盒模型

前端冲刺1.1Cookie，闭包，BFC，盒模型

Cookie

Cookie基本知识：
定义：
Cookie是一些数据，当web服务器向浏览器发送web页面时，在连接关闭后，服务端不比记录用户的信息
Cookie的作用就是用于“如何记录客户端用户的信息”：
-当用户访问web页面时，他的名子可以记录在cookie中。
-在用户下一次访问页面时，可以在cookie中读取用户的访问记录

存储方式：以名/值对形式存储
username = Liao jie
当浏览器从服务器请求web页面时，属于该页面的cookie会被添加到该请求中
服务端通过这种方式来获取用户的信息。

创建Cookie
使用document.cookie创建，读取，及删除cookie

创建cookie
document.cookie = “username = Liao jie”;
设置一个过期时间
document.cookie = “username = Liao jie; expires = Thu,18 Dec 2043 12:00:00 GMT”;
读取cookie
var myCookie = document.cookie;//document.cookie将以字符串的形式返回所有cookie
类型格式：cookie1 = value;cookie2 = value;cookie3 = value;
**删除cookie：**只需要将时间设置为以前的时间就行了
document.cookie = “username = Liao jie; expires = Thu ,01 Jan 1970 00:00:00 GMT”;
删除的时候不需要指定cookie的值

Cookie实例
3个关键函数
1.设置cookie的函数
2.获取cookie的函数
3.检测cookie的函数

// 设置Cookie值的函数

function setCookie(cname,cvalue,exdays){
    var d = new Date();
    d.setTime(d.getTime()+(exdays*24*60*60*1000));
    var expires = "expires="+d.toString();
    document.cookie = cname+"="+cvalue+";"+expires;
}

/*注解：

• cname为cookie的名称，cvalue为cookie的值，expires为cookie的过期时间
• */

//获取cookie值的函数

function getCookie(cname){
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(let i =0; i < ca.length; i++){
        var c = ca[i].trim();
        if(c.indexOf(name) == 0){
            return c.substring(name.length,c.length);
        }
    }
    return "";
}

//检测cookie的函数

function checkCookie(){
    var username = getCookie("username");
    if(username != ""){
        alert("Welcome again"+"username");
    }else{
        username = prompt("Please enter your name:","");
        if(username != "" && username != null){
            setCookie("username",username,365);
        }
    }
}

Cookie的域名
Cookie是不可以跨域名的，隐私安全机制禁止网站非法获取其他网站的Cookie
正常情况下，同一个一级域名下的两个二级域名也不能交互使用Cookie
如果需要交互使用，需要设置Cookie的domain属性

闭包

js的作用域：
全局和局部；访问变量的权利是由内向外的，内部作用域可以获得当前作用域下的变量并且可以获得当前包含当前作用域的外层作用域
下的变量；即外层作用域无法获取内层作用域下的变量，那么闭包就可以实现在一个函数内部也限权访问另一个函数内部的变量
本质就是在一个函数内部创建另一个函数。
三个特性：
函数嵌套函数
函数内部可以引用函数外部的参数和变量
参数和变量不会被垃圾回收机制回收（作用域链的问题）

//经典实用场景1

function a(){
    let name = "liao jie";
    return function(){
        console.log(name);
    }
}
let b = a();
b();//打印liao jie

//经典使用场景2

function fn() {
    let num = 3;
    return function(){
        let n = 0;
        console.log(++n);
        console.log(++num);
    }
}
let fn1 = fn();
fn1();//1 4
fn1();//1 5

//经典场景定时器

for(var i = 0; i < 5; i++){
    setTimeout(function(){
        console.log(i+' ');
    },100);
}
//打印5次5改正方法：将var i改成let i

for(var i =0; i < 5; i++){
    (function(i){
        setTimeout(function(){
            console.log(i);
        },i*1000);
    })(i)
}

/使用场景当做参数传递

var num = 15;
var fn3 = function(x){
    if(x>num){
        console.log(x);
    }
}

void (function(fn2){
    var num = 100;
    fn2(30);
})(fn3)

好处：
1.保护函数内部变量安全，实现了封装，防止变量流入其他环境发生命名冲突
2.匿名立即执行函数可以减少内存消耗
坏处：
被引用的私有变量不能被销毁，增大了内存消耗，造成了内存泄露

BFC和盒模型(要吃饭了-----)

草草总结：
BFC定义：
BFC是一个独立的布局环境，其中的元素是不受外界影响的，并且在一个BFC中，块盒和行盒都会垂直的沿着父元素边框排列
布局规则：
-内部的Box会在一个垂直的方向，一个接一个排列
-Box垂直方向的距离由margin决定。两个相邻的Box的margin会发生重叠
-BFC的区域不会与float box重叠
-BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素
-计算BFC的高度时，浮动元素也会参与计算
创建BFC：
1.设置float值
2.设置position的值（非static或者relative）
3.display的值不是inline-block,table-cell,flex,table-caption或者inline-flex
4.overflow不是visible

盒模型：
盒子模型就是布局网页的一种手段
包括border，margin，padding，content，width，height等元素
具体细节就不理了，要吃饭了