零碎知识6

57 阅读6分钟

URI转义差异

  • encodeURI('2021-11-03 00:00:00')
  • '2021-11-03%2000:00:00'
  • encodeURIComponent('2021-11-03 00:00:00')
  • '2021-11-03%2000%3A00%3A00'

encodeURI() 函数不会对这些字符进行转义:;/?:@&=+$,#

内网穿透(公众号开发常用)

  • 使用 natapp.cn/ (需要网站配置后 本地点开黑窗口,http)
  • 或者下载 花生壳(免费的只能用https)

获取元素当前与页面顶部的距离

$0.getBoundingClientRect().top

vue在哈希模式下,访问文件

  • 实测,无论是否部署在根目录上,以及是否对 / 进行重定向,都可以直接访问根目录的文件(仅限robots.txt 其它文件名的txt并不能被访问,可能与服务器配置有关)
  • 下面这种情况,很大可能是文件名和后缀没写对,text和txt搞混了 以后默认不给静态文件设置路由

image.png

增加路由(加不加都行)
  {
    path: '/h.text',
    name: 'text',
    component: () => import('../../public/h.text')
  }

参考:blog.csdn.net/ws19900201/…

根据业务状态码决定要不要赋值

  • 约定code为0时 返回数据正常,这样写能省很多if else(如果有更好的方案可以分享一下,总觉着还是不够简洁)
      getList(param)
        .then((el) => {
          const yes = el.code === 0
          this.tableData = yes ? el.data.list : []
          this.searchParam.totalPage = yes ? el.data.count : 0
        })
        .catch(() => {
          this.tableData=[]
          this.searchParam.totalPage=0
          this.tableData = listArr
        })

sass插值表达式

width: calc(100% - #{$sideBarWidth});

image.png image.png

@mixin colorBtn($color) {
  background: $color;

  &:hover {
    color: $color;

    &:before,
    &:after {
      background: $color;
    }
  }
}

.blue-btn {
  @include colorBtn($blue)
}
-------------------------------------
@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

.app-wrapper {
  @include clearfix;
  position: relative;
  height: 100%;
  width: 100%;

JS复盘零碎

  • ~按位取反(把其它类型转成数字)
//对于小数相当于取整
parseInt(326.8)
326
Math.floor(12.9999)
12
~~(326.8)
326
------------
~~true == 1  
~~false == 0
  • js Number的问题
    • 双精浮点数存储,64位,1位符号 11位指数位 52位尾数(有效数据位)
    • 8.8125 整数部分的二进制是 1000 小数部分转二进制是 1101 合起来1000.1101
      • 1.0001101 * 2^3
      • 符号位是0,指数位为3,尾数位就是科学计数法的小数部分 0001101,
      • 科学计数法中小数点前的 1 可以省略,因为这一位永远是 1(所以最多支持53位二进制位)
    • 0.1和0.2的二进制数其实是已经在无线循环小数的基础上进行取舍的
      • 0.1 转二进制 0.0001100110011001100110011001100110011001100110011001101 // 55位

以下摘自菜鸟教程

try里抛错误,catch接

function myFunction() {
    var message, x;
    message = document.getElementById("message");
    message.innerHTML = "";
    x = document.getElementById("demo").value;
    try { 
        if(x == "")  throw "值为空";
        if(isNaN(x)) throw "不是数字";
        x = Number(x);
        if(x < 5)    throw "太小";
        if(x > 10)   throw "太大";
    }
    catch(err) {
        message.innerHTML = "错误: " + err;
    }
}
  • 在 HTML 事件句柄中,this 指向了接收事件的 HTML 元素:
<button onclick="this.style.display='none'"> 点我后我就消失了 </button>
  • 使用 let 关键字声明的全局作用域变量不属于 window 对象:
let carName = "Volvo"; // 不能使用 window.carName 访问变量

href="#"与href="javascript:void(0)"的区别

#  包含了一个位置信息,默认的锚是 #top 也就是网页的上端。

而javascript:void(0), 仅仅表示一个死链接。

在页面很长的时候会使用  #  来定位页面的具体位置,格式为: # + id

如果你要定义一个死链接请使用 javascript:void(0) 。
<a href="javascript:void(0);">点我没有反应的!</a>

void()仅仅是代表不返回任何值,但是括号内的表达式还是要运行,如

void(alert("Warnning!"))

先延时1s 再延时4s 再延时3s

new Promise(function (resolve, reject) {
    setTimeout(function () {
        console.log("First");
        resolve();
    }, 1000);
}).then(function () {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log("Second");
            resolve();
        }, 4000);
    });
}).then(function () {
    setTimeout(function () {
        console.log("Third");
    }, 3000);
});

