你能优化这个脚本吗？ [英] Can you optimize this script?
问题描述
背景：我们的主菜单是使用一个简单的无序列表构建的
包含其他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
-
（）
）\））（/（
（（）/（（/（（（（（）） \\（））
/（_）））\（）））\（）\））（（（_）\
（_） ）（_））/（（_））\）（（_））\ _（（_）
/ __ || | _（_）_（_ /（（（）（_）| | / /
\__ \ | _ | | ||''\））/ _` | | ''<
| ___ / \__ | | _ || _ || _ | \ _，| | _ | \_ \
| ___ /
Chris Martin< ch *** @ design44.com>写在
news：Xn * ********************************@140.99.99 .130：
背景：我们的主菜单是使用包含其他UL的简单无序列表构建的。页面上有一个表格，其中包含
子空间。由于某些情况，我需要构建subnav
动态地在每个页面上。我在大约15分钟内编写了这个脚本
因为它是一个范围 - 蠕变的东西。现在我有一点时间，出于教育原因，我想要尽可能地优化这个东西。
注意：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（''a''）[0] .attributes.getNamedItem（''alt''）。value;
} catch（错误）{
altText ='''';
}
subNav.appendChild（createList（listToPass，altText，path））;
}
function formatPath（path）{
if（path.charAt（0）！=''/''）path =''/''+ path;
return path.toLowerCase（）;
}
函数createList（ul，altText，currentPage）{
document.getElementById（''subNavHeader''）。innerHTML = altText;
var toReturn = document .createElement（''ul''）;
var items = ul.getElementsByTagName（''li''）;
var img，existi ngLink，existingPath，newItem，newLink，span;
for（var i = 0;我< 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）;
}
}
返回返回;
}
TIA
没有想法？
-
（）
）\\ \\））（/（
（（）/（（/（（（（）\（））
/（_）））\（）） ）\（）\））（（（_）\
（_））（_））/（（_））\）（（_））\ _（ （_）
/ __ || | _（_）_（_ /（（（）（_）| | / /
\__ \ | _ | | ||''\））/ _` | | ''<
| ___ / \__ | | _ || _ || _ | \ _，| | _ | \_ \
| ___ /
StingK写道：
Chris Martin< ch *** @ design44.com>写在
新闻：Xn ********************************* @ 140.99.99 .130：
前驱的作者姓名足以跟随
讨论，而长期归因使他们不那么清晰。请
配置您的UA而不是默认发布此类归属小说。
< ul id =" nav">
< li>
< div>
< a href =" /home/newstory.aspx" alt =""> Home< / a>
空格如：空格和换行符显示为空格。符合
符合
标准的DOM ey算作文本节点。在打开标签之后和关闭标签之前，它们不应该出现
。
A元素没有ALT属性。为什么要这样，只有
才有意义，如果该属性的值可以用作*替代*
显示，就像图像或其他对象一样。
< / div>
< / li>
< ul id =" nav">
< li>< div>< a href =" / home / newstory .aspx">主页< / a>< / div>< / li>
< li>
< div>
< a href =" ; /about/default.aspx" alt ="关于ASBA">关于
Asba
< / a>
HTML 4.01规范建议避免在
A元素中的换行符。
[...]
这是subnav：
< table class =" subnav"边界=" 0">
表格不应单独用于布局目的，而应该只用于安排表格数据并标记
$ b它们之间的$ b关系。
函数makeSubNav（）{
var navs =
document.getElementById（''nav''）。getElementsByTagNam e（''a''） ;
特别是DOM方法应该在应用之前进行功能测试，其中最简单的形式是：
如果（document.getElementById）
{
var navs = document.getElementById（''nav''）;
if（navs.getElementsByTagName
&&（navs = navs.getElementsByTagName（''a''）））
{
//访问navs
}
更复杂但需要JavaScript 1.1或ECMAScript 2+
语言实现：
var t;
if（（t = typeof document.getElementById）==" function"
||（t ==" object"&& ; document.getElementById））
{
var navs = document.getElementById（''nav''）;
if（（（t = typeof navs.getElementsByTagName）==" function"
||（t ==" object"&& navs.getElementsByTagName））
&& ;（navs = navs.getElementsByTagName（' a''）））
{
//访问导航
}
参见< HTTP：//pointedears.de/scripts/test/whatami>并且
isMethodType（）在< http://pointedears.de/scripts/types.js>。
[...]
var path = formatPath（document.location.pathname）;
虽然可能，至少我不认为它是好的风格
如果在定义之前调用方法。
formatPath（）应该在
makeSubNav（）之前的源*中定义*，虽然它是在运行时之前定义的
makeSubNav（）被调用，所以调用前者是可能的。
var anchor，link，parentNodeName，listToPass，altText;
这些变量应在for中声明。循环，所以如果循环由于某种原因没有被执行，那么它们就没有被声明。
for（var i = 0; i< navs.length; i ++ ）{
为（var i = 0，len = navs.length; i< len;）编写
更有效率i ++）
{
anchor = navs [i];
该变量对于防止进一步不必要的查找确实很有用。
link = formatPath（anchor.pathname）;
但是，该变量不是必需的，参见[1]
listToPass = null;
如果使用[2]则可以省略
if（path == link）{
[ 1]
if（path == formatPath（anchor.pathname））
switch（anchor.parentNode.nodeName.toUpperCase（））{
case" LI"：
listToPass =
anchor.parentNode.parentNode.parentNode;
break;
case" DIV"：
listToPass = anchor.parentNode .parentNode;
休息;
}
休息;
因为之后访问`anchor.parentNode''，所以可以保存查找
。 toLowerCase（）应优先于toUpperCase（）以获得性能
原因（单词大部分为小写，小写字符串可以
压缩得更好）：
for（...）
{
// ...
var p = anchor。 parentNode;
if（p）
{
switch（p.nodeName.toLowerCase（））
{
case" li"：
listToPass = p.parentNode.parentNode;
break;
case" div"：
listToPass = p.parentNode;
break;
}
break ;
}
// ...
}
}
尝试{
altText = listToPass.getElementsByTagName（''div''）
[0] .getElementsByTagName（''a''）[0] .attributes.getNamedItem（''alt''）。value;
altText = listToPass.getElementsByTagName（''div''）[0]
.getElementsByTagName（''''）[0] .alt;
} catch（错误）{
altText ='''';
}
注意尝试...捕获需要符合ECMAScript 3的语言
实现。
subNav.appendChild（createList（listToPass，altText，path））;
[2]
subNav.appendChild（createList（listToPass || null，altText，path））;
}
函数formatPath（路径）{
if（path.charAt（0）！=''/''）path =''/''+ path;
返回路径。 toLowerCase（）;
}
你确定吗？ URI的路径组件区分大小写。
函数createList（ul，altText，currentPage）{
document.getElementById（''subNavHeader''）。innerHTML = altText;
`innerHTML''不是任何标准的一部分，不要符合标准
引用与专有标准（至少不要做）没有
功能测试之前）。使用
var o;
if（document.getElementById
&&（o = document.getElementById（' 'subNavHeader''））
&&（typeof o.innerHTML！=" undefined"））
{
o。 innerHTML = altText;
}
或
var o;
if （document.getElementById
&&（o = document.getElementById（''subNavHeader''））
{
var oSpan， oText;
if（o.firstChild
& o.removeChild
&& o.createTextNode
&&（oText = o.createTextNode（altText）））
{
while（o.firstChild）
{
o.removeChild（o.firstChild）;
}
o.appendChild（oText）;
}
}
或后者采用更复杂的功能测试方法，
见上文。 />
var toReturn = document.createElement（''ul' ）;
变种项= ul.getElementsByTagName（里）;
至少
if（ul）
{
// access这里需要
，因为`ul''可以是'null''。
var img，existingLink ，existingPath，newItem，newLink，span;
for（var i = 0; i< 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" ;;
if（newItem）
{
newItem.appendChild（img）;
if（existingPath == currentPage ）{/> toReturn.appendChild（document.createElement（''br''））;
不要。如果document.createElement（''br''）出于某种原因怎么办？
不成功？
newItem.className =" subcurrent" ;;
span = document .createElement（''span''）;
span.innerHTML = existingLink.innerHTML;
见上文。
[...]
}
}
}
返回返回;
}
缩进不应超过4个空格。为了保持
源代码清晰，我推荐2个空格。
TIA
你是欢迎。
没有想法？
没有名字？没有常见问题解答？
PointedEars
-
随机数字的生成太重要
留给机会。
- Robert R. Coveyou，橡树岭国家实验室
文章< 11 ********* *******@PointedEars.de> ;, Thomas''PointedEars''
Lahn< Po ********* @ web.de>写道StingK写道：
Chris Martin< ch *** @ design44.com>在
新闻中写道：Xn ********************************* @ 140.99.99 .130：
前驱的作者姓名足以跟进讨论，而长期归因使他们不那么清晰。请
配置您的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"> </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
--
( )
)\ ) ) ( /(
(()/( ( /( ( ( ( )\())
/(_)))\()))\ ( )\))( ((_)\
(_)) (_))/((_) )\ ) ((_))\ _ ((_)
/ __|| |_ (_) _(_/( (()(_)| |/ /
\__ \| _| | || '' \))/ _` | | '' <
|___/ \__| |_||_||_| \__, | |_|\_\
|___/
Chris Martin <ch***@design44.com> wrote in
news:Xn*********************************@140.99.99 .130:
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"> </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?
--
( )
)\ ) ) ( /(
(()/( ( /( ( ( ( )\())
/(_)))\()))\ ( )\))( ((_)\
(_)) (_))/((_) )\ ) ((_))\ _ ((_)
/ __|| |_ (_) _(_/( (()(_)| |/ /
\__ \| _| | || '' \))/ _` | | '' <
|___/ \__| |_||_||_| \__, | |_|\_\
|___/
StingK wrote:
Chris Martin <ch***@design44.com> wrote in
news:Xn*********************************@140.99.99 .130:
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.
<ul id="nav">
<li>
<div>
<a href="/home/newstory.aspx" alt="">Home</a>
Whitespace like spaces and line-breaks are displayed as spaces. In a
standards compliant DOM they count as text nodes. They should not occur
after open tags and before close tags.
An A element does not have an ALT attribute. Why should it, such only
makes sense if the value of that attribute could be used as *alternative*
display, as with images or other objects.
</div>
</li>
<ul id="nav">
<li><div><a href="/home/newstory.aspx">Home</a></div></li>
<li>
<div>
<a href="/about/default.aspx" alt="ABOUT ASBA">About
Asba
</a>
The HTML 4.01 Specification recommends to avoid line-breaks within
A elements.
[...]
Here''s the subnav:
<table class="subnav" border="0">
Tables should not serve layout purposes alone, instead they should
only serve the purpose of arranging tabular data and to mark up the
relations between them.
function makeSubNav(){
var navs =
document.getElementById(''nav'').getElementsByTagNam e(''a'');
Especially DOM methods should be feature-tested before applied, in
its most simple form:
if (document.getElementById)
{
var navs = document.getElementById(''nav'');
if (navs.getElementsByTagName
&& (navs = navs.getElementsByTagName(''a'')))
{
// access navs
}
More sophisticated but requires JavaScript 1.1 or an ECMAScript 2+
language implementation:
var t;
if ((t = typeof document.getElementById) == "function"
|| (t == "object" && document.getElementById))
{
var navs = document.getElementById(''nav'');
if (((t = typeof navs.getElementsByTagName) == "function"
|| (t == "object" && navs.getElementsByTagName))
&& (navs = navs.getElementsByTagName(''a'')))
{
// access navs
}
See also <http://pointedears.de/scripts/test/whatami> and
isMethodType() in <http://pointedears.de/scripts/types.js>.
[...]
var path = formatPath( document.location.pathname );
Although possible, at least I don''t consider it good style
if a method is called before its definition is known.
formatPath() should be defined *in the source* prior to
makeSubNav(), although it is defined during runtime before
makeSubNav() is called and so calling the former is possible.
var anchor, link, parentNodeName, listToPass, altText;
Those variables should be declared within the "for" loop, so that
if the loop is for some reason not executed, they are not declared.
for(var i = 0; i < navs.length; i++){
It is more efficient to write
for (var i = 0, len = navs.length; i < len; i++)
{
anchor = navs[i];
That variable is indeed useful to prevent further unnecessary look-ups.
link = formatPath( anchor.pathname );
However, that variable is not necessary, see [1]
listToPass = null;
Could be omitted if [2] is used
if(path == link){
[1]
if (path == formatPath(anchor.pathname))
switch(anchor.parentNode.nodeName.toUpperCase()){
case "LI":
listToPass =
anchor.parentNode.parentNode.parentNode;
break;
case "DIV":
listToPass = anchor.parentNode.parentNode;
break;
}
break;
Since `anchor.parentNode'' is accessed afterwards, look-ups can be saved
here. toLowerCase() should be preferred over toUpperCase() for performance
reasons (words are for the most part lowercase, and lowercase strings can
be compressed better):
for (...)
{
// ...
var p = anchor.parentNode;
if (p)
{
switch (p.nodeName.toLowerCase())
{
case "li":
listToPass = p.parentNode.parentNode;
break;
case "div":
listToPass = p.parentNode;
break;
}
break;
}
// ...
}
}
try{
altText = listToPass.getElementsByTagName(''div'')
[0].getElementsByTagName(''a'')[0].attributes.getNamedItem(''alt'').value;
altText = listToPass.getElementsByTagName(''div'')[0]
.getElementsByTagName(''a'')[0].alt;
}catch(err){
altText = '''';
}
Note that try...catch requires an ECMAScript 3 compliant language
implementation.
subNav.appendChild( createList(listToPass, altText, path) );
[2]
subNav.appendChild(createList(listToPass || null, altText, path));
}
function formatPath(path){
if(path.charAt(0) != ''/'') path = ''/'' + path;
return path.toLowerCase();
}
Are you sure? The path component of URIs is case-sensitive.
function createList(ul, altText, currentPage){
document.getElementById(''subNavHeader'').innerHTML = altText;
`innerHTML'' is not part of any standard, don''t mix standards compliant
references with proprietary ones (at least don''t do that without
feature-testing prior). Use either
var o;
if (document.getElementById
&& (o = document.getElementById(''subNavHeader''))
&& (typeof o.innerHTML != "undefined"))
{
o.innerHTML = altText;
}
or
var o;
if (document.getElementById
&& (o = document.getElementById(''subNavHeader''))
{
var oSpan, oText;
if (o.firstChild
&& o.removeChild
&& o.createTextNode
&& (oText = o.createTextNode(altText)))
{
while (o.firstChild)
{
o.removeChild(o.firstChild);
}
o.appendChild(oText);
}
}
or the latter with the more sophisticated feature-testing method,
see above.
var toReturn = document.createElement(''ul'');
var items = ul.getElementsByTagName(''li'');
At least
if (ul)
{
// access ul
}
is necessary here, since `ul'' can be `null''.
var img, existingLink, existingPath, newItem, newLink, span;
for(var i = 0; i < items.length; i++){
See above.
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";
if (newItem)
{
newItem.appendChild( img );
if(existingPath == currentPage){
toReturn.appendChild( document.createElement(''br'') );
Don''t. What if document.createElement(''br'') is for some reason
unsuccessful?
newItem.className = "subcurrent";
span = document.createElement(''span'');
span.innerHTML = existingLink.innerHTML;
See above.
[...]
}
}
}
return toReturn;
}
Indentation should not exceed 4 spaces. To keep
source code legible, I recommend 2 spaces.
TIA
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
In article <11****************@PointedEars.de>, Thomas ''PointedEars''
Lahn <Po*********@web.de> writesStingK wrote:Chris Martin <ch***@design44.com> wrote in
news:Xn*********************************@140.99.99 .130:
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
这篇关于你能优化这个脚本吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
