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

贴有“domscripting”标签的帖子

使用viewshandler创建逐步增强的DOM应用程序

星期二,8月19日,二千零八

上个月我教了一群学生DOM并解释了渐进式改进,他们对这些想法很满意,但正确地说DOM脚本编写会变得冗长和重复。这是我想写的时候维克桑德勒,一个小框架DOM应用。

viewshandler不是一个javascript模板引擎,正如我发现的,当你必须创造很多HTML具有DOM,应用程序中发生变化的部分并不多。模板化引擎将取代整个视图,相反,viewshandler提供给你创建HTML,将其添加到外壳或应用程序画布,并存储对更改部分的引用。这样你只会创造HTML一次然后只对缓存进行细微更改DOM必要时提供元素。

作为演示,我创建了一个使用viewshandler的Flickr幻灯片放映这正是我给班级的任务:)

你怎么认为?

缺失的本地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(文本));
}

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];
head.appendChild(年代);
}

函数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){
如果(spaceTest.test(孩子[我].nodeValue)) {
children[i].parentnode.removechild(children[i]);
}

}
}

}
}

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

}();

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

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