必威体育下载克里斯蒂安·海尔曼

您当前正在浏览档案中不显眼的类别。必威体育简介

“不引人注目”类别的存档

谷歌阅读器共享物品的低调徽章

星期三,5月21日,2008年

我是谷歌阅读器的用户,可以通过RSS我订阅的源。我认为读这本书是安全的RSSTwitter已经取代了我大部分的网上冲浪。

像大多数大RSS读者,谷歌阅读器还可以让你和那些想在你的社交圈里的人分享你的伟大发现。你可以将这些发现作为订阅或者作为一个小徽章(在谷歌行话中称为剪辑)包含在你的博客或者其他网站中。

这个此徽章的开箱即用版本可以定制并生成两个javascript,其中包括编写徽章。

很好,但是我不太关心那些没有javascript就可以提供功能的东西,但是不需要麻烦,这就是为什么我更仔细地检查了谷歌徽章的作用。

如果您查看生成的脚本includes,您将发现例如以下内容统一资源定位地址(添加了空格以避免破坏我的日志:)

http://www.google.com/reader/public/javascript/user/07479231772993841072/state/com.google/broadcast?n=5&callback=grc_%28%7bc%3a%22green%22%2ct%3a%22ch必威体育下载ristian%20heilmann%27s%20shared%20items%22%2cs%3a%22false%22%7d%29%3bnew%20grc

点击这个会给你一个JSON公司带有包装函数的对象(出于某种原因,还带有注释,说明这是一个javascript文件)。这意味着你可以把它用于你自己的目的。

你只需要你的用户名,你可以很容易地从谷歌阅读器提供的共享项目主页上找到这个。在我的情况下,这是http://www.google.com/reader/shared/07479231772993841072号.

其他有趣的参数JSON应用程序接口n定义项目数量和回拨参数定义围绕JSON公司数据。

将所有这些放在一起,很容易创建一个使用以下内容的徽章HTML在谷歌阅读器上展示我的共享项目。

      

没有javascript的访问者仍然可以点击我共享项目的页面。使用javascript的用户将获得最新的5个。

您可以在演示页面上看到徽章的实际使用情况并为自己下载(使用教程建造者):

黑客Slideshare的嵌入添加了一个预览,并大大缩短和可读性。

星期四,4月17日,2008年

编辑: 脚本中有一个bug(请参阅注释),但是GoogleCode不允许我编辑自己的文件。一旦我解决了那个问题,我会解决的。注释中报告的错误现在已修复,可悲的是,我还不得不重新编写转换器,因为谷歌代码不允许我替换旧版本的下载(或者有什么诀窍?).新文件称为预览2.JS

正如本博客的读者所知,我非常喜欢幻灯片作为我的演示幻灯片的分发平台。然而,有一些事情让我很恼火。

其中之一是Slideshare提供的相当详细的嵌入代码:



这是一个相当大的问题,主要的问题是当您在一个文档中使用多个幻灯片嵌入时,您将减慢页面的呈现速度,因为每个Flash嵌入都需要实例化,并尝试预缓存S3中的前三张幻灯片。

我分析了一下代码,添加了一些我在RSSfeed并提出了一个以不同方式嵌入幻灯片的小JavaScript。您只需要以下代码:



这使SlideShare具有相同的功能搜索引擎优化链接爱情,但要添加的要少得多。而不是整张幻灯片,你会得到一个预览图像,你可以点击它来替换为Flash电影。以下是示例:

现在,为了把一个转换成另一个,你可以用手来做,或使用幻灯片共享嵌入转换器或安装Greasemonkey脚本

到目前为止,这是一个黑客,但是我和乔纳森·鲍特尔昨天晚上,在旧金山JavaScript MeTUP上,他很高兴能进一步研究这个想法。我的愿望清单:

  • 更大的预览图像
  • 休息一下美国石油学会以可读的方式给我这个信息的调用

不引人注目的例子,使用Twitter API延迟加载徽章

星期五,4月11日,2008年

以下是我的问题在高地讨论分发徽章和ATantek在Twitter上抱怨官方的Twitter徽章我想我可以尝试按照我在演讲中提到的一些最佳实践来创建一个Twitter徽章。结果就是这样。

标记

而不是HTML当javascript可用时将用实际数据播种的容器,而当它不可用时则无意义,我想建立在HTML如果不编写脚本并从中获取脚本所需的所有信息,这是有意义的。





不引人注目的例子,懒惰地加载TwitterBadge





为了定制徽章,我允许CSS包含要添加到主容器中的信息的类:





不引人注目的例子,懒惰地加载TwitterBadge





它们的意思是:

  • 金额n定义要显示的tweets数量,n为整数
  • 皮肤名称定义要使用的皮肤(目前为灰色和蓝色)
  • 用户信息定义用户的虚拟人物,应显示名称和位置。

剧本

这是完整的脚本,我们将逐一介绍这些位。

twitterBadge=function()
var配置=
默认值:5,
徽章ID:'twitterbadge',
用户ID:'twitterbadgeuser',
tweetsid:'twitterbadgetweets',
用户信息:'userinfo',
样式匹配:/皮肤-(W+)/,
amountmatch:/金额-(d+)/,
样式:{
'gray':'twitterbadge.css',
'blue':'twitterbadgeblue.css'
}

_
var badge=document.getElementByID(config.badgeid);
如果(徽章)
var link=badge.getElementsByTagname('a')[0];
如果(链接)
var classdata=badge.classname;
var head=document.getElementsByTagname('head')[0];
var amount=config.amountmatch.exec(classdata);
var amount=金额?金额[1]:config.countdefault;
var skin=config.stylesMatch.exec(classdata);
如果(皮肤和皮肤[1]);
var style=document.createElement('link');
style.setattribute('rel','stylesheet');
style.setattribute('type','text/css');
style.setattribute('href',config.styles[skin[1]]);
head.insertbefore(样式,head.firstchild);
}

var name=link.href.split('/');
var resturl='http://twitter.com/status/user_timeline/'+
name[name.length-1]+'.json?回调='+
'twitterBadge.show&count='+amount;
var script=document.createElement('script');
script.src=resturl;
script.type='text/javascript';
函数显示(结果)
如果(classdata.indexof(config.userinfo)!= -1){
var user=document.createElement('p');
user.id=config.user id;
var img=document.createElement(“img”);
img.src=result[0].user.profile_image_url;
img.alt=result[0].用户名;
user.appendchild(img);
var ul=document.createElement(“ul”);
var data=['屏幕名称','名称','位置'];
对于(var i=0;数据[i];i++)
if(结果[0].user[data[i]])
var li=document.createElement(“li”);
li.appendChild(document.createTextNode(result[0].user[data[i]]));
ul.附录(li);
}

}
user.appendchild(ul);
badge.appendchild(用户);
}

var tweets=document.createElement('ul');
tweets.id=config.tweets id;
对于(var i=0,j=result.length;i var user name=result[i].user.screen\u name;
var li=document.createElement(“li”);
var span=document.createElement(“span”);
span.innerhtml=result[i].text+'';
li.附属物(跨度);
var link=document.createElement('a');
link.setattribute('href','http://twitter.com/'+用户名+
'/status/'+结果[i].id);
link.appendChild(document.createTextNode(相对时间(结果[i].已创建时间));
li.appendchild(链接);
tweets.appendchild(li);
}

badge.appendchild(tweets);
}

