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

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

档案的“不显眼”类别

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

周三,5月21日,2008年

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

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

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

这是好,但我不太喜欢没有JavaScript也能提供功能的东西,这就是为什么我更仔细地检查了谷歌标记的作用。

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

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文件的注释),这意味着你可以把它用于你自己的目的。

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

其他有趣的参数JSON应用程序接口是吗?n参数定义项的数量和回调参数定义被包装的函数调用的名称JSON公司数据。

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

      

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

您可以在演示页面(使用tutorialbuilder)以下内容:

修改了SlideShare的嵌入,增加了预览,而且更短,更容易阅读

星期四,4月17日,2008年

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

正如本博客的读者所知,我非常喜欢SlideShare作为我的演示幻灯片的分发平台。然而,这件事有些事使我烦恼。

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



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

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



这使SlideShare具有相同的功能搜索引擎优化链接爱情,但要添加的要少得多。不是完整的幻灯片,您将得到一个预览图像,您可以单击它,它将被flash电影替换。以下是示例:

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

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

  • 更大的预览图像
  • 休息API调用它以可读的方式提供此信息

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

星期五,4月11日,2008年

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

标记

而不是HTML当javascript可用时将用实际数据播种的容器,而当它不可用时则无意义,我想在上面建HTML这是有意义的,没有脚本,并得到所有的信息,我的脚本需要从那里。





一个不显眼的例子,懒惰地加载TwitterBadge





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





一个不显眼的例子,懒惰地加载TwitterBadge





它们的意思是:

  • 金额n定义以n为整数显示的tweet的数量
  • 皮肤名称定义要使用的皮肤(目前为灰色和蓝色)
  • 用户信息定义如果用户的化身,应该显示名称和位置。

剧本

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

twitterbadge = function(){
变量配置={
计数默认值:5,
badgeID:“twitterbadge”,
用户标识:“twitterbadgeuser”,
tweetsid:'twitterbadgetweets',
用户信息:用户信息,
样式匹配:/皮肤-(W+)/,
amountmatch:/金额-(d+)/,
风格:{
'gray':'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','stylesheet');
style.setAttribute('类型','文本/ css ');
style.setAttribute (“href”config.styles[皮肤[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.name;
user.appendchild(img);
var ul = document.createElement(' ul');
var data = [' screen_name','name','location'];
对于(var i=0;数据[i];i++){
如果结果[0].user[数据[我]]){
var li=document.createElement(“li”);
li.appendChild(document.createTextNode(结果[0].user[数据[我]]));
ul.附录(li);
}

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

var tweets = document.createElement(' ul');
tweets.id = config.tweetsID;
(var = 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/'+用户名+
' /状态/[我].id)+结果;
link.appendChild (document.createTextNode (relative_time(结果[我].created_at)));
li.appendchild(链接);
tweets.appendchild(li);
}

badge.appendchild(tweets);
}

函数relative_time(time_value){
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);
if (delta < 60) {
返回“少于一分钟前”;
} else if(delta < 120) {
返回“大约一分钟前”;
}否则,如果(delta<(60*60))。{
返回(parseInt(delta / 60)).toString() + ' minutes ago';
} else if(delta < (120*60)) {
返回“大约一小时前”;
}否则,如果(delta<(24*60*60))。{
返回“about”+(parseInt(delta/3600)).toString()+“hours ago”;
} else if(delta < (48*60*60)) {
返回“1天前”;
其他}{
return(parseInt(delta/86400)).toString()+“天前”;
}

}
}

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

};
}();
twitterbadge.init();

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

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


twitterbadge = function(){
变量配置={
计数默认值:5,
badgeID:“twitterbadge”,
用户标识:“twitterbadgeuser”,
tweetsid:'twitterbadgetweets',
样式匹配:/皮肤-(W+)/,
amountmatch:/金额-(d+)/,
风格:{
'gray':'twitterbadge.css',
“蓝”:“twitterbadgeblue.css”
}

};

这里有所有的身份证,中获取数据的样式名称和相应的文件名以及正则表达式CSS类名。所有的id和类都是定义自己皮肤的钩子。还有一个计数默认值变量,用于定义未设置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','stylesheet');
style.setAttribute('类型','文本/ css ');
style.setAttribute (“href”config.styles[皮肤[1]]);
head.insertBefore(风格,head.firstChild);
}

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

