js的一些實用的小技巧

移動端自適應：

移動端的編寫首先須要在header寫入如下內容來表示頁面是以不縮放的形式展現的：

<meta name="viewport" content="width=device-width, initial-scale=1">

移動端須要作適配，能夠用rem爲單位來編寫css，基於某一尺寸的UI設計稿來編寫HTML和CSS，如下代碼能夠用來適配不一樣尺寸屏幕來顯示：

document.addEventListener("DOMContentLoaded", function() {
	// 適配
	var clientWidth = document.documentElement.clientWidth < 640 ? document.documentElement.clientWidth : 640;
	document.documentElement.style.fontSize = clientWidth / 7.5 * 2 + 'px';
 });

 若是要想顯示的更加清晰的話，能夠利用手機的設備像素比來設置viewport：

var scale = 1 / devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content',
'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

解決ios上輸入框與div左邊對不齊的問題

在Iphone上會出現像input和textare等輸入框元素裏面的輸入文字與同一層級的別的元素裏面的文字沒有對齊（具體緣由不清楚），能夠使用如下方法使之對齊：

if(/iPhone|iPad|iPod/i.test(navigator.userAgent)){
	$('textarea').css('margin-left', '-3px');
}

本地圖片選擇後生成的URL是隨機的

以下：

var URL = window.URL || window.webkitURL;
var fileURL = URL.createObjectURL(file);

 若是用fileURL來判斷是否爲同一個文件將是不可行的，由於同一個文件生成的fileURL是不相同的

autoprefixer

autoprefixer插件能夠讓你只寫主流的CSS，它會編譯成兼容的css

瀏覽器返回頁面的處理

不一樣瀏覽器對返回頁面的處理不一樣，有的（如chrome，微信）會重新執行返回頁面的js,有的（如Safari，Firefox）則會繼續執行沒有執行完的 js,若是返回頁面上的某一部分須要數據同步的話，能夠使用如下代碼：

$DOM.on('click',function(){
	back();
	// 跳轉URL
});

function back() {
	setTimeout(function(){
		// 從服務器上拉去須要同步的數據
	},1000);
}

在輸入法輸入漢字拼音時的計數問題

用輸入法輸入漢字時，會先計數拼音的數目，敲回車後纔會把正確的輸入字符進行計數，這樣就很很差了，能夠利用以下方法進行處置：

compositionstart

　　當瀏覽器有非直接的文字輸入時, compositionstart事件會以同步模式觸發.

compositionend

　　當瀏覽器是直接的文字輸入時, compositionend會以同步模式觸發.

如下爲代碼：

var inputType = false; 

$content.on('input',function () {
        if (!inputType) {
            //TODO 進行計數
        }
    });

    $content.on('compositionstart',function(){
        inputType = true;
    });

    $content.on('compositionend',function(){
        inputType = false;
    });

阻止頁面滑動

有時候須要彈出浮層阻止頁面滾動來達到浮層佔據整個屏幕，並使得後面的內容不隨着手勢的滑動而滾動的效果。

下面的方法能夠阻止頁面滾動和取消阻止頁面滾動。

    function preventDefault(e) {
        e.preventDefault();
    }

    // 阻止頁面滑動
    function unable() {
        document.addEventListener('touchmove', preventDefault);
    }

    // 取消阻止頁面滑動
    function enable(){
        document.removeEventListener('touchmove',preventDefault);
    }

函數節流

函數節流是爲了下降方法執行次數，來提升效率的，主要用在滾動事件上。代碼以下：

var i = 0;
    function throttle(method, context) {
        clearTimeout(method.tId);
        method.tId = setTimeout(function() {
            method.call(context);
        }, 100);
    }

    function showIndex() {
        console.log(i++);
    }

    $(document).scroll(function() {
        throttle(showIndex);
    });

上面代碼的時間設置爲100毫秒，能夠根據不一樣的須要設置不一樣值。

若是是動畫的話，推薦根據瀏覽器的頻率去作繪畫，如js中的requestAnimationFrame()方法。

DOM結構解析

有時候在執行js時須要先拿到dom結構纔不會報錯，此段代碼爲dom結構解析的代碼

 
 /**
 * 截函數
 **/
 function domReady(f) {
    if(domReady.done) return f();
    if(domReady.timer) {
        domReady.ready.push(f);
    } else {
        isDOMReady();
        domReady.ready = [f];
        domReady.timer = setInterval(isDOMReady, 13);
    }
}

/**
* 判斷dom結構是否加載
**/
function isDOMReady() {
    if(domReady.done) return false;
    // 判斷依據
    if(document && document.getElementsByTagName && document.getElementById && document.body) {
        clearInterval(domReady.timer);
        domReady.timer = null;
        for(var i = 0,len = domReady.ready.length; i < len; i++) {
            domReady.ready[i]();
            domReady.ready = null;
            domReady.done = true;
        }
    }
}

domReady(function(){
    alert('DOM結構已經解析好了')
});

判斷一些瀏覽器的特性

直接看代碼

var userAgent = {
        windows:ua.match(/Windows NT ([\d.]+)/),
        weibo: ua.match(/__weibo__([\d.]+)/), // 新浪微博
        weixin: ua.match(/MicroMessenger\/([\d.]+)/), // 微信
        qq: ua.match(/QQ\/([\d.]+)/), // qq
        ios: ua.match(/(iPhone|iPad|iPod|iOS)/i),
        android: ua.match(/Android ([\d.]+)/),
        sohunews: ua.match(/SohuNews\/([\d.]+)/),
        sohusns: ua.match(/SohuSNS\/([\d.]+)/)
}