本文介绍了你能优化这个脚本吗?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

背景:我们的主菜单是使用一个简单的无序列表构建的

包含其他UL。页面上有一个表格,用于保存subnav。

由于某些情况,我需要在每个页面上动态构建subnav

。我在大约15分钟内编写了这个脚本,因为它是一个

" scope-creep"有点儿的事。现在我有一点时间,为了教育

的原因,我想尽可能地优化这个东西。


注意:DOM是天堂发送:)。我自己承认,变量名称

可能更具描述性。 " NAV"是主导航。

" subNav"是一个包含子导航的表格行。这个脚本的作用很好。
足够好。但是,我总是对那些经验丰富的人的意见感兴趣。


这里是主导航的缩短版本:


< ul id =" nav">

< li>

< div>

< a href =" /home/newstory.aspx" alt =""> Home< / a>

< / div>

< / li>

< li> ;

< div>

< a href =" /about/default.aspx" alt ="关于ASBA">关于Asba

< / a>

< / div>

< ul>

< li>

< a href =" /about/missionvisionphilosophy.aspx">

使命/愿景/哲学< / a>

< / li>

< li>

< a href =" /about/board.aspx"> ;董事会< / a>

< / li>

< / ul>

< / li>

< / ul>


这是'subnav:


< table class =" subnav" border =" 0">

< tr>

< td class =" subparent" id =" subNavHeader">好处< / td>

< td width =" 15" rowspan =" 2">& nbsp;< / td>


< / tr>

< tr>

< td class =" subbody" id =" subNav">


< / td>

< / tr>

< / table> ;


这里是脚本:


