必威体育下载基督教Heilmann

“低调的”标签的文章

谷歌阅读器共享项的不显眼标记

星期三,5月21日,2008

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

最喜欢大RSS读者,谷歌阅读器还可以让你与那些想要和你的社交社区的人分享你的伟大发现。您可以将这些发现作为提要或小徽章(在谷歌术语中称为剪辑)包含在您的博客或其他站点中。

这个这个徽章的开箱即用版本可以定制和结果在两个JavaScript中包含其中的写出来的徽章。

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

如果您查看生成的脚本包含,您会发现如下所示URL(增加空间以避免破坏我的博客:))

http://www.google.com/reader/public/javascript/user/07479231772993841072/state/com.google/broadcast?n = 5回调= GRC_p % 7 bc % 3 28% % 22绿色% 22% 2 ct % 3必威体育下载 % 22基督教% 20 heilmann % 27 s % 20共享% 20个项目% 22% 2 cs % 3 7 d % % 22日假% 22% 29% 3 bnew % 20集选区

点击这个会得到aJSON对象,并带有包装器函数(由于某些原因,这是一个JavaScript文件的注释),这意味着您可以将其用于您自己的目的。

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

其他有趣的参数JSON APIn参数定义项的数量和回调参数定义被包装的函数调用的名称JSON数据。

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

      

没有JavaScript的访问者仍然可以通过单击进入我的共享项页面。使用JavaScript的用户将获得最新的5个版本。

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

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

周四,4月17日,2008

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

正如本博客的读者所知,我是……的超级粉丝幻灯片作为我演讲幻灯片的分发平台。然而,这件事有些事使我烦恼。

其中之一是SlideShare提供的相当冗长的嵌入代码:



这很长,主要的问题是当你在一个文档中使用几个幻灯片嵌入时,当需要实例化这些Flash嵌入并试图预缓存S3中的前三张幻灯片时,您将放慢页面的呈现速度。

我已经分析了一些代码,添加了一些其他的信息,我发现在RSS并设计了一个小JavaScript,以不同的方式嵌入幻灯片。你只需要以下代码:



这给了slideshare同样的效果搜索引擎优化链接爱情却少得多。不是完整的幻灯片,您将得到一个预览图像,您可以单击它,它将被flash电影替换。以下是一些例子:

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

到目前为止,这是一个hack,但是我和乔纳森Boutelle昨天晚上在旧金山JavaScript会议上,他很高兴能继续这个想法。我的愿望清单:

  • 更大的预览图像
  • 休息美国石油学会调用它以可读的方式提供此信息

一个不显眼的例子,使用Twitter API的延迟加载标记

星期五,4月11日,2008

以下是我的一些问题在Highland Fling谈论分发徽章和ATantek在twitter上抱怨官方的twitter徽章我想我应该试着按照我在演讲中提到的一些最佳实践来创建一个twitter徽章。结果就是这样。

标记

而不是HTML当JavaScript可用时,容器将被植入真实数据,当JavaScript不可用时,容器将变得毫无意义,我想在上面建HTML这是有意义的,没有脚本,并得到所有的信息,我的脚本需要从那里。





不引人注目的例子,延迟加载twitterbadge





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





不引人注目的例子,延迟加载twitterbadge





它们的意思是:

  • amount-n定义要显示的tweets数量,n为整数
  • skin-name定义你想要使用的皮肤(现在是灰色和蓝色)
  • 用户信息定义如果用户的化身,应该显示名称和位置。

这个脚本

这是完整的脚本,我们将一个一个地看一遍。

