前台开发总结06_20170520

1、JS中的 with(); 方法，用于设置代码在特定对象中的作用域。当在with()中调用方法或变量时，首先查询该对象的作用域中有无该方法或变量，若存在则输出，若不存在，则再查询全局作用域中有无该方法或变量。也即，with()会把一个对象插入到访问链的顶端。

eg. function animal(name,address){
		this.name=name;
		this.address=address;
		this.show=function(){
			document.write("这是show方法");
		};
	}
	var dog=new animal('dog','qingdao');
	with(dog){
		console.log(name);
		console.log(address);
		show();
	}

备注：with(){}; 可以优先访问对象中 this.property ，但是直接访问 局部变量，即var property，会报错，xxx is not defined ;也就是说，在width中输出name，先查询对象中的this.name，再查询全局的name，如果还没有，则报错。
注意：在 "use strict"; 即严格模式时，因为限制动态绑定，只能静态绑定，因此with()是无法使用的。
动态绑定：某些属性和方法到底属于哪个对象，不是在编译时确定的，而是在运行时确定的。例如jQuery的 live() （注：live() W3C不推荐使用） 和 on() 方法。

$(selector).on('click',function(){
		……
	});

2、JS中Number类型的变量转换类型，使用Number.toString();如果想转换为2进制，参数为2；如果想转换为8进制，参数为8；如果转换为16进制，参数为16。
可以自己为Number添加一个类型转换方法

eg. Number.prototype.changeType=function(){
	return this.toString(16);
}
var number=15;
console.log(number.changeType());

备注：使用Number.toString()进行进制变化时，只能有如下两种方式，不能直接 12.toString(8); 会报错

//第一种方式
var num1=12;
console.log(num1.toString(8));
//第二种方式
console.log((12).toString());
//注意第二种要使用(12),而不是12

3、JS中的函数其实是对象，函数名是对Function对象的引用。JS中一切皆为对象。(原型链了解一下)

4、backface-visibility定义当元素不面向屏幕时，元素是否可见 (CSS3属性值，注意兼容性)
属性值：
visible 背面是可见的
hidden 背面是不可见的

5、使用惰性函数可提高JS性能，减少不必要的计算，惰性函数包括但不限于 对函数的重写，使用 立即执行函数。
惰性函数的应用场景：
一、应用频繁，如果只用一次，是体现不出它的优点出来的，用的次数越多，越能体现这种模式的优势所在；
二、固定不变，一次判定，在固定的应用环境中不会发生改变；

三、复杂的分支判断，没有差异性，不需要应用这种模式；

可参考：http://blog.csdn.net/xiaobianjava/article/details/50617896

解析：对函数的重写只执行一次的原因

函数被重写后，原来的结构体遭到破坏，因此不会再次判断。

6、在HTML中，通过优化JS，提高页面渲染速度，方法如下：
一、将多个<script>中的内容合并为一个<script>，可以提高页面的渲染速度。因为多个<script>加载之间还有请求时间。
加载4个25K的JS文件的速度要大于加载一个100K的JS文件的速度。
二、可以配置<script>元素中的属性 async:true; 将其设置为异步加载，从而加快页面渲染速度，提高用户体验。
三、动态创建元素，加载JS，示例如下所示：

var script=document.createElement('script');
script.type="text/javascript";
script.src="test.js";
document.getElementsByTagName('head')[0].appendChild(script);

备注：动态加载JS代码，可以使用相关的脚本，如 lazyload

7、列举一下js获取HTML元素。

一、document.getElementById();
二、document.getElementsByName();      //获取HTML中name为指定值的元素，返回为数组
三、document.getElementsByTagName();   //获取HTML中指定值的元素，返回为数组
四、document.getElementsByClassName(); //获取HTML中class为指定值的元素，返回为数组

注意：getElementsByClassName()在 Internet Explorer 5,6,7,8 中只能获取自带name属性的元素，如input表单元素，对于手动设置的，如<p name="hehe">呵呵</p>，无效。

8、JS引擎在查找变量时，会按照 scope chain 作用域链的顺序进行查找;深度越深，速度越慢;局部变量>全局变量。
Chrome和Salary的JS引擎是采用Hash表来存取数据的，Hash表有索引，访问时，数据位置、数据深度对访问速度没有影响。
但是，采用Hash表来存取数据，虽然提高了数据访问的速度，但是CPU的使用率却会提高。

9、嵌入对象的速度：location.href > window.location.href > window.location.href.toString()