好久不来了，这是入职三个月以来公司的笔记，我的葵花宝典，各种有的没的实用的前端知识

hasOwnProperty () 方法用来检测一个属性是否是对象的自有属性

用$this=this来把this注册在局部的作用域，使在function的时候（function只是在局部啊）$this能在更多的作用域，箭头函数不是可以一层一层的往上找吗所以不影响

造后台数据我们不用调接口，直接返回一个数据对象就好了，设多少条出多少条
建立文件mockdata.js
const mockdata = function(count){
let result = {“success”:true,“msg”:‘请求成功’,“data”:[]} //具体的字段最好对应好
(…Array(count).keys()).map(value,key)=>{
this.result.data.push({‘name’:value,“nick_name”:“lala”+value})
}
return result
}
export mockdata
那边引用下穿个数据就好了
const test = this.mockdata(300).data
this.channeldata = test

websocket是建立域名加端口的连接吗不是，websocket在本地加载一个客户端与远程的后端的swebsocket服务端建立连接，可以实时的传输数据
保持更新，但数据不要太大哦。比用接口的话更有实时性，用到的地方不同。

webpack-dev-server是webpack里类似于提供一个开发环境的东西，你在package.json里
“dev”:webpack-dev-server 运行时他会自己找项目中webpack.config.js文件读取其中devServer的配置，然后就跑起来了
这里我们配置一下
moudle.exports = {
mode:‘development’,
entry:’./src/index.js’,
output:{filename:‘bundle.js’}
},
devServer:{
contentBase:Path.join(_dirname,‘www’), //静态文件存放目录
port:8080,
publicPath:’/xuni/’ //虚拟打包的路径bundle.js没有真的生成
}
我们在www目录下的index.html中的这种形式，而是直接编译打包运行index.html文件
来集成项目，我们vue通过节点的方式都挂载到index.html上了

滚动条事件只有在有滚动条的时候滑动才会触发，没有滚动条触发个锤子@scroll

想问题的方法，注意定义一个你所需要的东西

shift+alt+f格式化非常方便舒服

promise用then啊

background-size:100%,100% 背景大小随窗口变化而变化并且始终填充
回顾下transform，translate，transition //变化，变化里的平移，隐式过度动画

让图跟屏幕动而动
window.addEventListener(‘resize’,funtion(){ //监听屏幕缩放事件resize
mychart.resize()
})

在map函数内外定义一个数组意义是不同的，会得到不一样的结果。

用async 和await来先执行完await后的异步，这样就可以在某个异步操作之外的后面得到异步操作里面的值
一定要记住

代码书写要分段尽量拆分好读懂逻辑便于维护，能把接口的数据缓存起来放到某个里面就放尽量少调接口，这种思想

他map里虽然遍历循环出来某个数组是一个一个的垒起来那种，但是最后还是返回的那个累加好的数组
let idArray = []; //需在外部定义该数组，与在内部定义有不一样的功效
await ChannelAjax.getChannelList().then((data) => {
data.map((value) => {
idArray.push(value.id);
console.log(idArray);
});
});
console.log(‘iD数组===》’,idArray); 加了await，async这两个idArray打印出来就一样了，不然的话上面调接口走的promise
先打印后面的idArray是空，然后后面又加上了值，但是值在原型里数组是空的。

height: calc(100% - 3rem) //calc() 函数用于动态计算长度值。
盒子里面head部分固定位3rem，内容部分始终为剩余的全部高度注意 - 两边空格
cubic-bezier() 函数//从开始到结束的不同速度过渡效果

$(’.class’).removeClass(‘blowScreen’).addClass(‘shrinkScreen’) 为jQuery中移除某个class和添加某个class
$(’.class’).hide()

form表单标签默认回车刷新

有时候要写死一个数据时，要把这个数据存储到专门的文件里，然后export 外部再引用，提高维护性****
或者是某个公共样式（除了全局样式）******

