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

您当前正在浏览必威体育下载克里斯蒂安·海尔曼七月的博客必威体育简介档案,2008。

7月存档,二千零八

缺失的本地DOM方法-根据我的课程参与者

星期四,7月31日,二千零八

在课程中,我目前正在桑尼维尔讲授DOM我问参加者,在本地似乎缺少哪些方法。DOM这就是我们提出的:

  • 创建链接(URL,文本)–一种创建链接的快捷方法,其中包含一个文本节点–在创建接口时,您经常需要做的事情
  • 插入后(newnode、oldnode)有一个插入之前,但没有插入器
  • 删除模式(节点)-本地人搬迁儿童卷曲
  • textElement(元素名称,文本)–似乎没有必要创建元素,然后创建一个文本节点并应用它,这可能是一步
  • AdScript(URL)–懒惰地加载javascripts
  • normalizenode(节点)–消除干扰下一步先辈同胞
  • 获取文本(节点)–检索文本节点或元素节点的文本内容
  • settext(节点,文本)–无论节点类型如何设置文本

我要求参加者每人提出一个方法,并向他们展示,我们得到了:


jukuhelpers=function()
函数createLink(url,text,cssclass)
var link=document.createElement('a');
if(typeof url='string')
link.setattribute('href',URL);
}

if(typeof text='string')
link.appendChild(document.createTextNode(text));
}

if(typeof cssclass='string')
link.classname=cssclass;
}

返回链路;
}

函数插入后(newnode,oldnode)
旧节点.nextisbling
?oldnode.parentnode.insertbefore(newnode,oldnode.nextisbling)
:oldnode.parentnode.appendchild(newnode);
}

函数removenode(node)
如果(节点){
node.parentnode.removechild(节点);
}

}
函数textfelement(elementname,text)
if(typeof text='string')
var txtelement=document.createElement(元素名称);
var txtnode=document.createTextnode(文本);
txtelement.appendchild(txtnode);
}

返回txtelement;
}

函数addscript(url)
var s=document.createElement(“script”);
s.setattribute('类型','文本/javascript');
s.setattribute('src',URL);
var head=document.getElementsByTagname('head')[0];
头。附属物;
}

函数getText(node)
VAT-TXT;
if(node&&node.nodeType=1)
if(node.hasChildNodes())
txt=node.firstchild.nodeValue;
}

}
if(node&&node.nodeType=3)
txt=node.nodeValue;
}

返回TXT;
}

功能设置文本(节点,文本)
if(node&&node.nodeType=1)
if(node.hasChildNodes())
node.firstchild.nodeValue=文本;
}

否则{
node.appendChild(document.createTextNode(text));
}

}
if(node&&node.nodeType=3)
node.nodeValue=文本;
}

}
函数normalizenode(node)
if(node.hasschildnodes)
var spacetest=/^s+$/;
var children=node.childnodes;
对于(var i=0;children[i];i++)
if(children[i].nodeType==3)
if(spacetest.test(children[i].nodevalue))
children[i].parentnode.removechild(children[i]);
}

}
}

}
}

返回{
createLink:创建链接,
插入后:插入后,
重塑模式:重塑模式,
textfelement:文本元素,
addscript:添加脚本,
获取文本:获取文本,
设置文本:设置文本,
Normalizenode:标准化node
}

}();

你可以得到JukelSelp.Js如果您想自己使用它,请归档。

还有什么遗漏或者有什么问题吗?

Yui探员–不要错过这些Yui教程

星期日,7月27日,二千零八

我尊敬的大学克劳斯科曼达像我一样花很多时间为大众写一些很酷的东西,但不知怎么的,他并没有出现在很多阅读清单中。羞耻,我说,把我的裤子拉到腋下(是的,我看着辛普森一家)我指给你看,尊敬的读者对一系列文章的解释悠悠自下而上的有权代理人悠悠

对,我也喜欢他们,因为我很喜欢邦德。

在山谷中培训新开发人员-第3天

星期日,7月27日,二千零八

第三天,我们深入研究了DOM以及如何访问和创建当前文档中的内容。我很快意识到的一件事是教学DOM在Firebug出现之前,您可以将组从一个属性引导到另一个属性,从一个方法引导到另一个方法。使用Firebug,他们可以更快地发现可以做什么,并且可以得到很多Firefox提供的东西,但不是标准的。

我们学习了基础知识-设置属性以及与较短的属性表示法(msie将expando属性视为属性,为了删除它们,必须同时为属性和对象属性空)。

然后我们很快地创建元素创建节点并发现有必要以某种方式将它们应用到文档中,以使它们出现。
这导致插入之前附属儿童我们发现没有插入器,这是一个逻辑错误DOM.
作为一种补救办法,我要求小组自己写插入器,这是一个很好的练习,可以重复遍历子节点以及使用创建方法。当然,有几种写作方法插入器,但当我看到其中一位与会者提出一个我没想到的问题时,我非常震惊:


函数插入后(newelm,elm)
var clone=elm.clonenode(真);
elm.parentnode.insertbefore(克隆,elm);
elm.parentnode.replaceChild(新elm,elm);
}

