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

您当前正在浏览json类别的归档文件。必威体育简介

“JSON”类别的存档

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

星期五,4月11日,2008

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

标记

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





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





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





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





它们的意思是:

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

这个脚本

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

twitterBadge=函数()。{
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?回调='+
'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 i=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/' +用户名+ '
'/status/'+结果[i].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(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';
}否则,如果(delta<(48*60*60))。{
返回“1天前”;
其他}{
返回(parseInt(delta / 86400)).toString() + ' days ago';
}

}
}

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

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

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

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


twitterBadge=函数()。{
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];
如果(链接){

我测试了徽章,它包含一个链接,因为这是我们从中获取所有配置数据的地方。


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类集,则返回默认值。

接下来是皮肤,我检查类是否被设置,如果是这样,我创建一个新的链接元素指向正确的皮肤。我从配置样式对象中获取href。

注意我使用方法()将样式添加到文档的头部,而不是列表末尾()。这在一定程度上确保了皮肤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属性)并组装休息获取Twitter数据的URL。通常我会将新的脚本节点直接向后添加到头部,但歌剧院不喜欢这样。


函数显示(结果){
如果(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方法休息API回调。我检查是否设置了userinfo并相应地创建了标记。没有什么了不起的。


var tweets = document.createElement(' ul');
tweets.id=config.tweets id;
对于(var i=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/' +用户名+ '
'/status/'+结果[i].id);
link.appendChild (document.createTextNode (relative_time(结果[我].created_at)));
li.appendchild(链接);
tweets.appendChild(李);
}

badge.appendchild(tweets);
}

接下来我得到tweet信息,整理一个列表并将其添加到徽章中。


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

}
}

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

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

相对时间法实际上是从最初的twitter徽章中提取的,并计算twitter有多旧。我以一个定义公共方法(仅在本例中)的return语句结束模块显示)并添加脚本节点以调用休息API在init方法中。这只对修复Opera问题是必要的。

下载和例子

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

歌剧,REST api,模块模式和生成的脚本节点

星期五,4月11日,2008

我刚在歌剧里遇到一件烦人的事。我喜欢使用模块模式来设计我的javascript,我喜欢动态生成脚本节点其他美联社这是还给我的吗JSON。以下使用Twitter的示例API在Firefox和Safari上运行良好(稍后需要检查IE,但如果没有,我会很惊讶的):



然而,如果在Opera中测试此项,则会得到一个错误:


JavaScript文件:/ / localhost /应用程序/ MAMP /根/ operacallbackfail.html
内联脚本线程
错误:
名称:引用错误
消息:第1行的语句:引用未定义的变量:twitterbadge
回溯:
链接脚本http://twitter.com/statuses/user_timeline/codepo8.json?
twitterbadge.show([用户:屏幕名称:“codepo8”,…08“]);

看起来新生成的脚本节点在创建模块之前调用模块的方法。换句话说,新生成的脚本节点停止执行生成它们的代码。下面的例子适用于不同的浏览器,包括歌剧:



不太可怕的解决方法,但是必须有一个额外的方法和另一行调用它,这感觉是错误的。

自己试试吧:动态脚本节点和模块模式的Opera bug

flickr trackr -我的第一次尝试和尝试iPhone/iPod touch

周四,2月14日,2008

前几天,当我收到苹果公司寄来的一个厚厚的信封时,我非常惊讶。史蒂文•Woolcock欧洲的野生动物福音传道者送我一个iPod touch来玩,因为我抱怨说不能测试他告诉我的东西。现在,就像其他任何一个12岁的小男孩在吃糖的时候会做的那样,我开始研究这个新玩具,这是我的第一个结果:

使用FlickRTrackr在iPhone上搜索的演示

代码现在很脏,但这就是诀窍。感谢史蒂文借给我的iPod Touch,大卫·多沃德,Neil Crosby和Michele Gera负责现场测试,Norm负责给我他的手机截图

你觉得呢?整个事情当然是知识共享,你可以下载源代码包

使用javascript检索当前URL的del.icio.us标记

星期一,2月11日2008

如果你向下滚动这个博客的旧条目,你会发现有一个新功能,即一个显示阅读器标签和del.icio.us链接的框:

带有del.icio.us链接的标签列表的屏幕截图

这不是WordPress插件(虽然它很容易做,如果没有做过,我会很惊讶),而是纯JavaScript。你也可以下载执行此操作的脚本并使用下面的嵌入到任何页面,你想知道美味的数据:




这里没有太多的魔法,我基本上加快了速度del.icio.us站点上的示例中,缩小和嵌入式保罗·约翰逊的执行MD5型在JavaScript中创造了必要的HTML

HTML结构内部DIV将是一个定义列表,其中的标记为dd,文本为dt,以及带有链接的段落。您可以使用#deliciousinfo ID对其进行样式化。

我喜欢这样的结果,而且我总是惊讶于我的文章的读者们会给出什么样的好标签。如果你想知道,获取src评论版检查里面的信息。

我要为此创建一个WordPress插件吗?

如果你想知道标记器的区别是什么,没有太多,我只是忘了……

亲爱的API的开发人员,这是我想要的

周三,11月7日,2007

Slideshare的乔纳森我的幻灯片共享显示小部件我喜欢我的黑客行为API通过重用RSS饲料。他现在在评论中问我想从一个API。好吧,这里是:

  1. 允许“黑客”网址,与输出的定义。Flickr和del.icio.us就是很好的例子,尤其是del.icio.us选项,它为JSON:http://del.icio.us/feeds/json/codepo8获取JSON数据包装在一个美味的对象,http://del.icio.us/feeds/json/codepo8?生的给我生的JSON数据和http://del.icio.us/feeds/json/codepo8?raw&callback=foo将其包装在对foo()的函数调用中。这石头!将输出定义为最后一个参数也是如此。Flickr做得很好http://api.flickr.com/...format=json对于JSON,http://api.flickr.com/...format=rss对于RSS,http://api.flickr.com/...format=lol对于小猫咪图片
  2. 确保JSON输出很容易使用,没有任何恼人的比特(编码)HTML或命名空间属性-flickrJSON对我来说是无意义的重量)
  3. 使URL尽可能符合逻辑,例如,我不喜欢在flickr中使用用户ID,而可读性强的用户名更容易做到这一点。
  4. 如果能够将惟一ID作为参数发送,以便将返回的数据匹配到调用,那就太好了(因为动态创建的脚本节点和Ajax调用都可能以任意顺序返回)

然而,所有这些都不能取代现实API,哪个应该

  1. 请允许我只定义我需要的数据位(并将其缩减到尽可能小的提要—没有twitter,150 kbJSON不好!)
  2. 当我检查开发人员ID时,给我一些额外的东西。给我免费的数据怎么样API)当我构建一个使用我的ID-我们现在这样做是为了控制使用。在第二阶段,这也可以用于收入共享计划。
  3. 提供强制认证之类的服务(你知道你不想给你母亲看的照片)
  4. 允许使用本地缓存方法(例如,传递gzipped数据)
  5. 允许我访问打开休息电话不(我的集合,我最喜欢的,我的联系人,我的配置文件设置)
  6. 读和写-我想建立小部件,让数据输入从我的博客到您的系统,不离开它。

还有别的吗?