首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >前端工程师之ES6

前端工程师之ES6

作者头像
蒋老湿
修改2019-12-09 14:50:04
1K0
修改2019-12-09 14:50:04
举报
文章被收录于专栏:技术栈技术栈

初识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)

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018年10月14日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 变量
  • 函数+参数
  • 数组
  • 字符串
  • es6面向对象
  • promise——解决异步
  • 深入ES6——generator,模块化与babel
    • generator——特殊的函数
      • async/await
        • 模块
        • 软件的使用
          • npm
          • 数据交互
          相关产品与服务
          云数据库 MySQL
          腾讯云数据库 MySQL(TencentDB for MySQL)为用户提供安全可靠,性能卓越、易于维护的企业级云数据库服务。其具备6大企业级特性,包括企业级定制内核、企业级高可用、企业级高可靠、企业级安全、企业级扩展以及企业级智能运维。通过使用腾讯云数据库 MySQL,可实现分钟级别的数据库部署、弹性扩展以及全自动化的运维管理,不仅经济实惠,而且稳定可靠,易于运维。
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档