函数makeSubNav(){

var navs = document。 getElementById(''nav'')。getElementsByTagNam e(''a'');


var subNav = document.getElementById(''subNav'');

var path = formatPath(document.location.pathname);

var anchor,link,parentNodeName,listToPass,altText;

for(var i = 0; i < navs.length; i ++){

anchor = navs [i];

link = formatPath(anchor.pathname);

listToPass = null;

if(path == link){

switch(anchor.parentNode.nodeName.toUpperCase()){

case" ; LI":

listToPass =

anchor.parentNode.parentNode.parentNode;

break;

case" ; DIV":

listToPass = anchor.parentNode.parentNode;


休息;

}

休息;

}

}

尝试{

altText = listToPass.getElementsByTagName( ''div'')

[0] .getElementsByTagName('''')[0] .attributes.getNamedItem(''alt'')。value;

} catch(错误){

altText ='''';

}

subNav.appendChild(createList(listToPass,altText,path ));

}


函数formatPath(路径){

if(path.charAt(0)!='' /'')path =''/''+ path;

return path.toLowerCase();

}


function createList(ul,altText,currentPage){

document.getElementById(''subNavHeader'')。innerHTML = altText;

var toReturn = document.createElement('' ul'');

var items = ul.getElementsByTagName(''li'');

var img,existingLink,existingPath,newItem,newLink,span;

for(var i = 0;我< items.length; i ++){

existingLink = items [i] .getElementsByTagName('''')[0];

existingPath = formatPath(existingLink.pathname);

newItem = document.createElement(''li'');

img = new Image();

img.height = 6;

img.width = 10;

img.border = 0;

img.src =" /Common/Images/LinkBullet.gif" ;;

newItem.appendChild(img);

if(existingPath == currentPage){

toReturn.appendChild(document.createElement(''br') '));

newItem.className =" subcurrent";

span = document.createElement(''span'');

span.innerHTML = existingLink.innerHTML;

newItem.appendChild(span);

toReturn.appendChild(newItem);

toReturn.appendChild( document.createElement(''br''));

} else {

newLink = document.createElement(''a'');

newLink.href = existingLink.href;

ne wLink.innerHTML = existingLink.innerHTML;

newItem.appendChild(newLink);

toReturn.appendChild(newItem);

}

}

返回返回;

}


TIA


-

()

)\))(/(

(()/((/((((()) \\())

/(_)))\()))\()\))(((_)\

(_) )(_))/((_))\)((_))\ _((_)

/ __ || | _(_)_(_ /((()(_)| | / /

\__ \ | _ | | ||''\))/ _` | | ''<

| ___ / \__ | | _ || _ || _ | \ _,| | _ | \_ \

| ___ /

解决方案





你是欢迎。

没有想法?




没有名字?没有常见问题解答?

PointedEars

-

随机数字的生成太重要

留给机会。

- Robert R. Coveyou,橡树岭国家实验室




前驱的作者姓名足以跟进讨论,而长期归因使他们不那么清晰。请
配置您的UA默认不发布此类归属小说。



< snip>


文章ID标识信息。作者姓名通常不会。


John

-

John Harris

Background: Our main menu is built using a simple unordered list
containing other ULs. There is a table on a page that holds the subnav.
Because of certain circumstances, I need to build the subnav dynamically
on each page. I wrote this script in about 15 minutes because it was a
"scope-creep" kinda thing. Now that I have a bit of time, for education
reasons, I want to optimize this thing as much as possible.

Notes: DOM is a heaven send :). By my own admission, the variable names
could be a little more descriptive. "nav" is the master navigation.
"subNav" is a table row which holds the sub-navigation. This script works
good enough. But, I''m always interested in the opinions of those more
experienced than I.

Here''s a shortened version of the main nav:

<ul id="nav">
<li>
<div>
<a href="/home/newstory.aspx" alt="">Home</a>
</div>
</li>
<li>
<div>
<a href="/about/default.aspx" alt="ABOUT ASBA">About Asba
</a>
</div>
<ul>
<li>
<a href="/about/missionvisionphilosophy.aspx">
Mission/Vision/Philosophy</a>
</li>
<li>
<a href="/about/board.aspx">Board of Directors</a>
</li>
</ul>
</li>
</ul>

Here''s the subnav:

<table class="subnav" border="0">
<tr>
<td class="subparent" id="subNavHeader">Benefits</td>
<td width="15" rowspan="2">&nbsp;</td>

</tr>
<tr>
<td class="subbody" id="subNav">

</td>
</tr>
</table>

Here''s the script:

function makeSubNav(){
var navs = document.getElementById(''nav'').getElementsByTagNam e(''a'');

var subNav = document.getElementById(''subNav'');
var path = formatPath( document.location.pathname );
var anchor, link, parentNodeName, listToPass, altText;
for(var i = 0; i < navs.length; i++){
anchor = navs[i];
link = formatPath( anchor.pathname );
listToPass = null;
if(path == link){
switch(anchor.parentNode.nodeName.toUpperCase()){
case "LI":
listToPass =
anchor.parentNode.parentNode.parentNode;
break;
case "DIV":
listToPass = anchor.parentNode.parentNode;

break;
}
break;
}
}
try{
altText = listToPass.getElementsByTagName(''div'')
[0].getElementsByTagName(''a'')[0].attributes.getNamedItem(''alt'').value;
}catch(err){
altText = '''';
}
subNav.appendChild( createList(listToPass, altText, path) );
}

function formatPath(path){
if(path.charAt(0) != ''/'') path = ''/'' + path;
return path.toLowerCase();
}

function createList(ul, altText, currentPage){
document.getElementById(''subNavHeader'').innerHTML = altText;
var toReturn = document.createElement(''ul'');
var items = ul.getElementsByTagName(''li'');
var img, existingLink, existingPath, newItem, newLink, span;
for(var i = 0; i < items.length; i++){
existingLink = items[i].getElementsByTagName(''a'')[0];
existingPath = formatPath( existingLink.pathname );
newItem = document.createElement(''li'');
img = new Image();
img.height = 6;
img.width = 10;
img.border = 0;
img.src = "/Common/Images/LinkBullet.gif";
newItem.appendChild( img );
if(existingPath == currentPage){
toReturn.appendChild( document.createElement(''br'') );
newItem.className = "subcurrent";
span = document.createElement(''span'');
span.innerHTML = existingLink.innerHTML;
newItem.appendChild( span );
toReturn.appendChild( newItem );
toReturn.appendChild( document.createElement(''br'') );
}else{
newLink = document.createElement(''a'');
newLink.href = existingLink.href;
newLink.innerHTML = existingLink.innerHTML;
newItem.appendChild( newLink );
toReturn.appendChild( newItem );
}
}
return toReturn;
}

TIA

--
( )
)\ ) ) ( /(
(()/( ( /( ( ( ( )\())
/(_)))\()))\ ( )\))( ((_)\
(_)) (_))/((_) )\ ) ((_))\ _ ((_)
/ __|| |_ (_) _(_/( (()(_)| |/ /
\__ \| _| | || '' \))/ _` | | '' <
|___/ \__| |_||_||_| \__, | |_|\_\
|___/

解决方案



No Ideas?

--
( )
)\ ) ) ( /(
(()/( ( /( ( ( ( )\())
/(_)))\()))\ ( )\))( ((_)\
(_)) (_))/((_) )\ ) ((_))\ _ ((_)
/ __|| |_ (_) _(_/( (()(_)| |/ /
\__ \| _| | || '' \))/ _` | | '' <
|___/ \__| |_||_||_| \__, | |_|\_\
|___/




You are welcome.
No Ideas?



No name? No FAQ?
PointedEars
--
The generation of random numbers is too important
to be left to chance.
-- Robert R. Coveyou, Oak Ridge National Laboratory




The name of the author of the precursor is sufficient to follow the
discussion, while long attributions make them less legible. Please
configure your UA not to post such attribution novels by default.


<snip>

The article ID identifies the message. The author''s name often does not.

John
--
John Harris


这篇关于你能优化这个脚本吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-18 14:24
查看更多