入职六个月笔记分享

真的不要质疑 ||是或 &&是且，有时候会忘

异步和不异步的同时执行，拿出来一个分支（有点像多线程）去搞异步的加快性能，只有await，async才能等待异步（还是单线程）
异步的时候并行执行的两个（特别是嵌套时），当异步进行的快时可能没差，但当异步的数据计算量大时，可能并行执行的执行完了，但是这时你获取不完异步里的
数据（目前想到最好的方法就是设置一个延时然后获取，嵌套完之后的）

v-for="(item,key) in examList[examSignal]" dom节点上也可以这样写

不做axios二次封装处理时，用form表单提交数据
let form = new window.FormData();
form.append(‘desc’,state.faultForm.desc)
form.append(‘file’,state.upload.imgInfo)

要写在专门的路由文件里哦，不然会出错
router.beforeEach((to,from,next) => {
//设置条件只为当前路由设置beforeEach
if(to.fullPath != ‘/simulation’&&from.fullPath == ‘/simulation’){
ElMessageBox({
title: ‘提示’,
message: ‘当前还在考试中是否要离开当前界面?’,
confirmButtonText: ‘确定’,
cancelButtonText: ‘取消’,
showCancelButton: true,
closeOnClickModal: false,
type: ‘warning’,
}).then(() => {
next()
// router.push(to.path)

            }).catch(() => {
                return
            });

        }else{
            next()
        }
    })

处理现场问题最好清下缓存

word-wrap:break-word; //文本超出换行

arr.includes() //判断一个数组里有没有某东西，好使

数组分类的方法******分组
const groupBy = (array, f) => {
let groups = {};
array.forEach(function (o) {
var group = JSON.stringify(f(o));
groups[group] = groups[group] || [];
groups[group].push(o);
});
return Object.keys(groups).map(function (group) {
return groups[group];
});
};

          const arrayGroupBy = (list, groupId) => {
            let sorted = groupBy(list, function (item) {
              return [item[groupId]];
            });
            return sorted;
          };

const allUser = arrayGroupBy(data.data, ‘userId’);// 使用变量分别为list和根据匹配的属性

设置高度宽度自适应 auto很有必要

{
“id”: 1,
“name”: “信号一”,
“startTime”: “2019-08-14 09:39:55”,
“typeId”: 0,
“alarmStatus”: 1,
“remark”: “码流恢复…”,
“cause”: “主路码流中断恢复”,
“desc”: “3213123123”,
“switchType”: 1
}

async和await虽然，await只能在顶层，但是不要忘记嵌套时候在括号顶层也是啊

&.router-link-active用来表示在这个当前链接的时候

一般我们axios的第三个需要传的参数都是header头信息
axios.get(url,params,header)
如果不在一块统一封装的话，也可以单拿出来定义个对象然后传过去
如let headers = { …各种设置(上面那个token的也可以在这authoration什么的)}

删掉一点一点的判断方法（问题到底在哪里）

除了v-viewer，用一个大弹框或者饿了么里的el-tooltip都是不错的选择，方便简单

下笔前一定先构思好框架！！！！

let a = b?c:d

