日常问题分享

最新推荐文章于 2022-01-11 07:00:00 发布

weixin_33712881

最新推荐文章于 2022-01-11 07:00:00 发布

阅读量81

点赞数

原文链接：https://juejin.im/post/5b8de30c518825430e572d1a

版权

动态获取div高度

window.onresize(){...}
<!--同一页面写多个会覆盖-->
复制代码

$(window).resize(function(){...}
<!--多个都可以执行-->
复制代码

禁止横屏

$(function(){
//判断手机横竖屏状态：
function hengshuping(){
    // if(window.orientation==180||window.orientation==0){
    //     alert("竖屏状态！")
    // }
    if(window.orientation==90||window.orientation==-90){
        alert("为了您的体验更好，请切换竖屏展示")
    }
}
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);
})
复制代码

calc()兼容问题

calc() = calc(四则运算)

width: calc(100% - 10px)
width:-moz-calc(100% - 10px); 
width:-webkit-calc(100% - 10px);
<!--    
    firefox 4.0+已经开支支持calc()功能，需要使用-moz-calc()私有属性；
    chrome从19 dev版，开始支持私有的-webkit-calc()写法；
    IE9支持原生写法，calc()；
    Opera貌似还不支持～～
-->
复制代码

获取浏览器的可视高度

   <!--1.对于IE9+、chrome、firefox、Opera、Safari
   window.innerHeight
   <!--浏览器窗口的内部高度；-->
   window.innerWidth
   <!--浏览器窗口的内部宽度；-->
   var w = document.documentElement.clientWidth || document.body.clientWidth;
   var h = document.documentElement.clientHeight || document.body.clientHeight;
   <!--兼容性写法-->

复制代码

点击穿透

方法1：event.stopPropagation()

该方法将停止事件的传播，阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意，虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用，但是它可以阻止把事件分派到其他节点。

    <div class="mask">
      <div class="img">
        <div class="btn-close">
    
        </div>
      </div>
    </div>
  var mask = document.getElementsByClassName('mask')[0];
  var img = document.getElementsByClassName('img')[0];
  var btn = document.getElementsByClassName('btn-close')[0];
  console.log(mask);
  mask.onclick = function(){
    console.log(1111)
    event.stopPropagation()
  };
  img.onclick = function(){
    console.log(222)
    event.stopPropagation()
  };
 btn.onclick = function(){
    console.log(3333)
    event.stopPropagation()
  };
复制代码

判断当前环境在ios还是安卓

if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
    <!--ios-->
 } else if (/(Android)/i.test(navigator.userAgent)) {
     <!--安卓-->
 } else {
    this.isIos = true
}
复制代码

内存泄漏

几种常见的内存泄漏

1.全局变量

   <!--直接创建-->
   a = "aaa"
   <!--由this创建-->
   function foo(){
     this.a = 'aaa'
   }
   //直接调用自身，this指向全局变量
   foo();
复制代码

2.没有及时清理计时器或者回调函数

<!--setInterval-->
function b() {
    var a = setInterval(function() {
        console.log("Hello");
        clearInterval(a);
        b();                
    }, 50);
}
复制代码

<!--setInterval-->
function init()
    {
        window.ref = window.setInterval(function() { draw(); }, 50);
    }
    function draw(){
        console.log('Hello');
        clearInterval(window.ref);
        init();
    }
init();
复制代码

<!--setTimeout-->
function time(f, time) {
    return function walk() {
     clearTimeout(aeta);
        var aeta =setTimeout(function () {
            f();
            walk(); 
        }, time);
    };
}
time(updateFormat, 1000)();
复制代码

3.脱离dom的引用(删除所有引用)

var elements = {
    button: document.getElementById('button'),
}

function doStuff() {
    button.click();
}

function removeButton() {
    // 按钮是 body 的后代元素
    document.body.removeChild(document.getElementById('button'));
    // 此时，仍旧存在一个全局的 #button 的引用
    // elements 字典。button 元素仍旧在内存中，不能被 GC 回收。
}
复制代码