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

帖子标记“完成”

巴黎的Web 2007车间在不显眼的JavaScript的成绩单

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

这是一步一步的描述,伴随着“谦和JavaScript代码示例”研讨会在巴黎巴黎的Web 2007,法国。

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

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

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

第一步:分析任务和HTML

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

模板是一个链接列表(目录),指向页面下方的一组标题。这个想法是,游客可以点击目录(TOC)和向下移动文件。“回到顶部”链接让他们回去了。这个TOCID为“TOC”,后一类“背”链接。

我们有一块CSS在文档和末端的身体一个脚本块的头。在身体的末端有一个脚本块,确保所有HTML我们要达到我们的JavaScript时可用它得到执行。

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

Second Step: Knowing browser issues and using them to our advantage

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

这件事让我们有一个鲜为人知的Internet Explorer bugif you use your keyboard to tab through links pointing to anchors inside the page the page does jump there,but the keyboard focus does not move with it.最简单的解决办法是筑巢的锚元素内的元素哈斯布局.In our case we addeddiv每个标题和内容部分周围的元素,并将其宽度设置为100%()02yIEFix.HTML

第三步:脚本

我们拥有一切HTMLwe needed and the page already did what we wanted to.现在我们开始考虑如何覆盖默认行为并使其对我们有用。The main changes we wanted to do was:

  • Hide all the content sections
  • 隐藏链接我们不需要他们的时候,我们只是一个部分的内容
  • Show the content section connected with the link in theTOC当它被点击

我们讨论了这样做的不同可能性(循环通过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_hideandstyle.html)We also pointed out that we use the off-left technique instead of hiding the content with display:none as that makes sure it is still accessible for screen readers.

事件处理

这是我们用JavaScript和DOM.现在,我们需要了解如何显示单击适当链接时要显示的部分。我们需要使用事件处理,并将事件侦听器的不同元素。最初的参与者认为添加点击事件监听每一个事件,但经过使用人类豚鼠处理事件的想法(日常活动视频)我们发现有只需要申请一个单一的事件处理程序的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(点击,切换,假);
};

This made sure we can actually show the elements when we click on them but it also had the problem that we didn't hide the previously shown section.为此,我们需要存储信息并在调用toggle()时重置它。我提到过一个提示,使用对象来存储接口的状态总是一个好计划,因为这意味着您可以保留尽可能多的属性,而不需要引入更多的变量。The change was only a few lines storing the section in a current object and removing the class when there is already one set (05_keepingstate.html):


document.body.classname =(document.body.classname +”| |”)+“JS”;
var toc = document.getElementById(‘toc');
如果(TOC){
无功电流=
功能切换(e){
var t=e.目标;
如果(t.nodename。tolowercase() =“”){
如果(电流。段){
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):


无功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.classname='';
};
var sectionid=t.getattribute('href').split('')[1];
var节=document.getElementByID(sectionID);
如果(节){
section.parentnode.classname='显示';
current.section = section.parentnode;
};
};
};
TOC。addEventListener(点击,切换,假);
};
}();

使维护更容易

为了便于下一个开发者从我们这里接管,we then agreed to not have any ID or class names in the script itself but move them out to an own config object.我们能覆盖的最后一步是移动CSS与JavaScript进入自己的文件和我们的例子是(07L):


无功sectioncollapse = function() {

/ /启动配置–编辑在这里
var CONFIG={
jsAvailableClass:'js',
展示类:'show',
ToCID:“Toc”
}

//结束配置

document.body.classname=(document.body.classname+“”,“””,+config.jsavailableclass;
var toc=document.getElementByID(config.tocid);
如果(TOC){
无功电流=
功能切换(e){
var t=e.目标;
如果(t.nodename。tolowercase() =“”){
如果(电流。段){
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(点击,切换,假);
};
}();

结论

我希望参加者有洞察如何可以使CSSand JavaScript can work together,and 必威体育下载learnt some ways to make their JavaScript easier to maintain.我个人最想得到的人开始分析问题开始前的代码:)