twitterbadge = function(){
var config = {
countDefault: 5
badgeID:“twitterbadge”,
用户ID:'twitterbadgeuser',
tweetsID:“twitterbadgetweets”,
用户信息:'userinfo',
stylesmatch: /皮肤- (w +) /
(amountmatch:/数量)- d + /,
样式:{
“灰色”:“twitterbadge.css”,
“蓝”:“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”、“样式表”);
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/statuses/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 = [' screen_name','name','location'];
(var = 0;数据[我];我+ +){
如果结果[0].user[数据[我]]){
var li = document.createElement(' li');
li.appendChild(document.createTextNode(结果[0].user[数据[我]]));
ul.appendChild(李);
}

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

var tweets=document.createElement('ul');
tweets.id=config.tweets id;
(var = 0,j = result.length;i var username = result[i].user.screen_name;
var li = document.createElement(' li');
var span = document.createElement(' span');
span.innerhtml=result[i].text+'';
li.appendChild(跨度);
var link=document.createElement('a');
link.setAttribute(' href','http://twitter.com/' +用户名+ '
' /状态/[我].id)+结果;
link.appendChild (document.createTextNode (relative_time(结果[我].created_at)));
li.appendChild(链接);
tweets.appendChild(李);
}

badge.appendChild(微博);
}

函数relative_time(time_value){
var值=时间_值.split(“”);
time_value =值[1]+ " " +值[2]+ ",“+值[5]+”“+值[3];
var parsed_date = Date.parse(time_value);
var relative_to = (arguments.length > 1)?参数[1]:new date();
var delta=parseInt((relative_to.getTime()–parsed_date)/1000);
= delta + (relative_to.getTimezoneOffset() * 60);
如果(delta<60)
返回“少于一分钟前”;
否则,如果(delta<120)
返回“大约一分钟前”;
} else if(delta < (60*60)) {
返回(parseInt(delta / 60)).toString() + ' minutes ago';
否则,如果(delta<(120*60))
“大约一小时以前”回来;
} else if(delta < (24*60*60)) {
返回' about ' + (parseInt(delta / 3600)).toString() + ' hours ago';
} else if(delta < (48*60*60)) {
返回“1天前”;
}否则{
返回(parseInt(delta / 86400)).toString() + ' days ago';
}

}
}

}
返回{
显示:显示,
初始化:函数(){
head.appendChild(脚本);
}

};
}();
twitterBadge.init();

我正在使用显示模块模式保持代码简短,避免全局回调方法。然而,有点轻微的在模块模式中生成脚本节点的Opera oddity所以我们要用一个额外的来偏离标准init()方法调用后的主模块。

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


twitterbadge = function(){
var config = {
countDefault: 5
badgeID:“twitterbadge”,
用户ID:'twitterbadgeuser',
tweetsID:“twitterbadgetweets”,
stylesmatch: /皮肤- (w +) /
(amountmatch:/数量)- d + /,
样式:{
“灰色”:“twitterbadge.css”,
“蓝”:“twitterbadgeblue.css”
}

};

这里我们使用了所有的id,中获取数据的样式名称和相应的文件名以及正则表达式CSS类名。所有的id和类都是定义自己皮肤的钩子。还有一个countDefault变量定义未设置amount类时应显示多少项。


var badge = document.getElementById(config.badgeID);
如果(徽章){
var link = badge.getElementsByTagName(' a')[0];
如果(链接){

我测试了badge,它包含一个链接,因为我们将从这里获取所有配置数据。


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”、“样式表”);
style.setattribute('type','text/css');
style.setattribute('href',config.styles[skin[1]]);
head.insertBefore(风格,head.firstChild);
}

然后我就可以阅读课堂上的信息了。我设置了一个文件头的快捷方式,并读取了要显示的tweets数量。如果没有amount-n类集,我将退回到默认值。

接下来是皮肤,我检查类是否被设置,如果是这样,我创建一个新的链接元素指向正确的皮肤。我从configuration styles对象中获得href。

注意我用了方法()将样式添加到文档的头部,而不是列表末尾()。这在一定程度上确保了皮肤css文件不会覆盖其他样式表中的设置。最后一个包含的样式表将它们全部规则化。


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

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


函数显示(结果){
如果(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 = [' screen_name','name','location'];
(var = 0;数据[我];我+ +){
如果结果[0].user[数据[我]]){
var li = document.createElement(' li');
li.appendChild(document.createTextNode(结果[0].user[数据[我]]));
ul.appendChild(李);
}

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

现在开始核心功能:将由twitter调用的show方法REST API回调。我检查是否设置了userinfo并相应地创建了标记。没有什么了不起的。


var tweets=document.createElement('ul');
tweets.id=config.tweets id;
(var = 0,j = result.length;i var username = result[i].user.screen_name;
var li = document.createElement(' li');
var span = document.createElement(' span');
span.innerhtml=result[i].text+'';
li.appendChild(跨度);
var link=document.createElement('a');
link.setAttribute(' href','http://twitter.com/' +用户名+ '
' /状态/[我].id)+结果;
link.appendChild (document.createTextNode (relative_time(结果[我].created_at)));
li.appendChild(链接);
tweets.appendChild(李);
}

badge.appendChild(微博);
}

接下来我会得到tweets信息,组装一个列表并将其添加到标记中。


函数relative_time(time_value){
[…]
}

}
}

返回{
显示:显示,
初始化:函数(){
head.appendChild(脚本);
}

};
}();
twitterBadge.init();

relative_time方法实际上是从原始twitter标记中提取的,并计算tweet的年龄。我以一个定义公共方法(仅在本例中)的return语句结束模块显示),并添加要调用的脚本节点REST API在init方法中。这只对解决歌剧问题是必要的。

