兰州网站建设招聘,搭建网站要不要给域名对方,电商常用的erp系统有哪些,公司名称注册规定前端学习笔记专栏区别于官网中全面的知识讲解#xff0c;主要记录学习技术栈时对于重点内容的提炼#xff0c;便于对技术栈知识的快速回顾以及使用 1.canvas元素
内部坐标#xff1a;坐标均以左上角为(0, 0)#xff0c;单一坐标均作为起始坐标创建对象#xff1a;
c… 前端学习笔记专栏区别于官网中全面的知识讲解主要记录学习技术栈时对于重点内容的提炼便于对技术栈知识的快速回顾以及使用 1.canvas元素
内部坐标坐标均以左上角为(0, 0)单一坐标均作为起始坐标创建对象
canvas idmyCanvas width200 height100/canvasvar 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为半径02*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 dataev.dataTransfer.getData(Text);ev.target.appendChild(document.getElementById(data));
}div iddiv1 ondropdrop(event) ondragoverallowDrop(event)/divimg iddrag1 src/images/logo.png draggabletrue ondragstartdrag(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 idvideo1 width420source srcmov_bbb.mp4 typevideo/mp4source srcmov_bbb.ogg typevideo/ogg您的浏览器不支持 HTML5 video 标签。
/video
audio controlssource srchorse.ogg typeaudio/oggsource srchorse.mp3 typeaudio/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 typecolor时间选择input typedate邮箱/链接/号码校验input typeemail/url/tel数字区间input typerange min1 max10数字input typenumber min1 max5
7.语义元素
section定义文档中的节比如章节、页眉、页脚或文档中的其他部分article定义独立的内容nav定义导航链接的部分aside定义页面主区域内容之外的内容比如侧边栏header描述了文档的头部区域主要用于定义内容的介绍展示区域footer描述了文档的底部区域figure规定独立的流内容图像、图表、照片、代码等等figcaption定义figure的标题应该被置于figure的第一个或最后一个子元素的位置
8.web存储
localStorage与sessionStorageweb sql与indexedDB单独篇章
9.localForge 将indexedDB封装成第三方库可以通过类似于localStorage的调用方式使用内置优雅降级在不支持indexedDB或web sql时使用localStorage 1.vue引入
npm install localforageimport 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.INDEXEDDBlocalforage.WEBSQLlocalforage.LOCALSTORAGE config(options) 设置全局通用的配置必须在调用数据API前调用该APIoptions参数 driver驱动规则与setDriver相同name数据库名称默认值localforgesize数据库大小仅用于web sqlstoreName仓库名称默认值keyvaluepairsversion数据库版本description数据库描述
5.驱动API
自定义驱动defineDriver(myCustomDriver)返回正在使用驱动driver()确定驱动是否启动ready()判断浏览器是否支持driverNamesupports(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.dataswitch (data) {case start:// 向主线程传递信息postMessage(worker start)breakcase 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 cachefunction 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 somethingbreak;case WebSocket.OPEN:// do somethingbreak;case WebSocket.CLOSING:// do somethingbreak;case WebSocket.CLOSED:// do somethingbreak;default:// this never happensbreak;
}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)
}