函数相对时间(时间值)
var值=时间_值.split(“”);
时间值=值[1]+“”+值[2]+“,“+值[5]+”“+值[3];
var parsed_date=date.parse(时间_值);
var relative_to=(arguments.length>1)?参数[1]:new date();
var delta=parseInt((relative_to.getTime()–parsed_date)/1000);
delta=delta+(相对于.getTimeZoneOffset()*60);
如果(delta<60)
返回“不到一分钟前”;
否则,如果(delta<120)
返回“大约一分钟前”;
否则,如果(delta<(60*60))
return(parseInt(delta/60)).toString()+“分钟前”;
否则,如果(delta<(120*60))
返回“大约一小时前”;
否则,如果(delta<(24*60*60))
返回“about”+(parseInt(delta/3600)).toString()+“hours ago”;
否则,如果(delta<(48*60*60))
返回“1天前”;
}否则{
return(parseInt(delta/86400)).toString()+“天前”;
}

}
}

}
返回{
显示:显示,
init:函数()
head.appendchild(脚本);
}

_
}();
twitterBadge.init();

我正在使用显示模块模式保持代码简短,避免使用全局回调方法。然而,有点轻微的模块模式中生成的脚本节点的操作异常所以我们必须偏离那里的标准()在主模块之后调用方法。

我首先想到的是为脚本提供一个配置对象。这使得在不需要搜索整个脚本的情况下很容易更改它的设置,而且对于实现者来说,这只是一个很好的服务:


twitterBadge=function()
var配置=
默认值:5,
徽章ID:'twitterbadge',
用户ID:'twitterbadgeuser',
tweetsid:'twitterbadgetweets',
样式匹配:/皮肤-(W+)/,
amountmatch:/金额-(d+)/,
样式:{
'gray':'twitterbadge.css',
'blue':'twitterbadgeblue.css'
}

_

这里有所有的身份证,用于从中获取数据的样式名和相应的文件名以及正则表达式。CSS类名。所有的ID和类都是用来定义自己皮肤的钩子。还有一个计数默认值变量,用于定义未设置Amount类时应显示的项数。


var badge=document.getElementByID(config.badgeid);
如果(徽章)
var link=badge.getElementsByTagname('a')[0];
如果(链接)

我测试了徽章,它包含一个链接,因为这是我们从中获取所有配置数据的地方。


var classdata=badge.classname;
var head=document.getElementsByTagname('head')[0];
var amount=config.amountmatch.exec(classdata);
var amount=金额?金额[1]:config.countdefault;
var skin=config.stylesMatch.exec(classdata);
如果(皮肤和皮肤[1]);
var style=document.createElement('link');
style.setattribute('rel','stylesheet');
style.setattribute('type','text/css');
style.setattribute('href',config.styles[skin[1]]);
head.insertbefore(样式,head.firstchild);
}

然后我准备好了从课堂上阅读信息。我设置了一个文件头的快捷方式,并读取了要显示的tweets数量。如果没有amount-n类集,则返回默认值。

接下来是皮肤,我检查类是否已设置,如果是这种情况,我将创建一个指向右侧皮肤的新链接元素。我从配置样式对象中获取href。

注意我使用插入前())将样式添加到文档头而不是附加子项().这样可以确保皮肤CSS文件不会覆盖其他样式表中的设置。最后一个包含的样式表将它们全部规则化。


var name=link.href.split('/');
var resturl='http://twitter.com/status/user_timeline/'+
name[name.length-1]+'.json?回调='+
'twitterBadge.show&count='+amount;
var script=document.createElement('script');
script.src=resturl;
script.type='text/javascript';

现在是时候找到用户名(通过拆分链接的href属性)并组装休息获取Twitter数据的URL。通常我会将新的脚本节点直接添加到头部,但歌剧院不喜欢这样。


函数显示(结果)
如果(classdata.indexof(config.userinfo)!= -1){
var user=document.createElement('p');
user.id=config.user id;
var img=document.createElement(“img”);
img.src=result[0].user.profile_image_url;
img.alt=result[0].用户名;
user.appendchild(img);
var ul=document.createElement(“ul”);
var data=['屏幕名称','名称','位置'];
对于(var i=0;数据[i];i++)
if(结果[0].user[data[i]])
var li=document.createElement(“li”);
li.appendChild(document.createTextNode(result[0].user[data[i]]));
ul.附录(li);
}

}
user.appendchild(ul);
badge.appendchild(用户);
}

