日常問題分享

涼曦小公舉?發表於2018-09-04

動態獲取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 回收。
}
複製程式碼
閉包

內容太多，詳情可以看這個，講得還不錯 blog.csdn.net/haogexiaole…

js的使用小技巧 www.haorooms.com/post/js_shi…

相關文章