「簡単」にすることができるメソッドのさまざまな側面があります。
links = new Array();
より適切に書くことができますlinks = [];
。(ほぼ)Javascriptで遭遇するものはすべてすでにオブジェクトであるため、それについて冗長であっても明確さは増しません。
links[1]="first..."
links[2]="second...";
を使用してより適切に記述できる.push()
ため、各インデックスを指定する必要はありません。例:
links.push("first");
links.push("second");
または、すべてを一度に実行する場合は、配列リテラルを使用します。例:
links = [
"first",
"second"
];
あまり良くない、私の意見では、しかしオプションも、以下を使用して、両方の混合物である可能性があります.concat()
:
links = [
"first",
"second"
];
links = links.concat([
"third",
"fourth"
]);
裸のオブジェクトの配列を使用して物事をグループ化することも理にかなっているかもしれません。
sections = [
{
heading: '<span class="asep">First section...</span>',
links: [
'<a href="#">First</a>',
'<a href="#">Second</a>'
]
},
{
heading: '<span class="asep">Second section...</span>',
links: [
'<a href="#">Third</a>',
'<a href="#">Fourth</a>'
]
},
];
function writeLinks(){
var html = "";
for( var i = 0; i < sections.length; i++ ){
var section = sections[i];
html += section.heading + section.links.join("");
}
document.getElementById('nav1').innerHTML = html;
}
setTimeout(writeLinks, 0);
.join("")
配列のすべての要素を文字列として結合するためのの使用にも注意してください。
次に、コードに多くの重複があります。異なる部分のみを指定できます。例:
sections = [
{
heading: "First section...",
links: [
"First",
"Second"
]
},
/* ...snip... */
];
function writeLinks(){
var html = "";
for( var i = 0; i < sections.length; i++ ){
var section = sections[i];
html += '<span class="asep">' + section.heading + "</span>";
for( var j = 0; j < section.links.length; j++ ){
html += '<a href="#">' + section.links[j] + "</a>";
}
}
document.getElementById('nav1').innerHTML = html;
}
setTimeout(writeLinks, 0);
jQueryやPrototypeなどの一般的なライブラリを使用することで、その生のHTMLの一部を取り除き、ループの一部などを単純化することができます。setTimeout()
これにより、壊れやすいハックを使用するのではなく、ドキュメントを操作する準備ができていることを実際に確認することもできます。例えば:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
/* ...snip... */
$(function(){
var nav = $("<div />").attr("id", "nav1");
$.each(sections, function(i,section){
nav.append( $("<span />").addClass("asep").text(section.heading) );
$.each(section.links, function(i,link){
nav.append( $("<a />").attr("href", "#").text(link) );
}
}
$("#nav1").replaceWith( nav );
});
</script>
気分によっては、これらすべてが「簡単」と見なされる場合があります。