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.]+)/)
}