Question

我有一个使用大量javascript的jsp，但速度不够快。我想首先优化它，这是代码的一部分：

在jsp我有初始化：

window.onload = function () {
        formCollection.pageSize.value = "<%= pagingSize%>";
        elemCollection = iDom3.Table.all["spis"].XML.DOM;
        <%  if (resultList != null) { %>
        elementsNumber = <%= resultList.size() %>;
        <%} else { %>
        elementsNumber = 0;
        <% } %> 
        contextPath = "<%= request.getContextPath() %>";
    }

在我的js文件中，我有两种类型的js函数：

// gets the first element and sets it's value to all the other; 
//the selectSingleNode function is used because I use XSLT transformation 
//to generate the table

_setTehJed = function(){    
        var resultId = formCollection.elements["idTehJedinice_spis_1"].value;
        var resultText = formCollection.elements["tehnicka_spis_1"].value;
        if (resultId != ""){
            var counter = 1;
            while (counter<elementsNumber){
                counter++;
                if(formCollection.elements["idTehJedinice_spis_"+counter] != null){
                    formCollection.elements["idTehJedinice_spis_"+counter].value=resultId;
                    formCollection.elements["tehnicka_spis_"+counter].value=resultText;
                }
                var node=elemCollection.selectSingleNode("/suite/table/rows/row[@id = 'spis_"+counter+"']/data[@col = 'tehnicka']/title");
                node.text=resultText;
                var node2=elemCollection.selectSingleNode("/suite/table/rows/row[@id = 'spis_"+counter+"']/data[@col = 'idTehJedinice']/title");
                node2.text=resultId;
            }
        }

    }

// sets the elements checkbox to checked or unchecked
_SelectCheckRokCuvanja = {
        all : [],

        Item : function (oItem, sId) {
                this.all["spis_"+sId] = oItem.value;
                if (oItem.checked) {
                    elemCollection.selectSingleNode("/suite/table/rows/row[@id = 'spis_"+sId+"']/data[@col = 'rokCheck']").setAttribute("default", "true");
                }else{
                    elemCollection.selectSingleNode("/suite/table/rows/row[@id = 'spis_"+sId+"']/data[@col = 'rokCheck']").setAttribute("default", "false");
                }
        }
    }

我已经使用了这些提示：

http://blogs.msdn.com/b/ie/archive/2006/08/28/728654.aspx http://code.google.com/speed/articles/optimizing-javascript.html

但我仍然认为可以像定义这样的函数来完成一些事情：

在jsp中：

window.onload = function () {
        iDom3.DigitalnaArhivaPrihvat.formCollection=document.forms["controller"];
        iDom3.DigitalnaArhivaPrihvat.formCollection.pageSize.value = "<%= pagingSize%>";
        iDom3.DigitalnaArhivaPrihvat.elemCollection = iDom3.Table.all["spis"].XML.DOM;
        <%  if (resultList != null) { %>
        iDom3.DigitalnaArhivaPrihvat.elementsNumber = <%= resultList.size() %>
        <%} else { %>
        iDom3.DigitalnaArhivaPrihvat.elementsNumber = 0;
        <% } %>

}

在js：

iDom3.DigitalnaArhivaPrihvat = {

    formCollection:null,
    elemCollection:null,
    elementsNumber:null,


_setTehJed : function(){    
        var resultId = this.formCollection.elements.idTehJedinice_spis_1.value;
        var resultText = this.formCollection.elements.tehnicka_spis_1.value;
        if (resultId != ""){
            var counter = 1;
            while (counter<this.elementsNumber){
                counter++;
                if(this.formCollection.elements["idTehJedinice_spis_"+counter] !== null){
                    this.formCollection.elements["idTehJedinice_spis_"+counter].value=resultId;
                    this.formCollection.elements["tehnicka_spis_"+counter].value=resultText;
                }
                var node=this.elemCollection.selectSingleNode("/suite/table/rows/row[@id = 'spis_"+counter+"']/data[@col = 'tehnicka']/title");
                node.text=resultText;
                var node2=this.elemCollection.selectSingleNode("/suite/table/rows/row[@id = 'spis_"+counter+"']/data[@col = 'idTehJedinice']/title");
                node2.text=resultId;
            }
        }

    },

_SelectCheckRokCuvanja = {
        all : [],

        Item : function (oItem, sId) {
                this.all["spis_"+sId] = oItem.value;
                if (oItem.checked) {
                    this.elemCollection.selectSingleNode("/suite/table/rows/row[@id = 'spis_"+sId+"']/data[@col = 'rokCheck']").setAttribute("default", "true");
                }else{
                    this.elemCollection.selectSingleNode("/suite/table/rows/row[@id = 'spis_"+sId+"']/data[@col = 'rokCheck']").setAttribute("default", "false");
                }
        }
    }

但问题是作用域（如果我这样做，第二个函数没有正确执行）。有什么建议吗？

编辑：表格的数据结构：

<row id="spis_3">
    <data col="rokCheck" type="check" default="false" onchange="_ChangeTypeRokCuvanje(this,'3')" >
    <title>false</title>
    <description>Tehnička jedinica</description>
</data>

Answer 1

selectSingleNode()是一项非常昂贵的操作。你应该尽量避免它。有两种解决方案：

自己迭代数据结构（因此您不必在DOM中搜索表，但可以直接逐行修改）。
由于您为每一行分配了一个ID，因此您应该能够在没有昂贵的XPath查找的情况下使用document.getElementById()。
使用像jquery这样的框架一次获取所有相关节点（ - >只进行1次昂贵的查找），然后遍历列表。

[编辑]有关如何实施＃1的示例，请参阅Traversing an HTML table with JavaScript and DOM Interfaces。

Answer 2

只需将this的引用替换为_SelectCheckRokCuvanja

即可

_SelectCheckRokCuvanja = {
    all: [],
    Item: function (oItem, sId) {
        _SelectCheckRokCuvanja.all["spis_" + sId] = oItem.value;
        if (oItem.checked) {
            _SelectCheckRokCuvanja.elemCollection.selectSingleNode("/suite/table/rows/row[@id = 'spis_" + sId + "']/data[@col = 'rokCheck']").setAttribute("default", "true");
        } else {
            _SelectCheckRokCuvanja.elemCollection.selectSingleNode("/suite/table/rows/row[@id = 'spis_" + sId + "']/data[@col = 'rokCheck']").setAttribute("default", "false");
        }
    }
}

如何优化这个javascript代码？

2 个答案: