前台开发总结07——20170525

1、KeePass 是专门为了解决人类记不得众多密码的问题所产生的，它包含了一个强大的密码产生引擎与加密储存机能，能够提供一个安全的密码储存空间。


2、通过JS修改DOM会造成大量的开销，因为DOM的每次修改，浏览器内核都需要重新计算页面。因此，JS要少碰DOM，把所有的操作都放在JS里面。比如把操作使用一个变量储存起来。


3、对于Object和Array，通过使用 = 可使多个变量指向js中的同一块空间，从而造成改变某一变量，其它的变量也会跟着改变，如下所示：

var arr1=['test1','test2'];var arr2=arr1;    //指向的是同一块内存空间//var arr2=arr1.valueOf();    //和上面一样，指向的是同一块内存空间arr2.push('test3');console.log("arr1的值为："+arr1);console.log("arr2的值为："+arr2);   //arr1和arr2输出的值一样，都为test1,test2,test3

如果想要使arr2和arr1只是值相等，但是指向不是同一块内存空间，则可以如下操作：

function ma(arr){var array=[];for(var index=0,length=arr.length;index<length;index++){array[index]=arr[index];}return array;}var arr1=['test1','test2'];var arr2=ma(arr1);arr2.push('test3');console.log("arr1的值为："+arr1);console.log("arr2的值为："+arr2);

当然，使用上面的方法进行数组的复制很复杂，我们还可以使用Array自身的 concat() 方法进行数组的复制

var arr1=['test1','test2','test3'];var arr2=arr1.concat();arr1.push('test4');console.log(arr1);console.log(arr2);

备注：Array的 concat() 的方法是进行数组拼接时使用的方法。

4、jquery1.6中新加了一个方法prop()，一直没用过它，官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值。
大家都知道有的浏览器只要写disabled，checked就可以了，而有的要写成disabled = "disabled"，checked="checked"，比如用attr("checked")获取checkbox的checked属性时选中的时候可以取到值,值为"checked"但没选中获取值就是undefined。
jq提供新的方法“prop”来获取这些属性，就是来解决这个问题的，以前我们使用attr获取checked属性时返回"checked"和"",现在使用prop方法获取属性则统一返回true和false。

下图为prop()和attr()的使用范围，不过个人建议优先使用prop

5、JS的querySelector()和querySelectorAll()方法           //IE8及其以上都支持
参数为CSS选择器。
注意：querySelector()返回的为匹配的第一个元素；而querySelectorAll()返回的为相匹配的所有元素。

eg. document.querySelectorAll(".div .demoinput,.div .demoimg");         //返回一个集合document.getElementByClassName("div1")[0].querySelector(".div1").style.backgroundColor="green";

返回值：匹配则正常返回。如果没有找到，返回 null。如果指定了非法选择器则 抛出 SYNTAX_ERR 异常。
注意：对于单个节点的查找，querySelector()不如getElementById()类的选择器的速度快。querySelector()更适合复合查找。


6、在ES5中，添加了新的数组遍历方法map()和 forEach() ，forEach()方法类似于jQuery的 $.each() ,示例如下：

var arr=['test1','test2','test3'];arr.forEach(function(value,index){console.log("下标为："+index+";值为："+value);});$.each(arr,function(index,value){console.log("下标为："+index+";值为："+value);});

注意：forEach()和map()只能对数组使用，对对象不行。具体请参考：JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
JS中对象是没有长度的，因此遍历数组只能使用 forIn 和 $.each()

7、javascript允许动态绑定，即某些属性和方法到底属于哪一个对象，不是在编译时确定的，而是在运行时确定的。
可以使用jQuery的 live() 或者 on() 方法进行动态绑定。
代码如下

<div class="div12"><input type="button" value="动态绑定" class="but121"></div>live() 方法live() 方法在jQuery1.7中已经不建议使用，在1.9中已经删除。同时不建议使用的还有bind("click",function())和delegate("click","p",function())$(".but121").live('click',function(){$(this).after('<input type="button" value="点击" class="but121" />');});on() 方法on() 可以接受三个参数：事件名、触发选择器、事件函数。$(".div12").on("click",".but121",function(){$(this).after('<input type="button" value="点击" class="but121" />');});

备注：严格模式禁止动态绑定。


8、人生最大的快乐在于成长。每当驻足回顾，发现过去的自己如此幼稚、无知时，我的内心中总是充满了喜悦和慰藉。————20170525