前端学习笔记专栏区别于官网中全面的知识讲解,主要记录学习技术栈时对于重点内容的提炼,便于对技术栈知识的快速回顾以及使用
1.canvas元素
- 内部坐标:坐标均以左上角为(0, 0),单一坐标均作为起始坐标
- 创建对象:
<canvas id="myCanvas" width="200" height="100"></canvas>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
- 绘制线条:
ctx.moveTo(0,0); // 定义开始坐标
ctx.lineTo(200,100); // 定义结束坐标
ctx.stroke(); // 绘制线条
- 绘制圆:
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2*Math.PI); // (95, 50)为圆心,40为半径,(0,2*Math.PI)对应绘制周长
ctx.stroke();
- 定义背景颜色/图案:
ctx.fillStyle
- 定义字体:
ctx.font
- 绘制矩形:
ctx.fillRect(x, y, width, height)
- 绘制实心文本:
ctx.fillText(text, x, y)
- 绘制空心文本:
ctx.strokeText(text, x, y)
- 绘制图片:
ctx.drawImage(img, x, y);
2.SVG元素
- canvas元素
- 依赖分辨率
- 不支持事件处理器
- 弱的文本渲染能力
- 能够以 .png 或 .jpg 格式保存结果图像
- 最适合图像密集型的游戏,其中的许多对象会被频繁重绘
- svg元素
- 不依赖分辨率
- 支持事件处理器
- 最适合带有大型渲染区域的应用程序(比如谷歌地图)
- 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
- 不适合游戏应用
3.拖放
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)">
4.地图定位
function getLocation(){
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else x.innerHTML="该浏览器不支持定位。";
}
function showPosition(position) {
x.innerHTML="纬度: " + position.coords.latitude +
"<br>经度: " + position.coords.longitude;
}
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML="用户拒绝对获取地理位置的请求。"
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="位置信息是不可用的。"
break;
case error.TIMEOUT:
x.innerHTML="请求用户地理位置超时。"
break;
case error.UNKNOWN_ERROR:
x.innerHTML="未知错误。"
break;
}
}
5.video/audio
<video id="video1" width="420">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
您的浏览器不支持 HTML5 video 标签。
</video>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
// 支持通过js控制DOM元素的play播放、pause方法
function playPause() {
var myVideo = document.getElementById("video1")
if (myVideo.paused) myVideo.play()
else myVideo.pause()
}
6.input
- 选色器:
<input type="color">
- 时间选择:
<input type="date">
- 邮箱/链接/号码校验:
<input type="email/url/tel">
- 数字区间:
<input type="range" min="1" max="10">
- 数字:
<input type="number" min="1" max="5">
7.语义元素
<section>
:定义文档中的节,比如章节、页眉、页脚或文档中的其他部分<article>
:定义独立的内容<nav>
:定义导航链接的部分<aside>
:定义页面主区域内容之外的内容(比如侧边栏)<header>
:描述了文档的头部区域,主要用于定义内容的介绍展示区域<footer>
:描述了文档的底部区域<figure>
:规定独立的流内容(图像、图表、照片、代码等等)<figcaption>
:定义<figure>
的标题,应该被置于"figure"的第一个或最后一个子元素的位置
8.web存储
- localStorage与sessionStorage
- web sql与indexedDB(单独篇章)
9.localForge
将indexedDB封装成第三方库,可以通过类似于localStorage的调用方式使用;内置优雅降级,在不支持indexedDB或web sql时使用localStorage
1.vue引入
npm install localforage
import localforage from "localforage";
localforage.config({driver: localforage.INDEXEDDB});
Vue.prototype.$localforage = localforage;
2.调用方式
- promise方式:
localforage.setItem('key', 'value').then(function)
- 回调方式:
localforage.setItem('key', 'value', function)
3.数据API
- 获取:
getItem(key, successCallback)
- 设置:
setItem(key, value, successCallback)
- 删除:
removeItem(key, successCallback)
- 清空:
clear(successCallback)
- 长度:
length(successCallback)
- 索引:
key(keyIndex, successCallback)
- 全量:
keys(successCallback)
- 迭代:
iterate(iteratorCallback, successCallback)
4.设置API
setDriver(driverName/[driverNames])
- 强制使用特定的驱动或者固定优先级顺序的驱动
- driverName可选项
localforage.INDEXEDDB
localforage.WEBSQL
localforage.LOCALSTORAGE
config(options)
- 设置全局通用的配置,必须在调用数据API前调用该API
- options参数
- driver:驱动,规则与setDriver相同
- name:数据库名称,默认值:localforge
- size:数据库大小,仅用于web sql
- storeName:仓库名称,默认值:keyvaluepairs
- version:数据库版本
- description:数据库描述
5.驱动API
- 自定义驱动:
defineDriver(myCustomDriver)
- 返回正在使用驱动:
driver()
- 确定驱动是否启动:
ready()
- 判断浏览器是否支持driverName:
supports(driverName)
6.多实例
- 创建返回localForge实例:
createInstance(config)
- 删除数据库/仓库:
dropInstance({ name: '', storeName: '' })
10.web worker
使用场景多为需要复杂计算的操作,如大量数据处理等等
1.限制
- 同源:必须与主线程文件同源
- DOM:无法使用document、window、parent等对象,但可以使用navigator和location对象
- 通信:与主线程不在同一上下文,需要通过信息传递通信
- 脚本:不能执行alter、confirm方法,但可以使用XMLHttpRequest发出ajax请求
- 文件:无法读取本地文件,加载的脚本必须来自网络
2.主线程调用
// 根据脚本文件创建线程
let worker = new Worker('work.js')
// 向线程传递信息
worker.postMessage('hello')
worker.postMessage({msg: 'hello'})
// Transferable Objects传递二进制数据,仅在单一线程可用
let buffer = new ArrayBuffer(1);
worker.postMessage(buffer, [buffer])
// 接收线程信息
worker.onmessage = function(event) {
console.log(event.data)
worker.postMessage('receive')
}
// 接收线程错误
worker.onerror = function(event) {
console.log(event)
}
// 关闭线程
worker.terminate()
3.worker线程执行
// 加载其他脚本
importScripts('script.js')
// 接收主线程信息
onmessage = function (event) {
let data = e.data
switch (data) {
case 'start':
// 向主线程传递信息
postMessage('worker start')
break
case 'stop':
postMessage('worker stop')
// 内部关闭线程
close()
break;
};
}
4.worker实例
// 线程中轮询,判断与缓存是否一致决定是否传递信息
function createWorker(f) {
let blob = new Blob(['(' + f.toString() +')()'])
let url = window.URL.createObjectURL(blob)
let worker = new Worker(url)
return worker
}
let pollingWorker = createWorker(function (e) {
let cache
function compare(new, old) {}
setInterval(function () {
fetch('/my-api-endpoint').then(function (res) {
let data = res.json();
if (!compare(data, cache)) {
cache = data;
self.postMessage(data);
}
})
}, 1000)
})
pollingWorker.onmessage = function () {}
pollingWorker.postMessage('init')
11.SSE
网页自动获取来自服务器的更新,适用于服务器单向高频的数据发送
// 前端开启轮询
const source = new EventSource('/sse');
source.onopen = () => {
console.log('轮询开启');
}
source.onmessage = (res) => {
console.log('获得的数据是:' + res.data );
}
source.onerror = (err) => {
console.log(err);
}
// node.js后端传递信息
const http = require('http')
const fs = require('fs')
const server = http.createServer((req, res) => {
const url = req.url;
if (url === '/') {
const data = fs.readFileSync('./index.html')
res.end(data)
} else if (url === '/sse') {
res.setHeader("Content-type", "text/event-stream")
setInterval(() => {
res.write('data:' + new Date() + '\r\n\r\n')
}, 2000);
}
})
server.listen(3000)
12.WebSocket
客户端与服务端全双工通信
let ws = new WebSocket("ws://localhost:8080");
// 显示指定收到的二进制数据类型
ws.binaryType = 'blob'
// 判断web socket状态
switch (ws.readyState) {
case WebSocket.CONNECTING:
// do something
break;
case WebSocket.OPEN:
// do something
break;
case WebSocket.CLOSING:
// do something
break;
case WebSocket.CLOSED:
// do something
break;
default:
// this never happens
break;
}
ws.onopen = function(evt) {
let data = new ArrayBuffer(10000000)
// 发送信息
ws.send(data)
if (ws.bufferedAmount === 0) {
// 发送完毕
} else {
// 发送还没结束
}
};
ws.onmessage = function(evt) {
console.log( "Received Message: " + evt.data)
ws.close()
}
wx.onerror = function(evt) {
console.log("Connection error" + evt)
}
ws.onclose = function(evt) {
console.log("Connection closed" + evt)
}