JavaScript 代码优化和布置——“机能和布置”的注重要点

2019年8月30日 116次阅读 来源: JS菌

注重作用域

防止全局查找

function updateUI () {
    var images = document.getElementsByTagName("img");
    for (var i = 0, len = images.length; i < len; i++) {
        images[i].title = document.title + " image " + i;
    }
    var msg = document.getElementById("msg");
    msg.innerHTML = "Update complete";
}

以上代码应当修正以下：

function updateUI () {
    var doc = document; //doc
    var images = doc.getElementsByTagName("img");
    for (var i = 0, len = images.length; i < len; i++) {
        images[i].title = doc.title + " image " + i; //doc
    }
    var msg = doc.getElementById("msg"); //doc
    msg.innerHTML = "Update complete";
}

防止with语句

必需运用with语句的状况很少，由于它重要用于消弭分外的字符。

运用准确要领

防止不必要的属性查找

算法的复杂度是运用O标记来示意的，最简朴疾速的算法是常熟值O(1)。

运用变量和数组要比接见对象上的属性更有效力。

var query = window.location.href.substring(window.location.href.indexOf("?"));

上面的代码须要6次属性查找，应当改成：

var url = window.location.href;
var query = url.substring(url.indexOf("?"));

上面的代码则削减为4次属性查找。

优化轮回

for (var i = 0; i < Things.length; i++) {
    Things[i]
};
for (var i = Things.length - 1; i >= 0; i--) {
    Things[i]
};

应当才去上面第二种写法。

var id = Things.length - 1;
if (i > -1) {
    do {
        Things[i];
    } while (--i >= 0);
}

或许把轮回改成后测试轮回。

睁开轮回

运用Duff装配

其他

  • 防止两重诠释

  • 用原生要领C或C++等

  • 用Switch替代if-else

  • 位操作符替代布尔运算和算数运算

最小化语句数

多个变量声明

var count = 5;
var color = "red";
var value = [21, 3, 21, 4];

var count = 5,
    color = "red",
    value = [21, 3, 21, 4];

应当采纳下面的要领

运用数组和对象字面量语法

var values = new Array();
values[0] = 123;
values[1] = 456;
var obj = new Object();
obj.name = "Oli";
obj.age = 18;

var values = [123, 456];
var obj = {
    name: "Oli",
    age: 18
};

应当采纳下面的要领

优化DOM交互

最小化现场更新

运用fragment要领更新DOM

运用innerHTML

var list = document.getElementById("myList"),
    html = "",
    i;
for (var i = 10; i >= 0; i--) {
    html = html + "<li>listing...</li>";
};
list.innerHTML = html;

相似fragment要领，要防止以下写法：

var list = document.getElementById("myList"),
    i;
for (var i = 10; i >= 0; i--) {
    list.innerHTML = list.innerHTML + "<li>listing...</li>";
};

运用事宜代办

任何能够冒泡的事宜都能够在先人节点上处置惩罚事宜；

注重HTMLCollection

var imgs = document.getElementsByTagName("img");
for (var i = 0, len = imgs.length; i < len; i++) {
    //processing...
};

布置

构建历程

将每一个对象或自定义范例离别放在零丁的文件中。

将代码星散称多个文件只是为了进步可维护性，并不是为了布置。

要举行布置的时刻，须要将这些源代码合并为一个或几个合并文件。

Ant构建东西（http://ant.apache.org）

考证

用JSLint（http://www.jslint.com）

紧缩

文件紧缩

运用YUI紧缩器（http://yuilibrary.com/projects/yuicompressor）

HTTP紧缩

在Apache Web服务器中能够用下面两个模块举行HTTP紧缩：mod_gzip和mod_deflate

    原文作者：JS菌
    原文地址: https://segmentfault.com/a/1190000004632968
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