必威体育下载基督教Heilmann

您目前正在浏览档案的highlandfling08类别。必威体育简介

“thehighlandfling08”类别的存档

一个不显眼的例子,使用Twitter API的延迟加载标记

星期五,4月11日,2008

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

标记

而不是HTML当JavaScript可用时,容器将被植入真实数据,当JavaScript不可用时,容器将变得毫无意义,我想在上面建HTML这是有意义的,没有脚本,并得到所有的信息,我的脚本需要从那里。





一个不显眼的例子,延迟加载twitterbadge





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





一个不显眼的例子,延迟加载twitterbadge





它们的意思是:

  • amount-n定义以n为整数显示的tweet的数量
  • skin-name定义你想要使用的皮肤(现在是灰色和蓝色)
  • 用户信息定义如果用户的化身,应该显示名称和位置。

这个脚本

这是完整的脚本,我们将一个一个地看一遍。

twitterbadge = function(){
var config = {
countDefault: 5
badgeID:“twitterbadge”,
用户标识:“twitterbadgeuser”,
tweetsID:“twitterbadgetweets”,
用户信息:用户信息,
stylesmatch: /皮肤- (w +) /
(amountmatch:/数量)- d + /,
风格:{
“灰色”:“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”、“样式表”);
style.setAttribute('类型','文本/ css ');
style.setAttribute (“href”config.styles[皮肤[1]]);
head.insertBefore(风格,head.firstChild);
}

var name = link.href.split(' /');
var resturl = ' http://twitter.com/statuses/user_timeline/' +
name[name.length-1] + ‘.json?callback=' +
‘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.userID;
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 = 0;数据[我];我+ +){
如果结果[0].user[数据[我]]){
var li = document.createElement(' li');
li.appendChild(document.createTextNode(结果[0].user[数据[我]]));
ul.appendChild(李);
}

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

var tweets = document.createElement(' ul');
tweets.id = config.tweetsID;
(var = 0,j = result.length;i var username = result[i].user.screen_name;
var li = document.createElement(' li');
var span = document.createElement(' span');
span.innerHTML = result[i].text+' ‘;
li.appendChild(跨度);
var link = document.createElement(' a');
link.setAttribute(' href','http://twitter.com/' +用户名+ '
' /状态/[我].id)+结果;
link.appendChild (document.createTextNode (relative_time(结果[我].created_at)));
li.appendChild(链接);
tweets.appendChild(李);
}

badge.appendChild(微博);
}

函数relative_time(time_value){
var values = time_value.split(" ");
time_value =值[1]+ " " +值[2]+ ",+值[5]+ " " +值[3];
var parsed_date = Date.parse(time_value);
var relative_to = (arguments.length > 1)?参数[1]:new Date();
var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
= delta + (relative_to.getTimezoneOffset() * 60);
if (delta < 60) {
返回“少于一分钟前”;
} else if(delta < 120) {
返回“大约一分钟前”;
} else if(delta < (60*60)) {
返回(parseInt(delta / 60)).toString() + ' minutes ago';
} else if(delta < (120*60)) {
“大约一小时以前”回来;
} else if(delta < (24*60*60)) {
返回' about ' + (parseInt(delta / 3600)).toString() + ' hours ago';
} else if(delta < (48*60*60)) {
返回“1天前”;
其他}{
返回(parseInt(delta / 86400)).toString() + ' days ago';
}

}
}

}
返回{
显示:显示,
初始化:函数(){
head.appendChild(脚本);
}

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

我正在使用显示模块的模式保持代码简短,避免全局回调方法。然而,有一点在模块模式中生成脚本节点的Opera oddity所以我们要用一个额外的来偏离标准init()方法调用后的主模块。

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


twitterbadge = function(){
var config = {
countDefault: 5
badgeID:“twitterbadge”,
用户标识:“twitterbadgeuser”,
tweetsID:“twitterbadgetweets”,
stylesmatch: /皮肤- (w +) /
(amountmatch:/数量)- d + /,
风格:{
“灰色”:“twitterbadge.css”,
“蓝”:“twitterbadgeblue.css”
}

};

这里我们使用了所有的id,中获取数据的样式名称和相应的文件名以及正则表达式CSS类名。所有的id和类都是定义自己皮肤的钩子。还有一个countDefault变量定义未设置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”、“样式表”);
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/statuses/user_timeline/' +
name[name.length-1] + ‘.json?callback=' +
‘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.userID;
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 = 0;数据[我];我+ +){
如果结果[0].user[数据[我]]){
var li = document.createElement(' li');
li.appendChild(document.createTextNode(结果[0].user[数据[我]]));
ul.appendChild(李);
}

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

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


var tweets = document.createElement(' ul');
tweets.id = config.tweetsID;
(var = 0,j = result.length;i var username = result[i].user.screen_name;
var li = document.createElement(' li');
var span = document.createElement(' span');
span.innerHTML = result[i].text+' ‘;
li.appendChild(跨度);
var link = document.createElement(' a');
link.setAttribute(' href','http://twitter.com/' +用户名+ '
' /状态/[我].id)+结果;
link.appendChild (document.createTextNode (relative_time(结果[我].created_at)));
li.appendChild(链接);
tweets.appendChild(李);
}

badge.appendChild(微博);
}

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


函数relative_time(time_value){
[…]
}

}
}

返回{
显示:显示,
初始化:函数(){
head.appendChild(脚本);
}

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

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

下载和例子

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