我有一個jsp,它使用了大量的javascript,但速度不夠快。我想這樣先優化它,這裏的代碼的一部分:如何優化此JavaScript代碼?
在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>
我不知道我可以使用getElementById(),包括jquery只爲一個功能看起來很昂貴,所以我怎麼能實現解決方案1?我在XSLT表格的數據結構的一部分中進行了編輯 – Andrija 2010-05-28 10:59:21
請參閱此文檔瞭解如何遍歷DOM樹:https://developer.mozilla.org/en/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces – 2010-05-28 16:03:46