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

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

“thehighlandfling08”类别的存档

不引人注目的例子,使用Twitter API的延迟加载标记

星期五,4月11日,二千零八

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

标记

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





不引人注目的例子,延迟加载twitterbadge





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





不引人注目的例子,延迟加载twitterbadge





它们的意思是:

  • 金额n定义要显示的tweets数量,n为整数
  • skin-name定义要使用的皮肤(目前为灰色和蓝色)
  • 用户信息定义如果用户的化身,应该显示名称和位置。

这个脚本

这是完整的脚本,我们将逐一介绍这些位。

twitterBadge=函数()。{
var CONFIG={
countDefault:5
徽章ID:'twitterbadge',
用户ID:'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('type','text/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?回调='+
'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.user id;
var img=document.createElement(“img”);
img.src=result[0].user.profile_image_url;
img.alt=result[0].用户名;
user.appendChild (img);
var ul = document.createElement(' ul');
var data = [' screen_name','name','location'];
对于(var i=0;数据[i];i++){
如果结果[0].user[数据[我]]){
var li = document.createElement(' li');
li.appendChild(document.createTextNode(result[0].user[data[i]]));
ul.appendChild(李);
}

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

var tweets=document.createElement('ul');
tweets.id=config.tweets id;
(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(tweets);
}

函数相对时间(时间值){
var值=时间_值.split(“”);
time_value =值[1]+ " " +值[2]+ ",“+值[5]+”“+值[3];
var parsed_date=date.parse(时间_值);
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) {
返回“少于一分钟前”;
}否则,如果(delta<120){
返回“大约一分钟前”;
} else if(delta < (60*60)) {
返回(parseInt(delta / 60)).toString() + ' minutes ago';
}否则,如果(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';
}

}
}

}
返回{
显示:显示,
init:函数()。{
head.appendChild(脚本);
}

};
}();
twitterBadge.init();

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

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


twitterBadge=函数()。{
var CONFIG={
countDefault:5
徽章ID:'twitterbadge',
用户ID:'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('type','text/css');
style.setAttribute (“href”config.styles[皮肤[1]]);
head.insertbefore(样式,head.firstchild);
}

然后我准备好了从课堂上阅读信息。我设置了一个文件头的快捷方式,并读取了要显示的tweets数量。如果没有amount-n类集,我将退回到默认值。

接下来是皮肤,我检查类是否已设置,如果是这种情况,我将创建一个指向右侧皮肤的新链接元素。我从配置样式对象中获取href。

注意我用了方法()将样式添加到文档的头部,而不是AppDead()。这在一定程度上确保了皮肤css文件不会覆盖其他样式表中的设置。最后一个包含的样式表将它们全部规则化。


var name = link.href.split(' /');
var resturl = ' http://twitter.com/statuses/user_timeline/' +
name[name.length-1]+'.json?回调='+
'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.user id;
var img=document.createElement(“img”);
img.src=result[0].user.profile_image_url;
img.alt=result[0].用户名;
user.appendChild (img);
var ul = document.createElement(' ul');
var data = [' screen_name','name','location'];
对于(var i=0;数据[i];i++){
如果结果[0].user[数据[我]]){
var li = document.createElement(' li');
li.appendChild(document.createTextNode(result[0].user[data[i]]));
ul.appendChild(李);
}

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

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


var tweets=document.createElement('ul');
tweets.id=config.tweets id;
(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(tweets);
}

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


函数相对时间(时间值){
[…]
}

}
}

返回{
显示:显示,
init:函数()。{
head.appendChild(脚本);
}

};
}();
twitterBadge.init();

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

下载和例子

你可以下载twitter徽章行动起来看看