现在是时候开始核心功能了:由twitter调用的show方法休息API回拨。我检查是否设置了用户信息,并相应地创建标记。这里没什么了不起的。


var tweets=document.createElement('ul');
tweets.id=config.tweets id;
对于(var i=0,j=result.length;i var user name=result[i].user.screen\u name;
var li=document.createElement(“li”);
var span=document.createElement(“span”);
span.innerhtml=result[i].text+'';
li.附属物(跨度);
var link=document.createElement('a');
link.setattribute('href','http://twitter.com/'+用户名+
'/status/'+结果[i].id);
link.appendChild(document.createTextNode(相对时间(结果[i].已创建时间));
li.appendchild(链接);
tweets.appendchild(li);
}

badge.appendchild(tweets);
}

接下来我会得到tweets信息,整理一个列表并将其添加到徽章中。


函数相对时间(时间值)
[…]
}

}
}

返回{
显示:显示,
init:函数()
head.appendchild(脚本);
}

_
}();
twitterBadge.init();

相对时间法实际上是从最初的twitter徽章中提取的,并计算twitter有多旧。我用一个返回语句结束模块,该语句定义公共方法(仅在本例中)显示)并添加脚本节点以调用休息API在init方法中。这只对解决歌剧问题是必要的。

下载并举例说明

你可以下载Twitter徽章行动起来看看.

尝试更易于访问的就地编辑解决方案

星期五,1月4日,2008年

今天我将尝试找到一种更容易访问的方法来提供就地编辑脚本。这个此处描述的解决方案可能还没准备好现实生活,请在不同环境中测试并提供修复程序。它被授权与创意共享相似,所以发疯吧!

我真的很喜欢就地编辑的想法。最常用的就地编辑示例可能是Flickr,它允许您在登录时单击任何标题或描述来直接编辑。我喜欢就地编辑的原因是它让用户更容易描述事物,希望能使网站更容易访问和查找(毕竟,所有的文本都是被索引的,并且对每个人都是可用的)。就地编辑的缺点是许多解决方案不太容易访问。它们向元素添加了一个单击处理程序,这些元素不一定对辅助技术可用,而且根本无法通过键盘访问。

非脚本解决方案尝试

从技术上讲,创建可访问的就地编辑的最简单解决方案是使用带标签的输入字段并使用CSS使它们看起来像其他元素。代码可能如下:


              
              =
              “可编辑”
              >
             
  
               
               对于=
               “主攻方向”
               >
              标题:>
  
               
               类型=
               “文本” 
               身份证件=
               “主攻方向” 
              
         价值=“东欧水獭”>
>

以及CSS

可编辑的标签{
  位置绝对的(二)
  顶部(二)
  左边-99 99 PX(二)
}
可编辑的输入{
  边境没有人(二)
  字体系列阿拉里无衬线(二)
}

但是唉!它更容易接近吗?我不确定,因为标题的语义美受到干扰。我很肯定搜索引擎会对它皱眉,当屏幕阅读器在表单模式下的工作方式与在阅读模式下的工作方式不同时,它可能会更加令人困惑。所以,让我们拭目以待吧。

使其不受干扰地工作

下一步是使用一个普通的标题,并以某种方式将其与文档中其他地方的表单字段连接起来。很酷的是我们在平原上有类似的东betway体育官方网西HTML:目标链接。例如:


              
              身份证件=
              “编辑表单” 
              行动=
              “servermagic.php”
              >
             

               
               =
               “可编辑”
               >
              
  
                
                Href=
                “第二代教育家”
                >
               编辑我,小熊!>
>

               
               =
               “可编辑”
               >
              
  
                
                Href=
                “编辑说明”
                >
               我也是,去做吧!>