接下来是皮肤,我检查类是否已设置,如果是这种情况,我将创建一个指向右侧皮肤的新链接元素。我从configuration styles对象中获得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属性)并组装休息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.name;
user.appendchild(img);
var ul = document.createElement(' ul');
var data = [' screen_name','name','location'];
对于(var i=0;数据[i];i++){
如果结果[0].user[数据[我]]){
var li=document.createElement(“li”);
li.appendChild(document.createTextNode(结果[0].user[数据[我]]));
ul.附录(li);
}

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

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


var tweets = document.createElement(' ul');
tweets.id = config.tweetsID;
(var = 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/'+用户名+
' /状态/[我].id)+结果;
link.appendChild (document.createTextNode (relative_time(结果[我].created_at)));
li.appendchild(链接);
tweets.appendchild(li);
}

badge.appendchild(tweets);
}

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


函数relative_time(time_value){
[…]
}

}
}

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

};
}();
twitterbadge.init();

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

下载并举例说明

你可以下载Twitter徽章看到它的作用.

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

星期五,1月4日,2008年

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

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

尝试非脚本解决方案

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


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

以及CSS:

.可编辑标签{
  位置:绝对;
  :0;
  左边:-9999像素;
}
.可编辑输入{
  边境:没有一个;
  字体系列:天线,无衬线;
}

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

让它低调地工作

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


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

               
               =
               “可编辑”
               >
              
  
                
                href=
                “编辑标题”
                >
               编辑我,呜!>
>

               
               =
               “可编辑”
               >
              
  
                
                href=
                “# editdescription”
                >
               我也是,做到!>
>

               
               身份证件=
               “编辑节”
               >
              
  
               
                >
               
    
               
               =
               “editheader”
               >
              主标题内容:>
    
               
               类型=
               “文本” 
               身份证件=
               “editheader” 
               的名字=
               “editheader”
               >
              
  >
  
              
               >
              
    
              
              =
              “editdescription”
              >
             说明内容:>
    
              
              类型=
              “文本” 
             
           身份证件=“editdescription” 
           的名字=“editdescription”>
  >
  
             
              >
             
             
             类型=
             “提交” 
             价值=
             “保存更改”
             >
             >
            
>
>

编辑我,呜!

我也是,做到!

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

  • 查找包含身份证件“编辑分区”并将其隐藏在视图中
  • 找到类“editable”中的所有元素,并添加一个指向编辑函数的单击处理程序
  • 覆盖表单的submit事件以指向存储函数

编辑函数的作用如下:

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

存储功能应:

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

下面的脚本正是这样做的。我正在使用尤伊在这个例子中,我喜欢专注于编写脚本,而不是担心浏览器问题。也就是说,注意,您需要在firefox中超时包装表单域焦点,那是怎么回事?

