ES6基础总结

(一)前台请求过程分析
http://www.happylaishop.top:80/get_data.do?productId=1
(1)解析url:
http/https请求协议;
端口和域名:http80,https=443
路径:服务器拿到请求之后根据路径定位位置
请求参数
(2)DNS 域名解析系统
在互联网上资源用ip地址定位。先将域名转化为ip地址。dns中有缓存用于减轻dns压力。dns缓存有很多层，浏览器上有,路由服务器上有,dns服务器上也有。不同网络层级dns缓存的层级也不同。越靠近用户的时间越短。
dns-prefetch:前段优化小技巧
<link rel="dns-prefetch" href="//cdn.bootcss.com">
作用就是一开始页面加载的时候就去解析域名并且缓存起来。这样请求资源的时候就可以省去dns查询时间，提高加载速度。
(3)资源请求
资源请求两个角色：浏览器和资源服务器
浏览器带着一些信息例如请求头,cookie,参数等请求资源服务器。
服务器返回状态码,响应头,响应内容。
(4)浏览器解析
一般最先加载Html文件,加载Html构建dom树,遇见js执行,那么先加载js执行,js可能修改dom树。js执行完接着执行。dom树加载完之后构建渲染树。不同内核渲染树构建不同。渲染树构建好之后每个元素大小以及实际位置就确定了,整个布局也就差不多了。最后一步就是绘制。将元素按照大小和位置绘制在屏幕上。这样整个浏览器解析过程就完成了。
(二)ES6
ES6:ECMA script, javascript语音标准
提升js编写大型的复杂应用程序的能力。
(1)let, const替换var定义变量
let可以重复赋值但是const不能重复赋值。
let不能重复定义：let a=1; let a=2;报错
(2)块级作用域:防止块级作用域的变量变成全局变量。
if(true){
var a = 1;
let b = 2;
}
console.log(a);//打印1
console.log(b);//报错b is not defined
变量提升: var定义的变量都会提到最前面。例如
console.log(a);//undefined
var a = 1;

实际解析过程: var a;console.log(a);a=1;

(3)箭头函数
参数=>表达式/语句
let value = 2;
let double = x => 2 * x;
let treble = x => {
   return 3 * x;
}
console.log('double', double(value));//4
console.log('treble', treble(value));//6
②没有独立作用域
var obj = {
   commonFn: function(){
       console.log(this);
   },
   arrowFn: function() => {
       console.log(this);
   }
}
obj.commonFn();//this指向obj
obj.arrowFn();//this指向window。因为没有独立作用域的概念所以this和obj共享作用域即window.
③不能用作构造函数
let Animal = () => {};
let animal = new Animal();
报错箭头函数不能用作构造函数
④没有prototype
console.log(Animal.prototype);//undefined

(4)模板字符串
反引号标识; 支持多行字符串; 支持变量和表达式;
①反引号··

let str = `
    <div>
        <h1 class="title">123</h1>
    </div>
`;
document.querySelector('body').innerHTML = str;

②嵌套变量的方法

let name = "兄弟"
let str = `
    <div>
        <h1 class="title">${name}</h1>
    </div>
`;
document.querySelector('body').innerHTML = str;

③嵌套函数的方法

let name = () => {
    return '兄弟';
}
let str = `
    <div>
        <h1 class="title">${name()}</h1>
    </div>
`;
document.querySelector('body').innerHTML = str;

④循环嵌套

let names = ['h1','h2','h3'];
let str = `
    <ul>
        ${
            names.map(name => `<li>Hi, I am ${name}</li>`).join('');
        }
    </ul>
`;
document.querySelector('body').innerHTML = str;

(5)promise
①支持异步的链式操作,关键词resolve(预期结果对的),reject(预期结果失败),then

new Promise((resolve, reject)=>{
        $.ajax({
            url: 'http://localhost:8080/user/1',
            type: 'post',
            success(res){
                resolve(res);
            },
            error(err){
                reject(res);
            }
        });
    }).then(()=>{//执行resolve
        console.log('success', res);
    },()=>{//执行reject
        console.log('error', res);
    });

②链式promise

 var promiseFn1 = new Promise((resolve, reject)=>{
        $.ajax({
            url: 'http://localhost:8080/user/1',
            type: 'post',
            success(res){
                resolve(res);
            },
            error(err){
                reject(res);
            }
        });
    });
    var promiseFn2 = new Promise((resolve, reject)=>{
        $.ajax({
            url: 'http://localhost:8080/user/2',
            type: 'post',
            success(res){
                resolve(res);
            },
            error(err){
                reject(res);
            }
        });
    });
    
    promiseFn1.then(()=>{
        return promiseFn2;
    }).then(()=>{
        console.log('success');
    });

(6)面向对象
关键词class,语法糖对应function,构造函数constructor,extends类的继承,super调用父类构造方法。

 class Animal{
        constructor(){this.name='animal';}
        //constructor(name){this.name=name;}
        getName(){return this.name;}
    }
    let animal = new Animal();
    console.log(animal.getName());
    let dog = new Animal('dog');
    console.log(dog.getName()); 

    class Cat extends Animal{
        constructor(){
            super();
            this.name = 'cat';
        }
    }
    let dog = new Cat('dog');
    console.log(dog.getName()); 
    
    let name = 'xiongdi';
    let age = 18;
    let obj = {
        name,
        age,
        getName(){
            return this.name;
        },
        ['get'+'Age'](){
            return this.age;
        }
    }
    
    Object.keys(obj);
    Object.assign({a:1},{b:2})

(7)解決复杂问题自顶向下逐层把系统划分若干模块的过程。CommonJs,AMD,CMD

 module.js:
    let str = 'string';
    lef obj = {
        name : 'xiongdi'
    };
    let fn = () => {
        console.log('module test');
    }
    export {
        str, obj, fn
    }
    export default {a:1}
    
    import {str, obj, fn} from './module.js'
    import foo from './module.js'
    
    console.log('name', obj.name);//xiongdi
    console.log('str', str);//string
    console.log('fn', fn); //{a:1}

(8)本地存储
cookie: ①用户端保存请求信息。②分号分割的多个key-value字段。③存储在本地的加密文件里。
④有域名和路径的限制。⑤cookie字段: name, domain(生效的域名)，path(生效的路径),
expires(过期时间,0就是删除), httponly(用户端不能修改)

session:
服务端保存请求信息,sessionId存放在cookie里,会话由浏览器控制,会话结束,
session失效。

localStorage:
   H5新特性。
   有域名限制不存在作用域概念。
   只有key-value。
   没有过期时间。
   浏览器关闭不消失。以文件存储在操作系统中。

  window.localStorage.setItem('name', 'xiongdi');
    window.localStorage.getItem('name');
    window.localStorage.removeItem('name');
    window.localStorage.setItem('name', JSON.stringify({name, 'xiongdi'}));

sessionStorage
和localStorage相识，但是浏览器关闭之后就小时。有时间限制。

  window.sessionStorage.setItem('name', 'xiongdi');
    window.sessionStorage.getItem('name');
    window.sessionStorage.removeItem('name');

猜你喜欢