layer弹出层插件，属于layui

Vue.directive() //自定义指令
Vue.directives(‘hello’,{
inserted:function(el,binding){} //inserted是被绑定的元素插入父节点的时候调用
})
//bind是只调用一次，updated是被绑定的元素与在模板更新时调用
dom里v-hello就可以用了

*******思维开拓，考虑各种情况

let a = this.b.filter(stream=>stream.type == ‘AOIP’) //过滤出来类型是AOIP的b
let c = b.mao(stream==>{return stream.url.match(/\d+/g)}).flat(Infinity) //.flat(Infinity)是把二维数组合并成一维数组**非常的好用。
return d.filter(channel=>{
!c.some(used=>used==channel)
}) //some是 数组中至少有一个元素通过回调函数就返回true ，所有函数都没通过就返回fasle
filter是循环遍历的，第一个数组里的第一个，一个一个的后面数组中的数做匹配
主要是看c这个数组里有没有符合条件的然后返回，这个组合用于数组和数组

正则表达式不过如此啊啊
\d \D \s \S \w \W . + * ^ \ ? [a-z] [xyz] [^a-z] [^xyz] x|y(匹配x或y) _(这个就是下划线没其他意义)s

最常用的注解快标签
@example(提供一个描述的例子) @static （记录一个静态成员）@param（记录传递给一个函数的参数） @returns（记录一个函数的返回值）

scope是它的 CSS 只作用于当前组件中的元素，是怕当前定义的css影响全局而不是怕全局的样式影响当前
（全局的一般都引用在app.vue里） **（有时候没有反应的一定要注意全局样式）

fieldset标签，在form表单标签下面使用有那个样式 legend是那个标头

easy mock相当于一个制造一个服务，你在里面传数据，给你提供远程的接口，直接复制他上面的地址就能用

Affix 固钉，可以将页面元素固定在特定可视区域（在element UI中）
抽屉，等待时候的骨架屏，新更新的elementui基于Vue3还不错

var arr = [‘aa’,‘bb’,‘cc’,‘dd’];
delete arr[2]; delete方法直接用

&:nth-child(odd){} &:nth-child(even) //有时候很方便
.table_body table:nth-child(2n) tr {
background-color: #f4f9fd;
}
写法上不一样，结果也会导致大不同

某些插件用不了，看看源码里怎么写的，传的那个数到底是什么

excellentExport这个导出excel的插件最简单但是还挺好用

Vue3里的 provide 和 inject 对，解决孙子和爷组件沟通传值问题（爷组件给孙组件传值）
provide和inject不是响应式
正常的话

父：const todata = (data) => {
console.log(data);
};
const data = reactive({
msg: “Welcome to Your Vue.js App”,
});
return { data, todata };

子：props: {
msg: String,
},
setup（props,ctx）{
const msg = props.msg;收
ctx.emit(“todata”, { msg: “ylg” });传
}
const plusOne = computed(() => count.value + 1)计算属性是这样的

vue3里面setup是在beforeCreated之前所以this是undefined

ts类型不对就是不行， (this as any)可以在setup中使用this把this指向全局

element2和element3的区别

v-if和v-for最好不要在一个里面，都要用的话最外层用个template包一下然后再template里v-for

建立websocket之后真的是实时连接，实时改变啊，相当于每多长时间调用一次接口（但是websocket延时更低）
createSocketEvent() {
let ws = new WSClient();
if (!ws.wsClient && !ws.connected) {
ws.connect(() => {
ws.wsClient.on(“channelStatus”, (res) => {
if (res.success && res.data) {
this.makeChannelList(res.data); //这里获取数据的方法
}
})
});
} else {
ws.wsClient.on(“channelStatus”, (res) => {
if (res.success && res.data) {
this.makeChannelList(res.data);
}
})
}
},
还有new websocket里的onopen(建立连接)，send(发送链接 )，onclose(连接失败)等方法
只需要再挂载的时候引用就可以了