我对它的性能不太确定,但我很喜欢它的逻辑:这样,无论旧节点在哪里(最后一个节点,第一个或中间的某个地方)。这也意味着你不需要用叉子插入之前附属儿童分别。

我们所经历的其他示例是删除具有特定类的节点(以显示在迭代NODLIST以及删除元素)并编写一个简单的表单验证脚本,在强制字段为空时更改其标签。

我用杰森del.icio.us的输出美国石油学会要写出书签和标签列表:


在另外一个步骤中,我要求团队不要打电话给美国石油学会在自己的脚本标记中逐步增强链接并动态创建脚本标记:

我的美味链接


然后我们对DOM方法及其参数顺序(“为什么document.insertbefore(oldnode,newnode)不可能,但我们需要oldnode.parentnode.insertbefore(newnode、oldnode)??)并提出了DOM本机方法:

  • 创建链接(URL,文本)
  • 插入后(newnode、oldnode)–与本地人一致DOM不一致性
  • 删除模式(节点)
  • textElement(元素名称,文本)
  • AdScript(URL)
  • normalizenode(节点)–删除空白
  • 获取文本(节点)
  • settext(节点,文本)

这张单子也是课程作业,我们将在周一查看结果。

在山谷中培训新开发人员-第2天

星期五,7月25日,二千零八

在当前Juku计划的第二天,我们介绍了DOM脚本:属性,节点属性以及如何以某个节点为起点在文档中导航(NextSibling、Previoussing、ParentNode、ChildNodes…)。

  • 我们还详细讨论了节点类型以及如何识别元素和文本节点,其中当然提出了空白的概念HTML就像烦人的“节点噪音”。
  • 我们讨论了element.attribute和element.getattribute(attribute)之间的区别,尤其是在读取链接的href属性时。
  • 我们在白板上做了一个脚本规划会议,分析了HTML找出最短到达某一元素的方法,讨论各种方法。
  • 我们讨论了对Style属性的操作,其危险性(混合介绍和结构,损害可维护性)及其良好用途(使用offsetheight创建相同高度的柱)。
  • 我们通过动态添加CSS类及其相关问题(测试现有类)
  • 我们在削减你的DOM以最低的形式编写脚本,通过使用getElementsByTagname而不是遍历节点树来避免大型循环和条件测试。
  • 我们通过操作nodeValue属性来覆盖文本节点内容的更改。

今天我们将使用DOM.

在硅谷培训新开发人员-第一天

星期四,7月24日,二千零八

我现在在森尼维尔,加利福尼亚州教一群聪明的年轻人DOM悠悠.我是雅虎Juku项目(旁边)罗斯哈姆斯和道格拉斯·克罗克福德)进行为期12天的强化课程。自然地,这让我很忙,而且我没有那么多的时间去写博客——或者说我是这么想的。事实上,我认为每天做一份关于我们在这里报道的内容的报告并没有什么害处,作为对我自己的提醒,也许是对你自己培训课程的启发。

第一天对我来说是一个传统的日子,来测试水,看看我的训练风格如何适合团队。我讨厌坐在有大量活页夹的讲座式培训中,在其中穿插着比任何有用的都更能打招呼的编码练习。相反,我更倾向于实际操作的风格,我试图让与会者组成和运行大部分课程,通过指导和帮助我来帮助他们。这门课程有一个总体的总体计划(你必须在Y的时间内完成X的内容量,毕竟),但根据主题的不同,每一天可能会有很大的不同。我通常不会尽可能多地使用电脑(因为它会导致人们四处冲浪,并因工作邮件而分心),但在这种情况下,这是很难做到的。

我认识与会者,问他们是谁,他们做什么,他们为什么在这里,他们想从课程中得到什么。我很高兴听到,虽然小组成员的学科知识水平差异很大,他们都想“学习如何在现实世界中应用事物”必威体育下载,“深入了解浏览器如何处理DOMDOM脚本编写

我先解释一下DOM脚本不仅仅是操作DOM但是我们创造了这个词(在现在已经不存在的黄蜂工作组中)作为DHTML发展。我再次重申了分离开发层的需求和渐进增强背后的思想。

  • 我们设置了一个有效的HTML文件,解释任何文档成为一个文档所需的内容–doctype,标题,编码,语言,阅读方向和所有必要的元素。
  • 我们讨论了样式和脚本的放置位置以及它们的位置对性能的影响。
  • 然后我们去了解必威体育下载DOM,设置并使用Firebug进行播放,并查看getElementByID()和getElementsByTagname()。
  • 我们讨论了优化循环和迭代结果HTML在不牺牲可维护性或性能的情况下,尽可能少地使用代码的集合。
  • 我们开始阅读HTML发现了类和for等保留字的痛苦
  • 最后,我们创建了自己的getElementsByClassName函数。

最后一个方面特别有趣,因为我故意让函数的规范保持松散,并要求团队在投入使用之前在白板上计划它。围绕规划的讨论表明,有数百万种方法来解决这个问题,如果你把来自UI中心的开发人员和硬核C++开发人员混合在一起,你会得到同样的问题的有趣方法。

你可以看到不同团队的结果在本文档中.不同的例子用快速评论技巧所以要尝试一下,只需在函数前面的/*前面添加另一个斜线。

第二天就要开始了…