WEB开发面面谈之（5）——写JS时必须注意的的一些问题

更多详情请看http://blog.zhangbing.club/%E...

下面例举了平常前段开发中遇到的场景，解决方案有不少，但从开发阶段就进行规范，能够很大程度避免不少后续的潜在和兼容问题。

获取body元素

非标准作法

document.body

W3C规范方法

document.getElementsByTagName('body').item(0)

使用jQuery/Zepto

$('body');

获取窗口标题

非标准作法

document.title

W3C规范方法

document.getElementsByTagName('title').item(0).innerHTML

使用jQuery/Zepto

$('title').text()

监听iframe的加载完成事件

• 写法1:

iframe.onload = function() {...}

问题:存在兼容性问题，IE六、7无效

• 写法2:

iframe.onload = iframe.onreadystatechange = function(){...}

问题:逻辑复杂，事件绑定逻辑混乱，在某些浏览器上onload和onreadystatechange都会触发，须要另外加标记位判断，逻辑复杂。

• 简洁而彻底兼容的写法:

var bindIframeOnloadEvent = function(el, onload) {
 if (el.attachEvent){
    el.attachEvent("onload", onload);
 } else {
   el.onload = onload;
 }
};
bindIframeOnloadEvent(iframe, function(){...});

如何操做iframe内部的window

• 写法1:

iframe.contentWindow

问题: 部分浏览器不兼容（IE67），获取失败

• 写法2:

document.frames[frameId]

问题: 非标准调用，兼容性是问题，强制必须为iframe添加ID。

• 简洁而彻底兼容的写法:

var getIframeWindow = function(el) {
return el.contentWindow || el.contentDocument.parentWindow;
};
var win = getIframeWindow(iframe);

设置iframe的边框

• 写法1:

iframe.boder = 0;

问题: 非W3C标准，后面极可能废弃，部分浏览器不必定支持

• 写法2:

iframe.style.boder = 'none';

问题: 彻底依赖CSS控制，但存在兼容性问题，IE继续头疼

• 最终解决方案:

iframe.boder = 0;
iframe.style.boder = 'none';

如何在a标签上绑定鼠标点击事件

• 写法1:

<a href="javascript:func();">test</a>

问题:

1. 不符合CSP规范
2. 等价于全局eval。只能调用公开的全局方法，污染全局变量
3. 鼠标悬停时，状态栏会显示要运行的代码？！这对最终用户不友好
4. 运行代码的上下文是window对象，和事件处理模型相违背

• 写法2:

<a href="#" onclick="func();">test</a>

问题:

1. 不符合CSP规范
2. onclick和href在部分浏览器(IE继续躺枪)行文诡异，执行冲突异常
3. 等价于全局eval。只能调用公开的全局方法，污染全局变量（缘由同写法1）

• 写法3:

<a href="#" onclick="func();return false;">test</a>

问题:只解决了问题2，其他问题仍存在

• 标准写法:

<a id='aTest'>test</a>
<script>
document.getElementById('aTest').onclick = function() {
func();
};
</script>

使用jQuery/Zepto亦可，存在惟一的小问题是鼠标指针不是手形，是默认。可采用CSS样式来解决cursor:pointer 。

script标签的书写方法深挖

要点

1. script标签的type属性不是必须的，默认缺省就是text/javascript
2. script标签的language属性彻底无用（asp时代微软彷佛使用该属性来标记服务端语言是vb仍是c#），不要多此一举
3. 动态建立的script标签必需要指定type='text/javascript'，不然JS不会执行

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '###';
document.getElementsByTagName('body').item(0).appendChild(script);

1. 动态建立的script追加动做是异步的，并不会马上取得script运行结果，若是要等待加载完成须要监听完成事件
2. 使用非标准或者比较新的属性须要格外注意，不要使代码逻辑依赖于这些特性。如defer/async属性
3. 使用script.onerror来监听脚本执行失败的状况（语法错误，初始化运行时错误等都会触发）
4. 监听script的完成事件比较复杂。

