js知识总结

1.获取屏幕可视的大小：
标准浏览器及IE9+ || 低版本浏览器IE8以下 || 低版本混杂模式

window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
jquery : $(window).height()

2.获取滚动条滚动的距离：

window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
jquery: $(document).scrollTop()

3.获取元素的尺寸：（左边jquery方法 右边原生方法）

$(o).width() = 0.style.width;
$(o).innerwidth() = o.style.width + o.style.padding;
$(o).outerWidth() = o.style.width + o.style.padding + o.style.border;

4.获取元素的位置：（左边jquery方法 右边原生方法）
$(o).offset.top = getOffsetTop();

原生js的实现方法

var imgs = document.getElementByTagName("img");
function lazyLoad() {
	var winHeight = window.innderHeight || document.documentElement.innderHeight || document.body.innderHeight,  //可视窗口的高度
		scrollTop= window.pageYOffset || document.documentElement.scorllTop || document.body.scrollTop;   //滚动条的位置
	for(var i=0;i<imgs.length;i++){
		var x = winHeight + scrollTop - imgs[i].offsetTop;
		if(x>0) {
			imgs[i].src = imgs[i].getAttribute("data-url");
		}
	}
}
setInterval(lazyload,1000);   //设置定时器来检查是否进行滚动，然后处理在可视窗口范围内的图片。

setTimeout & setInterval 的区别

setTimeout方法是一个定时程序，运用在延迟一段时间，只执行一次
setInterval方法是表示在一定间隔内重复执行某个操作的程序

用原生js实现一个图片轮播效果

核心基本原理：做一个div,宽高固定，设置overflow:hidden,
在该div里面设置一个ul,每个li里面放着排列的图片，大小就是外层div的宽高
ul的宽度设置为所有图片大小的总和，这样就不会换行，
然后，js里面设置一个定时器setInterval，每个几秒不断修改ul的margin-left,大小就是为一张图片的宽度
效果就是向左滑动了一个图片，每次切换一个图片，就将ul的第一个li copy到ul的最后一位，并删除掉第一个li,这个时候，li已经在可视窗口的外面，用户看不到，然后修改ul的margin-left为零。这样就可以实现无缝首尾切换了

js代码实现：

window.onload = function() {
    var speed = 1e3, time = 1e3, it = 0, ul = document.getElementById("items"), list = ul.childNodes, len = list.length, step = 78 / 1e3, tr = null, scroller = function() {
        tr = setInterval(function() {
            var left = 0;
            //动画
            for (var i = 0; i <= time; i++) {
                setTimeout(function() {
                    ul.style.left = "-" + left + "px";
                    left = left + step;
                }, i);
            }
            //执行完之后，将第一个li放到最后去
            setTimeout(function() {
                var l = document.createElement("LI"), i = document.createElement("IMG"), f = ul.getElementsByTagName("LI");
                i.src = f[0].firstChild.src;
                l.appendChild(i);
                ul.removeChild(f[0]);
                ul.appendChild(l);
                ul.style.left = "0px";
            }, time);
        }, speed);
    };
    for (var i = 0; i < len; i++) {
        if (list[i].tagName === "LI") {
            it++;
        }
    }
    ul.style.width = it * 78 + "px";
    scroller();
    ul.onmouseover = function() {
        clearInterval(tr);
    };
    ul.onmouseout = function() {
        scroller();
    };
};

transition & animation 的区别

1.触发事件不一样，transition需要某个事件触发(点击，鼠标悬停等)。animation不需要事件去触发，文档加载完成之后就可以执行动画。
2.循环次数。transition只执行一次，而animation循环一次或者多次动画
3.变化形态。transition是从0-100%一个递进的变化。而animation可以自定义任何一个时间段内的变化状态样式。
4.结合js。transition可以很好的结合js来实现一个简单的动画。

结论：1.如果要灵活定制多个帧以及循环，就用animation
2.如果只是简单的form to效果，就用tranition
3.如果使用js灵活设定动画属性，用transition

cookie & localStorage & sessionStorage 的区别

cookie是网站为了标识用户身份而存储在用户本地终端上的数据(通常已经加密)
cookie数据始终在同源的http请求中携带（即使不需要），会在服务器与浏览器之间来回传递。
localstorage 和 sessionStorage不会自动把数据发给服务端，仅在本地存储。

存储大小：
cookie的数据大小不能够超过4K，比较小
localstorage 和 sessionStorage虽然也有存储大小限制，但是比cookie大的多，可以达到5M

跨域问题

同源策略：要求域名，协议，端口都要相同
1.jsonp
原理：通过动态创建script,通过script标签引入一个js文件，当这个js文件引入成功后就会执行url参数中指定的函数，并且会把我们需要的json数据作为参数传入

function createJs(sUrl) {
   var oScript = document.createElement("script");
   oScript.type = "text/javascript";
   oScript.src = sUrl;
   document.getElementsByTagName('head')[0].appendChild(oScript);
}
createJs('jsonp.js');

// jsonp.js
box({
   name:"text"
})

function box(json){
   alert(json.name)
}

优点:兼容性好，简单易用，支持浏览器和服务器的双向通信，
缺点：只是支持get请求

2.CORS(跨源资源共享)

服务端对于cors的支持，主要是通过设置Access-Control-Allow-Origin

与原生app(android & iOS)通过js来进行交互

else if(this.device()=='ios'){
    window.webkit.messageHandlers.wxPay.postMessage(this.paydata);
}else if(this.device()=='android'){ 
    androidInterface.wxMemberPay(JSON.stringify(this.paydata)); 
}