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