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

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

“json”类别的存档

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

星期五,4月11日,2008

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

标记

而不是HTML当JavaScript可用时,容器将被植入真实数据,当JavaScript不可用时,容器将变得毫无意义,我想建立在HTML如果不编写脚本并从中获取脚本所需的所有信息,这是有意义的。





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





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





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





它们的意思是:

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

这个脚本

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

twitterBadge=function()
var config = {
countDefault: 5
徽章ID:'twitterbadge',
用户ID:'twitterbadgeuser',
tweetsID:“twitterbadgetweets”,
用户信息:'userinfo',
stylesmatch: /皮肤- (w +) /
(amountmatch:/数量)- d + /,
样式:{
“灰色”:“twitterbadge.css”,
'blue':'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[skin[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=['屏幕名称','名称','位置'];
对于(var i=0;数据[i];i++)
if(结果[0].user[data[i]])
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(相对时间(结果[i].已创建时间));
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);
如果(delta<60)
返回“不到一分钟前”;
否则,如果(delta<120)
返回“大约一分钟前”;
} else if(delta < (60*60)) {
return(parseInt(delta/60)).toString()+“分钟前”;
否则,如果(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=function()
var config = {
countDefault: 5
徽章ID:'twitterbadge',
用户ID:'twitterbadgeuser',
tweetsID:“twitterbadgetweets”,
stylesmatch: /皮肤- (w +) /
(amountmatch:/数量)- d + /,
样式:{
“灰色”:“twitterbadge.css”,
'blue':'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('type','text/css');
style.setattribute('href',config.styles[skin[1]]);
head.insertbefore(样式,head.firstchild);
}

然后我准备好了从课堂上阅读信息。我设置了一个文件头的快捷方式,并读取了要显示的tweets数量。如果没有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=['屏幕名称','名称','位置'];
对于(var i=0;数据[i];i++)
if(结果[0].user[data[i]])
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 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(相对时间(结果[i].已创建时间));
li.appendchild(链接);
tweets.appendChild(李);
}

badge.appendchild(tweets);
}

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


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

}
}

返回{
表演:表演,
init:函数()
head.appendChild(脚本);
}

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

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

下载和例子

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

歌剧,休息API模块模式和生成的脚本节点

星期五,4月11日,2008

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



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


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

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



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

自己试试:带有动态脚本节点和模块模式的Opera Bug

Flickr Tracker–我的第一次尝试和使用iPhone/iPod touch

周四,2月14日,2008

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

使用FlickRTrackr在iPhone上搜索的演示

代码现在很脏,但这就是诀窍。感谢史蒂文借给我的iPod Touch,David DorwardNeil 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日,二千零七

Slideshare的Jonathan Boutelle反应我的幻灯片共享显示小部件喜欢我在美国石油学会通过重新使用RSS饲料。他现在在评论中问我想从一个美国石油学会。好,下面是:

  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/…格式=json对于JSONhttp://api.flickr.com/…格式=rss对于RSShttp://api.flickr.com/...format=lol对于洛尔卡
  2. 确保JSON输出很容易使用,没有任何恼人的比特(编码)HTML或命名空间属性–中的描述属性flickrJSON例如,对我来说是毫无意义的重量)
  3. 使URL尽可能符合逻辑,我不想使用Flickr中的用户ID,例如,当易读的用户名更容易操作时。
  4. 如果能够将惟一ID作为参数发送,以便将返回的数据匹配到调用,那就太好了(因为动态创建的脚本节点和Ajax调用都可能以任意顺序返回)

然而,所有这些并不能取代真正的美国石油学会,应该

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

还有别的吗?