promise then里return

new Promise(function (resolve, reject) {
    console.log(1111);
    resolve(2222);
}).then(function (value) {
    console.log(value);
    return 3333;
}).then(function (value) {
    console.log(value);
    throw "An error";
}).catch(function (err) {
    console.log(err);
});

执行结果:

1111
2222
3333
An error

resolve() 中可以放置一个参数用于向下一个 then 传递一个值,then 中的函数也可以返回一个值传递给 then。但是,如果 then 中返回的是一个 Promise 对象,那么下一个 then 将相当于对这个返回的 Promise 进行操作,

善于使用短路操作

if (y === undefined) { y = 0 }
写成
y = y || 0;

dom对象属性

一般改的都是对象属性,一些对象属性改变会反映到html里同步改变

  • dom对象属性(dom元素对象)//当遇到标签属性值和对象属性值冲突时,以对象属性值为准

domEL.src="xxx" //可直接通过属性读写 a标签dom上的该属性,修改后html里的属性也会改变
通过这种方式修改dom属性时,html标签本身具有该属性时 会同步改变,html上没有该属性时仅在dom对象上 添加/修改
domEl.className='xx xxx' 会覆盖html里class属性值
这个改了,html展示的属性值未必变动 比如range的value属性。有些标签属性会同步改变

  • dom标签属性(html里展示属性)

domEl.setAttribute('value', progress.max);
domEl.getAttribute('value')
只会修改html文档里的属性,修改结果不会同步到dom属性里
(data-x这种自定义属性需要通过这种方式)
注意,一些属性是需要在html里才能起作用 比如按钮的 disabled属性

    所有标签属性并不是都有对应的对象属性
    ck.setAttribute("abc","10");
    console.log(ck.abc);
    //abc为自设标签属性 对象属性读不出来 得到 undefined
    id title 等具有对象属性
    ck.setAttribute("id","abc");
    console.log(ck.id);//abc

    class标签特殊,对于的对象属性为className
    var div=document.querySelector("div");
    div.setAttribute("class","div123");
    console.log(div.className);
    div.className="divsss";

    图片  src  width  height  是指图片的原始图片宽度,也可以设置更改,与标签属性一致
    表单元素 value name checked placeholder 这些标签属性和对象属性也是一致
    超链接 href 这些标签属性和对象属性也是一致的
    原文链接:https://blog.csdn.net/Bwateree/article/details/105636928

正则注意事项

  • 使用 new RegExp 创建正则时要考虑转义问题,直接创建用就行
"Is this all there is?".match(/is/gi)
(3) ['Is', 'is', 'is']

/is/gi.test("Is this all there is?")
true

/is/gi.exec("Is this all there is?")
['Is', index: 0, input: 'Is this all there is?', groups: undefined]
  • 注意g修饰符

在用text和exec方法时,遇到g修饰符,那么lastIndex会不断累积

let reg=/is/ig
reg.exec("Is this all there is?")//result[0]保存的是正则匹配到的字符串
['Is', index: 0, input: 'Is this all there is?', groups: undefined]
reg.exec("Is this all there is?")
['is', index: 5, input: 'Is this all there is?', groups: undefined]
reg.exec("Is this all there is?")
['is', index: 18, input: 'Is this all there is?', groups: undefined]
//可以修改正则对象的lastIndex属性 reg.lastIndex=0;

浏览器 navigator 对象不可信

由于不同的浏览器支持不同的对象,您可以使用对象来检测浏览器。例如,由于只有 Opera 支持属性 "window.opera",您可以据此识别出 Opera。