frontend notes
06/12/2020
最近更新于：
JavaScript 速记
日常记录一些 js/css 相对实用的小笔记，本笔记保持长期更新，如有错误或更好的方案留言反馈
使用 toString() 取随机字符串（toString 最大值为 32）
var rs=(num)=>{let rs=Math.random().toString(num);return rs.substring(2,rs.length)}
rs(2); //1011111100100110111101101110010000011101101001100001
rs(16); //40a52a10becc
使用 link() 创建指定参数链接
"example string".link("http://www.w3school.com.cn"); //<a href="http://www.w3school.com.cn">example string</a>"
使用 !+"v1" 判断 IE8 以下的浏览器
!+"\v1"; //true（IE8及以下）
!+"\v1"; //false（谷歌浏览器和IE9及以上）
使用原生js选择 不包含特定 class 的元素（How to Select Element That Does Not have Specific Class）
<ul id="tasks">
<li class="completed selected">One Task</li>
<li>Two Task</li>
</ul>
// select li which doesn't have a 'class' attribute...
console.log(document.querySelector("li:not([class])"))
// select li which doesn't have a '.completed' and a '.selected' class...
console.log(document.querySelector("li:not(.completed):not(.selected)"))
通过创建 input 并使用 document.execCommand("copy") 复制文本框内容（注意这里不能隐藏文本框否则获取不到值）
var text="some sample text", //文本内容
copyIpt=document.createElement("input"); //创建文本框
//copyIpt.style.display="none";copyIpt.type="hidden";
document.body.appendChild(copyIpt); //添加文本框
copyIpt.value=text; //复制到文本框
copyIpt.select(); //选中所有文本
document.execCommand("copy") //复制所选内容
js内容选中即复制
document.onclick = function() {
if (window.getSelection) {
text = window.getSelection();
} else if (document.selection) {
text = document.selection.createRange();
}
// 放到粘贴板里，操作浏览器自身的API
// console.log(text.toString());
document.execCommand('Copy'); // 执行浏览器的复制命令
}
（更新精准/模糊匹配）js 正则匹配指定开头结尾内字符串（这里匹配 img 标签）
var str = "img: <img src='#' />",
filter = str.match(/\<img.*?\>/g); //<img src='#' />
var str = "img: <img src='#' />",
inclouds = str.match(/\<([\s\S]*?)\>/)[0], //<img src='#' />
notincloud = str.match(/\<([\s\S]*?)\>/)[1]; //img src='#' /
js 删除符合指定条件的数组对象中的某个对象
var arr = [{name:"a",age:1},{name:"b",age:2},{name:"c",age:3}];
console.log(arr) //a:1 b:2 c:3
for(let i=0;i<arr.length;i++){
arr[i].name=="b" ? arr.splice(i,1) : false;
}
console.log(arr) //a:1 c:3
js 函数参数执行 js 方法
var arr = ["a","b","c"],
forArr = forFunc=(arr,exe)=>{
if(arr!=null && arr!=undefined)
for(let i=0;i<arr.length;i++){
exe!=undefined ? exe(i) : false;
}
};
forFunc(arr,function(i){
console.log(arr[i]) //a,b,c
})
js 批量定义变量
var arr = ["a","b","c"],
for (let i=0; i<arr.length;i++) {
eval('var' +arr[i]+ '= document.getElementById("' +arr[i]+ '");');
}
console.log(a); //确保 id 为 a 的元素不等于 null 或 undefined
js Object.keys 用法举例
var arr = ["a","b","c"],
obj = {"a":"aaa","b":"bbb","c":"ccc"},
str = "String";
Object.keys(arr); //["0","1","2"]
Object.keys(obj); //["a","b","c"]
Object.keys(str); //["0","1","2","3","4","5"]
JavaScript 异步方案 async/await
const f = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(123);
}, 2000);
});
};
const testAsync = async () => {
const t = await f();
console.log(t);
};
testAsync();
//首先定义了一个函数 f，这个函数返回一个 Promise，并且会延时 2 秒，resolve 并且传入值 123。
//testAsync 函数在定义时使用了关键字 async，然后函数体中配合使用了 await，最后执行 testAsync。
//整个程序会在 2 秒后输出 123，也就是说 testAsync 中常量 t 取得了 f 中 resolve 的值，并且通过 await 阻塞了后面代码的执行，直到 f 这个异步函数执行完。
js 移除 string 中的空格
var str = "s triing",
str = str.replace(/\s+/g,""); //去除所有空格
去除两头空格:
str = str.replace(/^\s+|\s+$/g,""); //去除左空格
str = str.replace( /^\s*/, ''); //去除右空格
js 移除指定数组中的某一项
var arr = ["a","b","c"];
let index = arr.indexOf("b");
arr.splice(index,1);
console.log(arr) //["a","c"]
js 防抖（连续点击）
function debounce(fn, wait) {
var timeout = null;
return function() {
if(timeout !== null) clearTimeout(timeout);
timeout = setTimeout(fn, wait);
}
}
// 处理函数
function handle() {
console.log("handled 1000ms")
}
// 执行事件
window.addEventListener('click', debounce(handle, 1000));
var check;
window.onclick=()=>{
check ? clearTimeout(check) : check;
check = setTimeout(function(){
console.log('checked');
}, 1000);
}
js 自执行函数
(function a(){
console.log('auto_run_fn') //auto_run_fn（无需调用直接执行）
})()
js 自执行函数 this 指向
(function(){
console.log(this); //this 指向 window
var that = this; //that 指向 window
return (function(){
return this
})()
})();
JavaScript 闭包计数器
function closure(){
var counter = 0;
plus = function(){
counter++
};
subs = function(){
counter--
};
//闭包函数
return function(){
console.log(counter)
}
};
var res = closure(), //调用闭包函数
counter_plus = function(){
plus();
res()
},
counter_subs = function(){
subs();
res()
};
counter_plus(); //counter = 1
counter_subs(); //counter = 0
JavaScript 防抖（闭包）
function debounce(delay){
var timer = null;
return function(){
timer ? clearTimeout(timer) : timer;
timer = setTimeout(function(){
console.log("连续点击时，仅执行一次（最后一次）点击事件")
},delay)
}
};
var res = debounce(1000);
window.addEventListener('click',res) //连续点击时，仅执行一次（最后一次）点击事件
JavaScript 节流（闭包）
function throttle(delay){
var timer = null,
handle = function(){
console.log("连续点击时，每隔 1000ms 执行一次 handle()");
};
return function(){
if(timer==null){ //!timer
timer = setTimeout(function(){
//handle.apply(this,null); //apply 传递 argument 上下文 this 环境
handle();
timer = null //消除定时器表示激活
},delay)
}
}
};
var res = throttle(1000);
window.onclick=function(){
res() //连续点击时，每隔 1000ms 执行一次 handle()
}
JavaScript call() 与 apply()
console.log(this); //window
//call()、apply()、bind() 都是用来重定义 this 这个对象的！
var name="name",
age=0;
var obj={
name: "NAME",
objAge: this.age,
fn: function(arg){
console.log(this);
console.log("arg: "+arg);
}
},
newObj={
name: "Named",
age: 1
};
obj.fn(); //{NAME,0}
obj.fn.call(newObj,'string'); //{Named,1},"string"
obj.fn.apply(newObj,['array']); //{Named,1},[array]
obj.fn.bind(newObj,'string')(); //{Named,1},"string"
obj.fn.bind(newObj,['array'])(); //{Named,1},[array]
JS正则限制只能输入数字、或带小数点的数字，并且小数后面限制多少位
const length = 2
const reg = new RegExp(`^\\d+(\\.\\d{1,${length}})?$`)
JS 利用 offsetParent 判断元素是否可见
var p = document.querySelectorAll("p");
p.offsetParent!=null ? console.log("可见") : console.log("不可见");
JS 利用 split() 与 join() 实现 replaceAll() 的两种方式
var str = "[dog]man[cat]",
replace = ["[","]"],
all = ["【","】"],
obj = {
"[":"【",
"]":"】"
},
replaceAll = function(str,replace,all){
for(let i=0;i<replace.length;i++){
str = str.split(replace[i]).join(all[i])
};
return str
},
replaceObj = function(str,obj){
for(key in obj){
str = str.split(key).join(obj[key])
};
return str
};
replaceAll(str,replace,all); //"【dog】man【cat】"
replaceObj(str,obj); //"【dog】man【cat】"
Js 过滤字符串数字和非数字
var str="a1b2c3";
console.log(str.replace(/[0-9]/ig,"")); //abc
console.log(str.replace(/[^0-9]/ig,"")); //123
Js 获取指定父元素
function eachParent(curPar,tarPar){
white(curPar.TagName.toLowerCase()!=tarPar){
curPar = curPar.parentNode
};
return curPar
}
Js 在 head 执行时当所有 dom 加载完成后再执行
var headfn = function(){
console.log("hellow world")
},
isloaded = function(){
window.addEventListener("DOMContentLoaded", headfn, false);
}
Js 滚动到当前滚动条底部
var focusScroll = function(focusarea){
focusarea.focus();
focusarea.scrollTop = focusarea.scrollHeight
};
focusScroll(textarea) //textarea 聚焦元素
Js textarea/input 值操作
var textarea = documen.getElementById("textarea")
selection = window.getSelection ? window.getSelection() : document.selection.createRange().text,
indexOfSelectBefore = textarea.selectionStart,
indexOfSelectAfter = textarea.selectionEnd;
textarea.setSelectionRange(0, 0); //定位光标到指定位置（不选中）
console.log(selection.toString()); //当前已选中文本
console.log(indexOfSelectBefore); //当前已选中文本前索引
console.log(indexOfSelectAfter); //当前已选中文本后索引
Js 使用 dispatchEvent 触发自定义事件
var event = new Event('click');
window.addEventListener('click',function(e){
console.log(1)
});
window.dispatchEvent(event) //log 1 without click the window
CSS 速记
使用 prefers-color-scheme 进行浏览器亮/暗色默认行为切换
@media (prefers-color-scheme: light) {
body{
color:white;
background:black;
}
}
@media (prefers-color-scheme: dark) {
body{
color:blank;
background:white;
}
}
笔记参考链接： HOE：JavaScript 之神妙之处