关于js和css的一些实用笔记

///
jquery插件中预防$冲突的办法：
(function($){ //...  })(jQuery);
把jQqury传递给插件，用$来获取该参数，这样其他框架中即便占用了$也不影响jQ插件里对$的使用
///
setInterval和setTimeout函数部分带引号和不带引号的区别：
var a=0;
1、setTimeout("hallo(a)",300);//可以传参数a，并且该函数会在300ms之后执行；
2、setTimeout("hallo",300);//并不会被执行
3、setTimeout(hallo,300);//不可传参数a，300ms之后执行
4、setTimeout(hallo(a),300);//可传递参数a，立即执行。setTimeout将变得无意义
5、setInterval(hallo(a),300);//立即执行，setInterval变得无效，不会轮询
结论：a、不带引号的，不能带括号，带引号的必须带括号。2、4、5实际是错误的写法；b、要想在规定的时间里用setInterval和setTimeout的回调函数来执行函数并且又想传递参数，最好的方式就是使用方法1、"hallo(a)"
///
网页更新防止缓存方法：
1、<meta forua="true" http-equiv="Cache-Control" content="max-age=86400"/>
其中max-age为获新的时间，86400表示一天之后获新，获新内容为所有js、css和image等资源文件
///
解决ie8不支持媒体查询：
<!--[if lt IE 9]>  
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>  
<![endif]-->  
///
让一个元素不再浮动的css：float:none;
///
@media查询中，max-width和max-device-width区别：
width指可视宽度，横屏时，会变宽。device-width是设备自带的属性，不会变化。另外，height在有菜单栏的浏览器下会比device-height小
判断横屏竖屏方式：
@media (max-width:XXXX) and (orientation:landscape | portrait)。其中landscape表示手持，portrait表示横屏，其原理就是比较width和height。
///
千万不要将float与&nbsp;
原则是：少用&nbsp;
///
函数前面加上感叹号“！”有什么用？
原因：形如 function(){}()的函数是无法执行的，需要用括号括起来把函数体编程一个表达式：(function(){})()
但是函数前面加上!之后，函数就会被正确的解析和调用：!function(){}();这样的方式，效率似乎更高。另外，+、-也有类似功能：
+function(){}()、-function(){}();
参见：在bootstrap中，自动执行的函数的写法是：
!function($){}(window.jQuery);
///
几个冷知识：
1、但凡有id的dom，会自动生成一个全局对象，不用document.getElementById("id")或$("#id");
html:<div id="hallo">aaa</div>
js:console.log(hallo.innerHTML);=>aaa
   console.log($(hallo).html());=>aaa;
2、
///
垂直居中的解决方案
单行：
1、vertical-align:middle;line-height:100%;
多行、未知高度：
1、
内层：
position:relative;
top:50%;transform:translateY(-50%);
top:50%;-webkit-transform:translateY(-50%);
只支持ie9以上
2、
外层：display:table;
内层：diaplay:table-cell;vertical-align:middle;
///
要想知道一个对象有什么特性及其值，可以使用以下方法：
for(var i in obj){
console.log(i+":"+obj[i]);
}
通过此方法，意外的获知：
对于<a id="hallo" href="http://www.baidu.com/a/b/c?id=123"></a>，可以获得如下参数
1、a标签（对象）的属性中有host：主机名（含接口），hostname不含接口，如：192.168.0.124:8001是host，而192.168.0.124。
2、hallo.pathname=>/a/b/c
3、hallo.protocol=>http
4、hallo.host=>www.baidu.com
5、hallo.hostname=>www.baidu.com
6、hallo.origin=>http://www.baidu.com
7、hallo.search=>?id=123"
///
如何利用toString来创建字符和数字结合的编码：
console.log(generateRandomAlphaNum(25));//创建25位混排编码
        function generateRandomAlphaNum(len) {
            var rdmString = "";
            for (; rdmString.length < len; rdmString += Math.random().toString(36).substr(2)) {
                console.log(rdmString);
            }
            return rdmString.substr(0, len);
        }
///
高效率的位操作符：
(12.4/4.13)|0=>相当于：Math.round(12.4/4.13)
~~(12.4/4.13)=>相当于：Math.floor(12.4/4.13)
!!(a)=>快速转换为布尔值，相当于：boolean(aa);如：!!window=>true
///
自定义console.log的样式：
function resetConsoleStyle(cssStyle) {
    var _log = console.log;
    console.log = function () {
        _log.call(console, '%c' + [].slice.call(arguments).join(' '), cssStyle);
    };
}
resetConsoleStyle("color:fff;background:#000;");
console.log("aaa")=>aaa
///
交换两个变量的值，不用第三个变量暂存
1
vara=1,b=2;a=[b,b=a][0];
///
关于动作的设计：鼠标移上和移 出元素产生的动画，分别为进入和离开动作
///
一张图解释文档的加载和解析过程没，defer和async的区别


///
caller是函数对象的一个属性，他指向调用该函数的函数，可以用fn.caller.toString()将函数转化为字符串
callee是arguments对象的一个属性，他指向当前函数体
注：caller和callee都是在函数执行时才产生
    function callDemo() {
        if (callDemo.caller) {
            var a= callDemo.caller;
            alert(a);
        } else{
            alert("this is a top function");
        }
        alert(arguments.callee);
    }
    !function handleCall() {
        callDemo();
    }();
输出：
caller=>function handleCall(){callDemo();}
callee=>
    function callDemo() {
        if (callDemo.caller) {
            var a= callDemo.caller;
            alert(a);
        } else{
            alert("this is a top function");
        }
        alert(arguments.callee);
    }
二者结合：arguments.callee.caller=>调用此函数的函数，即callDemo函数
///
delete obj.para=>删除obj对象中的para属性，但并不会删除属性本身；如：
obj.p={};
delete obj.p;=>只是接触了obj和p之间的关联，并没有彻底清除p。产生的问题：这并不是一种不严谨的删除方法，容易造成内存泄漏
///
js中的三种编码方式：
escape：将所有ASCII表以外的字符串进行编码。解码方式：unescape
encodeURI和endoceURIComponent相对来说更强大，对应解码方式分别为：decodeURI和decodeURIComponent
推荐方式：endodeURIComponent
注：document.cookie没有进行编码，因此，通常情况下建议对cookie进行编码——encodeURIComponent(getCookie(aaa));
///
webworker的总结：
使用webworker另起一个线程：
加载顺序：网页js+css加载完成后，才呈现页面，这样会导致页面加载很慢，于是，可以把那些加载过慢的js模块单拿出来放到异步线程中，这样，页面可以正常显示，而不会因为过慢的模块导致页面加载变慢
语法如下：
新建：var wk=new Worker("XX.js");
分线程XX.js中回传结果：postMessage(a);//假设此处a的值为1
主线程添加监听：wk.onmessage=function(event){
console.log(event.data);//获取返回来的结果，打印1
}
关闭线程：wk.terminate();//通常是在获取完event.data之后进行关闭
浏览器支持：ie10以下不支持
///
this深入解析
1、this定义：this所在域（函数）被看成是哪个对象的方法，this指代的就是那个对象
2、全局中的this都是指的window
var obj={
    x:0,
    y:function(){
        var _this=this;
        setTimeout(function(){
            //this指window，因为setTimeout是window的方法
            //_this指obj
        })
    }
}
3、call、apply的本质：重新定义函数的执行环境，即重新定义了函数中this的指向
function A(n,m){
//this指向待定
}
var obj={};、
A.call(obj,1,2);//将A看成是obj的方法，函数中this自然而然指向obj
这里提一下bind。bind也是javascript原生的函数，ie9+可支持，与call、apply同样是改变this的指向，区别在于使用方法：
bind返回的是函数体，后两者返回的是执行结果，即fun和fun()的区别
obj.y.call(o,1,1)=>等价于obj.y.bind(o,1,1)()=>等价于obj.y.bind(o)(1,1);
bind方法中，会优先调用bind(paras)中的参数，当发现bind(paras)中参数不足时候，才会去依次调用后面(paras)的参数，obj.y.bind(o,1)(2,3)=>如果obj.y需要的参数是2个，则此时使用的参数是(1,2)，如果需要三个参数，则会使用(1,2,3)

bind常可以在setTimeout和setInterval中用到
var obj={};
obj.stv=setInterval(function(){
this=>指向obj而不是window
}.bind(obj),100);
///
曾经一直困扰我的一个问题：body的高度来源于其内容的高度，故无法满屏
解决办法很简单：html,body{height:100%;}。结果：当body内元素不足body的高度时，html和body高度为屏幕高度，当body内元素大于body高度时候，body的offsetHeight不变，始终等于document.body.clientHeight。而document.body.scrollHeight会随着页面内容的增加而自动扩张
///
为一个dom添加事件监听之后立即取消该事件监听的精致写法：
s.addEventListener("load",function(){
this.removeEventListener("load",arguments.callee,false);
})
///
css、js、dom、img加载顺序：
dom树按顺序加载，遇到css文件（link标签）时，dom会继续执行下去，而css标签同步进行加载。
dom树遇到js文件（script标签）时，会等到js加载并执行完后再继续下去。而动态加载进来的js则不会阻塞dom
dom遇到img标签时，会继续执行下去，图片则同步进行加载。并且图片会被延迟加载，直到css加载完成之后才加载图片（因为浏览器不知道图片此时应该以什么样式进行显示）——有待考证
DOMContentLoaded是指所有dom及js加载完成之后的状态，包括所有dom节点、所有靠<script>标签（没有defer、async属性的情况下）外部引入的js。不受外部css文件、图片文件和动态加载的js文件的影响
别人给出的建议：
1、由于图片会在css加载完成后载入，CSS样式表影响了图片的加载速度，然而JS不会影响，如果想让图片尽快加载，就不要给图片使用样式，比如宽高采用标签属性即可。
2、JS的加载执行速度影响了DOMContentLoaded事件的触发时间，如果想要尽快触发DOMContentLoaded事件，就将次要的JS采用动态加载的方式加载吧。
///
canvas变形方法：
canvas.translate(x,y)：定义canvas的(0,0)坐标点（以下所有方法都是相对于此点进行变形）
canvas.scale(scaleWidth,scaleHeight)：放大倍数，宽度和高度倍数都不可少
canvas.rotate(angle)：旋转角度
canvas.transform(a,b,c,d,e,f)：
canvas.setTransform(a,b,c,d,e,f)：
transform和setTransform中的参数解释：
a:水平缩放
b:垂直倾斜，0表示无倾斜
c:水平倾斜，0表示无倾斜
d:垂直缩放，1表示无缩放
e:水平位置偏移
f:垂直位置偏移
1、setTransform会重置0,0坐标点和其他变形为初始状态。
scale、rotate、tranform则会依据当前的状态进行相对的变形。
比如：transform和setTransform：前者会基于目前已经变形的情况进行进一步变形，而setTransform则是重置所有变形。比如，已经用scale放大了2倍，transform再放大3倍，canvas将变成6倍，而setTransform放大3倍则会重置放大倍数为3倍
2、canvas中的变形的相对点是canvas的0,0点。而css3 transform中的变形的相对点永远是元素的中心点。所有倾斜均是逆时针方向

///
为某些内置对象增加方法：
String.prototype.getHallo=function(a,b){}
想调用某些内置对象的方法：
情形一：不需要改变this指向的
var getHallo=Math.pow;
console.log(getHallo(2,5));//=>32
情形二：需要改变this指向的
（1） "".substr.call(str,2);//=>cdef
或者
（2） (new String()).substr.call(str,2)//=>cdef 性质同（1）
或者
（3） var str="abcdef";
String.prototype.substr.call(str,2);//=>cdef
或者
（4） "".__proto__.substr.call(str,2)//=>cdef 性质同（3）
///
关于表单元素value值：
表单中textarea和input的值均保存在dom.value中，这里的dom.value与自身的value属性并不一样。dom.value会随着onchange自动更新，而自身的value则不会。也就是说getAttribute("value")一旦<ipnut value="111"/>被赋值，则不会再改变，除非js动态改变其value值
textarea和input：
举例：
<input id="hallo" type="text" value="111"/>
hallo.value=>111
hallo.getAttribute("value")=>111
input输入222
hallo.value=>222
hallo.getAttribute("value")=>111
设置value属性值
hallo.setAttribute("value","333")
hallo.value=>333
hallo.getAttribute("value")=>333
结论：dom.value总是会自动更新，而html标签-value属性值则与data-xxx并无差别，要想改变该值，都需要setAttribute()

///
用以下几行代码来解释一下作用域和bind以及闭包的应用：
首先，看一下原始形态：
var obj={};
obj.stv=setTimeout(function(){
    console.log(this); //<b>
},100);
<b>处指向window，因为setTimeout是window的对象，事实上我们希望这里指向当前对象obj
变形：
var obj={};
obj.stv=setTimeout(function(){
    console.log(this); //<b>
}.bind(obj),100);
<b>处指向obj，bind将指向做了改变
但是，我们希望不要再bind中使用obj，而是，直接用this指向当前对象，于是变形：
var obj={};
obj.stv=function(){
    console.log(this);//<a>
    setTimeout(function(){
        console.log(this); //<b>
    }.bind(this),100);
}();
咦，似乎与我们想要的结果不太一样，函数体将自动执行，<a>处和<b>的this都指向了window，这是因为该函数在定义时就被执行，并未被赋值给任何对象
再变形：
var obj={};
obj.stv=function(){
    console.log(this);//<a>
    setTimeout(function(){
        console.log(this); //<b>
    }.bind(this),100);
};
obj.stv();
这就是我们想要的结果了，但看起来好像仍然不够完美，因为，函数内部和外部环境没有分离开，于是，我们给他一个闭包
var obj={};
obj.stv=function(){
    return function(){
        console.log(this);//<a>
        setTimeout(function(){
            console.log(this); //<b>
        }.bind(this),100);
    };
}();
obj.stv();
这样，就完美了
///
用call来优化笨重的上下文切换
设想一下，如果我们写一个改变dom颜色的函数，并可能会被频繁调用
如下：
function changeColor(c){
    this.style.color=c;
}
如何使用？
div1.changeColor("#f90") 肯定会报错，因为changeColor不是dom自带的方法，一般情况下，我们可能会去给dom写拓展，比如：
!function(dom){
    dom.changeColor=function(c){
        //循环、赋值。。。。
    }
}(NodeList.prototype);
或者干脆调用时将要操作的dom对象作为传过去
function changeColor(ele,c){
    ele.style.color=c;
}
第一种方法是一种封装，对于频繁使用的内容可以这么做，但是总不能对所有的涉及到dom操作的都拓展到prototype上吧，那样太不人道了
第二种方法比较low，就不细说了
用下面的方法：
function changecolor(c){
this.style.color=c;
}
调用时：changeColor.call(ele,c)

///
关于函数节流：当用户通过某些操作而频繁调用某一函数时，尤其是涉及到dom重流重绘时，会导致性能浪费，于是对某些操作做一定延时处理，比如窗口resize：
var resizeTimer=null;
$(window).on('resize',function(){
if(resizeTimer){
clearTimeout(resizeTimer)
}
resizeTimer=setTimeout(function(){
console.log("window resize");
},400);
}
);
我们将函数节流成为throttle，以上是基本原理，以后细细研究
///
jquery中map的应用：
场景：
<div class="hallo">1</div>
<div class="hallo">2</div>
<div class="hallo">3</div>
现在想要获取.hallo中的值并组成一个数组：
var arr=[];
$(".hallo").each(function(){
    arr.push(this.innerHTML);
});
console.log(arr);
有了map，可以更加简单：
arr=$(".hallo").map(function(){
    return this.innerHTML;
}).get();
console.log(arr);
这里的map是一个jquery封装的数组，需要用get()方法就能得到标准的数组了
///