前台开发总结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() 的方法是进行数组拼接时使用的方法。
注：此处说白了就是JS的继承，此处可以使用后面方法 var arr2=JSON.parse(JSON.stringify(arr1)); 

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、在ES6中，添加了新的数组遍历方法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()方法以及兼容写法介绍

7、javascript允许动态绑定，即某些属性和方法到底属于哪一个对象，不是在编译时确定的，而是在运行时确定的。

可以使用jQuery的 live() 或者 on() 方法进行动态绑定。

在JS中，如果要进行动态绑定，则需要创建一个队列，存储赋有事件的元素及其对应的事件。当我们进行新对象创建时，查询队列，如果队列中有该元素的事件，则把该事件赋给新创建元素。

代码如下

<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

            年轻真好                                                                                                                        ————20180511