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搞混了 以后默认不给静态文件设置路由
- 输入http://192.168.1.3:8080/abc.text 得到的却是(文件不在根目录时是这样)
- 解决方法//如果出问题没办法了再用
增加路由(加不加都行)
{
path: '/h.text',
name: 'text',
component: () => import('../../public/h.text')
}
根据业务状态码决定要不要赋值
- 约定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});
@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。