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

您当前正在浏览课程材料类别的档案。必威体育简介

“课程材料”类别的存档

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

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

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

您可以在此处下载此中使用的所有文件:parisweb2007_工作坊.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%。(02yIEFix.HTML

第三步:脚本

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

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

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

JavaScript:


document.body.classname='js';

CSS:


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

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

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

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

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


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

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

事件处理

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

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

CSS:


body.js展示{
职位:相对;
左: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(“点击”,切换、虚假);
};

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


document.body.classname=(document.body.classname+“”'“)+'js';
var toc = document.getElementById(' toc');
如果(toc) {
无功电流=
功能开关(e){
var t=e.目标;
如果(t.nodeName.toLowerCase()= a){
如果(current.section) {
current.section.classname='';
};
var sectionID = t.getAttribute(' href').split(' #')[1];
var节=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.目标;
if(t.nodename.tolowercase()=“a”)。{
如果(current.section) {
current.section.classname='';
};
var sectionid=t.getattribute('href').split('')[1];
var节=document.getElementByID(sectionID);
如果(部分){
section.parentnode.classname='显示';
current.section=section.parentnode;
};
};
};
toc.addEventListener(“点击”,切换、虚假);
};
}();

使维护更容易

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


var sectionCollapse = function(){

//开始配置-在这里编辑
var CONFIG={
jsAvailableClass:'js',
展示类:'show',
tocID:“目录”
}

//结束配置

document.body.classname=(document.body.classname+“”,“””,+config.jsavailableclass;
var toc=document.getElementByID(config.tocid);
如果(toc) {
无功电流=
功能开关(e){
var t=e.目标;
如果(t.nodeName.toLowerCase()= a){
如果(current.section) {
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(“点击”,切换、虚假);
};
}();

结论

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