雅虎。名称空间(“ch”);雅虎。中国.editinplace = 函数(){名称和id使用*/
  var名称和ID= {编辑部分:'编辑节',编辑:'编辑',隐藏的:'隐藏',可编辑的:“可编辑”,形式:'编辑表单'
  };var=雅虎。实用工具.事件,=雅虎。实用工具.Dom;var编辑= {};
  var编辑节=YD得到(姓名和身份。编辑部分);
  如果(编辑节){YDaddClass(编辑节,姓名和身份。隐藏的);函数做过的(e){
      如果(!编辑。目标){
        varT=你们。getTarget(e);
        如果(T.href){
          varfieldid=T.获取属性(“href”).分裂(“#”)(1];
          var=YD得到(fieldid);
          .列表末尾();字段。价值 =T.innerHTML;YDaddClass(T,姓名和身份。编辑);setTimeout(函数(){字段。焦点();},10个)编辑= {目标:T,:,身份证件:fieldid};
        };
      } 其他的 {setTimeout(函数(){编辑。.焦点();},10个)
      }你们。以前的默认值(e);
    };函数商店(e){
      如果(编辑。目标){编辑。目标.innerHTML =编辑。.价值;YDremoveClass(编辑。目标,姓名和身份。编辑);编辑节。列表末尾(编辑。);编辑。目标.焦点();
        // Ajax Magic在这里,您可以使用edit.id作为ID你们。以前的默认值(e);编辑= {};
      };
    };var编辑=YD获取元素循环名称(姓名和身份。可编辑的);你们。(编辑,“点击”,做过的);你们。(YD得到(姓名和身份。形式),'提交',商店);}
}();

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

在Firefox中测试过,IE7PC上的Opera 9,请给我更多关于其他系统和浏览器的反馈。

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

星期五,11月23日,2007

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

你可以在这里下载使用的所有文件:parisweb2007_工作坊.zip

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

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

第一步:分析任务和HTML

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

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

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

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

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

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

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

第三步:脚本

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

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

我们讨论了这样做的不同可能性(循环通过国内,获取的所有子元素分区并将其style.display值设置为“无”等)。然后我提出,到目前为止最简单的方法是编写一个简单的JavaScript,在JS可用时将类添加到文档主体中并进行定义CSS这隐藏了必要的元素。那样的话我们可以很容易地让CSS做所有沉重的事国内通过遍历,我们为设计人员提供了一个钩子来以不同的方式设计非JavaScript和JavaScript版本。

JavaScript:


document.body.className = ‘js';

CSS:


/*脚本依赖样式*/

body.js # toc {
浮动:左;
宽度:20%;
右边距:5%;
}

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

BODY.JS DIV,BODY.JS.背面{
位置:绝对的;
左:-9999 px;
}

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


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

这确保了所有必要的元素最初都是隐藏的(03隐藏样式.html)。我们还指出,我们使用了off-left技术,而不是使用display来隐藏内容:none,因为这可以确保屏幕阅读器仍然可以访问它。

事件处理

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

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

CSS:


body.js展示{
职位:相对;
左:0;
}

JavaScript:


document.body.classname=(document.body.classname+“”'“)+'js';
var toc = document.getElementById(' toc');
如果(TOC){
功能切换(E){
var t = e.target;
if(t.nodename.tolowercase()=“a”)。{
var sectionid=t.getattribute('href').split('')[1];
var section = document.getElementById(sectionID);
如果(部分){
section.parentNode.className = 'show';
}

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

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


document.body.classname=(document.body.classname+“”'“)+'js';
var toc = document.getElementById(' toc');
如果(TOC){
无功电流=
功能切换(E){
var t = e.target;
如果(t.nodeName.toLowerCase()= a){
如果(current.section) {
current.section.classname='';
};
var sectionid=t.getattribute('href').split('')[1];
var section = document.getElementById(sectionID);
如果(部分){
section.parentnode.classname='显示';
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){
无功电流=
功能切换(E){
var t = e.target;
if(t.nodename.tolowercase()=“a”)。{
如果(current.section) {
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('click',toggle,false);
};
}();

简化维护

为了方便下一个开发人员接替我们的工作,然后,我们同意脚本本身不包含任何ID或类名,而是将它们移到自己的配置对象中。我们能覆盖的最后一步是移动CSSJavaScript生成自己的文档我们的例子完成了(07_final.html(最终版))以下内容:


var sectionCollapse = function(){

//开始配置-在这里编辑
变量配置={
jsAvailableClass:'js',
showClass:“秀”,
目录ID:'TOC'
}

/ /结束配置

document.body.classname=(document.body.classname+“”,“””,+config.jsavailableclass;
var toc=document.getElementByID(config.tocid);
如果(TOC){
无功电流=
功能切换(E){
var t = e.target;
如果(t.nodeName.toLowerCase()= a){
如果(current.section) {
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更容易维护的方法。我个人希望大多数人在开始编写代码之前就开始分析问题:)