varbindScriptOnloadEvent = function(script, onload) {
    var done = false;
    script.onload = script.onreadystatechange = function() {
    if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
        done = true;
        script.onload = script.onreadystatechange = null;
        onload();
        }
    };
};
bindScriptOnloadEvent(script, function(){...});

须要考虑兼容性，因此代码较多

substr函数不要使用

缘由：非标准，在部分浏览器报错，甚至连个人Android4.0上的浏览器都不认该函数

替代方案：使用substring函数。

jQuery/Zepto选择器的.text()和.html()方法

现状：大多数开发同窗会混淆二者并乱用，不清楚什么时候用哪一个

详解：.text()方法用于获取和设置文本内容，.html()方法用户获取和设置HTML内容，当要设置或获取的内容仅仅为文本时，二者行为彻底相同，但要操做的文本内容是HTML时，行为有着本质区别。

总结：

1. 根据实际须要选择使用哪一个方法，如能判定内容为纯文本请使用text()方法。仅当确实须要渲染HTML时才用html()方法
2. 从安全角度，text()方法比html()方法更安全，无注入风险。
3. 严格意义上，html()方法不符合CSP规范，直接将字符串解析为DOM节点
4. 业务须要确实要使用.html()方法渲染动态内容时，必须作安全检查，避免恶意代码注入
5. .text()和.html()获取值可能存在代码缩进（空格和TAB），若有须要可使用$.trim()来剔除

数组与对象深挖

要点：

• 数组对象仅有concat/reverse/slice/splice为标准API，并且绝对彻底兼容
• 数组对象请勿使用indexOf、lastIndexOf、map、every、forEach等非标准API，不只兼容性存在问题，并且效率不必定高，反而不如本身实现
• 遍历数组请将.length缓存到变量

for(vari=0,l=arr.length;i<l;i++){...}

• 遍历数组请勿使用此写法

for(vari in arr){...}

• 遍历key-value型对象必须使用hasOwnProperty()来过滤遍历结果。

for(var key in obj) {
if(!obj.hasOwnProperty(key) continue;
    //...
}

• 不管是数组或对象，在遍历操做时不要改变被遍历的变量结构，如增删元素，增删key值等（虽然你能够这么作）,对于元素自身及子成员的修改是绝对安全的。

关于Prototype的使用

要点：

• 不要乱用Prototype。不要轻易在Object/Array/Function等对象上追加prototype（虽然咱们已有某些库这么作了）容易产生歧义冲突，在使用for～in遍历时很容易引起问题。
• 自定义的prototype成员会在for～in循环中出现，请根据实际状况使用hasOwnProperty()来过滤遍历结果。

不严谨的写法：

function Test() {}
Test.prototype.a = 1;
Test.prototype.b = 2;
var o = new Test();
for(vari in o) {
console.log({key: i, value: o});
}
//{key:a, value:1}
//{key:b, value:2}
严谨的写法：
var o = new Test();
for(vari in o) {
if(!o.hasOwnProperty(i)) continue;
console.log({key: i, value: o});
}
//无输出

• 对象的__proto成员，用途是获取当前实例的原型对象。非标准实现，存在兼容性问题，请不要使用
• 原则上不要轻易重写已存在的prototype方法。但能够在单个实例中覆写该方法
• prototype上定义静态对象变量，会形成全部对象共用，而不是分别建立实例，请在构造方法中分配实例

错误写法：

function Test() {}
Test.prototype.arr = [];
var a = new Test();
var b = new Test();
a.arr.push(1);
b.arr.push(2);
console.log(a.arr, b.arr);
//[1,2], [1,2]
正确写法
function Test() {
this.arr = [];
}

var a = new Test();
var b = new Test();
a.arr.push(1);
b.arr.push(2);
console.log(a.arr, b.arr);
//[1], [2]

总结

JS是门灵活的语言，灵活到想怎么写均可以。但里面坑仍是很多的。在有多种选择时，多考虑下哪一种方法更好，而不是盲目选择一种。