下载和例子

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

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

星期五,1月4日,2008

今天,我将尝试寻找一种更容易访问的方法来提供就地编辑脚本。这个这里所描述的解决方案可能还没有为现实生活做好准备,请在不同的环境中测试它并提供修复。它获得了知识共享共享的许可,所以发疯!

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

尝试非脚本解决方案

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


              
              =
              “可编辑”
              >
             
  
               
               =
               “mainheading”
               >
              标题:>
  
               
               类型=
               “文本” 
               id=
               “mainheading” 
              
         价值=“东欧水獭”>
>

CSS

.editable标签{
  位置绝对;
  ;
  -9999 px;
}
.editable输入{
  边境没有一个;
  字体类型阿拉里无衬线;
}

但是唉!它更容易获得吗?我不确定,由于标题的语义良度受到干扰。我很确定搜索引擎会不喜欢它,因为屏幕阅读器在表单模式下的工作方式与在阅读模式下的工作方式不同,这可能会更令人困惑。我们把它擦掉。

让它低调地工作

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


              
              id=
              “editform” 
              行动=
              “servermagic.php”
              >
             

               
               =
               “可编辑”
               >
              
  
                
                href=
                “# editheader”
                >
               编辑我,懦夫!>
>

               
               =
               “可编辑”
               >
              
  
                
                href=
                “# editdescription”
                >
               我好了,做到!>
>

               
               id=
               “editingsection”
               >
              
  
               
                >
               
    
               
               =
               “教育家”
               >
              主标题内容:>
    
               
               类型=
               “文本” 
               id=
               “教育家” 
               的名字=
               “教育家”
               >
              
  >
  
              
               >
              
    
              
              =
              “编辑说明”
              >
             内容描述:>
    
              
              类型=
              “文本” 
             
           id=“编辑说明” 
           的名字=“编辑说明”>
  >
  
             
              >
             
             
             类型=
             “提交” 
             价值=
             “保存更改”
             >
             >
            
>
>

编辑我,懦夫!

我好了,做到!

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

  • 查找带有。的部分ID"editsection"并将其隐藏起来
  • 查找类为“可编辑”的所有元素,并添加指向编辑函数的单击处理程序
  • 覆盖表单的submit事件以指向存储函数

编辑函数的作用如下:

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

存储功能应:

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

下面的脚本正是这样做的。我正在使用YUI在这个例子中,我喜欢集中精力编写脚本,而不是担心浏览器问题。也就是说,注意,在Firefox中需要在超时中包装表单字段焦点,是什么呢?