style ={‘width’:have?‘12px’:‘10px’} //注意引号

overflow-y: scroll;设置滚动效果（y轴滚动）x轴去掉的话就overflow-x:hidden 设置成auto的话效果会更好

$set就是之前解决响应式的问题，现在reactive等直接生成的响应式数据不需要再用$set来响应式，所以$set直接被vue删掉了

起变量名要语义化

state.festList.map((value:any) => {
if(value.signalId === state.selectSignalId){
value.checked = false //zhel 这样如果有是给对象里的某个改值，如果没有就是新增一个属性
state.showServiceList.push(value)
}
})

map会改变原数组

当你改变一个对象时另一个引用对象的也改变了，这时候就要考虑深拷贝的问题了，JSON.parse(JSON.stringfy())

v-model的值如果没有的话也会在对向内新增一个

注意在新文件下定义某个变量，更方便维护

str.replace(’ ‘,’’) //把字符串里的空格替换为空

shift+回车是控制台的换行

判断数组为不为空用 array.length或者!array.length来判断

let flag = false
state.showServiceList.map(service=>{
if(service.checked){
flag = true
}
})
if(!flag){return ElMessage.warning(‘请勾选节目后再试！’)}
state.dialogBatchSet = true
定义一个临时量来进行判断

Ctrl+y 是返回Ctrlz的东西

route中的redirect属性是页面进来的时候首先渲染的

Ctrl+E当前文件夹下搜索某个文件

,native是转换为原生的事件，click.right是右键

top: 170px !important;首当其冲的不要忘记这个，强制来说最好使

channelDetail.scoreDiff||null 表达式，前面没有的话就是后面的null，
现在es11有更方便的用法
obj?.prop
let obj = {name:123}
obj&&obj.name 等同于 obj？.name 前面是undefined或者null的时候就返回undefined，不是（里面有值）就返回的是后面的 结果是123（主要是用在对象中）
如果obj？.name也没有那就还返回undefined
还有俩问号？？ 左侧为null或undefined的时候会返回右侧的值，类似于上面的|| 就是？？相当于|| ?,相当于 &&
但是||在’’ false 0 null undefined的时候都会走右边