通过jquery来判断样式也是个不错的选择
if (windowWidth <= 1366) {
$(".showDirectives").css(“height”, “420px”);
}
$("#signalDetail").show();
$("#streamPanoramic").hide();
$(’.serviceTreeDiv’).addClass(‘serviceTreeDiv2’);
$(’.serviceTreeDiv li a span’).css({ color: “#000” });
$("#alarmLog").height()
等这些用法

改变一个样式用jQuery也是不错的选择，当deep也不管用时，可以尝试用jquery来改变

pointer-events: none;设置给外层后也可点击被遮挡的内层

every方法，检测数组所有元素是否符合指定条件，有一个不符合就停止并返回false，都符合就返回true
every并不会改变原数组

channel.map((value: any) => {
let zAlarm = res.data[value.zid]
value.alarmInfo = […zAlarm.mainInfo, …zAlarm.bakInfo, …bAlarm.mainInfo, …bAlarm.bakInfo]
你这个操作相当可以的，值得学习

JSON.strinfy()可以在localstorage和sessionstorage里存数组和对象，只要在获取的时候parse一下就行了
存布尔型的话只能用某个固定的字符串来判断

Ajax封装在action里，通过dispatch来封装调用（dipathch也是方法），也极大地增加了封装可用性

…不仅可以展开数组还可以展开对象
const userBasic = {
name: “Jen”,
age: 22,
};
const userMoreInfo = {
country: “Argentina”,
city: “Córdoba”,
};
const user = {… userBasic, … userMoreInfo};
// Output: { name: “Jen”, age: 22, country: “Argentina”, city: “Córdoba” }

富文本改变文字一般都会有个封装的onchange方法
this.editor.customConfig.onchange = (html) => {
this.info_ = html // 绑定当前逐渐地值
this.$emit(‘textInfo’,this.info_)
}

上传的图片复现
file-list里的
this.fileList2 = [{url:self.detailInfo.imageUrl,name:self.detailInfo.imageUrl}]
他有时候上传文件需要的要是一个file.raw这个具体看情况吧
formdata.append的前面有，都是这么来的

vue2混入 mixins:[某个组件] //那个组件里所有的变量方法都能拿到了（好像不能传值改值）
兄弟之间传值
注意要在mainjs中全局定义一下eventHub
this.$root.eventHub.$emit(“getdata”, “我是组件A的内容”); 传递
this.$root.eventHub.$on(‘getdata’,(n)=>{}）接收

break打断for循环

get请求后面&后面的就是一个参数param

这次上传和下载，导出都不怕了（本质上都是后台给的一个连接）

完成这个小算法还是颇有成就感的啊，是大算法了手动狗头（自己动笔搞清楚，真的思路清晰）

npm -save之后下载的全局的 下次npm i 会直接下上

动态绑定组件好使
‘

shift+esc会来判断某地方的进程，以此来判断是否存在内存泄漏的情况（看代码有时候是看不出来的）
（发现问题，有时候clearTimeout的时候清不掉延时，一是把time变量提上去二是用上window.setTimeout(()=>{})然后直接把timer给他设为null来代替clearTimeout）👍👍顶
最后还不是这个问题
ifame标签会挂载到一个新的连接上，（就是说在主进程上会出来一个辅助框架的进程去单运行这个iframe的（这个连接里反应的进程才是你想看到的）），
在内容标签化界面里这个才是他真正占进程的地方
排查发现问题，每次播放会出现一个dedicated worker的显卡，并且不会清楚

有时候用个插件静下心来仔细去看要怎么引入，不要急

控制台手机模式可以直接调分辨率（也可以根据自己需要配一个自己用的）

_.pluck(array,‘字段名’)，去数组里的某一字段组成新的数组

CEF config配置文件（很简单的一个东西）

echarts map 图不过如此，json文件引入不行可换成js引入注册

HLS RTMP视频流的协议
HLS 延迟大，适合视频点播（文件后缀是m3u8）；RTSP虽然实时性最好，但是实现复杂，适合视频聊天和视频监控；
RTMP强在浏览器支持好，加载flash插件后就能直接播放（所以说我们更需要rtmp协议）(rtmp流是这样的rtmp://)
不同协议的流就要用不同的协议来打开
现在部门内用video.js比较好用 newVideo(videoObject)
谷歌浏览器是不支持自动播放的，必须要用户自己交互下
拉各种协议的流可以到Apollo或者display里面去拉

在f12调试的时候可是直接delete删掉某个dom来进行测试

现在远程的主机然后那个主机远程的基本上都是虚拟机（提高性能）

node环境下启动前端啊肯定是，跑起来服务就像你本地一样啊，有的项目里node里面把前台跑起来，后台不用管

const count = storage.filter(item => item.status === ‘0’).length; // 6 可以快速进行数组计数（本来返回的就是数组没毛病的）

用解构赋值会更加规整

原生删除一个节点
let idObject = document.getElementById(‘accuracys’);
idObject.parentNode.removeChild(idObject);//先父节点一下子再子节点不就是它自身吗
也可以用Jquery来$().html() html内置为空就可去掉这个

反过来创建一个的话createElement，createChild
用juery的话更简单，切可以让新生成的dom更多元化
let $div = $(’

’)
${(}^{\prime }.leftConten{t}^{\prime }).append($div)

这些原生的东西包括jquery还是很好用的

牛啊沣锐
let promise = audio.play().then(() => {
vedio.isPlay = true
//resolve()要是用的话直接在这写就可以，因为其本身就是个promise对象，当然这里我不需要
}).catch(() => {
ElMessage.error(‘音频加载出现问题’)
})
通过打印发现。play()返回的是一个promise对象，完全可以这样操作（当然这里只是catch一下，没有对于res，rej的处理）

id是可以动态绑定的啊
let { id } = vedio //只要你能去当当前id的这个值（vedio这里是点击事件传过来的参数是个对象啊），下面这么写是可以取到id的
let audio = document.getElementById(id);
document.getElementById(value.id).pause() //都是可以的

redis其实大量的都是缓存的机制（非关系型数据库），通过缓存去处理一下特别快

遇到在困难的问题也一定要去试试，保不定自己就解决了，通过查阅资料确实能方便很多，
但是自己思考处理会更加的有成就感，解决问题的思路也会更加记忆犹新。排查问题尤其是底层的问题，
一定要静下心来慢慢一点一点去看，不要觉得看不懂或者没必要，看完之后提升是很大的，而且仔细去排查绝对可以发现问题。

---

table标签是不能设置高度的我丢，所以要在外层加个div包起来去，为他添加高度去滚动

打包之后某个插件用不了，很可能是这个插件也被打包了，我们不要这种在index.html中引入的文件打包，
vue的话默认public里的文件是不被打包的，打包之后的index.html文件里找的就是dist里的文件了

现象
hls能播，但泄漏
ckplayer最早版本视频出错后一直报错，内存疯涨
换成新版本之后视频播放器无法操作（内存慢慢的涨）、换newVideo无效

现场rtmp流播不了，换newVideo({{video:flashUrl}})无效（是flash播不了），newViedio也无效（报错 not a function）
竟发现rtmp是不用h5的播放器播不了，之前hls能播是因为用了h5的播放器（不用h5也播不了），但是rtmp h5的播放器也播不了

之前的版本，不是h5下和非h5下两者是否能播，非h5播不了hls，rtmp都播不了

现在试下加入videoPlay()两种流的播放情况（也可用跳广告）,都没用

换成新版本把错误流提示那块改成清除播放

再能播且大多都能播且可以操作的版本上最后法子清掉节点再添加

之前版本现场播的是rtmp的流，但是现在换版本播不了了rtmp的流
this.load是true（play方法没播直接return了）->loadedHandle方法没执行->playerLoad方法没执行->getVideo卡住了，不创建了->this.CD是null被返回了->this.getByElement返回的null（节点）
之前的版本this.CD是有东西的，但是this.html5Video是false
走不是htmk5Video是false的最后走的还是flashplayer，新版本flashPlayer
新的里面nva这玩意rtmp不让加进去，导致html5Video是false
之前的就是flashplayer去播的rtmp（直接走的embedSWf掉的flashplayer），直接，这个ckplayer就播不了rtmp的流（能播就用的flashplayer）
之所以现在的不走flashplayer，因为现在的走完embedSWf，会走videoPlay（后来发现是我自己在外层调用的我个憨憨），导致return了，之前的不走videoPlayer
现在先把之前的也能走flashplayer，（问题来了，新版本走了embedSWf也不播）
然后再慢慢把html5Video改为true（改不成true啊，nva是rtmp流进不去是，进不去就是html5Video是false）
换成hls nva进去了走html5Video，但是走报错，frame of null 。。束手无策了

帅鸽版本hls能播，rtmp播不了
我的hls报错目前，rtmp播不了

VA是流的数组

淦，ckplayer本质也是封装的html5Video的播放器（好像现在的播放器都是这么封装的）

h5的播放器本来就播不了rtmp好吧。。！！
其实源码里最基本的都是js最近基本的方法！！！！

οnerrοr=“this.style.display=‘none’”//图片出错时隐藏
没有src时隐藏
img[src=""],
img:not([src]) {
display: none;
}

出问题报错，拿东西用try catch啊！！

那个回调函数callback，其实就是在一个方法（已接受参数的形式）里执行另一个函数（加括号执行这个），其实可以说是箭头的前身
某个方法需要接收一个函数时可以用这个，多在底层中实现
function doSomething(msg, callback){
alert(msg);
if(typeof callback == “function”)
callback();
}
doSomething(“回调函数”, function(){
alert(“匿名函数实现回调!”);
});
callback.call(…) 这样来改变回调后的this指向
回调地狱故名思意也就是方法里各种嵌套一个接一个，再想想后面的promise

db文件不单单是建表的文件，就是里面各种的数据关系等等都在这个文件里，正常的话db文件都是在一台主服务器上去操作

js 掌管进程的worker方法，new Worker(‘jspath.js’)负责开启关闭进程，可以看到每次循环多一个视频时就会多一个worker进程，所以要.terminal()关闭进程
创建一个播放器是要创建一个进程去用的
xxx.min.js （只有.min.js/css），是压缩后的js文件极大减少了文件大小，将其中的空白字符、注释、空行等与逻辑无关的内容删除，并进行一些优化
Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取

打svn tags包到show log里面去然后create … version一个然后选择目录到tags下定义好名字就可以了

WebAuthn --将来可能会通过指纹或者摄像头来解锁web
W3C 正式推出“Web 机器学习工作组”TensorFlow.js 是一个用于使用 JavaScript 进行机器学习开发的库（里面有很多模型，当然会有局限，就一点可选的）

animation.css–非常方便的使用动画css（）validator.js是表单验证很好的插件

终于知道那些有个性化的博客是怎么做出来的了，有专门的类似hexo这样的框架（npm起md组成的框架，然后搭到网上）

空运算符 void 用void的再执行方法，返回的肯定是空
background-clip(背景图片延伸到哪)：border-box（边框外延），padding-box（内边距外延），content-box（内容区外延）（有边框时会用到）

http的content-Type回顾
常见的格式（request header和respones header中，当然我们控制的肯定是request header中的内容，可以在Ajax请求中去设置）
application/json ： JSON数据格式
text/xml ： XML格式
application/x-www-form-urlencoded ： 中默认的encType，form表单数据被编码为key/value格式发送到服务器（表单默认的提交数据的格式）
multipart/form-data ： 需要在表单中进行文件上传时，就需要使用该格式
最后两者都是表单的形式只不过格式不同导致type也不同
我们看也好，用也罢一定要注意根据自己的需要在request设置，或者在response中解析

之前谷歌浏览器看接口状态的时候看前端传的值那个最外面说明的其实就是你传入的request header中的content-Type类型

终于知道为什么在项目中会给body设一个margin 0 auto了，它自带这8px的margin。。。
原生也有类似于生命周期这样的概念的在body加载好了再执行方法
原生的话动态赋值是拿到节点然后拿节点下的innerHtml来赋
本地的html只是在本地，用node会给你起一个服务虽然也是本地的但意义不同（相当于nginx起了个本地的）

js格式化时间一位数变成两位数
(Array(2).join(0)+time).slice(-2)
缩放属性resize
resize: none;
resize: both;
resize: horizontal;
resize: vertical;
resize: block;
resize: inline;

object.is 比=更严格的比对方式 Object.is(NaN, NaN); //true NaN === NaN //false 当然更趋向值判断

在任务管理器里直接输入某东西会搜索出来的

配置nginx只要在conf下配置nginx.conf相关的端口即可在本地起（就构建了一个最基本简单的nginx服务）
这也就是改变本地html路由的方法
我们用vscode里的liveServer插件也可以实现启动一个html的本地服务（在html文件下右键open in live Server即可）

websocket占用的浏览器资源更少

.ar_wrap::-webkit-scrollbar { width: 0 !important } //谷歌隐藏滚动条并且滚动

box-shadow: 0 0 15px 1px #075ab6 inset;阴影设置(水平阴影位置，垂直阴影位置，模糊程度，阴影尺寸，颜色，内部还是外部)（前两个位置的参数也很重要哦做艺术字的话也很好的）
要是有多个的话就是设置多重阴影
visible:hidden/show (隐藏但仍占位)

animation+
+animation-name动画名（可以是自带的也可以是keyframe里自带的)

• animation-duration持续秒数
• animation-timing-function动画周期中执行的节奏（关键帧： linear（从头到尾速度相同），默认ease（低速开始然后加速最后变慢）ease-in-out（低速开始和结束）cubic-bezier(n,n,n,n)（在里面设置0-1中自己的速度）steps(int,start|end)（时间中的间隔数量（就是那种一帧一帧的出），参数一是间隔数，参数二是表示开头连续还是末尾连续））+
  +animation-delay延时秒数（设置负的则是提前进行）
  +animation-iteration-count该动画的执行次数（小数是执行几分之几）
  +animation-direction动画是否反向播放（normal向前循环播放完之后重置到初始位置，alternate交替反向运行，reverse反向运行，alternate-reverse反向交替）
  +animation-fill-mode（设置动画之前和之后的样式：forwards完成动画后，保持最后一个属性，backwards在延迟时间内，动画开始之前的样式，both两个都应用）
  +animation-play-state(定义一个动画是执行还是暂停running，paused)+infinite（有就是循环播放，没有就是不循环）
  keyframes + 动画名
  针对大小等或者移动等的两种方式
  1、{from{} to{}}
  2、 { 0%{} 50%{}}
  值得一提的
  @keyframes hueRotate {
  0% {
  filter: hue-rotate(0);
  }
  100% {
  filter: hue-rotate(360deg); //在过滤器中操作（hue-rotate可以变换动画可以让颜色一直变化（旋转））（详见下方关于css滤镜filter具体解说）
  }
  }
  即可实现动画效果的改变（CSS 是不支持渐变的动画的，可以使用 CSS @Property，也可以通过上面的hue-rotate实现颜色变化）
  还有结合伪元素::before和::after 很多内容都是在 伪元素实现的（content设为""，一定要有content不然不展示的）
  CSS @property，让不可能变可能
  它允许开发者显式地定义他们的 CSS 自定义属性，允许进行属性类型检查、设定默认值以及定义该自定义属性是否可以被继承。
  @property --property-name {
  syntax: ‘’; //自定义语法规则（决定了下面initial-value的类型支持length\number\percentage\color\image\url\time\transform-list\transform-function等类型）
  inherits: false; //是否允许继承
  initial-value: #fff; //初始值
  }

p {
color: var(–property-name); //外面引用这个值直接var(名称)来引用
}
@keyframes --testAnimation {
0% {
–property-name: 0%; //改的是@property里的initial值
}
90%,
to {
–property-name: 80%;
}
}
这样就可以实现对一些css不支持的动画效果的改变，真牛啊

-webkit-box-reflect: below | above | left | right，10px，linear-gradient(transparent, rgba(0, 0, 0, .5))// 通过该属性来实现倒影，第一参数代表下上左右，第二代表与倒影的间距，第三代表倒影的虚化效果
设置动画的时候要是用一些需要占位或者突出的一定用伪元素
mix-blend-mode规定如何与其父背景融合
background: conic-gradient(#000 12.5%, #fff 0 37.5%, #000 0 62.5%, #fff 0 87.5%, #000 0) //锥形渐变类似于饼图（围绕着这个饼图的中心渐变），背景也将变小被平分的形式
颜色后加百分比是到这个百分比之后就不渐变了
radial-gradient : 径向渐变（从内到外的） linear-gradient : 线性渐变（不用说了）

做画线的一些属性
fill: none; //是否填充
stroke-width: 10; //线的宽度
stroke-linejoin: round;//线的连接头处
stroke-linecap: round;//线整体样式
stroke: #fff; //画线颜色
stroke-dasharray: 328 600; //画线长度从哪到哪

mask属性 允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域
mask: url(mask.png); /* 使用位图来做遮罩 /
mask: url(masks.svg#star); / 使用 SVG 图形中的形状来做遮罩 /
mask: linear-gradient(45deg, #000 50%, transparent 50%) / 使用渐变来做遮罩 */（使用一个图片之后再使用这个（因为图片渐变不了啊））

终于明白做一个三角形或者圆锥的原理了
当没有宽高只设置边框长度时（父级可设置宽高），当边框很大时就组成了一个图形，这个时候每一边就是该图形的一部分（根据）

其实css做动画基本上都是用到障眼法（就比如做跟随鼠标移动的其实就是把背景铺满然后鼠标hover的时候改变一下当前的颜色）
这样实现多个元素铺满、
@for $i from 0 through 100{
$width:$i10;
position:absolute;
left:$i\ast 20;width:$width
}
:nth-child(#{KaTeX parse error: Expected 'EOF', got '}' at position 4: i+1}̲):hover ~{ top:…i5}vh
left:#{$i*10}vh //动态的要#{}写
}

在less或者sass中可以在css语法中写方法（$变量名(来定义变量或者使用变量) @方法名（来写函数））
这样极大增添了css的多样性和可书写性
如：
$n: 50;
$animationTime: 4;
$perColumnNums: 25;

@function randomChar() {
$r:random($length);
@return str-slice($str, $r, $r);
}
.g-container {
width: $n+px;
}

transform-origin: 300% 300%;是设置这个元素围绕那个地方转（x坐标位置,y坐标位置）（可以设置成任何点的位置）
正常的话rotate就是自身旋转（不加X,Y,Z）
transform-style: preserve-3d（可透视，css默认可看到背后的元素）; 当transform-style设为preserve-3d时就会有坐标轴Z的概念即三维坐标轴（Z->前后）
关于3d下的rotateX，rotateY，rotateZ的旋转说法（围绕哪个轴转拿手比划下就能明白）得简单说一下（x轴转可以想象成转单杠，y轴转可以想象成钢管舞转，z轴转可以想象成扔飞镖大转盘的转）
不管哪个轴绕的是这个图形总的坐标轴（他是不变的取决于父元素），而不是某个平面的2d的自己的轴，这就是为什么旋转之后会出现位移现象。
那关于translateZ有点类似perspective
不要忘记perspective
perspective-origin：25% 75%;（表示我们想看的位置，默认是元素中心）

transition的话就是只能实现比较简单的动画效果比如变宽变长等（常用在hover时） 如
div{
width:100px;
transition: 2s;
}
div:hover {width:300px;}

writing-mode: vertical-lr; 中文垂直展示
1ch这个单位是一个字符所占的长度，这个在某些情况下是
css filter滤镜属性
filter: blur(4px); //设置高斯模糊（模糊感） //去除毛边增加柔畅更丝滑，好用
filter: contrast(200%); //设置对比度（高亮）
filter: grayscale(80%); //设置变灰
filter: hue-rotate(20deg); //设置颜色旋转（改变颜色）
filter: drop-shadow(16px 16px 20px red ）invert(75%)是否反转; //输入图像应用阴影效果（只给展示出来的图像阴影）
（充电特效）拆解一下知识点，最主要的其实是用到了 filter: contrast() 以及 filter: blur() 这两个滤镜，可以很好的实现这种融合效果。
更强大的滤镜SVG滤镜（实现更多的效果），这个以后再深究吧
https://ilyashubin.github.io/FilterBlend/ 可以去这个网站去测滤镜

发现一个神器竟然还是h5自带的 实现自己滚动（简直不要太牛）（里面有很多属性可以进行设置）

canvas绘制画布
var c=document.getElementById(“myCanvas”);
然后，创建 context 对象：
var ctx=c.getContext(“2d”);
具体方法如下
填充某画布ctx.fillStyle="#FF0000";（支持图片渐变等）
ctx.fillRect(x,y,width,height) //画一个长方形x，y是左上角坐标
clearRect（x,y,width,height）//清楚you kwnown
ctx.strokeRect(x,y,width,height)//画空心长方形
moveTo(x,y) 定义线条开始坐标ctx.arcTo(200, 50, 200, 200, 100);//画曲线 1、2：控制点1坐标 参数3、4：控制点2坐标 参数4：圆弧半径
lineTo(x,y) 定义线条结束坐标 //画线 最后用ctx.stroke();表示画
ctx.lineCap= butt||round||square //线条末端样式
ctx.lineJoin = round（圆底） ||bevel （正三角行底）|| miter（菱形底） 线条与 线条结合处的样式
ctx.stroke()是画线，如果在圆形或者其他形状创建完之后用stroke是用线画出来，这样就有了后面的strokeStyle以及lineWidth设置线属性
不用线连的话我们可以直接用.fill()填充起来
ctx.strokeStyle = “red”;//线条颜色
ctx.setLineDash([20, 5]); // [实线长度, 间隙长度] 设置虚线
ctx.arc(x, y, r, startAngle, endAngle, anticlockwise) ctx.arc(95,50,40,0,2Math.PI);//一个pi是半个⚪的弧度，2是整个圆的 //xy圆心r半径从开始弧度到结束弧度，最后表示顺逆时针（布尔）
ctx.arc(50, 50, 40, 0, Math.PI / 2, false);
ctx.font=“30px Arial”; //定义字体及大小
ctx.fillText(“Hello World”,x,y); //绘制实心文字和位置
ctx.strokeText(“Hello World”,10,50); //绘制空心文字和位置
ctx.rotate（2 * Math.PI / 60 * time.getSeconds() + 2 * Math.PI / 60000 * time.getMilliseconds()）//旋转(角度以弧度记1*Math.PI/180是1°) ctx.translate(100, 0)//平移 （旋转平移以自身为准还是以父级为准取决于是否beginPath和）
ctx.scale(x,y) //横轴，y轴的放大因子以1为基准
var grd=ctx.createLinearGradient(x,y,x1,y1); //创建线性渐变（只是画的位置从哪变到哪，具体变颜色是addcolorStop决定）（x，y，x1，y1可以理解为两个点）
var grd=createRadialGradient(x,y,r,x1,y1,r1)
grd.addColorStop(0,“red”);指定颜色停止，参数使用0-1之间来描述
ctx.fillStyle=grd;//填充
可使用ctx.fill() 方法来直接填充
ctx.restore()是从绘图堆栈中弹出上一个Canvas的状态。
ctx.save()主要用来保存目前Canvas的状态
ctx.globalAlpha = value;设置透明度
canvas里面的所有数值单位都是不带单位的，都只有只是数字，这个数字对应的就是px

var img=document.getElementById(“scream”);
ctx.drawImage(img,x,y); //把一块图像放到画布上
可通过document.getElementById().onclick() = function(){} //添加点击事件
this.canvas.addEventListener(‘mousedown’, this.handleCreator(ActionType.Down)); //或者添加监听器的方法添加其他事件
ctx.beginPath()//新建一条路径，路径一旦创建成功，图形绘制命令被指向到路径上生成路径（相当于再另一个地方重新画）
对应的ctx.closePath();//闭合了
ctx.clip();//裁剪两个图层重叠的地方
window.requestAnimationFrame(refreshAnimation) //循环执行帧动画（须接受一个回调函数）然后每秒执行

部署node环境启动
setlocal EnableDelayedExpansion
title iAware Server
cd /d %~dp0
echo ==== Start iAware… ====
set nodePath=%cd%/node-v12.22.0-win-x64 //把node的版本资源包放到目录下然后设置环境变量即可完成部署node环境
cd %cd%/server
%nodePath%\npm run start

**dom之下也是可以对数组进行js那样子书写操作的（过滤等） -0变成数字形式还记得吧

之前那个接口覆盖数据的问题，只需要加个量判断一下是否是最新的数据做个处理就好了
或者你把状态保存起来（赋值的时候先取状态）

router.replace({
path: “/duty”,
query: { “channelIsLock”: newLocked },
});
//路由代替

mqtt是我们与websocket通信之间的中间件，接收websocket上报上来的信息，我们去向mqtt获取信息
之前的单纯用websocket没有用mqtt推的是因为之前的websocket写了很多推的协议，能够直接反给我们，可以说mqtt方便了发送方吧主要，我们怎么接收都可以，（但是mqtt主要是调试可用）

定义一个对象MqttClient然后在map里加[index]即可动态创建可用变量，state.MqttClient[‘client’+index]

定义导出一个类class XX
一定要注意写constructor(){}构造函数（不仅可以在原型中保存，还可以自执行该方法）
创建构造类可以说是一个实例，里面的方法可以说都在原型里

splice，截数组，substring，slice截字符串或者数组，include找数组里有没有，indexof都可

浏览器里面顶层对象是window，但是node和webworker里是没有window的哦，要是要引入只能下载下来依赖再require，所以说js脚本还是很局限性的。。

（Proxy可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截（可以设置拦截一共13种），因此提供了一种机制，可以对外界的访问进行过滤和改写。）
vue2.0 用 Object.defineProperty （往vue对象里添加属性）作为响应式原理的实现，但是会有它的局限性，
比如 无法监听数组基于下标的修改，不支持 Map、Set、WeakMap 和 WeakSet等缺陷 ，
所以改用了proxy const proxy = new Proxy(target, handler) //target 参数表示所要拦截的目标对象， handler 参数也是一个对象，用来定制拦截行为。
（proxy是es6新特性，为了对目标的作用主要是通过handler对象中的拦截方法拦截目标对象target的某些行为（如属性查找、赋值、枚举、函数调用等））
还可以从整体上监听整个obj对象
解决了这些问题，这也意味着vue3.0将放弃对低版本浏览器的兼容（兼容版本ie11以上）。

对象里的set，get方法都是针对key对应的value的，只不过一个是获取一个是改变
Reflect.set(myObject, ‘foo’, 2); Reflect.get(myObject, ‘foo’) // 2（没有会报错）（这里reflect等同于object啊）
Reflect也是es6新出来的为操作对象而提供的api，有替代Object的趋势
可以从Reflect上拿到语言内部方法，在object中要是无法定义属性会报错，但Reflect返回false，
并且Reflect与proxy对象的方法（当然proxy里的方法会多一层拦截的方法一一对应

v3 Suspense异步请求组件使用，直接用标签包起来就可以异步加载 该内部的标签

之前vue文件只能有一个template，即对应着一个vue实例的根入口（

,每个import一个单文件组件并打印出来的时候，是一个vue实例）
，通过这个根节点来遍历当前vue树的所有节点，而在V3中Fragment，会创建一个虚拟的dom包起来

v3defineComponent 其实就是对setup函数的封装

v3多个v-model？ 不知道能不能用到

@input事件（实时监听输入）传参问题

String()数字整型undefined，null转为字符串用它，其余的用toString()

遍历图片给图片改个名字与index对应上

我们每一个require或者import的模块比如 require(“echarts”) 其实都有一个映射关系 在某个配置文件里echarts对应的是一个路径的其实
注意这个映射关系

header，footer标签可以语义化的代表div