雅虎。名称空间(“ch”;雅虎。cheditinplace = 功能({名称和id使用*/
  varnamesandids= {editsection“editingsection”编辑“编辑”隐藏的“隐藏”可编辑的“可编辑”形式“editform”
  };var你们=雅虎。跑龙套事件=雅虎。跑龙套DOM;var编辑= {};
  vareditingsection=码。得到(namesandids。editsection;
  如果(editingsection{码。加法类(editingsectionnamesandids。隐藏的;功能doedit(e{
      如果(!编辑。目标{
        vart=你们。getTarget(e;
        如果(t。href{
          varfieldid=t。getAttribute(“HREF”分裂('''(1];
          var领域=码。得到(fieldid;
          列表末尾(领域;字段。价值 =t。innerHTML;码。加法类(tnamesandids。编辑;setTimeout(功能({字段。焦点(;}10编辑= {目标t领域领域idfieldid};
        };
      } 其他的 {setTimeout(功能({编辑。领域焦点(;}10
      }你们。preventDefault(e;
    };功能商店(e{
      如果(编辑。目标{编辑。目标innerHTML =编辑。领域价值;码。卸货舱(编辑。目标namesandids。编辑;editingsection。列表末尾(编辑。领域;编辑。目标焦点(;
        // Ajax Magic在这里,you can used edit.id as the id你们。preventDefault(e;编辑= {};
      };
    };var编辑=码。getElementsByClassName(namesandids。可编辑的;你们。(编辑“点击”doedit;你们。(码。得到(namesandids。形式“提交”商店;}
}(;

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

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

低调JavaScript的巴黎Web 2007研讨会记录

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

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

您可以在此处下载此中使用的所有文件:parisweb2007_workshop.zip

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

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

第一步:分析任务和HTML

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

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

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

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

第二步:了解浏览器问题并利用它们

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

帮助我们的是一个鲜为人知的东西ie漏洞如果你用键盘点击指向页面内锚点的链接页面就会跳转到那里,但是键盘的焦点不会随着它移动。最简单的解决方案是将锚元素嵌套到其中的一个元素中hasLayout。在我们的例子中,我们添加了DIV每个标题和内容部分周围的元素,并将其宽度设置为100% (02 _iefix.html)。

第三步:脚本

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

  • 隐藏所有内容部分
  • 隐藏反向链接,因为我们只显示一个内容部分时不需要它们
  • 显示与链接相连接的内容部分TOC当它被点击时

我们讨论了这样做的不同可能性DOM,的所有子元素DIVand set their style.display value to ‘none' and so on).然后我提出,到目前为止最简单的方法是编写一个简单的JavaScript,在JS可用时将类添加到文档主体中并进行定义CSS这隐藏了必要的元素。那样的话我们可以很容易地让CSS干重活DOM遍历,我们为设计人员提供了一个钩子,以使非javascript和javascript版本的样式不同。

JavaScript:


document.body.classname='js';

这个CSS


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

Bydi.js*的TOC {
浮:左;
宽度:20%;
margin-right: 5%;
}

By.js div {
浮:正确;
宽度:70%;
}

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

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


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

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

事件处理

这是我们在JavaScript和DOM。现在我们需要知道如何在单击适当的链接时显示我们想显示的部分。我们需要为此使用事件处理,并将事件侦听器应用于不同的元素。最初,参与者考虑为每个事件添加一个click事件侦听器,但在使用人豚鼠(视频dailymotion网站)我们意识到,只需要将一个事件处理程序应用于TOC和使用事件的代表团做剩下的事。

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

CSS


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

JavaScript:


document.body.classname=(document.body.classname+“”'“)+'js';
var toc=document.getElementByID(“toc”);
如果(toc){
功能开关(e){
var t = e.target;
如果(t.nodeName.toLowerCase()= a){
var sectionID = t.getAttribute('href').split('#')[1];
var section = document.getElementById(sectionID);
如果(部分){
section.parentnode.classname='显示';
}

}
};
toc.addEventListener(“点击”,切换、虚假);
};

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


document.body.classname=(document.body.classname+“”'“)+'js';
var toc=document.getElementByID(“toc”);
如果(toc){
var current = {};
功能开关(e){
var t = e.target;
如果(t.nodeName.toLowerCase () = a) {
if(当前节)
current.section.classname='';
};
var sectionID = t.getAttribute(' href').split(' #')[1];
var section = document.getElementById(sectionID);
如果(部分){
section.parentNode.className = ‘show';
current.section=section.parentnode;
};
};
};
toc.addEventListener(“点击”,切换、虚假);
};

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

命名空间的脚本。

要使脚本与其他脚本很好地协作,最简单的技巧是使用模块的模式并将其嵌套在赋给匿名函数的变量中(06 _namespaced.html):


var sectionCollapse = function(){
document.body.classname=(document.body.classname+“”'“)+'js';
var toc=document.getElementByID(“toc”);
如果(toc){
var current = {};
功能开关(e){
var t = e.target;
如果(t.nodeName.toLowerCase()= a){
if(当前节)
current.section.className = '';
};
var sectionID = t.getAttribute('href').split('#')[1];
var section = document.getElementById(sectionID);
如果(部分){
section.parentnode.classname='显示';
current.section=section.parentnode;
};
};
};
toc.addEventListener(“点击”,切换、虚假);
};
}();

简化维护

为了便于下一个开发者从我们这里接管,然后我们同意在脚本本身中没有任何ID或类名,而是将它们移到自己的配置对象中。我们能覆盖的最后一步是移动CSSJavaScript生成自己的文档我们的例子完成了(07年_final.html):


var sectionCollapse = function(){

//开始配置-在这里编辑
var config = {
JSavailableClass:“js”,
showClass:“秀”,
tocID:“目录”
}

/ /结束配置

document.body.classname=(document.body.classname+“”,“””,+config.jsavailableclass;
var toc = document.getElementById(config.tocID);
如果(toc){
var current = {};
功能开关(e){
var t = e.target;
如果(t.nodeName.toLowerCase () = a) {
if(当前节)
current.section.classname='';
};
var sectionID = t.getAttribute(' href').split(' #')[1];
var section = document.getElementById(sectionID);
如果(部分){
section.parentnode.classname=config.showclass;
current.section=section.parentnode;
};
};
};
toc.addEventListener(“点击”,切换、虚假);
};
}();

结论

我希望参与者能对你的设计有所了解CSSJavaScript可以协同工作,并学习了必威体育下载一些使JavaScript更易于维护的方法。我个人希望大多数人在开始编写代码之前就开始分析问题:)