js ！！双叹号 一个叹号的时候可以把某个变量转换为bool，在某些单纯的变量无法表示为bool时就用！!来表示一个叹号表示的另一边
var temp = { color: “#A60000”, “font-weight”: “bold” };
alert(temp); 结果：[object: Object]
var temp = { color: “#A60000”, “font-weight”: “bold” };
alert(!temp); 结果：false
var temp = { color: “#A60000”, “font-weight”: “bold” };
alert(!!temp); 结果：true
但是在if情况下是没有区别的

设置好setTimeout之后一定要记得在某个阶段清楚，不然要是和其他函数一起形成闭包的话会内存 泄露
function xilou(){
i+=1;
if(i>10){alert(i);return;}
setTimeout(“xilou()”,1000);
}
在函数内部使用setTimeout调用自己可以有setInterval的功效，虽然也可以用clearInterval来清楚setInterval但是如果遇到队列中有大量计算时
setInterval前一次代码还没有执行完，后一次代码就被添加到队列了，实现不了需求。
即使调用的代码报错了，它依然会持续的调用下去，无视网络延迟，并不定时，如果它调用的代码执行的时间小于定时的时间，它会跳过调用

const a = 2172141653n; 新增的bigint（大整数）对象，这个类型的后面要加n表示精度

你在原型上的赋值或者赋函数以后的这个实例上都有这个，或者都指向某个（永久性），如果你不在原型上赋则只能用在当前实例
这样在设计某个对象或者其他之初把能共享的存在原型里，不共享的存在构造函数中
**对象在调用一个方法时首先在自身找，未找到的话去原型找，再未找到就undefined
原型对象结构Function.prototype = {
constructor : Function,
proto : parent prototype, //可以看到_proto_指针指向更底层的原型，由此也实现了一层一层的继承
some prototype properties: …，
};
之前的某实例.call(this,继承的1，继承的2)就是可以实现在一个类内继承某实例
function Person (name, age) {
this.name = name
this.age = age
}
比如teacher类继承
funtion teacher(name,age,subject){
Person.call(this,name,age)
this.subject = subject
}
hasOwnProperty查看原型上是否有这个属性

function Fn(num) {
this.x = this.y = num;
}
Fn.prototype = {
x: 20,
sum: function () {
console.log(this.x + this.y);
}
};
let f = new Fn(10);
console.log(f.sum === Fn.prototype.sum);true
f.sum();20
Fn.prototype.sum();直接引用原型this是全局的，他不会反向调用的，不会从原型上找不到再找自身的，指挥再往下层原型找。
console.log(f.constructor);

es11关于promise的更新
Promise.all

参数Promise实例中是否有被reject的实例，无法确定所有请求都已结束

Promise.allSettled

可以确定所有请求都已结束

Promise.race

只要有返回值，立马停止其他请求

vue3传送门teleport，可以把某个dom挂载到某个指定的节点上（亲测好用）

//相当于到这个地方了

我是一个 Toast 文案

平时window是外部指向，但是node里全局的默认指向是global

Axios.interceptors.response.use(response => { //拦截器.response是对响应拦截，.request是请求拦截 ，这里通过拦截器实现路由重定向
//每个接口如果状态时2则执行这个函数
//非IE浏览器的只要请求地址和响应地址不一样表明已重定向（想想呆太久了那不不一样了吗要重定向，实在不行就记住）
const a = response.request.responseURL &&
response.request.responseURL.toString().indexOf(“next”) >= 0; //原本只返回一个最先找到的符合的，>=0返回所有的符合的
if (a) {
alert(‘会话已过期，请重新登录’)
// 重定向到登录页面
Router.push({ path: “/login” });
} else {
return response;
}
//每个接口如果状态时2范围之外的则执行后面的函数
},function(err){
if (undefined === error.response) {
// 重定向到登录页面
Router.push({ path: “/login” });
} else {
return Promise.reject(error);
}
}
}

使用某个插件最后实在没办法了在index.html文件里script标签引入，但这样后期还得改，这是从网站上实时引用的（cdn里记录了npm中所有的引用地址，可查）

记得方法里的索引index

不要用笨方法，凡事肯定都有好的方法，***

position:absolute+left:50% +transform:translate:50% 水平居中真好使

position：fixed是定位是真的面对于全局的绝对

v-if和v-for冲突时请记住用template谢谢

前端使用token
首先一般在登录请求成功的时候获取token（一般由后端生成），然后我们把token存放到localStorage中
this.$http.post(’/api/user/login’,postData).then(res => {
if(res.success){
let token = res.token
localStorage.setItem(‘setToken’,token)
}
})
然后通过拦截器封装http请求，使每个请求都带上token
const httpService = axios.create({ //请求里就有header这个属性
baseUrl:…,
timeout:…,
responsetype:‘json’,
transformRequest:[data=>qs.stringify(data)],
header:{“contentType”:application/x-www-form-urlencoded;charset=utf-8},
})
httpService.interceptors.request.use(config=>{
let token = localStorage.getItem(‘setToken’)
if(token && token!=’){
config.headers.common[‘Authorization’] = token //请求头里的Authorization是专门验证用户代理身份的可以会有多种编码加密规则（来存放token）
}
return config
})

match方法中是正则时别忘了最外层加/g不然返回的东西有点奇怪

flex是父级元素上写对子级元素生效，inline-block是在子级元素上写，子级元素上生效

linear-gradient渐变色

res.channelList?.map() //如果这个channel List是新给对象添加进去的会有undefined现象，所以用?.判断西

let { scoreDiff,tipScore } = state.channelAllSignalInfo，注意解构赋值
这样scoreDiff就是state.channelAllSignalInfo.scoreDiff
tipSoce就是state.channelAllSignalInfo.tipScore 方便书写，另外代码结构不要嵌套

记住了sop上的angular作用域类名什么的都不能有一样的

setTimeout不加参数，会最小延迟时间虽然是文档是写的是0马上执行，但是不是0，会有一个最小延迟的时间

:deep(.el-tabs-items){} //通过deep属性可以深入修改不在此界面的属性

一定要加注释！！！！！！！！！！！

某个数字型的字符串-0可以转化为数字型

在some中return可以终止遍历，map return之后 后面的都返回undefined

写一下node
var http = require(‘http’)
http.createServer(function(response,request){ //也是分response和rejuest的http吗
response.writeHead(200,{‘Content-Type’:‘text/plain’})
response.end(‘Hello World!’)
}).listen(8888)

console.log( ’ listen on http://127.0.0.1:8888’)

fs读写文件的包
fs.readFile()
event模块的事件触发与事件监听
var events = require(‘events’)
var event =new events.EventEmitter()
event.on(’’,function(){})
url模块
var url = requrie(‘url’)
var pathname = url.parse(request.url)
通过url路径来区别请求
route路由文件
function route(pathname) {
console.log("About to route a request for " + pathname);
}
exports.route = route;
全局变量
__filename 表示当前正在执行的脚本的文件名。它将输出文件所在位置的绝对路径，
且和命令行参数所指定的文件名不一定相同。 如果在模块中，返回的值是模块文件的路径。
__dirname 表示当前执行脚本所在的目录。

vue3中改变原型
import App from ‘./App.vue’
import Url from ‘@/Util.ts’
const app =createApp(App)
app.config.globalProperties.$interface = Url //这样赋值到原型上

用的话
import {getCurrentInstance} from ‘vue’
cosnt {proxy} = getCurrentInstance() //这也是每个原型里面都有proxy的原因
proxy.$interface//即可用不像vue2那样直接vue.prototype.$interface = Url
用的话直接 this.$interface …
但是vue3不太推荐赋值到原型上更推荐inject和provide对

尽量怎么方便怎么来，简化一切简化

人手不够用自己用node来写后端跑项目

[{
“id”: “172.17.13.114:1001”,
“chanName”: “公司测试”,
“signalIdMark”: “”,
“displayMark”: “主,备”,
“scoreDiff”: 8,
“tipScore”: 3,
“debugMode”: 1
}]

如果公用一个click事件的话可以给他传多个值
showAlarmClick(service:any,type:Number){
let currServiceId = type+’_’+service.serviceName
let showIndex = state.showDetailIdListB.indexOf(currServiceId)
console.log(‘showIndex’,showIndex);

              if(showIndex==-1){
                  state.showDetailIdListB.push(currServiceId)
              }else{
                state.showDetailIdListB.splice(showIndex,1)
              }

思路：添加标识的时候，要间隔调用，这样的话我们固定不了标识，但是我们可以固定判断条件从而来间接固定标识

object.assign() object.defineProperty() 别忘了

想让文字居中，你在外面加个div设置一下，然后text-align让他在这个div里居中不就好了

sop上同步是把123或者125上的同步到本地，当然你起哪个服务有那个服务里的东西
123:24680是没有歌华的123：34680是有歌华的环境（数据库里内容不同）
125上的是没数据的,把本地的更新到123或者125上的话就是升级

ctrl+o控制台调试搜索

升级无非就是更新到服务器上最新一版的代码

tofixed()保留几位小数，round和floor是取整
判断float类型 a%1 != 0 即为float typeof判断不了浮点

let a = b.map(()=>{
return {
c:’’,
d:’’
}
})
//这样的方法，在map中使用return并赋值可以形成新的对象为单位的数组

[].push//这样的使用方法
Object.key(tempfile).map() //使用这样的方法，Object.key把当前对象里的key打出来作为数组

join的实际应用，把数组以你定义的形式存放在字符串中
a = [1,2,3]
a.join(’/’)

当数组为空但有值时，需要设置一下setTimeout就好了

如果后台起着BH player播放器的话他会一直等待一个websocket，有来的话直接就连接上然后可播放

回顾一下，
1.使用es6的箭头函数；2.在函数内部使用that = this；
3.使用apply，call，bind； 4.new实例化一个对象
可以改变this指向外部的指向，其他的setTimeout，t()内部某方法直接调用等都改变不了（如果settimeout函数中有this，this指向windows，可用上述1，2方法解决）
var data = 2
function AClass(data) {
console.log(this.data) //2
this.data = data;
}
AClass(5)
var data = “Hi”;
function AClass(data) {
console.log(this.data)
this.data = data;
}
var a = new AClass(“Hello World”);
console.log(a.data); // Hello World
定义一个实例可以把this指向指向这个新的实例对象，而不是全局，实例里的this就是指向的当前实例里的东西
聪明的做法一开始先用this指向全局的如果没有new 实例的话我this的data也不会是undefined，有new实例的话就直接指向了自己，很不错

callback有点类似于res和rej

如果vue想在IE里适配的话需要在Babel里改，这样vue中的箭头函数等的es6的都可以被编译然后到IE上

let alarm = result.data[0]
let begin_t = new Date(alarm.beginTime.replace(/-/g, ‘/’))
let end_t = alarm.endTime ? new Date(alarm.endTime.replace(/-/g, ‘/’)) : new Date()
var d1 = new Date(begin_t );
var d2 = new Date(end_t);
console.log(parseInt(d2 - d1));//两个时间相差的毫秒数
console.log(parseInt(d2 - d1) / 1000);//两个时间相差的秒数
console.log(parseInt(d2 - d1) / 1000 / 60);//两个时间相差的分钟数
console.log(parseInt(d2 - d1) / 1000 / 60);//两个时间相差的小时数
var date = new Date()
date.setTime(date.getTime() - 246060*1000)
记住了时间的转变都是以毫秒数为标准的，加时间减时间都以毫秒数来算
new Date(beginTime).format(“yyyy-MM-dd hh:mm:ss”) format来规范日期格式
es6不支持上述写法了，所以要用format的话可用moment().format(…)来代替，只需const moment = require(‘moment’)引入下就可
获取昨日的时间

自己写两个bat脚本简单的方便运行

mysql启动服务 mysql -u root -p 密码root

z-index是对于定位的元素来的，有时候不好使加一个absolute就可以了，@media screen and (max-width:1600px) 是max-width的话是代表着最大时1600px即小于1600px的时候，min-width同理

以后写代码之前可以先写注释明确思路再写，业务上的东西不懂得及时问

vuex4新变化
main下引用 import store from ‘./store’
app.use(store)
store配置文件配置
import {createStore} from ‘vuex’
export const store = createStore({})
组件引用
import useStore from ‘vuex’
cosnt store = useStore()
dom上引用值的时候别忘了return

只有ie的windows里面有ActiveXObject这个属性，可通过它来判断是否ie

子路由和children里的对应好了

导航守卫，在session里设一个值默认true，退出的时候false，登录进去就是true，然后beforeEach判断就好了

axios请求返回的res里面就有headers,config,data,request,status等数据，拿到之后可以做修改（是从这获取的），只不过我们resolve的是其中的data，
config: {url: “/channel/getSopChannelInfo”, method: “post”, data: “{}”, headers: {…}, transformRequest: Array(1), …}
data: {code: 0, data: null, msg: “同步频道信息成功”, extends: null}
headers: {connection: “keep-alive”, content-length: “101”, content-type: “application/json”, date: “Thu, 02 Sep 2021 05:36:20 GMT”, server: “WSGIServer/0.2 CPython/3.7.0”, …}
request: XMLHttpRequest {readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, onreadystatechange: ƒ, …}
status: 200
statusText: “OK”[[Prototype]]: Object undefined

关于docker的细微补充，docker有点像虚拟机只不过更加轻量，省去了硬件化，在容器中配置不同的环境软件，也互不影响，
Image是镜像（是部署的应用程序和库，通过镜像去创建container容器，dockerfile是一个自动化脚本，就相当于你安装程序时的
脚本一样。结合这些我们在部署应用的时候就会简单方便很多（也无须考虑在不同操作系统下的兼容问题）volume卷可以储存你容器中的数据，在你删除容器时，数据也会存放在里面不会丢失
镜像基本命令 。在云上就部署搭建了环境（那些容器就是你下的那些应用，就相当于虚拟机），这样就可以模拟部署前端，同时可以在其他环境下快速部署（Linux ）
docker images //查看当前镜像
docker search 镜像名 //查询某镜像
docker pull 镜像名 //下载某镜像（可以下载centos镜像就是模拟的Linux系统）
docker rmi -f 镜像名 //删除某镜像
容器命令（有镜像之后才能有容器）
docker run [参数] 镜像名 //启动容器凡是有id的都可以换成名字
#参数名
–name （容器名字）
–d （以后台方式进行）
–it （使用交互方式进行(命令行)，进入容器查看内容）
exit 退出
CTRL+P+Q容器不停止退出
docker start 容器id/名字（
docker rm 容器id/名字
docker stop 容器id/名字
docker ps 正在运行的容器
docker exec -it 容器id 进入正在运行的容器
docker attach 容器id 进入正在运行的容器
docker inspect 容器id 查看某容器具体的信息
docker cp 容器id：容器内路径 目的地主机 //从容器拷贝到目的地主机
docker run -d --name nginx1 -p:3344:80 nginx 启动一个容器名叫niginx1 3344:80是我们容器向外映射容器内nginx占用的80端口映射到本地的3344上就能访问了
docker run -d -it -v /home/ceshi:/home centos 把容器内的这个文件挂载到本地的/home（这样你在容器内建的文件也会同步到本地）-v就是卷挂载（删掉之后数据也不会丢失）
curl +某地址 可以测试连接不了连接某地址
docker commit -m ‘’ -a ‘’ 容器id 新的镜像名 //把容器提交为一个新的镜像
docker volume 卷相关
docker run -d -it -v /home centos 匿名挂载（不指定主机）
docker run -d -it -v ：volumename/home centos 具名挂载给volume一个名字
docker run -it --name docker2 --volumes-from docker1 centos //新建并启动docker2引用docker1容器中的卷（从而通过卷来实现数据共享）
dockerfile是构建docker镜像的构建文件
docker build -f /home/dockerfile的地址 -t 123centos . //根据dockerfile来创建一个新的镜像（不要忘记最后的点），
然后run去启动容器docker run --name frontend -p 80:80 123centos:latest //版本号很重要
正常来说我们要再起一个后端的服务容器nginx之类的代理到公网，前端的代理都不用了。要不然你就代理到
这才是常规操作

但你要是部署项目的话还是再某项目中建dockerfile然后，build，就可以很方便的部署，学下来之后这玩意确实方便，也确实省空间和内存
然后建成镜像之后再做后续的命令行操作就可以了，你这个镜像里面就有你dockerfile里的文件了
docker login docker push 就可以提交到dockerhub上自己的景象了

async函数的函数体可以被看作是由0个或者多个await表达式分割开来的。
从第一行代码直到（并包括）第一个await表达式（如果有的话）都是同步运行的。
这样的话，一个不含await表达式的async函数是会同步运行的。
然而，如果函数体内有一个await表达式，async函数就一定会异步执行。
**async可有可无，如果有的话他是在前面的

正则表达式匹配 ^和$单独拿出来用的时候分别代表匹配行首和行{尾}^a则只匹配上来第一个a,a$则匹配最后一个a

现在都是非对称加密
模运算（求余运算）单向容易求出结果（公钥），逆过来推就比较困难（私钥）

为什么浮点型不精确啊，计算机二进制十分之一算出来是无限不循环的，只能有23位，那就只能截取了

有时候单独运行某个js文件直接node+文件名就可以运行

web应用的爬虫Puppeteer，还是比较好使的，
通过$$eval(".title > a") 这样子来获得xpath

ahk自动化还是很好使的

如果就是要1秒来次接口但是又不想数据一直变，就当值不一样的时候给他赋值就好了，so easy

有一说一float对齐是真好使

时刻记住解构赋值 let {a,b} = c,还是好用的

sop里引插件app.js里也要引一下

MQTT协议（轻量简单，开放，在TCP/IP下，性能低或者网络情况差的情况使用适合非关键信息必要的实施传输，websocket协议的话更大型一点）

控制台调试模式debugger，F9进方法，f8往下走

box-shadow: 0 0 15px #075ab6 inset;阴影设置

遍历某个对象
Object.keys(state.form).forEach((key) => {
state.form[key] = “”;
});

onMounted(async () => {
await methods.getSwitchDevice();
} //箭头函数的async await使用

找不到问题就调试，，浏览器的调试还是很好用的，能帮你找到问题所在，就像央广abc类，子组件先渲染，然后父组件数据还没传过来的问题

Array.from 创建一个新的浅拷贝的数组
console.log(Array.from([1, 2, 3], x => x + x));
// expected output: Array [2, 4, 6]

newArray = [1,2,3]
[…newArray,a]
往数组里添加a值，快捷方法

//一维数组转二维数组方法
function arrTrans(num, arr) {
const newArr = [];
while(arr.length > 0) {
newArr.push(arr.splice(0, num));
}
return newArr;
}

Math.ceil向上取整，Math.floor向上取整，Math.round四舍五入

/deep/ .el-tabs__content{
height: 99%;
}
快速进入某样式修改，适合改element，不要忘了加scoped避免全局渲染

async，await挂载的时候用不管事就再进方法再来一次

push或者关于数组的操作出现问题，就是这个数组undefined了，在某个环节undefined了，调试一下

vue3的nextTick
下次dom更新循环之后，延时回调，更新dom之后
直接可以nextTick(() => {})

//setup在万物之前，不给一下值，挂载的时候啥也没有就亮一下
reuseBei:{
connectStatus:1,
lightStatus:[]
}

input[type=text] {
font-size: 1rem;
}
input[type=checkbox] {
height: 1.2rem;
}

输入sqlite3进入自给自足，无服务器零配置的数据库引擎sqlite，输入.open d:demo.db 打开db文件，然后正常操作写那些命令就好了（命令的话差不多）

提交某个文档到svn，把文件路径先拉下来，然后新建web文件夹提交就好了

angular里directive中如果有return scope:{}的话说明该子组件里scope是单独的作用域跟外面的不共用，引用外面的scope的话要$parent一下

//安装vue3架子
npm init @vitejs/app
//着手安装所需插件
//安装最新版本的vue-router
npm install vue-router@next -S
//创建对应文件夹
mkdir router =>routerIndex.ts
//写路由信息

VScode右上角分割框和分割样式的框还是很好使的，不要忘了这个小工具

作为行内元素就可以受line-height控制了，块级元素不受控，float会改变块级元素为行内元素然后浮动

表格行与行之间有间距
border-collapse: separate;
border-spacing: 0 2px;

div用不了focus 要给标签加tabindex=“1”

/deep/ -> :deep(.el-dialog)

https://bing.ioliu.cn/v1/rand 这个地址实时图片测试的时候可用

cursor: not-allowed;鼠标不可选取状态
pointer-events: none;div设置不可选取 ，，这俩冲突