ES6开发技巧：DOM Skill技巧

DOM Skill

显示全部DOM边框

调试页面元素边界时使用文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/15865.html

[].forEach.call($$("*"), dom => {
    dom.style.outline = "1px solid #" + (~~(Math.random() * (1 << 24))).toString(16);
});
复制代码

自适应页面

页面基于一张设计图但需做多款机型自适应，元素尺寸使用rem进行设置文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/15865.html

function AutoResponse(width = 750) {
    const target = document.documentElement;
    target.clientWidth >= 600
        ? (target.style.fontSize = "80px")
        : (target.style.fontSize = target.clientWidth / width * 100 + "px");
}
复制代码

过滤XSS

function FilterXss(content) {
    let elem = document.createElement("div");
    elem.innerText = content;
    const result = elem.innerHTML;
    elem = null;
    return result;
}
复制代码

存取LocalStorage

反序列化取，序列化存文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/15865.html

const love = JSON.parse(localStorage.getItem("love"));
localStorage.setItem("love", JSON.stringify("I Love You"));