前端技巧-w3c

Posted 2020-12-25 hzx-5

1.使用全等===比较符

if (zeroAsAString === 0) {
    // 判断为false
}
在和null进行比较的时候，允许使用 == 比较符

2.使用 .parseInt() 的时候，总是指定第二个 ‘radix‘ 参数

 parseInt("08", 10)

3.避免比较true 和 false

if (foo === true) {
    // 用了 === 倒是不错，可这是多余的
}

if (foo) {
    // 赞！
}

4.避免污染全局命名空间

// 用 settings 作为对象命名

var settings = {
    settingA: true,
    settingB: false,
    settingC: "test"
}

5.驼峰法变量命名

var xPosition = obj.scrollLeft;

6.循环的性能 - 缓存数组长度

 

var toLoop = new Array(1000);

for (var i = 0; i < toLoop.length; i++) {
    // 败家玩意 - 长度会反复算 1000 次你知道不？
}

for (var i = 0, len = toLoop.length; i < len; i++) {
    // 会过日子 - 长度只计算一次，然后缓存了
}

例外

如果你对一个数组做循环来查找并删除某个元素，这就会改变数组长度。任何时候你只要会在循环内部增加或删除元素来改变数组的长度，你就给自己带来了麻烦。这种情况下，你要么每次改变后重新设置数组长度，要么就别缓存它了。
7.循环的性能 - 使用 ‘break;‘ 和 ‘continue;‘

　　break 直接跳出 不再往下执行
　　continue 跳出本次 接着执行

var bigArray = new Array(1000);

for (var i = 0, len = bigArray.length; i < len; i++) {
    if (i === 500) {
        break;
    }
    console.log(i); // 这样只会输出 0 - 499
}

8.函数调用不要传输太多的参数

下面的例子预先构建了一个对象作为参数，或者把内联对象传递过去，这样就好多了。

function greet(user) {
    alert(user.name);
}
greet({
    name: "Bob",
    gender: "male"
});

9.尽量减少重新绘制和重新布局

var myList = document.getElementById("myList");

for (var i = 0, len = arr.length; i < len; i++) {

    myList.innerhtml += "<li>" + arr[i].title + "</li>"; //重新布局 -- 增加到元素

}

在上面的 for 循环里，每次迭代会触发一次重新布局。10次迭代就是10次重新布局。

现在考虑下面的代码：

var constructedHTML = "";

for (var i = 0, len = arr.length; i < len; i++) {
    constructedHTML += "<li>" + arr[i].title + "</li>"; //没有重新布局 - 增加到字符串
}

document.getElementById("myList").innerHTML = constructedHTML; //在这里重新布局

10.设置ID

function S4() {
   return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
}
function guid() {
   return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
}

11.使用 data-* 属性

<div id="test" data-is-bool="true" data-some-number="123"></div>