专栏首页技术栈前端工程师之ES6

前端工程师之ES6

初识ES6

ES6:最新版的JS,ECMAScript标准 JavaScript语言(实现),它还有多种称呼:

  • ECMAScript6.0
  • ECMA6
  • ES6

变量

var——重复定义不报错;没有块级作用域;不能限制修改

let——变量,不能重复定义,有块级作用域

const——常量,不能重复定义,有块级作用域

函数+参数

箭头函数的简写方式:

  1. 只有一个参数,()可以省
  2. 只有一个语句,还是return,{}可以省

数组

方法名

作用

例子

map

映射

31, 56, 89, 67 => 不及格, 不及格, 及格, 及格

reduce

汇总

..., ..., ... => xx

filter

过滤

x, x, x, x, x, x => x, x, x...

forEach

迭代、遍历

字符串

字符串模板 "xxx" 'xxx' `x${变量}xx

es6面向对象

  • class
  • super
  • extends

promise——解决异步

什么是同步——只有操作完事了,才往下执行,一次只能做一个事儿

什么是异步——这个操作进行中,其他操作也能开始,一次可以做多个事儿

异步的优势:1.用户体验好; 2.高效

同步的优势:简单

没用es6异步例子:

  $.ajax({
    url: '/get_banners',
    type: 'post',
    dataType: 'json',
    success(){

      $.ajax({
        url: '/get_hot',
        type: 'post',
        dataType: 'json',
        success(){
          $.ajax({
            url: '/get_list',
            type: 'post',
            dataType: 'json',
            success(){
              $.ajax({
                url: '/get_hot',
                type: 'post',
                dataType: 'json',
                success(){

                },
                error(){
                  alert('读取失败');
                }
              })
            },
            error(){
              alert('读取失败');
            }
          })
        },
        error(){
          alert('读取失败');
        }
      })
    },
    error(){
      alert('读取失败');
    }
  })
复制代码

同步例子:

  let banners=$.ajax('/get_banners');
  let hot=$.ajax('/get_hot');
  let list=$.ajax('/get_list');
  let hot=$.ajax('/get_hot');

使用es6-Promise异步例子

  # 创建Promise对象
  let p=new Promise(function (resolve, reject){
   # 异步代码...
  });

  # 使用Promise对象
  p.then(()=>{}, ()=>{});
<script>
let p=new Promise(function (resolve, reject){
  $.ajax({
    url: 'data/1.txt',
    dataType: 'json',
    success(arr){
      resolve(arr);
    },
    error(err){
      reject(err);
    }
  });
});

p.then(arr=>{
  alert('成功了'+arr);
}, err=>{
  alert('失败了');
});
</script>
# 多个异步方法一起调用
Promise.all([p, p2, p3, ...]).then()

更多代码案例请点击这里

深入ES6——generator,模块化与babel

generator——特殊的函数

普通函数: 一直执行到头,就像飞机一样,起飞就不能随便降落

generator: 中间可以暂停,就像出租车,想到哪里就到哪里

# 方法名前面加上 * 号就是generator
function *show(){
  xxxx
  xxx

  let data1 = yield $.ajax('a.txt');   #暂停一会去调用ajax做别的事情,就像乘客中途想上WC,让出租车等一会一样

  xxxx
  xxx
  xxx

  let data2 = yield $.ajax('b.txt');

  xxxx
  xxxx
}
复制代码

下面再看一个generator例子,先异步获取返回值结果,判断后再进行其他异步逻辑调用,使用generator这么写,如下:

runner(function *(){
  let data1=$.ajax();

  if(xxx){
    let data1=$.ajax();
    let data1=$.ajax();
    let data1=$.ajax();
    let data1=$.ajax();
  }else{
    let data1=$.ajax();
    let data1=$.ajax();
    let data1=$.ajax();
  }
});

以上写法如果换成es6之前的写法,可能得这么写,颇为复杂晦涩

$.ajax({
  success(){
    if(xxx){
      $.ajax({
        success(){
          $.ajax({
            success(){
              $.ajax({
                success(){

                }
              })
            }
          })
        }
    }else{
      $.ajax({
        success(){
          $.ajax({
            success(){
              $.ajax({
                success(){

                }
              })
            }
          })
        }
    }
    })
  }
})
复制代码

async/await

  • Promise本质:等待异步操作结束
  • generator本质:无感处理异步操作
  • async本质:官方runner

以下是相同功能的不同代码实现——基于runner和async

## runner && yield
runner(function *(){
  xxx
  let 结果1=yield 异步操作1;
  xxx
  let 结果2=yield 异步操作2;
  xxx
});

## async && await
(async ()=>{
  xxx
  let 结果1=await 异步操作1;
  xxx
  let 结果2=await 异步操作2;
  xxx
})();

模块

模块化的几种实现方式

  1. 民间的——sea.js、require.js、CMD、AMD
  2. nodejs模块化
  3. ES6模块化

模块的定义与调用

# 1.定义模块    mod1.js
define(function (require, exports, module){
  exports.a=12;
  exports.b=5;
});

# 2.引用模块    1.html
seajs.use(['xxx.js', 'xxx.js', ...], function (mod1, mod2, ...){
    console.log(mod1.a);
});

以下演示些简写的语法:

let a=12;
let b=5;
# 1.key和value一样,简写
let json={a, b};

# 2.函数
{
  show: function (){
    ...
  },
  show2: function (){
    ...
  }
}
# 函数简写
{
  show(){
    ...
  },
  show2(){
    ...
  }
}
复制代码

如果引用模块,有以下两种情况:

  • html->js, 使用use
  • js->js,使用require

node的模块化:

  1. 没有define
  2. exports、require、module
  3. 引用自定义模块,模块基本放到node_modules文件夹里,引用前面加 ./
#输出
exports.xx=xxx;
module.exports={x, x, x};
#引入
let mod=require('./aaa.js');

打包发布自己的nodejs包

ES6模块化: 参考文档

  1. import
  2. export
#输出
export {x, x, x};
#引入
import mod from "./xxx.js"

如何用babel编译ES6

软件的使用

  1. Atom编辑器(webStorm、sublime也可,其他就算了)
  2. 集成服务器环境Windows-wamp、Mac-xampp、Linux-Nginx(有其他惯用的也可以,但要求支持PHP、MySQL)
  3. VMware虚拟机、Docker 容器
  4. putty、winSCP(Mac用yummy FTP、Linux直接ssh)
  5. git for windows(Mac用git-scm、Linux直接yum/apt)
  6. Node.js
  7. phonegap-cli
  8. MongoDB
  9. Navicat for MySQL
  10. Chrome、Firefox
  11. APICloud Studio 2
  12. bower—前台包管理器

想到的有这些,还有一些其他的小的软件

npm

使用场景

功能

使用率

后台语言

操作数据、接口

35%

工具

WebPack、grunt、爬虫

65%

npm(Node Package Manager) 作为包管理工具,可以自动解决依赖,自动下载,但是下载比较麻烦,在国内速度较慢。可以使用cnpm代替npm,关于如何是用cnpm代替npm,可以参考这篇文章淘宝 NPM 镜像

使用npm

npm i [xxx]
cnpm i -g bower
# npm      后台包管理器
# bower    前台包管理器
npm i -g phonegap@6.5.2
npm i -g n  # n---升级node本身

数据交互

web端与服务端数据交互的几种方式:

  1. http协议
  2. form
  3. ajax——官方、不能跨域;单向传输
  4. jsonp——民间、跨域;不推荐
  5. websocket——双向传输

http协议——协议

  1. 无状态
  2. 请求过程:发送连接请求、响应接受、发送请求
  3. 消息分两块:头、身子(head、dody)

解决http缓存的几种方案:

  1. 野路子——随机数
  2. 官方——3个头

htttp和https HTTP和HTTPS详解 HTTP与HTTPS握手的那些事

http版本

特性

http 1.0

短连接

http 1.1

主流 长连接——keep alive

http 2.0

form最重要

    <form action="1.php" method="get" enctype="multipart/form-data">
      用户:<input type="text" name="username"><br>
      密码:<input type="password" name="password"><br>
      <input type="submit" value="提交">
    </form>
  1. action——提交到哪儿
  2. method——GET/POST/PUT/DELETE/HEAD method 数据格式 说明 大小 GET 把数据放在url里面传输 数据量很小、缓存、看得见 <=32K POST 放在body里 数据量大、不会缓存、看不见 <=1Gundefined - GET——获取东西 - POST、PUT——发送东西 大量发送 - DELETE——删除 - HEAD——让服务器只发送头回来就行(不需要内容)
  3. name——名字
  4. enctype value 数据格式 说明 application/x-www-form-urlencoded 名字=值&名字=值&... 默认、小数据 multipart/form-data 分块 文件上传、大数据

ajax原理——XMLHttpRequest

ajax好再哪里:用户体验、性能高。原生的ajax写法如下所示:

<script>
    window.onload=function (){
      let oBtn=document.getElementById('btn1');

      oBtn.onclick=function (){
        # 1.创建对象
        let xhr=new XMLHttpRequest();
        //alert(xhr.readyState);        0

        # 2.连接
        xhr.open('GET', 'data/1.txt', true);
        //alert(xhr.readyState);        1

        # 3.发送
        xhr.send();

        # 4.接收
        xhr.onreadystatechange=function (){
          if(xhr.readyState==4){
            if(
              (xhr.status>=200 && xhr.status<300)||
              xhr.status==304
            ){
              console.log(xhr);
              alert('成功');
            }else{
              alert('失败');
            }
          }
        };
      };
    };
    </script>
   # 接收响应数据:
   # xhr.responseText    文本数据
   # xhr.responseXML     xml数据
复制代码

上述代码中的 onreadystatechange = on ready state change(当通信状态改变)

readyState值说明

状态

说明

0

初始状态

xhr对象刚创建完

1

连接

连接到服务器

2

发送请求

刚刚send完

3

接收完成

头接收完了

4

接收完成

体接收完了

status——http状态码

描述

1xx

消息

2xx

成功

3xx

重定向

301 Moved Permanently

永久重定向——下回不会再找他了

302 Move temporarily

临时重定向——下回依然会请求服务器

304 Not Modified

缓存

4xx

请求错误

5xx

服务端错误

6xx+

自定义

HTTP状态码大全

为什么要重定向,经常听到这个词

如果我们访问这个网址taobao.com,会发现不同的访问终端最终会被重定向到对应该终端的一个网址,如下所示:

PC端访问->302->www.taobao.com

手机端访问->302->m.taobao.com

操作json字符串

  1. eval()——不安全;eval 是把字符串当命令来执行。如果字符串是靠外界参数拼接的时候,如果过滤不好,就容易混入恶意代码被执行,更多说明
  2. JSON.stringify()——{a: 12, b: 5} => "{"a": 12, "b": 5}"
  3. JSON.parse()——"{"a": 12, "b": 5}" => {a: 12, b: 5}

前端安全

  1. 前台没有安全性;后台就有问题(注入)web注入
  2. xss——跨站脚本攻击

跨域

  • ajax不允许跨域
  • jsonp——不要用
  • WebSocket——双向、跨域

什么是ajax2.0——ajax2.0的理解与应用实例 三种ajax上传文件方法

json标准格式

  1. key必须用引号包起来
  2. 双引号

{"a": 12, "name": 'blue'}

什么是沙箱机制

隔离出来虚假系统

c的数组和js的数组有啥区别

c数组——是空间;没有结尾、没有长度、没有操作(移动指针);固定长

JS数组——是对象;相关操作api;可变长

链表和数组

类型

长度

扩展

时间复杂度

索引

时间复杂度

链表

可变长

可以随意扩展

O(1)

不擅长

O(n)

数组

固定长

不擅长扩展

O(n)

擅长

O(1)

上面所说的固定长如果想变长,必须重新开辟一块内存空间,然后把之前数组中的内容一个个复制到新的数组中,复制完成后之前老的固定数组所占用的内存空间就就可以释放了。

☞☞点击这里购买云服务器☜体验代码效果☜

image.png

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 满意offer之JVM虚拟机问答汇总

    Java 源文件,通过编译器,能够生产相应的.Class 文件,也就是字节码文件, 而字节码文件又通过 Java 虚拟机中的解释器,编译成特定机器上的机器码 。

    蒋老湿
  • Java多线程开发 - Future的使用与理解

    Future模式是多线程开发中非常常见的一种设计模式。它的核心思想是异步调用。当我们需要调用一个函数方法时。如果这个函数执行很慢,那么我们就要进行等待。但有时候...

    蒋老湿
  • jpOwl一款高性能的后端业务监控,动态配置策略规则的工具包

    jpOwl客户端是java语言编写而成,要求做到API简单、高可靠性能、无论在任何场景下客户端都不能影响各业务服务的性能。旨在为各业务线提供丰富的埋点功能与数据...

    蒋老湿
  • 机器学习笔记(2):线性回归-使用gluon

    代码来自:https://zh.gluon.ai/chapter_supervised-learning/linear-regression-gluon.htm...

    菩提树下的杨过
  • web3.eth.sendRawTransaction

    用户1408045
  • 日志切面的配置使用

    在User类上加上@Component(value=“user”)//注入beanfactory中

    微醺
  • java之异步线程Executor

    说起异步,下意识就想到同步,这两个概念每个人都有着不同的理解,在这我们只是提下这关键词,具体的理解,可自行斟酌。

    后端Coder
  • JavaScript的数据类型及其检测

    JavaScript有几种数据类型,如何检测数据类型?这是本文要讨论的话题,思维导图如下:

    心莱科技雪雁
  • 1 Springboot中使用redis,自动缓存、更新、删除

    第一篇记录一下在springboot中,redis的基础用法,自动缓存新增的数据,自动修改及删除。

    天涯泪小武
  • SpringBoot系列-- 集成 Redis 缓存(实战)

    通过控制台输出信息我们可以知道,这次执行了数据库查询,并开启了Redis缓存查询结果。接下来我们再次查询user表中id=24的数据,观察控制台,如下:

    用户4143945

扫码关注云+社区

领取腾讯云代金券