>

               
               身份证件=
               “编辑节”
               >
              
  
               
                >
               
    
               
               对于=
               “教育家”
               >
              主标题内容:>
    
               
               类型=
               “文本” 
               身份证件=
               “教育家” 
               名称=
               “教育家”
               >
              
  >
  
              
               >
              
    
              
              对于=
              “编辑说明”
              >
             说明内容:>
    
              
              类型=
              “文本” 
             
           身份证件=“编辑说明” 
           名称=“编辑说明”>
  >
  
             
              >
             
             
             类型=
             “提交” 
             价值=
             “保存更改”
             >
             >
            
>
>

编辑我,小熊!

我也是,去做吧!

这在没有javascript的情况下也能工作(但不知何故,当你点击链接时,我的火狐并没有突出显示表单字段,有人知道为什么吗?请评论!).它需要的只是一个javascript来将其转换成一个可工作的就地编辑版本。脚本的作用是:

  • 查找包含身份证件“编辑分区”并将其隐藏在视图中
  • 查找类为“可编辑”的所有元素,并添加指向编辑函数的单击处理程序
  • 重写表单的提交事件以指向存储函数

编辑功能应执行以下操作:

  • 检查是否已在编辑另一个元素,如果有则将其聚焦
  • 从目标链接的href获取表单元素的ID
  • 将表单元素的值设置为元素的内容
  • 将“已编辑”样式设置为原始元素以隐藏它
  • 显示原始链接所在的表单域
  • 聚焦窗体域
  • 告诉主脚本当前正在编辑的元素

存储功能应:

  • 检查是否有已编辑的元素(以避免覆盖正常表单提交)
  • 将目标链接的内容设置为字段的值
  • 将表单域移回其来源
  • 将焦点设置回链接
  • 异步存储内容(此处未实现)
  • 停止正常表单提交
  • 将脚本的编辑状态重置为“无”

下面是执行此操作的脚本。我正在使用悠悠在这个例子中,我喜欢集中精力编写脚本,而不是担心浏览器问题。这就是说,注意,您需要在firefox中超时包装表单域焦点,那是怎么回事?

