keep
keep going
狗焕sama
这个作者很懒,什么都没留下…
展开
-
2021-03-22
解决为了省略一行导致字母消失问题如图所示:当前的g下面被遮住了此时的CSS样式:解决办法:把margin变成padding即可。我们overflow: hidden是隐藏掉盒子元素content + padding之外的。无论是怪异模型和标准盒模型。...原创 2021-03-22 17:07:10 · 194 阅读 · 0 评论 -
2021-03-17
CSS外边距重叠的计算在规范文档中,2个或以上的块级盒模型相邻的垂直margin会重叠。最终的margin值计算方法如下:a: 全部都为正值。那么实际的margin值为最大值b:不全是正值。则都取绝对值,然后利用正值减去最大值c:没有正值,则都取绝对值,然后用0减去最大值。...原创 2021-03-17 00:13:43 · 188 阅读 · 0 评论 -
虚拟DOM和diff算法
什么是虚拟DOM虚拟DOM:用JS对象描述DOM的层次解构。DOM中的一切属性都在虚拟DOM中有对应的属性例如我们的真实DOM为:<div class="box"> <h3>我是一个标题</h3> <ul> <li>牛奶</li> <li>咖啡</li> <li>可乐</li> </ul>此时我们对应的虚拟DOM结构为(以snabbdom为例):原创 2021-03-14 16:40:37 · 255 阅读 · 0 评论 -
2021-01-15 Vuex是如何保证每个组件都拿到同一个store实例的
Vuex是如何保证每个组件都拿到同一个store实例的当我们在使用Vue.use()的时候install方法的时候。原创 2021-01-15 15:53:50 · 325 阅读 · 0 评论 -
2021-01-06 JSON5的用处
JSON5的用处详情见:https://zhuanlan.zhihu.com/p/108119490JSON5是对JSON的扩展具有以下特点:key值允许没有双引号{ code:1, msg:"Hello"}const JSON5 = require('json5')const obj = { name: 'keliq', age: 12,}const res = JSON5.stringify(obj)console.log(res) // {nam.原创 2021-01-06 10:39:37 · 240 阅读 · 0 评论 -
2021-01-04 inline-block出现间隙的问题 Blob对象 git更新远程分支
Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取,也可以转换成 ReadableStream 来用于数据操作。原创 2021-01-04 14:03:55 · 90 阅读 · 0 评论 -
v-for的解构赋值
v-for的解构赋值<template> <div class="about"> <div class="han" :key="index" v-for="({id,name},index) in list"> {{id}}---->{{name}}{{index}} </div> </div></template><script>export default { d.原创 2020-12-23 11:28:08 · 517 阅读 · 0 评论 -
Node 事件循环和异步IO 进程和线程的关系
什么是事件循环浏览器的事件循环会有一个调用执行栈,只要栈为空的时候才会执行宏任务微任务。并且执行任何一个宏任务之前,会查看微任务队列是否有任务需要执行,也就是说宏任务的函数里如果有微任务的入列,执行下一个宏任务之前会除了执行完当前宏任务的主线程代码后再执行优先把刚刚加入微任务队列的微任务常见的宏任务:ajax,DOM监听常见的微任务:mutation Observer API(提供了监视对DOM树所做更改的能力), queueMicrotask()(自定义微任务)进程和线程的关系进程(原创 2020-12-21 01:22:17 · 276 阅读 · 0 评论 -
2020-12-11 V8引擎的大致执行步骤
V8引擎的大致执行步骤暂时不看第二行的turboFan,先看第一行的执行。我们执行JS代码的时候,因为JS是解释型语言,需要进行一系列操作转成机器码才能被CPU执行,V8引擎会有内置模块把JS代码转化成抽象语法树(abstract syntax tree简称AST)。转成AST才能被后面的内置模块解释器ignition转化成类似于汇编语言的字节码(bytecode)。后面字节码还是要通过解释器转成汇编代码和机器码才能被运行。而V8引擎的特点就是还有一个叫TurboFan的内置模块会收集信息,比如传入原创 2020-12-11 12:08:19 · 1124 阅读 · 0 评论 -
2020-12-10 JS引擎 浏览器渲染的过程 for循环用let和var的区别
js代码需要JavaScript引擎转换成汇编代码。再从汇编语言转化成0101二进制的机器语言才能被计算机识别浏览器渲染的过程:HTML解析成DOM树。CSS解析成CSSOM成为Attachment(附加)。CSSOM和DOM形成Render渲染树。此时还需生成另外一个layout布局计算每个元素的位置大小等。这样就可以对渲染树进行绘制Painting。然后展示在页面上...原创 2020-12-10 19:35:13 · 195 阅读 · 0 评论 -
2020-12-07 Git 解决 git cherry-pick could not apply
Git 解决 git cherry-pick could not apply当git cherry-pick 出现error: could not apply 3e86ed8… Added Copy Patron button to circ-toolbarhint: after resolving the conflicts, mark the corrected pathshint: with 'git add ’ or 'git rm ’hint: and commit the resu.原创 2020-12-07 10:45:02 · 2054 阅读 · 0 评论 -
2020-12-01 vue props接受数组/对象
vue props default 数组/对象的默认值返回应该用函数嵌套数组data: { default: () => []} 对象data: { default: () => ({})}原创 2020-12-01 14:40:38 · 300 阅读 · 0 评论 -
2020-11-25 el-table踩坑总结
el-table边框没对齐的原因:一是设置了border-collapse: collapse;将其table-layout:fixed改成table-layout: auto;即可。.customList .custom-repeat-card .el-table__body-wrapper .el-table__body,.customList .custom-repeat-card .el-table__fixed-body-wrapper .el-table__body,.customL.原创 2020-11-25 15:08:28 · 713 阅读 · 1 评论 -
2020-11-24 pointer-events 火狐浏览器显示el-table的border被盖住
pointer-events是css3的一个属性,指定在什么情况下元素可以成为鼠标事件的target今天在弄el-table的时候,合并行的操作时序号和第一行hover都会有出现bgc。为此我把序号的那一列置成#fff,这样就可以解决鼠标放到第一行也不会让序号hover。但是会导致放到序号的时候,第一行被hover。为此可以直接对序号的列设置pointer-events: none属性表示取消鼠标事件、...原创 2020-11-24 13:07:17 · 288 阅读 · 0 评论 -
2020-11-23 element ui设置表格表头高度和每一行的高度 splice从末尾删除元素
element ui设置表格表头高度和每一行的高度表头.el-table__header tr, .el-table__header th { padding: 0; height: 40px;}每一行.el-table__body tr, .el-table__body td { padding: 0; height: 40px;}原创 2020-11-23 20:13:02 · 194 阅读 · 0 评论 -
2020-11-22 直接触发父组件或者子组件的方法 inject和provide cubic-bezier() 函数。贝塞尔曲线的用法 同时设置min-width和max-width与width
如果想直接触发父组件或者子组件的方法如果想直接触发父组件或者子组件的方法可以用this.parent或者this.parent或者this.parent或者this.children例如:父组件:methods: { loadMore() { if(this.getRepeatLock) { let customListLength = this.customList.length this.lastItem = c.原创 2020-11-22 17:10:38 · 116 阅读 · 0 评论 -
2020-11-20 测试运行时间NodeV8引擎运行
如何测试运行时间console.time(label) 和 console.timeEnd(label),在开始的地方写上 console.time("测试 fn 速度: ") ,在结束的地方写上 console.timeEnd("测试 fn 速度: ")注意:label 得相同使用方法:console.time('time');function setHtmlTag(sameClassArr) { // function findAssign(myAttr, replaceAt.原创 2020-11-20 11:33:55 · 100 阅读 · 0 评论 -
2020-11-19 客户查重优化(写法) 监听el-table的触底
客户查重优化一开始的做法:取数组里字段最多的当作标准跟其他的数据进行比较。sameClassArr.sort((a, b) => { return b.mostField - a.mostField }) let standard = sameClassArr[0]; sameClassArr.forEach((item, index) => { .原创 2020-11-19 15:27:36 · 204 阅读 · 0 评论 -
2020-11-18 watch选项handler table设置tr的border for...of可以continue和break跳出
watch选项handlerhandle:就是你watch中需要具体执行的方法deep:就是你需要监听的数据的深度,一般用来监听对象中某个属性的变化immediate:在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调:...原创 2020-11-18 12:05:53 · 180 阅读 · 0 评论 -
2020-11-17 数组与后端接口对接传参
数组传参需要序列化不然会出现这种情况:原创 2020-11-17 15:59:05 · 159 阅读 · 0 评论 -
2020-11-13 利用正则匹配替换多个不同的字符的写法:
利用正则匹配替换多个不同的字符的写法:var result = str.replace(/&|<|>|'|"/g, function(matchStr) { var tokenMap = { '&': '&', '<': '<', '>': '>', "'": ''', '"': '"' .原创 2020-11-13 09:28:54 · 909 阅读 · 0 评论 -
2020-11-11 store的数据一定要在原型上才可以被watch vue中化繁为简的watcher
store的数据一定要在原型上才可以被watch原创 2020-11-11 19:16:13 · 309 阅读 · 0 评论 -
2020-11-09 uni如何让两个项目跑起来的颜色不同
公司的直销分销是如何让两个项目跑起来的颜色不同的通过uniapp的条件编译。同一个变量名通过条件编译在不同的终端赋值了不同的颜色原创 2020-11-09 09:30:38 · 100 阅读 · 0 评论 -
2020-11-07 条件渲染小技巧 扩展运算符得到参数集合和arguments的区别 uniapp的不同平台的条件编译
当我们需要判断不同情况去渲染不同标签的时候,可以利用computed结合渲染情况的数组和includes方法结合来写:例如:<div v-if="ifAlive" class="han">//我们需要在data里的数据type为1,2,5,6的时候才渲染这个标签,那么可以: 1112321</div>data(){ return{ type: -1, }}computed: { ifAlive(){ return [1,2,5,6].incl.原创 2020-11-07 22:55:27 · 421 阅读 · 0 评论 -
2020-11-05 页面渲染和实际情况不同排查思路 vue中自定义类名 让某个搜索的值高亮
当遇到页面渲染和实际情况不同的时候,应该先控制台element那里节点是否渲染出来原创 2020-11-05 18:00:35 · 668 阅读 · 0 评论 -
2020-11-04 uni.navigateTo路径 Vue中的$event
uni.navigateTo跳转页面的时候别忘了路径第一个前缀有/例如:navigateTo(`/pages/packageMyCenter/taskCenter/main?name=${name}`);别写成navigateTo(`pages/packageMyCenter/taskCenter/main?name=${name}`);原创 2020-11-04 15:40:38 · 1036 阅读 · 0 评论 -
2020-11-03 小程序如何判断某个元素是否在可视区 Vuex访问某个模块的state vscode ctrl+shift+f失效问题
小程序判断某个元素是否在可视区元素的top是否小于windowHeight如何获得windowHeight?用wx.getSystemInfoSync();然后调用windowHeight即可原创 2020-11-03 17:35:52 · 261 阅读 · 0 评论 -
sass 常用
1. 在sass中,除了CSS选择器,属性也可以进行嵌套。尽管编写属性涉及的重复不像编写选择器那么糟糕,但是要反复写border-styleborder-widthborder-color以及border-*等也是非常烦人的。在sass中,你只需敲写一遍border:nav { border: { style: solid; width: 1px; color: #ccc; }}最后生成的效果与你手动一遍遍写的css样式一样:nav { border-style: s原创 2020-11-02 12:15:16 · 220 阅读 · 0 评论 -
2020-11-01 Vue mixin
Vue mixin需要注意的地方方法和参数在各组件中不共享,也就是说,不会想Vuex一样一个组件更改了mixin的数据,另一个组件打印mixin是不会变的混合对象里的钩子函数在组件里的钩子函数之前调用,也就是说,当我们mixins定义的数据,生命周期函数或其他钩子函数出问题的时候,mixin是在放在前面调用的,举个例子:钩子函数冲突时:mixins:组件的方法:控制台打印:数据冲突时:// mixin.js fileexport default { data (.原创 2020-11-01 22:19:09 · 94 阅读 · 0 评论 -
2020-10-29 jsp文件里使用字符串模板不生效
在.jsp文件里使用字符串模板不生效解决办法:在字符串模板得‘$’的前面加‘\’或者在后面加‘\’//xxx.jsp文件<script>var a= `http://xxx\${}`或var a= `http://xxx$\{}`</script>原创 2020-10-29 18:57:05 · 327 阅读 · 0 评论 -
2020-10-21 Number.isNaN和isNaN 传参的一个值能否在另一个传参值引用?
Number.isNaN可以检测你传递的值是否为数字值,并且是否等价于NaN。isNaN直接检测是否为数字,不会判断是否为NaN。例如:const name = 'lili' const age = 19 console.log(Number.isNaN(name));//false console.log(Number.isNaN(age));//false console.log(isNaN(name));//true console.log(isNaN(age));/.原创 2020-10-21 23:29:49 · 94 阅读 · 0 评论 -
2020-10-19 Vue的好处
Vue的好处双向绑定原理:通过MVVM思想实现数据的双向绑定,让开发者不用再操作dom对象,需要操作数据就能完成相关操作,有更多的时间去思考业务逻辑。组件化: Vue.js通过组件化开发实现了更多的复用性虚拟DOM: 因为浏览器本身处理DOM也是有性能瓶颈的,尤其是在传统开发中,用JQuery或者原生的JavaScript DOM操作函数对DOM进行频繁操作的时候,浏览器要不停的渲染新的DOM树,导致页面看起来非常卡顿。虚拟DOM就是一种可以预先通过JavaScript进行各种计算,把最终的DO.原创 2020-10-19 22:14:20 · 166 阅读 · 0 评论 -
2020-10-15 try catch输出问题 transform会引起重排吗
程序输出问题这是因为x的作用域在catch块级作用域以内,y的作用域在这个function内。输出undefine是因为var定义会存在变量提升,而var没有块级作用域,所以也会提升到函数里换一个写法:如果不用var定义,不存在提升,则此时便会报错transform会引起重排吗摘自知乎:不会,因为 GPU 进程会为其开启一个新的复合图层,不会影响默认复合图层(就是普通文档流),所以并不会影响周边的 DOM 结构,而属性的改变也会交给 GPU 处理,不会进行重排。使 GPU 进程.原创 2020-10-15 20:49:48 · 868 阅读 · 1 评论 -
2020-10-09 [] == ! [] 的结果为什么会是true
[] == ! [] 的结果为什么会是true①、根据运算符优先级 ,! 的优先级是大于 == 的,所以先会执行 ![]!可将变量转换成boolean类型,null、undefined、NaN以及空字符串(’’)取反都为true,其余都为false。所以 ! [] 运算后的结果就是 false也就是 [] == ! [] 相当于 [] == false②、根据上面提到的规则(如果有一个操作数是布尔值,则在比较相等性之前先将其转换为数值——false转换为0,而true转换为1),则需要把 fa.原创 2020-10-09 01:23:19 · 207 阅读 · 0 评论 -
2020-10-08 让span具有宽和高 set转数组 margin:auto适用条件 垂直水平居中
什么情况下能让span标签具有宽和高display为inline-block或blockfloat不为staticposition不为realativ这样看起来是不是很像BFC法则,但其实不是,如果我设置 overflow: hidden;是无效的原创 2020-10-08 16:13:26 · 161 阅读 · 0 评论 -
2020-10-08 函数的length
函数的length指的是传参的个数例如:function han(a,b){}console.log(han.length);//2原创 2020-10-08 07:46:02 · 97 阅读 · 1 评论 -
Vue:.native修饰符 父子组件挂载顺序 插槽的使用
Vue .native修饰符.native - 监听组件根元素的原生事件。即直接写到组件标签里例如:这样才能触发click事件父子组件挂载顺序父 beforeCreate父 created父 beforeMount子 beforeCreate子 created子 beforeMount子 mounted父 mountedvue插槽的使用具名插槽子组件:<slot name="han"></slot>父组件:<Ch.原创 2020-10-07 16:59:56 · 195 阅读 · 0 评论 -
2020-10-07 获得dom元素的宽度(高度)
获得dom元素的宽度(高度) <style> .han { width: 100px; height: 120px; } </style> <body> <div class="han"></div> </body>如果dom为内联样式dom.style.wdith/heightdom.getBoundingClientRect().width/heig.原创 2020-10-07 15:07:07 · 233 阅读 · 0 评论 -
2020-10-05 AJAX 状态值(readyState)
AJAX 状态值(readyState)0 - (未初始化)还没有调用send()方法1 - (载入)已调用send()方法,正在发送请求2 - (载入完成)send()方法执行完成,3 - (交互)正在解析响应内容4 - (完成)响应内容解析完成,可以在客户端调用了对于上面的状态,其中“0”状态是在定义后自动具有的状态值,而对于成功访问的状态(得到信息)我们大多数采用“4”进行判断。...原创 2020-10-05 11:05:01 · 80 阅读 · 0 评论 -
2020-10-04 事件委托判断节点方法
事件委托判断为是否为哪个目标节点触发的方法:ul.onclick = (e) => { console.log(e.target.innerHTML)//目标的文本 console.log(e.target.tagName)//目标的标签名 console.log(e.target.nodeName)//目标的节点名 console.log(e.target.id)//目标的id(标签不设置为空) console.log(e.targe.原创 2020-10-04 20:19:31 · 700 阅读 · 0 评论