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 之神妙之处