Web前端105天-day63-HTML5_CORE

HTML5CORE03

目录

前言

一、复习

二、SVG

三、Echarts

四、Webworker

五、回调地狱

六、Promise

七、promise+ajax

八、promise_axios

九、async_await

总结

---

前言

HTML5CORE03学习开始

---

一、复习

跨域

• 浏览器的同源策略限定: 网页中利用 AJAX 请求数据, 必须访问同源的服务器
• 同源: 协议 端口 域名
• 解决方案
  • CORS: 服务器解决, 用 cors 模块
  • PROXY: 代理方案, 用 express-http-proxy 模块
  • JSONP: 需要服务器和前端共同解决
    • 利用脚本的 src 请求数据没有跨域限定

拖拽

• HTML5新增的事件
• 被拖拽的元素
  • dragstart: 开始拖拽
  • drag : 正在拖拽, 每 350毫秒 触发一次
  • dragend :停止拖拽
• 拖拽元素放置的
  • dragenter : 进入
  • dragleave :离开
  • dragover: 在上方
  • drop : 放下
• 利用 dataTransfer 属性来传递拖拽的数据

文件上传

• 服务器端
  • 利用 multer 模块来接收上传的文件
• 前端
  • form表单 -- 适合简单的上传
  • DOM
    • 使用 FormData 来组合上传的数据
    • 利用 ajax 请求发送给服务器

canvas

• 利用 JS 实时绘制图表
• 用途: 地图, 页游, 图表...
• 制作时
  • 利用 canvas 标签制作一个画布
  • 在JS中利用 getContext('2d') 获取画布的工具箱
  • fillStyle : 填充色
  • strokeStyle : 线的颜色
  • fillRect : 填充矩形
  • fillText : 文本
  • ...

地图

• 百度, 腾讯, 谷歌, 高德...
• 利用 第三方 开放平台提供的资源 来显示地图
• 使用方式: 学会参考官方文档

---

二、SVG

  
  
  
  
  



  
  
  

  
Hello World!

  
  
  

  

---

三、Echarts

• 官网：Handbook - Apache ECharts

 

---

四、Webworker

属于性能优化的方案之一

• 如果 JS代码的执行 特别耗时, 可以用 Worker 对象执行. 类似异步操作 不会阻塞主线程
• 有两种用法
  • 用法1: 直接 new Worker(js文件) 执行即可
  • 用法2: 依赖 postMessage 和 onmessage 来实现消息的互通

  
  
  
  



  
  


  执行耗时操作

  

// 10.js

function fb(n) {
  return n < 3 ? 1 : fb(n - 1) + fb(n - 2)
}

console.log('请稍后, 一个工人已经在工作...');
var x = fb(45)

console.log('x:', x)

• 信息交互

  
  
  
  



  
  
  


  给骑手发消息点餐

  

// 11.js
function fb(n) {
  return n < 3 ? 1 : fb(n - 1) + fb(n - 2)
}

// 发消息: postMessage  -- post 传递 传输
// 听消息: onmessage  -- on  当...时

// 当前文件 -- 外卖骑手:  听有没有人点餐
onmessage = function (e) {
  console.log('骑手收到消息:', e)

  console.log('正在取餐中..., 请稍后');
  // 开始耗时操作
  var x = fb(45)

  // 发消息给用户
  postMessage({ x, data: e.data })
}

---

五、回调地狱

• 当出现多个 回调函数嵌套时, 代码的结构会出现层层嵌套的情况, 不易读 不易维护

•  来自 ES6 的 Promise 可以解决 回调地狱

---

六、Promise

---

七、promise+ajax

---

八、promise_axios

---

九、async_await

---

总结

HTML5CORE03学习结束