前台开发总结12——20171122

一、JS中判断变量的类型

Object.prototype.toString.call([]);            //控制台输出[object Array]
Object.prototype.toString.apply("");           //控制台输出[object String]

二、HTML5的API接口getBoundingClientRect(),可以在JS中获取页面元素的位置信息，包括top、right、bottom、left、width、height等元素位置、属性信息。
console.log(document.getElementById("demo").getBoundingClientRect());

三、js中不同循环方法解析：for forIn forOf
for：获取所有符合条件的，然后一个个进行遍历
forIn：获取所有的下标，然后根据下标找出符合的元素
forOf:是ES6中新增的一种循环方法，可以直接获取对象的值
性能上，forOf性能最好，for次之，for最差
应用：原来，我们遍历元素集合，一般使用for循环，或者forEach方法  [].forEach.call(nodeList,function(){}).
现在，我们可以直接使用forOf进行遍历 for(var item of nodeList){} 直接获取元素集合中的元素。

四、前端优化，遵循高内聚，低耦合的准则
将业务代码归在一起，算法代码（纯函数）单独建立

纯函数概念：
1、代码内容仅仅只用到了传入的参数；
2、没有影响到任何外面的参数；
3、不对页面业务产生任何干扰。(执行纯函数后，页面渲染不发生改变)

纯函数是业务逻辑分离出來的逻辑，最好加上注释，便于理解和复用
    /**
    *@param 差值算法
    *@p0:初始状态
    *@p1:结束状态
    *@t:变化函数
    */

五、arguments.callee调用函数自身
在函数中，使用arguments.callee()可以调用函数本身，相当于面向对象中的递归。但是ES5以后已经不建议使用了，建议使用函数名调用函数自身。

六、在web开发中，当元素内容超出元素盒模型时，我们通常会使用滚动条来显示元素的所有内容，但是浏览器自带的滚动条太丑了，在谷歌浏览器中，我们可以使用伪元素 ::-webkit-scrollbar{} 来自定义滚动条的样式；也可以在滚动条中设置内边距 padding-left:100px; 来隐藏滚动条。

七、perspective-origin的使用
目前浏览器都不支持 perspective-origin 属性。
Chrome 和 Safari 支持替代的 -webkit-perspecitve-origin 属性。
perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴(属性值只有两个)。该属性允许您改变 3D 元素的底部位置。
当为元素定义 perspective-origin 属性时，其子元素会获得透视效果，而不是元素本身。
注释：该属性必须与 perspective 属性一同使用，而且只影响 3D 转换元素。

八、不使用for循环,输出1到100.

var arr = Array.from({length:100}, (v,k) => k);
alert(arr.join(","));

Array.from() 方法从一个类似数组或可迭代对象中创建一个新的数组实例。
伪数组对象（拥有一个 length 属性和若干索引属性的任意对象）,如在js中通过get获取的DOM元素
可迭代对象（可以获取对象中的元素,如 Map和 Set 等）

九、html dtd
DTD (Document Type Definition) 文档类型定义
从理论上讲，文档声明确实没必要了，但是由于历史原因又不得不保留，所以简化成了这个样子。因为最早期HTML标准一片混乱的时候，大家都不写文档声明的，而这些网页往往都是适配IE6以下的，就是现在我们说的怪异模式。后来，HTML标准逐步规范了，但是那个年代遗留的网页实在太多了，为了兼容它们，就做了个判断：只要没有文档声明的网页，都使用怪异模式渲染。所以，现在保留文档声明的唯一作用就是跟“历史遗留网页”区分开。