雅虎。命名空间“CH”(二)雅虎。中国.编辑位置 = 功能{/*使用的名称和ID*/
  var人名= {编辑部分'编辑节'编辑“编辑”隐藏的“隐藏”可编辑'可编辑'形式'编辑表单'
  }(二)var=雅虎。实用工具.事件=雅虎。实用工具.DOM(二)var编辑= {}(二)
  var编辑节=YD得到人名。编辑部分(二)
  如果编辑节{YD加法类编辑节人名。隐藏的(二)功能doDebuge{
      如果你说什么?编辑。目标{
        varT=耶。获取目标e(二)
        如果THref{
          var菲尔德斯=T获取属性“HREF”.分裂'''[](二)
          var领域=YD得到菲尔德斯(二)
          .附属儿童领域(二)字段。价值 =T内HTML(二)YD加法类T人名。编辑(二)设置超时功能{字段。集中(二)}10个编辑= {目标T领域领域身份证件菲尔德斯}(二)
        }(二)
      } 其他的 {设置超时功能{编辑。领域.集中(二)}10个
      }耶。以前的默认值e(二)
    }(二)功能商店e{
      如果编辑。目标{编辑。目标.内HTML =编辑。领域.价值(二)YD卸货舱编辑。目标人名。编辑(二)编辑节。附属儿童编辑。领域(二)编辑。目标.集中(二)
        //这里是Ajax魔术,您可以使用edit.id作为ID耶。以前的默认值e(二)编辑= {}(二)
      }(二)
    }(二)var编辑=YD获取元素循环名称人名。可编辑(二)耶。编辑'单击'doDebug(二)耶。YD得到人名。形式'提交'商店(二)}
}(二)

尝试解决方案将脚本作为zip下载示例页告诉我你的想法!

在Firefox中测试过,IE7以及PC上的Opera 9,请给我一些其他系统和浏览器的反馈。

巴黎网络2007年不引人注目的javascript研讨会记录

星期五,11月23日,二千零七

这是一个循序渐进的描述,并附有“低调的javascript”研讨会的代码示例,该研讨会在巴黎2007年举行。法国。

您可以在此处下载此中使用的所有文件:parisweb2007_工作坊.zip

在研讨会开始时,我做了两个承诺:

  • 了解javascript的参与者会发现他们经常编写过多的代码
  • 不了解javascript的参与者将学习如何准备和帮助JS开发人员构建不引人注目的产品。必威体育下载

第一步:分析任务和HTML

我们从一开始HTML模板(模板)01_模板.html)并进行分析。我们指出,模板不是最佳的,因为它包含嵌入的CSS在直播产品中应该单独CSS文件。我们还指出,像这样开始是可以的,因为它使维护更容易。

模板是一个链接列表(目录),指向页面下方的一组标题。其想法是,访问者可以单击目录(TOC)并向下移动文档。“返回顶部”链接允许他们再次返回。这个TOCID为“TOC”,后面链接一个“back”类。

我们有一块CSS在文档的头部和正文末尾的脚本块中。在主体的末尾有一个脚本块可以确保HTML我们希望在我们的javascript被执行时可以使用它。

我们希望在研讨会中实现的任务是将此模板转换为一个动态界面,该界面隐藏所有内容,只显示连接到链接的内容。TOC当访问者点击它时。

第二步:了解浏览器问题并将其用于我们的优势

问题是我们必须知道在单击链接时要显示和隐藏哪个部分。逻辑连接很简单:在TOC具有一个href属性,该属性指向它所连接到的标题中的ID。我们可以在脚本中使用它。问题是我们不知道标题后面的内容。我们需要一种方法来确保我们可以将需要隐藏的所有元素分组到一个元素中。

帮助我们的是一个鲜为人知的Internet Explorer错误如果使用键盘通过指向页面内锚定点的链接进行制表,则页面会跳到该位置,但是键盘焦点不会随它移动。最简单的解决方法是将锚定元素嵌套在HAS布局.在我们的案例中,我们添加了div每个标题和内容部分周围的元素,并将其宽度设置为100%()02yIEFix.HTML

第三步:脚本

我们拥有HTML我们需要,页面已经做了我们想做的。现在我们开始考虑如何覆盖默认行为并使其对我们有用。我们要做的主要改变是:

  • 隐藏所有内容节
  • 当我们只显示一个内容部分时,隐藏不需要的后链接
  • 在中显示与链接连接的内容节TOC当它被点击时

我们讨论了这样做的不同可能性(循环通过DOM,获取的所有子元素div并将其style.display值设置为“无”等)。然后,我建议到目前为止最简单的方法是编写一个简单的javascript,在JS可用时向文档体添加一个类,并定义CSS这隐藏了必要的元素。这样我们就可以轻松地CSS做所有沉重的事DOM遍历,我们为设计人员提供了一个钩子,以使非javascript和javascript版本的样式不同。

JavaScript:


document.body.classname='js';

这个CSS


/*依赖于脚本的样式*/

Bydi.js*的TOC {
浮动:左;
宽度:20%;
右边距:5%;
}

By.js div {
浮动:右;
宽度:70%;
}

body.js div,body.js.back_
位置:绝对;
左:-99 99 px;
}

然后我们发现这不安全,因为可能已经有一个类应用于body元素,这意味着我们需要检查它,并在需要时附加新类。


document.body.classname=(document.body.classname+“”'“)+'js';

这确保所有必要的元素最初都被隐藏(03隐藏样式.html)我们还指出,我们使用左键技术而不是用显示隐藏内容:无,因为这可以确保屏幕阅读器仍然可以访问内容。

事件处理

这是我们用JavaScript和DOM.现在,我们需要了解如何显示单击适当链接时要显示的部分。我们需要为此使用事件处理,并将事件侦听器应用于不同的元素。最初,参与者考虑在每一个事件中添加一个点击事件监听器,但在经历了使用人豚鼠(human guinearigs)进行事件处理的想法之后。日常活动视频)我们意识到只需要将单个事件处理程序应用于TOC使用事件委托做剩下的。

我们使用了W3C事件处理方法,导致以下代码(04X事件):

CSS


body.js Div.Show_
职位:相对;
左:0;
}

JavaScript:


document.body.classname=(document.body.classname+“”'“)+'js';
var toc=document.getElementByID(“toc”);
如果(TOC){
功能切换(E)
var t=e.目标;
if(t.nodename.tolowercase()='a')
var sectionid=t.getattribute('href').split('')[1];
var节=document.getElementByID(sectionID);
如果(节){
section.parentnode.classname='显示';
}

}
_
toc.addEventListener('click',toggle,false);
_

这确保了我们可以在单击元素时实际显示它们,但也有一个问题,即我们没有隐藏以前显示的部分。为此,我们需要存储信息并在调用toggle()时重置它。我提到过一个提示,使用对象来存储接口的状态总是一个好计划,因为这意味着您可以保留尽可能多的属性,而不需要引入更多的变量。更改只是将节存储在当前对象中的几行,并在已经有一个集合时移除类(05撊keepingstate.html):


document.body.classname=(document.body.classname+“”'“)+'js';
var toc=document.getElementByID(“toc”);
如果(TOC){
无功电流=
功能切换(E)
var t=e.目标;
if(t.nodename.tolowercase()='a')
if(当前节)
current.section.classname='';
_
var sectionid=t.getattribute('href').split('')[1];
var节=document.getElementByID(sectionID);
如果(节){
section.parentnode.classname='显示';
current.section=section.parentnode;
_
_
_
toc.addEventListener('click',toggle,false);
_

就课程的(非常基本的)功能而言(我们只有一个小时),最后要记住的几点是让这个代码与其他脚本一起工作,以及如何使其更容易维护。

脚本的名称间距。

使脚本与其他人一起工作的最简单技巧是使用模块模式并将其嵌套在分配给匿名函数()的变量中。06撏namespaced.html):


var sectioncollapse=function()
document.body.classname=(document.body.classname+“”'“)+'js';
var toc=document.getElementByID(“toc”);
如果(TOC){
无功电流=
功能切换(E)
var t=e.目标;
if(t.nodename.tolowercase()='a')
if(当前节)
current.section.classname='';
_
var sectionid=t.getattribute('href').split('')[1];
var节=document.getElementByID(sectionID);
如果(节){
section.parentnode.classname='显示';
current.section=section.parentnode;
_
_
_
toc.addEventListener('click',toggle,false);
_
}();

使维护更容易

为了便于下一个开发者从我们这里接管,然后,我们同意脚本本身不包含任何ID或类名,而是将它们移到自己的配置对象中。我们能覆盖的最后一步是移动CSS把javascript放到自己的文档中,我们的示例完成了(07L):


var sectioncollapse=function()

//开始配置–在此处编辑
var配置=
jsAvailableClass:'js',
展示类:'show',
ToCID:“Toc”
}

//结束配置

document.body.classname=(document.body.classname+“”,“””,+config.jsavailableclass;
var toc=document.getElementByID(config.tocid);
如果(TOC){
无功电流=
功能切换(E)
var t=e.目标;
if(t.nodename.tolowercase()='a')
if(当前节)
current.section.classname='';
_
var sectionid=t.getattribute('href').split('')[1];
var节=document.getElementByID(sectionID);
如果(节){
section.parentnode.classname=config.showclass;
current.section=section.parentnode;
_
_
_
toc.addEventListener('click',toggle,false);
_
}();

结论

我希望参加者能了解到你如何CSSJavascript可以协同工作,并学习了必威体育下载一些使他们的javascript更容易维护的方法。我个人希望大多数人在开始代码之前就开始分析问题:)