青青子衿, 悠悠我心, 但为君故, 沉吟至今
微博应用布局及Twitter代表应用分析
　　2011年无疑是个微博发力年，随着众多优秀开发者的涌入，微博开放平台将会涵盖包括客户端等基本工具、关系链管理、富媒体、社交游戏、生活类、商务类应用等满足用户各种需求的第三方应用。本文结合了Twitter现有应用类型对2011年国内微博开放平台第三方应用布局进行了预测，针对各种应用类型分析了Twitter较知名的代表应用。　　由于目前国内微博应用尚在起步阶段，此列表涉及的很多领域尚无对应的&国产&应用。期待广大开发者齐心合力完善此表，在下次笔者更新时能替代twitter的应用。各位开发者可与笔者联系，提供此列表下对应的国内应用案例。　　继上篇《》发表后与一些开发者交流，大家对于国内微博开放平台都抱有一个共同的态度：对未知领域的密切关注及谨慎观望。往前看Twitter成功的应用不胜枚举，如Tweetdeck以3千万美元被收购、Seesmic三次融资1千6百万美元、HootSuite融资190万美元等，但在其开放平台巨大光环笼罩着的数量过7万的第三方应用中默默无闻的还是占大多数。1、basic
社交媒体管理平台，采用了Klout开发的计算互联网影响力的算法，帮助企业根据其关注者在Twitter上的影响力来分类这些关注者，更好地与关注者进行沟通。如果某品牌拥有大量关注者，有助于找出最有用的Twitter消息或是潜在客户
支持iphone、andoid
很好的与企业服务结合，进行多个帐号管理及提供有针对性的企业服务，该应用服务商已于2月初以3000万美元的现金和股票被UberMedia。类似应用还有CoTweet及Salesforce等整合Twitter的应用都值得尝试，这是一个拥有大量机会的领域。
支持iPhone、iPod Touch，最受欢迎的20个Twitter应用排名第2，月独立访客285,864
提供趋势监控服务，在突发事件的报道中，Twitter社区往往会领先传统媒体一大步。而Twitscoop这类服务即可收集任意时段最受欢迎的Twitter主题，然后将这些主题以&文字云&的方式组合起来，频率最高的主题会以最大的字号显示。
支持iPhone和 iPod Touch
Twitturly&
列出关于这个话题的所有Tweets，还包括过去24小时的Tweest数，上周总共的tweets数，过去一个月的Tweets数。用户可以据此来判断这个话题的热门程度。还有估算的此话题被阅览的次数（这个貌似是按照发布此Twitter用户的Follow用户数来估算的）
最受欢迎的20个Twitter应用排名第6，月独立访客88,793
Twitter关键词实时监测服务，同时搜索3个关键词，并且无论何时一个拥有这些关键词的新文章发布，它都能够自动更新。
最受欢迎的20个Twitter应用排名第17，月独立访客25,433
为用户提供个性化的背景服务，可作为一张个性化的名片，利用页面背景来展示自己的工作地点等信息。
&2、关系链&& & &
针对twitter上的企业、服务商和应用而收集的一个商家目录。Twibs皆在建造一个地方、分类及产品级别的权威平台，便于人们寻找、跟随甚至与twitter商家进行沟通
最受欢迎的20个Twitter应用排名第18，月独立访客17,168
Twitterholic
首页排行榜列出前100名最热门的用户，并长期汇总统计数据，通过它可以确切知道用户加入Twitter的时间以及自加入之日起他所积累的跟随者的数量。它还会列出跟随者最多的用户并建议其他用户跟随这些热门用户。
最受欢迎的20个Twitter应用排名第5，月独立访客147,164
Follower Wonk
显示多达3个用户的共同好友和追随者
在寻找志趣相投的用户这方面，MrTweet被誉为是最准确的工具之一。你只需在Twitter上跟随它即可。它会汇总你的各类信息，与其他用户的相比较，最后为你推荐合适的用户，且详细显示了其Twitter信息，包括该用户的个人基本信息、Following和Followers数量、更新频率以及同时Follow的Twitter用户等
几乎每个公司都会有一本本行业的黄页，Twellow就是twitter中的黄页，可以在里面很精准地找到你所关注行业的twitter帐号去follow.
Who should i Follow&
是一个帮助你寻找新的twitter好友的工具, 输入你的Twitter名称, 它会根据你的Twitter好友们所关注的人来给出建议结果名单, 比如某个人被你的10个Twitter好友所关注, 就会被建议.& 在结果页面还有滑块选项, 你可以通过拖动滑块来设置关注流行度和所在地域,
Followers管理服务，可以查看你的Follow了多少人，列出哪些人Follow你了而你还没有Follow他们的，你可以进行批量处理（选择Follow），可以批量忽略。
最受欢迎的20个Twitter应用排名第11，月独立访客51,304
WeFollow是一个Twitter用户目录网站，能动态创建类别，并且告诉你谁将自己归到哪一类中，你也可以查找任何领域内的专家或者在这些类别中寻找更多值得跟随的人。
Listorious
根据给定的话题发现最好的Twitter列表，也可以帮助列表创建者发布他们的列表。Listorious有很多目录、主题、榜单、标签让你很容易就找到自己关注的人，你可以follow他们或是看看他们在哪些列表或是看看他们创建了哪些列表。
针对twitter上的企业、服务商和应用而收集的一个商家目录。Twibs皆在建造一个地方、分类及产品级别的权威平台，便于人们寻找、跟随甚至与twitter商家进行沟通
最受欢迎的20个Twitter应用排名第18，月独立访客17,168
&3、富媒体
基于Twitter的图片分享应用。该应用已于2月份宣布将核心产品扩大到图片以外的内容格式，支持用户通过TwitPic网站、移动和桌面客户端上传视频。TwitPic是一个基于Twitter的媒体内容共享平台，成立于2008年2月，目前拥有1700万美元，而且每天新增3万用户，该品牌已传播到全球，甚至出现在流行歌曲歌词中。
最受欢迎的20个Twitter应用排名第1，月独立访客1,236,828
一款专注于音乐分享的微博客服务，用户可以从Blip.fm提供的音乐库中搜索歌曲或者歌手，并且将喜欢的音乐加入列表并添加简短评论，还可查找品味相同的用户
基于Web的即时屏幕录制服务，够在线录制你的电脑屏幕大约长达5分钟左右的视频，类似的产品还包括 Screenjelly 、 Screencast-O-Matic 、 Jing、ScreenToaster、GoView 等等。
&4、社交游戏&&
一款结合LBS的应用，用户在实际生活中签到获得徽章、优惠，与朋友分享位置信息。
支持iPhone Android, iPad，最近很流行的LBS移动方向应用
Hot Potato
中文应该叫&烫手山芋&吧，这个小游戏我觉得很有意思，用户间可以通过转发的方式传递这个&烫手山芋&，每个用户只有15分钟的时间转发，如果某人时间过了没发出去就会自动被山芋砸在脸上。
140InABottle
与姓名大作战（）类似的应用
姓名大作战使用人数已达120225，新浪微博最受欢迎的应用之一
Twittervision
整合了Twitter与Google Maps两个网站的服务，它将Twitter网站上一堆网友们相互聊天的內容发布在Google Maps的世界地图上，几乎每隔两三秒就会更新一则最新的Twitter信息。
最受欢迎的20个Twitter应用排名第15，月独立访客30,708
提供趋势监控服务，在突发事件的报道中，Twitter社区往往会领先传统媒体一大步。而Twitscoop这类服务即可收集任意时段最受欢迎的Twitter主题，然后将这些主题以&文字云&的方式组合起来，频率最高的主题会以最大的字号显示。
支持iPhone和 iPod Touch
Retweetist
可以看到最新的Twitter状态被retweet的实时排名。
最受欢迎的20个Twitter应用排名第8，月独立访客60,051
10年前，PayPal的诞生使得在线支付蔚然成风。而TipJoy则希望进一步简化交易流程。在TipJoy中输入自己的信用卡信息和PayPal账户后，用户仅需在Twitter上发布一条带有简单代码的信息，即可将钱汇入到好友、企业或慈善机构的账户内。该公司最初由Y Combinator资助，最近又获得了Betaworks的支持。该服务会向用户收取3%的手续费，公司首席执行官阿比-克里金（Abby Kirigin，见上图）预计，TipJoy将于今年年底实现盈利。
结合LBS的可放到地图上的评价系统，令所有地图上的东西，包括地铁口、公园、停车场、站立的位置等等都可以被评价，兼具社区功能。结合手机定位系统，可以很方便的知道附近都有哪些朋友，并在手机地图上一一标出他们的位置。
支持Iphone、android移动方向的应用很值得关注
热门及公益事件
通过 Twitter 举办活动，在活动中进行交流
显示出上百个城市的聚会并且允许用户在它的界面上直接回复。
支持非营利性慈善事业，其每周推荐一个项目，通过用户捐款筹集慈善基金，有超50万粉丝。经验：1）简短的任务消息2）及时提供结果3）用户微薄投入和大量转发4)商家支持，如eBay、哈根达斯的合作
随着随手拍照解救乞讨儿童 受到关注，微博是否会出现类应用？
最热门的问答型社交类网站，代表了用兴趣图谱对用户的社交图谱进行分层的技术趋势。用户不仅可以用不同的人分类，还可以用话题和问题分类。它根据用户的兴趣来定义世界，而不仅仅是用户认识或崇拜的人来定义。已获八千六百万美金风投
与微博完美结合，用户自我展示需求得到满足
&6、商务&客户
Klout是一家衡量Twitter用户影响力指数的创业公司，将把用户在Facebook和Twitter上的影响力合二为一。Klout根据Twitter用户有多少活跃关注者、用户所发布链接的点击次数、与其它用户的互动情况来衡量该用户在Twitter上的影响力。
重点领域值得关注
提供网址缩短服务及统计功能，bit.ly占据了twitter所有网址的33%，可实时跟踪短链接每次点击，用户来自哪里的，从哪里点击了链接，分别有多少次等信息。
重点领域值得关注
Tweetburner
在twitter上发布的网址进行缩写服务，并对你发布的信息进行访问统计，如果你是市场推广人员的话，这个功能能够让你获得第一手的市场调查资料。
最受欢迎的20个Twitter应用排名第13，月独立访客41,754
专门收集twitter客(用户)在Twitter上tweet时流露的情感，包括6种最常见的情感：爱(I love)，恨(I hate)，认为(I think)，信任(I believe)，觉得(I feel)，希望(I wish)。在这里，你可以看到，这些感情都很真。而其数据，则来自于专门用于twitter的搜索引擎summize。
最受欢迎的20个Twitter应用排名第19，月独立访客16,229
根据用户的喜好和兴趣来整理Twitter内容流，会根据和用户的相关性进行重新排列：排在上面的消息，是My6sense认为和用户的喜好和兴趣相关的消息
Chrome浏览器扩展
TweetStats
在线统计分析工具，有点类似于网站统计，分析你Twitter 在线的时间以及习惯，甚至会给出类似博客标签云的&Tweet Cloud&，用以了解你最热门的言论。
市场营销推广
实时针对性的营销引擎，已为用户发出约50万tweets。这个工具允许任何企业向所有涉及特定关键词的Twitter用户自动发送信息。例如，企业可以向某一地理范围内的提到&咖啡&的用户发送广告。企业每发送一条Twitter信息，要向TwitterHawk支付5美分
支持iphone、ipad，让你无时无地不营销
Twitter Grader
出自HubSpot公司，是一种评估Twitter账户影响力和传播范围的工具。跟随者数量、你所跟随的用户数量、更新频率、账户信息完整度以及其他的因素构成了Twitter Grader评判分数的依据。它也会提供建议，给出应该跟随的用户的名称。
Offerpop帮助使用者建立有吸引力、品牌社交媒体营销活动（如团购、抽奖、竞赛、优惠、赠送等），并在Facebook、公司网站（集成了Facebook Connect）和Twitter上同步推出。Offerpop的竞争对手Wildfire服务的客户名录，包括了百事、索尼、CNN、环球、AT&T甚至Facebook本身。为企业提供平台，帮助其创建、运营在Twitter和Facebook上发起的广告活动，并衡量广告效果的联网营销公司。
Sprout Social
是个为小企业提供社交媒体管理工具的公司，各类公司都可以使用 Sprout Social 来管理、观察和跟踪他们的公司在 Twitter，Facebook，Foursquare，LinkedIn 和 Yelp 等社交网站上的表现。已获1千万美元融资。Sprout Social 提供的是为小企业准备的低价月服务费计划，他们在这一领域里瞄准了中端市场。他们提供的服务对小企业小公司来说已经足够强壮，他们的模式有一点像 HootSuite，但是又没有 Vitrue 或者 Buddy Media 那么昂贵。
是个帮助商家搜集twitter的各种抱怨信息的服务。
Twitter关键词实时监测服务，同时搜索3个关键词，并且无论何时一个拥有这些关键词的新文章发布，它都能够自动更新。
最受欢迎的20个Twitter应用排名第17，月独立访客25,433
人们对于品牌的真实想法，每次它会闪出一个品牌的Logo，然后让你填一个你看到这个logo后第一个想到的标签
客户关系管理
社交媒体管理平台，采用了Klout开发的计算互联网影响力的算法，帮助企业根据其关注者在Twitter上的影响力来分类这些关注者，更好地与关注者进行沟通。如果某品牌拥有大量关注者，有助于找出最有用的Twitter消息或是潜在客户。
支持iphone、andoid
CoTweet是一个很有效的客户关系管理和内部商务管理平台，支持多人登录、多帐户协作；工作事项分配与管理；关键词与趋势跟踪；工作日程提醒等。
支持iPhone
&7、博客、网站工具8、开发者工具　　来源：读者投稿，作者：侯苏苏（），。
　　除非注明，文章均为原创，转载请以链接形式标明本文地址
　　本文地址：
2011年无疑是个微博发力年,,我怎么对微博还不怎么来电
最近的反垃圾插件好像误伤率有点太高了，留言的时候总遇到包含敏感词汇的提示，而其实不应该那么敏感。
新浪领先半个身位，腾讯有资源。
微博营销怎么别人都做那么好 我的就不行了呢
看好新浪和腾讯啊。
很强大的文章，很看好新浪围脖
.文山三七花
不玩微博了！玩不转啊
.shengjiuqing
博主 我想请教 为什么 我用Tor 登录Twitter 帐号被挂起了呢？？恳请赐教
twitter很多应用都已成规模
一口气拿下3个楼层，回宿舍睡觉
.炎龙博客会计
被墙了有什么用，不被墙都不好意思说自己是著名网站
不太喜欢微博，只能发140个字，不能发富文本。我选择独立博客+buzz
恩 twitter 始终服务于整个互联网
这两天点击google的&过去一个月内&搜索结果筛选时，会出现重置的情况，请月光调查一下
.WordPress啦
微博现在真的是火的不行了。
离开发应用的技术水平还相差甚远，努力中……
各种博。。。
我也没有玩微薄， 感觉现在到处都是腾讯的领域 ...
不玩微博了！玩不转啊
赞助商广告
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享. 转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议.谁能帮我创建一个itunes帐号_4s吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：45,400贴子：
谁能帮我创建一个itunes帐号收藏
如题。自己在这创建了快俩个小时了也没创建成工。
1楼 21:36&|
。密码 数字+ 英文大写一个 + 英文小写 一个 。试试
2楼 17:47&|
登录百度帐号我的游戏推荐游戏
后查看最近玩过的游戏
内&&容:使用签名档&&
想了解更多关于 ”4s“的信息,请&或2937人阅读
作者：David Walsh
翻译：Siqi（
在上一个教程
中，我们介绍了将要使用dojox.mobile创建的移动应用程序&TweetView&，并为其创建了整体布局模板，现在是时候为TweetView添加更多的代码让它真正工作起来了！本教程将重点介绍&Tweets&和&Mentions&这两个视图的实现。在我们开始码代码前，让我们先整理好TweetView的文件目录结构并回顾几条移动应用程序开发的理念。
难度：中级
系列：TweetView
打理好你的项目文件结构
TweetView将会使用和大多数基于Dojo的项目一样的文件结构：应用程序的HTML放在根目录下，TweetView的JavaScript文件、图片以及样式表则放在js文件夹中各自命名空间同名的文件夹下。
！TweeView使用很少的自定义图片来减少加载时间。为了使图片资源尽可能小，可以使用诸如
来压缩每一张图片。CSS文件则可以通过Dojo自带的打包工具来进行压缩。
写在开始编码前：移动开发准则
各位看官请先暂且停下！在我们开始码代码前，还有几件关于dojox.mobile和移动web开发的事我们需要了解下：
大小很重要：
在开发移动应用程序时，一个字节的大小也很重要，所以尽可能的缩写你的代码，虽然某些缩写可能在你开发标准的Web应用程序时是不可接受的。另外请注意，你添加的每一个依赖项都会增加你应用程序的加载时间。
最佳实践：Mobile!=Web：
在使用JavaScript编程时有一些常用的最佳实践，如不要扩展原生对象，不要使用全局变量，保证你创建的对象尽可能的灵活、范型。但这些最佳实践往往会以增加代码量为代价，所以在创建移动应用程序时，你可能需要抛弃这些条条框框来提高你的代码性能。
保持简单：
创建一个包含很多自定义样式、控件、布局的过度复杂的移动应用程序会很快让你抓狂。所以创建一个简单的布局，然后往上添你需要的东西，这才是比较好的创建移动应用程序方法。
！在TweetView中我们不会摒弃所有的最佳实践。我们将寻求代码大小与这些最佳实践之间的平衡。
在记住这些之后，还有最后一点：我们将暂时不使用缓存。
Mobile Devices and Caching
大多数移动设备严重依赖缓存来缓解数据传输的重担。这对于产品级的应用程序来说是很好，但我们现在还处于开发初始阶段，所以缓存对我们来说只会在测试这个应用程序的时候让我们沮丧。所以在开发Setting视图前，让我们添加一些防止缓存的META标签：
&!-- 防止缓存 --&
&meta http-equiv=&cache-control& content=&no-cache&&
&meta http-equiv=&pragma& content=&no-cache&&
这些META标签将在开发过程中发挥很大作用，在TweetView真正产品化时，我们将移除这些META标签。
Tweets and Mentions视图
&Tweets&和&Mentions&视图时三个视图中最为复杂的。它们的功能和外观都很相似，所以我们将重点介绍如何创建一个可以同时顾及到这两个视图的类。在看过效果图之后，我们知道我们将需要以下控件：
dojox.mobile.ScrollableView - 整个视图框架
dojox.mobile.Heading - &Tweets&标题栏
dojox.mobile.RoundRectList - 列表容器
dojox.mobile.ListItem - 列表元素
效果图也清楚的告诉了我们将要通过与Twitter交互来获取用户信息，所以我们将需要一些额外的Dojo资源：
dojo.io.script - 使用JSONP来从Twitter获取信息
dojo.DeferredList - 让我们在获取到所有信息之后一次性处理多个Twitter请求。
底部的控制条已经在上一个教程中完成了。（
Developing TweetView
准备好了？现在就让我们一块一块开始做吧！
Adding Resources to the Page
我们需要向app.html页面添加我们自己的样式表&TweetView.css&:
&link href=&js/tweetview/resources/TweetView.css& mce_href=&js/tweetview/resources/TweetView.css& rel=&stylesheet& /&
这个样式表将包含整个应用程序所需要的样式，不仅仅是Setting视图。
Tweets和Mentions视图模板
我们在上一个教程中已经创建了Tweets和Mentions视图的模板：
&!-- tweets 视图--&
&div id=&tweets& dojoType=&dojox.mobile.ScrollableView& selected=&true&&
&h1 dojoType=&dojox.mobile.Heading&&
&!-- 刷新按钮 --&
&div dojoType=&dojox.mobile.ToolBarButton& class=&mblDomButton tweetviewRefresh& style=&float:& mce_style=&float:& icon=&images/refresh.png&&&/div&
&ul dojoType=&dojox.mobile.RoundRectList&&
&li dojoType=&dojox.mobile.ListItem&&
这里将是Tweet条目
&!-- mentions 视图--&
&div id=&mentions& dojoType=&dojox.mobile.ScrollableView&&
&h1 dojoType=&dojox.mobile.Heading&&
&!-- 刷新按钮 --&
&div dojoType=&dojox.mobile.ToolBarButton& class=&mblDomButton tweetviewRefresh& style=&float:& mce_style=&float:& icon=&images/refresh.png&&&/div&
&ul dojoType=&dojox.mobile.RoundRectList&&
&li dojoType=&dojox.mobile.ListItem&&
Mention tweet item here
我们在新控件完成时对这些模板进行更新，但现在我们不需要对这些HTML布局进行修改。
新的类：tweetview._ViewMixin
在看过所有的三个视图（Tweets, Mentions和Settings）之后，很明显每一个视图都需要修改dojox.mobile.RoundRectList控件的domNode。为了防止每个视图对象中出现重复的代码，我们创建一个名为_ViewMixin的类来提供一个用来获取列表节点的方法，这样我们就可以根据需要隐藏或显示这些节点。_ViewMixin还提供一个substitue方法，它相当与一个非常原始的模板系统。此外还有一个getElements方法用来根据CSS类获取元素。
dojo.provide(&tweetview._ViewMixin&);
dojo.declare(&tweetview._ViewMixin&, null, {
// 返回列表节点
getListNode: function() {
return this.getElements(&tweetviewList&,this.domNode)[0];
// 更新列表控件状态
showListNode: function(show) {
dojo[(show ? &remove& : &add&) + &Class&](this.listNode, &tweetviewHidden&);
// 将数据写入模板
substitute: function(template,obj) {
return template.replace(//$/{([^/s/:/}]+)(?:/:([^/s/:/}]+))?/}/g, function(match,key){
return obj[key];
// 根据CSS类获取元素
getElements: function(cssClass,rootNode) {
return (rootNode || dojo.body()).getElementsByClassName(cssClass);
你会发现这些方法在整个教程中都很有用。
！花一点时间看看每一个效果图，你会发现共享的列表控件访问方法、模板，是很有必要的。如果你现在还不明白_ViewMixin方法的作用的话，不用担心，我们将在创建每个视图的时候重新讲解一遍。
同时请注意，getElements方法是dojo.query的一个替代品。dojo.query方法包含了很多的功能和代码，而我们仅仅需要根据根据样式表类名来寻找节点，所以为了提高性能，我们不使用dojo.query
新的类：tweetview.TweetView
由于Tweets和Mentions视图需要根据内容定制，我们将创建一个名为tweetview.TweetView的新类。这个类会扩展ScrollableView和_ViewMixin，并监管这个视图内所有的功能和内容：
// Provide the UI class
dojo.provide(&tweetview.TweetView&);
// Dependencies here
dojo.require(&tweetview._ViewMixin&);
dojo.require(&dojox.mobile.ScrollableView&);
dojo.require(&dojo.DeferredList&);
dojo.require(&dojo.io.script&);
// 导入本地化模块
dojo.require(&dojo.i18n&);
dojo.requireLocalization(&dojo.cldr&, &gregorian&, &&, &&);
// 声明类：继承ScrollableView
dojo.declare(&tweetview.TweetView&,[dojox.mobile.ScrollableView,tweetview._ViewMixin],{
// 属性和方法
在Tweets and Mentions视图
这一节中提到的额外的dojo资源也在这里被加载。我们还加载了本地化模块，这样我们的时间戳（比如&小时&，&分钟&，&日期&）就会根据用户语言环境正确显示。
TweetView属性
TweetView类创建完了，它同时用来支撑Tweets和 Mentions视图。现在我们必须思考这两个视图的区别，并为TweetView类创建可配置的属性。首先，我们知道获取tweets和mentions信息的URL格式是不同的，所以我们需要为其创建一个属性。我们使用如下格式的URL来获取tweets信息：
// 获取tweets的URL
serviceUrl: &/statuses/user_timeline/${account}.json?since_id=${since_id}&,
！注意serviceUrl中的$(account)和$(since_id)片段。还记得我们创建的_ViewMixin么？每次请求用户信息时，这个URL会被传到substitue方法中。
看一下效果图，你会发现tweet列表中的每一条记录需要经过格式化来使得各个部分信息得以正确显示。所以让我们创建一个属性来提供tweet模板：
// 为tweets创建模板
tweetTemplateString: '&img src=&${avatar}& mce_src=&${avatar}& alt=&${name}& class=&tweetviewAvatar& /&' +
'&div class=&tweetviewTime& data-dojo-time=&${created_at}&&${time}&/div&' +
'&div class=&tweetviewContent&& ' +
'&div class=&tweetviewUser&&${user}&/div&' +
'&div class=&tweetviewText&&${text}&/div&' +
'&/div&&div class=&tweetviewClear&&&/div&',
最后一个需要的自定义属性是表示获取新tweets中的GIF图片的路径：
// 加载状态图标
iconLoading: dojo.moduleUrl(&tweetview&, &resources/images/loading.gif&),
！通过使用dojo.moduleUrl，我们可以避免硬编码路径。这种方式使得我们可以更灵活地引用任何资源时&&你不可能永远知道你所需要的模块来自哪里。
现在我们定义好了TweetView类，接下来我们需要更新我们的HTML模板来使用TweetView类为指定的视图提供定制的功能。
实现TweetView
如同使用Dijit控件一样，你必须先在app.html中使用require来导入所需资源：
// 为&Tweets&和&Mentions&导入资源
dojo.require(&tweetview.TweetView&);
在导入了需要的类之后，需要为这两个视图更新HTML模板：
&!-- tweets 视图 --&
&div id=&tweets& dojoType=&tweetview.TweetView& selected=&true&&
&h1 dojoType=&dojox.mobile.Heading& fixed=&top&&
&!-- 刷新按钮 --&
&div dojoType=&dojox.mobile.ToolBarButton& class=&mblDomButton tweetviewRefresh& icon=&js/tweetview/resources/images/refresh.png&&&/div&
&ul dojoType=&dojox.mobile.RoundRectList& class=&tweetviewList&&&/ul&
&!-- mentions 视图 --&
&div id=&mentions& dojoType=&tweetview.TweetView& serviceUrl=&/search.json?q=@${account}&since_id=${since_id}&&
&h1 dojoType=&dojox.mobile.Heading& fixed=&top&&
&!-- 刷新按钮 --&
&div dojoType=&dojox.mobile.ToolBarButton& class=&mblDomButton tweetviewRefresh& icon=&js/tweetview/resources/images/refresh.png&&&/div&
&ul dojoType=&dojox.mobile.RoundRectList& class=&tweetviewList&&&/ul&
请注意我们对模板所作的修改：
每一个视图由dojox.mobile.ScrollableView变成了tweetview.TweetView。
id为mentions的控件使用了一个定制的serviceURL 来获取信息
标题栏添加了fixed=&top&以便它可以固定在每个视图的顶部
&float:right&被从刷新按钮上移除了&&这个样式将被移到一个之后我们将会创建的样式表中。
RoundRectList控件添加了tweetviewList样式，这样我们就能对之后在其中创建出来的tweet条目节点的样式进行定制。
！注意我们正在使用Tweitter的查询API来获取mentions信息。 Twitter的mentionsAPI需要OAuth验证，而实现OAuth超出了本教程的范围。如果你选择实现一个OAuth,你所需要做的就是把serviceUrl参数换成你自己搭建的服务地址。
处理Twitter帐号
TweetView中每一个视图（Tweets，Mention，和Settings）都依赖一串账户信息。这意味着账户信息对所有的TweetView控件必须是可用的。我们可以创建一个&controller&控件来监督所有的TweetView控件并管理账户状态，不过这也超出了我们现在所需要的功能了。所以，我们还是直接把账户信息放到tweetview的命名空间中去：
// 在命名空间中直接设置账户信息
tweetview.ACCOUNTS = {
dojo: { enabled: true },
sitepen: { enabled: true }
ACCOUNTS对象包含一系列子对象，这些子对象包含了帐号名以及启用状态。更多属性将被添加到这些子对象中，不过它们都不需要被初始化。
TweetView startup
现在一切就绪，是时候来添加TweetView的startup方法了。让我们一行行来看代码。
保留控件原生startup方法所提供的功能：
// 当控件启动时
startup: function() {
// 保留dojox.mobile.ScrollableView的startup方法所提供的功能
this.inherited(arguments);
获取控件刷新按钮的引用，并保存原始图片路径（这是为了以后我们要从刷新状态图标切换回来）
// 获取刷新按钮和图片
this.refreshButton = dijit.byId(this.getElements(&tweetviewRefresh&, this.domNode)[0].id);
this.iconImage = this.refreshButton.iconNode.
为刷新按钮绑定onClick事件来刷新tweets：
// 为刷新按钮绑定onClick事件的处理函数&refresh&
dojo.connect(this.refreshButton, &onClick&, this, &refresh&);
马上通过调用refresh方法来加载tweets:
// 马上加载tweets!
this.refresh();
！这个refresh调用将在Setting视图完成后被移除，不过在此之前它还是必要的。
为该控件添加tweetviewPane样式：
// 添加CSS类
dojo.addClass(this.domNode, &tweetviewPane&);
获取RoundRectList控件的引用以便之后使用。现在先将其隐藏，因为它现在没有任何内容。
// 获取列表控件
this.listNode = this.getListNode();
// 隐藏列表，因为它现在还没有填充数据
this.showListNode(false);
设定一个时间间隔，每过几分钟，刷新tweet时间：
// 每60秒，更新时间
setInterval(dojo.hitch(this, function() {
dojo.forEach(this.getElements(&tweetviewTime&, this.domNode), function() {
timeNode.innerHTML = this.formatTime(dojo.attr(timeNode, &data-dojo-time&));
}),60000);
这就是TweetView startup方法，它将推动整个程序。接下来我们需要创建一个refresh方法来更新tweet列表！
TweetView refresh
refresh方法将会从Twitter获取tweets信息。由于我们不能在一次请求中获取多个用户的tweets信息，我们需要为每一个账户发送一个单独的请求，然后统一处理返回的数据。这意味着我们需要创建多个dojo.io.script调用，并在一个dojo.DeferredList回调函数中处理返回的结果。
// 从twitter获取tweets信息
refresh: function() {
// 更新刷新按钮图标
this.refreshButton.iconNode.src = this.iconL
// 按钮被&按下&
this.refreshButton.select();
// 为每一个帐号向defs添加一个deferred
var defs = [], accounts = tweetview.ACCOUNTS;
for(var account in accounts) {
// 如果账户处于启用状态
if(accounts[account].enabled) {
// 获取 tweets!
defs.push(dojo.io.script.get({
callbackParamName: &callback&,
preventCache: true,
timeout: 3000,
// &substitute& 来自 _ViewMixin
url: this.substitute(this.serviceUrl, { account: account, since_id: accounts[account].since || 1 })
// 创建一个 dojo.Deferredlist 来处理所有返回的tweets
// 添加 this.onTweetsReceived 作为回调函数
new dojo.DeferredList(defs).then(dojo.hitch(this, this.onTweetsReceived));
！请确保为dojo.io.script.get方法添加timeout参数，这样你的错误处理回调函数会被正确地触发。
关于refresh方法的一些注释：
刷新图标在该方法被调用时切换成旋转的GIF图片。
某个账户的tweets信息只有在该账户被启用时才会被获取。
注意账户的&since&属性被添加到URL中。该属性在第一次获取数据之后被初始化，以便之后同样的tweets信息不会被重复获取。
TweetView onTweetsReceived 和 sortTweets
onTweetsReceived方法获取所有通过dojo.io.script.calls创建的dojo.Deferreds的返回结果。现在我们已经有了每个账户中的tweets信息，但我们还有几个问题：
这些tweets根据用户分类&&我们需要将它们加入到同一个数组中。这是一个很容易解决的问题。
所有的tweets在融合到一起之后，需要根据日期排序。
在我们将tweets输出到控件中的列表前，我们必须先对其进行排序。其中第一部分是将他们放入同一个数组中：
// 将tweets放入一个数组，并根据日期排序
sortTweets: function(deflist) {
// 为我们的tweets创建一个数组
var allTweets = [];
// 为每一个def进行处理
dojo.forEach(deflist, function(def) {
// 定义要处理的属性
// Tweet是&def[l]&, Mentions 是 def[1].results
var tweets = (def[1].results ? def[1].results : def[1]);
// 如果我们获取了一些数据
if(tweets.length) {
// 获取用户名并更新since属性
var username = !tweets[0].user ? def[1].query.replace(&%40&,&&) : tweets[0].user.screen_
// 更新该用户的since属性
tweetview.ACCOUNTS[username].since = tweets[0].id_
// 如果这是一个查询，我们需要为tweet添加用户名
if(def[1].query) {
dojo.forEach(tweets, function(tweet) { tweet.searchUser = });
// 组成一个大数组
allTweets = allTweets.concat(tweets);
！注意def[1]的处理、用户名的获取以及def.query的检查。查询API返回一个与user timeline API不同的JSON结构。我们可以为处理mentions信息创建一个不同的子类，但是在本应用程序中我们还不需要花时间这么做，我们使用TweetView来处理tweets和mentions。
现在所有的tweets都在一个大数组中了，接下来我们将把他们按时间排序，并将结果返回给onTweetsReceived方法。
// 按时间排序
allTweets.sort(function(a, b) {
var atime = new Date(a.created_at),
btime = new Date(b.created_at);
// 普通的排序算法会返回b-a而不是a-b
// 不过，我们想要把最近的时间放前面
// 所以我们使用atime-btime
return atime -
// 返回tweets
return allT
所有的tweets排序完后，是时候停止刷新按钮的旋转状态，并将tweets传给updateContent方法来更新页面了：
// 当所有内容从Twitter加载完毕后触发
onTweetsReceived: function(rawTweetData) {
// 将tweets排序
tweetData = this.sortTweets(rawTweetData);
// 设置刷新按钮的图标
this.refreshButton.iconNode.src = this.iconI
this.refreshButton.select(true);
// tweets不为空
if(tweetData.length) {
// 更新内容
this.updateContent(tweetData);
！Tweets根据时间排序，最新的排在最前面 &&这确保最新的tweets会被放在列表的最顶端。同时请注意，updateContent方法只有在哦我们确实获取了新tweets之后才会被调用。
TweetView updateContent
updateContent方法获取排序过的tweets，并为他们创建dojox.mobile.ListItem控件，然后将它们放到列表的顶端。在我们创建updateContent之前，我们需要一些工具方法来格式化tweet的时间戳和文字内容：
// 为一个字符串添加恰当的tweet linkification
formatTweet: function(tweetText) {
return tweetText.
replace(/(https?://///S+)/gi,'&a href=&$1& mce_href=&$1&&$1&/a&').
replace(/(^|/s)@(/w+)/g,'$1&a href=&/$2& mce_href=&/$2&&@$2&/a&').
replace(/(^|/s)#(/w+)/g,'$1&a href=&/search?q=%23$2& mce_href=&/search?q=%23$2&&#$2&/a&');
// 格式化时间戳
formatTime: function(date) {
// 获取当前时间
var now = new Date();
// 根据时间戳字符串创建一个日期对象
var tweetDate = new Date(date);
// 计算时间: 秒
var secondsDifferent = Math.floor((now - tweetDate) / 1000);
if(secondsDifferent & 60) {
return secondsDifferent + & & + (this.l10n[&field-second&]) + (secondsDifferent & 1 ? &s& : &&);
// 计算时间: 分钟
var minutesDifferent = Math.floor(secondsDifferent / 60);
if(minutesDifferent & 60) {
return minutesDifferent + & & + this.l10n[&field-minute&] + (minutesDifferent & 1 ? &s& : &&);
// 计算时间: 小时
var hoursDifferent = Math.floor(minutesDifferent / 60);
if(hoursDifferent & 24) {
return hoursDifferent + & & + this.l10n[&field-hour&] + (hoursDifferent & 1 ? &s& : &&);
// 计算时间: 天数
var daysDifferent = Math.floor(hoursDifferent / 24);
return daysDifferent + & & + this.l10n[&field-day&] + (daysDifferent & 1 ? &s& : &&);
有了上述方法之后，我们可以创建我们自己的updateContent方法了：
// 在获取tweets之后触发
updateContent: function(rawTweetData) {
// 处理每一条tweet信息
dojo.forEach(rawTweetData, function(tweet) {
// Get the user's screen name
var screenName = tweet.searchUser || tweet.user.screen_
// 创建一个新的列表元素，并添加到列表顶部
var item = new dojox.mobile.ListItem({
&class&: &tweetviewListItem user-& + screenName
}).placeAt(this.listNode, &first&);
// 使用我们的tweet模板更新列表元素的内容
item.containerNode.innerHTML = this.substitute(this.tweetTemplateString, {
text: this.formatTweet(tweet.text),
user: tweet.from_user || screenName,
name: tweet.from_user || tweet.user.name,
avatar: tweet.profile_image_url || tweet.user.profile_image_url,
time: this.formatTime(tweet.created_at),
created_at: tweet.created_at,
id: tweet.id
// 现在列表内容填充完毕，显示它
this.showListNode(true);
！注意，user-{screenName} CSS类被添加到每一个列表元素中。该CSS类将在下一个教程中将介绍的Settings视图中启用/禁用用户功能起到重要作用。
我们为每一条获取的tweet创建一个新的列表元素。在新的列表元素创建之后，我们又为其填充格式化过的文字内容和时间戳。最后列表元素被添加到列表的最顶端。
Tweets 和 Mentions 的功能完成了
现在我们已经讲完了TweetView的TweeView类的所有JavaScript内容！Tweets和Mentions视图现在可以读取tweets并进行刷新!让我们回顾下我们是怎么做的吧:
创建一个被所有TweetView控件使用的_ViewMixin。
创建一个tweetview命名空间下的TweetView类
更新Tweets和Mentions的HTML页面来使用新的TweetView控件
在tweetview命名控件下设置一个ACCOUNTS对象来使得他们对所有控件是可见的
为TweetView创建一系列方法来获取tweets、处理获得的数据、格式化并显示数据
！现在所有的功能已经完成，回过头再来看看startup方法。现在所有的方法都已经实现，应该不难理解整个控件的生命周期中发生了什么。
现在只剩下最后一步了：修改列表的样式。
修改TweetView和其中子控件的样式
为列表修改样式是挺有意思的部分，可能也是最简单的。到目前为止，ListItem控件的内容只能使用单行文字，所以我们需要在我们的TweetView.css样式表中改进这一点。
.tweetviewHidden { /* 我们使用这个来隐藏节点 */
.tweetviewList li { /* 最小高度，确保用户头像可以显示 */
min-height:55
padding-top:8
.tweetviewListItem { /* 内容可以分多行显示 */
line-height:18
现在ListItem可以显示多行内容了，接下来我们为已经在tweet item模板中定义的CSS类添加具体内容：
/* 在底部提供适当的留白 */
.mblScrollableViewContainer {
padding-bottom:40px !
/* 用户头像 */
.tweetviewAvatar {
/* tweets内容区域 */
.tweetviewContent {
padding-left:60
/* 用户名样式 */
.tweetviewUser {
font-size:80%;
/* tweet文字样式 */
.tweetviewText {
font-size:70%;
font-weight:
padding-right:50
padding-bottom:10
/* tweet time */
.tweetviewTime {
color:#777;
font-size:65%;
font-weight:
padding-right:10
/* clears floats at the end of the list item */
.tweetviewClear {
一切都搞定啦！一个和效果图一样漂亮的tweet列表！
最难的部分已经过去！
和本文开始的时候保证的一样，Tweets和Mentions视图是本系列教程中最复杂的。下一篇教程中，我们将着重介绍Setting视图，该视图用来启用/禁用指定账户。到那时，回顾下本教程中的示例和代码，确保你没有错过每一步!
TweetView系列中文教程
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：726596次
积分：8320
积分：8320
排名：第710名
原创：61篇
译文：58篇
评论：750条
文章：23篇
阅读：127639
(1)(2)(1)(2)(5)(1)(1)(2)(3)(4)(3)(4)(3)(4)(2)(4)(1)(4)(4)(3)(4)(6)(3)(6)(5)(9)(2)(2)(3)(5)(6)(3)(5)(5)(1)}