随手记 - 简书

Tips

Tip1:float会使元素生成块级框
Tip2:inline-block元素向下对齐
Tip3:JavaScript的&&与|| 和别的语言的“或”，“非”不一样，exp1&&exp2可记为exp2优先，即exp1可转换为true返回exp2，不能才返回exp1，exp1||exp2则为exp1优先。当然js的逻辑与和逻辑或足以实现
Tip4:承上，a?.b的意思是a&&a.b（一般应用场景是校验a不为null返回a.b）顺便?.的名字叫可选链(optional chaining)，在MDN上搜?.是搜不到的
Tip5: ??
Tip6: vue组件名字不能用html里有的标签，否则根本不挂载，相关报错：[Vue Warn]: Do not use built-in or reserved HTML elements as component id:
Tip7: <span>标签之间有空隙的解决方法：遇到一个需求，写的时候用了

<span>...<span>..</span>...</span>

的嵌套写法，我想到的解决方案是直接内联样式

<span>...<span style="margin: -1rem">..</span>...</span>

https://blog.csdn.net/hst_gogogo/article/details/95204488
Tip8: 写less的时候

.getvericode{
      ...
      :hover{cursor: pointer}
    }

发现子类有hover特效，该类并没有
写成

.getvericode{
      ...
      &:hover{cursor: pointer}
    }

后该元素正常绑定hover特效，抽空研究一下这玩意为什么作用到子元素上
Tip9: JSON.parse()返回string

Tip10:import getToken from "./getToken";
import axios from "axios"

const token = JSON.parse(getToken)
let flag = false
axios.get('/userToken?'+token.user)
.then(res=>{
if(res.data.token == token.token){
flag = true
}
})
.catch(error=>console.log('undefined'))

export default {flag} //token&&(token.token==server_token)
export {flag};
Tip11:webstorm标签的文本如果换行写的话webstorm会自动添加空格
Tip12:打不开别人的vue项目，控制台报GET404，研究后发现vue路由router.js中使用了process.env.BASE_URL变量，而该变量的配置是通过vue.config.js中publicPath完成的。所以其实访问的路径是publicPath+路由字符串，而该域名出了问题，自然会GET404，将vue.config.js中publicPath移除可解决这一问题
https://blog.csdn.net/weixin_38578293/article/details/84823027
Tip13:img父容器的高度会比img的高度多几像素的问题
参照https://blog.csdn.net/Hreticent/article/details/85097677

img{
    display:block;
}

Tip14: 外边距塌陷解决方法

//less
&:before{
      content:"";
      display: table;
    }

相关阅读：BFC
Tip15: H5元素title的妙用：可控制hover时显示内容
Tip16: 设置span宽度无效，查阅得知span作为inline对象，设置width无效，想设置的话先将span置为inline-block
TIP17: 原生js实现获取时间，时间加减，转化格式

let current = new Date();
let past = new Date(current.getTime()-29*24*3600*1000);


formatDate(date){
                //date 格式转换
                let Y = date.getFullYear() + '-';
                let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
                let D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate()) + ' ';
                let h = (date.getHours() < 10 ? '0'+date.getHours() : date.getHours()) + ':';
                let m = (date.getMinutes() < 10 ? '0'+date.getMinutes() : date.getMinutes()) + ':';
                let s = (date.getSeconds() < 10 ? '0'+date.getSeconds() : date.getSeconds());
                return Y+M+D+h+m+s
            },

Tip18: moment.js实现获取时间，时间加减，转化格式
Tip19: 关于<a href="">标签网址解析的问题，有时会在网址前加上本域，详情见https://segmentfault.com/q/1010000002993788
Tip 20: 使用<a href="" download=""> 方式对于音频下载（视频也是，未亲测）并不会触发浏览器下载，目前使用得较好的办法(Vue中)如下

<script>
    //js中
  
    yourGet(url)   //获取要下载得资源，具体方法可为XHR、fetch、WebSocket、Axios等
   .then(res => res.blob())    //response转为二进制
    .then(blob => {
                    //创建一个不可见a标签
                    const a = document.createElement('a');
                    document.body.appendChild(a)
                    a.style.display = 'none'
                    // 使用获取到的blob对象创建的url
                    const url = window.URL.createObjectURL(blob);
                    a.href = url;
                    // 指定下载的文件名
                    a.download = row.soundUrl;
                    a.click();
                    document.body.removeChild(a)
                    // 移除blob对象的url
                    window.URL.revokeObjectURL(url);
                });
    

</script>

Tip21: JSON.parse()返回字符串问题，详见https://cloud.tencent.com/developer/ask/176127
Tip22: Unexpected token u in JSON at position 0
下为原因

JSON.parse(undefined)
//Uncaught SyntaxError: Unexpected token u in JSON at position 0
//  at JSON.parse (<anonymous>)
//  at <anonymous>:1:6

参见https://stackoverflow.com/questions/46613243/uncaught-syntaxerror-unexpected-token-u-in-json-at-position-0
Tip23: vertical-align:text-top 拯救了我的对齐
Tip24 : 对一个块级元素设置margin-right:0无效，设置margin-right:0 margin-left:auto 才起效，回头研究一下
Tip 25: 判断当前环境为浏览器还是nodejs

this === window ? 'browser' : 'node';