js | 青训营笔记

js | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第3天

1. 写好js的原则：各司其职

• HTML/CSS/JS 各司其责
• 应当避免不必要的由 JS 直接操作样式
• 可以用 class 来表示状态
• 纯展示类交互寻求零 JS 方案 以纯css实现页面的深浅色切换：
  1.将一个checkbox与lable绑定

<input id="modeCheckBox" type="checkbox">
<label id="modeBtn" for="modeCheckBox"></label>

2.将checkbox隐藏，仅通过点击lable实现checkbox切换

#modeCheckBox {
  display: none;
}

3.通过checkbox是否被选择的伪类设置样式

#modeCheckBox:checked + .content {
  background-color: black;
  color: white;
}
#modeBtn::after {
  content: '🌞';
}

#modeCheckBox:checked + .content #modeBtn::after {
  content: '🌜';
}

2. 实现一种鼠标跟随效果

这些圆点就是一些div块。当鼠标移动时，第一个div块跟随鼠标，后面的div块进入上个div块的位置，从而实现跟随效果。

window.onload = function(){
            var gDivs = document.getElementsByTagName("div");
            document.onmousemove = function(ev){
                var e = ev || window.event;
                for(var i = gDivs.length - 1; i > 0; i--){
                    gDivs[i].style.left = gDivs[i - 1].offsetLeft + 'px';
                    gDivs[i].style.top = gDivs[i - 1].offsetTop + 'px';
                }
                gDivs[0].style.left = e.clientX + 'px';
            gDivs[0].style.top = e.clientY + 'px'; 
            }
        }

3. 文档碎片

比如当想要遍历添加节点时，不要在循环中直接进行添加，在循环完全结束后再统一添加。从而提高效率。

window.onload = function() {
            console.time('test1');
            var node = document.createElement('div');
            for (var i = 0; i < 100000; i++){
                var newDiv = document.createElement('div');
                node.appendChild(newDiv);
            }
            document.body.appendChild(node);
            console.timeEnd('test1');
        }

4. 右键菜单

首先去除默认的右键绑定，再添加自己的。 判断右键首先监听mousedown,再判断该事件的button值是否等于2。再将隐藏的内容显示在鼠标所在位置即可。

window.onload = function() {
            document.oncontextmenu = function(){
                return false;
            }

            var gMenu = document.getElementById('menu');
            document.onmousedown = function(ev){
                var e = ev || window.event;
                if(e.button == 2){
                    gMenu.style.display = 'block';
                    gMenu.style.left = e.clientX + 'px';
                    gMenu.style.top = e.clientY + 'px';
                }else{
                    gMenu.style.display = 'none';
                }
            }
        }

5. 今天月影大佬讲的干货太多，还没消化完，明天继续