原生技巧篇

Posted 2021-06-18 房东家的猫

统一设置获取/失去焦点

css篇

:focus-within 是一个CSS 伪类 ，表示一个元素获得焦点，或，该元素的后代元素获得焦点。换句话说，元素自身或者它的某个后代匹配 :focus 伪类。（shadow DOM 树中的后代也包括在内）

js篇

<div  id="aaa">
  <input type="text">
  <input type="text">
  <input type="text">
</div>
const form = document.getElementById(\'aaa\');

form.addEventListener(\'focusin\', (event) => {
  event.target.style.background = \'pink\';
});

form.addEventListener(\'focusout\', (event) => {
  event.target.style.background = \'\';
});

focus:当focusable元素获得焦点时，不支持冒泡；
focusin:和focus一样，只是此事件支持冒泡；
blur:当focusable元素失去焦点时，不支持冒泡；
focusout:和blur一样，只是此事件支持冒泡；

可以统一的给子input 设置获取/失去焦点事件

照片拖拽

资料

import  \'two-up-element\'

            <div className="my-two-up">
                <two-up>
                    <img src="https://picsum.photos/500/500" alt=""/>
                    <img src="http://placekitten.com/g/500/500" alt=""/>
                </two-up>
            </div>

添加大量元素时使用DocumentFragments

在文档中添加大量元素可能会影响页面的性能，因为它会多次触发重排

for (let i = 0; i < 100; i++) {
    const li = document.createElement(\'li\');
    li.innerhtml = `List item ${i}`;
    ul.appendChild(li);
}

们创建一个没有父文档的最小文档，并将元素添加到该文档中。它不会触发任何重排或重绘，因为尚未将文档片段添加到页面中,然后将文档片段插入页面上

  let ul=document.querySelector(\'#ips\');
    let fragment=document.createDocumentFragment();
    for (let i = 0; i < 1000; i++) {
       let li=document.createElement(\'li\');
       li.textContent=i;
       fragment.appendChild(li)
    }
    ul.appendChild(fragment)

HTML boolean 属性的值

一些HTML布尔属性，如checked，disabled，readonly，required，selected，等

三种申明都具有相同的效果

<input readonly />
<input readonly="" />
<input readonly="readonly" />

true和false 都是禁用的效果

on disabled="true">...</button>
<button disabled="false">...</button>

出现这些情况, 唯一的方法就是删除属性

无限制递归树

这个可以谷歌查下,会让你眼前一亮

解构默认值

const [one = \'one\', two = \'two\', three = \'three\'] = [1, 2];
console.log(one); // 1
console.log(two); // 2
console.log(three); // \'three\'

执行字符串函数

new Function("console.log(\'hello\')")()

用pug的UI框架

有机会研究下源码

https://github.com/antoniandre/wave-ui

import 的骚操作

<script type="module">

    import(\'localhost:3000/public/edit.js\').then(res=>{
        console.log(res);
    })
 //这样的也行
 import calendarRange from \'https://raw.githubusercontent.com/FranckFreiburger/vue-calendar-picker/v1.2.1/src/calendarRange.vue\'    
</script>

一道有趣的面试题

const value = "Value is" + !!Number(["0"]) ? "yideng" : "undefined";
console.log(value);

+优先级大于？

有一道有趣的面试题

let a = {n: 1};
let b = a;
// b指向原有对象
a.x = a = {n: 2};
// a.x 是原对象, 也就是b指向的a
// 但是a复制了一个新对象
// a.x 指向这个新对象
// 也就是更新的结果为   b={n:1,x:{n:2}}    a={n:2}
console.log(a.x) 	// undefind
console.log(b.x)    // {n:2}

点号运算符优先级大于等号
赋值操作从右到左

key 操作

var a3={}, b3={key:\'123\'}, c3={key:\'456\'};  
a3[b3]=\'b\';
a3[c3]=\'c\';  
console.log(a3[b3]); // \'c\'
key的强转成字符串toString方法
[object Object]

setInterval 和setTimeout

const add=()=>{
  console.log(2);
}
setInterval(\'add()\',1000)