分类导航

Dojo 发布时间：2022-04-21 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了Dojo mobile TweetView 系列教程之三——Tweets和Mentions视图，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

作者：David Walsh

翻译：Siqi（@L_404_0@ ）

原文：Getting Started with TweetView: Tweets and Mentions

在上一个教程Dojo mobile TweetView 系列教程之二——TweetView启程中，我们介绍了将要使用dojox.mobile创建的移动应用程序“TweetView”，并为其创建了整体布局模板，现在是时候为TweetView添加更多的代码让它真正工作起来了！本教程将重点介绍“Tweets”和“Mentions”这两个视图的实现。在我们开始码代码前，让我们先整理好TweetView的文件目录结构并回顾几条移动应用程序开发的理念。

版本：1.6

难度：中级

系列：TweetView

打理好你的项目文件结构

TweetView将会使用和大多数基于Dojo的项目一样的文件结构：应用程序的HTML放在根目录下，TweetView的JavaScript文件、图片以及样式表则放在js文件夹中各自命名空间同名的文件夹下。

！TweeView使用很少的自定义图片来减少加载时间。为了使图片资源尽可能小，可以使用诸如Pngcrush 来压缩每一张图片。CSS文件则可以通过Dojo自带的打包工具来进行压缩。

写在开始编码前：移动开发准则

各位看官请先暂且停下！在我们开始码代码前，还有几件关于dojox.mobile和移动web开发的事我们需要了解下：

大小很重要： 在开发移动应用程序时，一个字节的大小也很重要，所以尽可能的缩写你的代码，虽然某些缩写可能在你开发标准的Web应用程序时是不可接受的。另外请注意，你添加的每一个依赖项都会增加你应用程序的加载时间。
最佳实践：Mobile!=Web： 在使用JavaScript编程时有一些常用的最佳实践，如不要扩展原生对象，不要使用全局变量，保证你创建的对象尽可能的灵活、范型。但这些最佳实践往往会以增加代码量为代价，所以在创建移动应用程序时，你可能需要抛弃这些条条框框来提高你的代码性能。
保持简单： 创建一个包含很多自定义样式、控件、布局的过度复杂的移动应用程序会很快让你抓狂。所以创建一个简单的布局，然后往上添你需要的东西，这才是比较好的创建移动应用程序方法。

！在TweetView中我们不会摒弃所有的最佳实践。我们将寻求代码大小与这些最佳实践之间的平衡。

在记住这些之后，还有最后一点：我们将暂时不使用缓存。

@H_166_14@mobile Devices and Caching

大多数移动设备严重依赖缓存来缓解数据传输的重担。这对于产品级的应用程序来说是很好，但我们现在还处于开发初始阶段，所以缓存对我们来说只会在测试这个应用程序的时候让我们沮丧。所以在开发SetTing视图前，让我们添加一些防止缓存的Meta 标签：

<<a href="http://code.js-code.com/tag/Meta/" target="_blank" class="keywords">Meta</a> <a href="http://code.js-code.com/tag/http/" target="_blank" class="keywords">http</a>-equiv="cache-control" content="no-cache"> <<a href="http://code.js-code.com/tag/Meta/" target="_blank" class="keywords">Meta</a> <a href="http://code.js-code.com/tag/http/" target="_blank" class="keywords">http</a>-equiv="pragma" content="no-cache">@H_<a href="http://code.js-code.com/tag/675/" target="_blank" class="keywords">675</a>_50@ </p> <p>这些<a href="http://code.js-code.com/tag/Meta/" target="_blank" class="keywords">Meta</a><a href="http://code.js-code.com/tag/biaoqian/" target="_blank" class="keywords">标签</a>将在开发过程中发挥很大作用，在TweetView真正产品化时，我们将移除这些<a href="http://code.js-code.com/tag/Meta/" target="_blank" class="keywords">Meta</a><a href="http://code.js-code.com/tag/biaoqian/" target="_blank" class="keywords">标签</a>。</p> <h2>Tweets and Mentions视图</h2> <p> </p> <p>“Tweets”和“Mentions”视图时三个视图中最为复杂的。它们的<a href="http://code.js-code.com/tag/gongneng/" target="_blank" class="keywords">功能</a>和外观都很相似，所以我们将重点介绍<a href="http://code.js-code.com/tag/ruhechuangjian/" target="_blank" class="keywords">如何创建</a><a href="http://code.js-code.com/tag/yige/" target="_blank" class="keywords">一个</a>可以同时顾及到这两个视图的类。在看过<a href="http://code.js-code.com/tag/xiaoguo/" target="_blank" class="keywords">效果</a>图之后，我们知道我们将需要以下控件：</p> <ul> <li>dojox.mobile.ScrollableView - 整个视图框架</li> <li>dojox.mobile.<a href="http://code.js-code.com/tag/heading/" target="_blank" class="keywords">heading</a> - “Tweets”<a href="http://code.js-code.com/tag/biaoti/" target="_blank" class="keywords">标题</a>栏</li> <li>dojox.mobile.RoundRectList - 列表容器</li> <li>dojox.mobile.ListItem - 列表元素</li> </ul> <p><a href="http://code.js-code.com/tag/xiaoguo/" target="_blank" class="keywords">效果</a>图也清楚的告诉了我们将要通过与Twitter交互来<a href="http://code.js-code.com/tag/huoqu/" target="_blank" class="keywords">获取</a><a href="http://code.js-code.com/tag/yonghu/" target="_blank" class="keywords">用户</a>信息，所以我们将需要一些额外的Dojo资源：</p> <ul> <li>dojo.io.script - 使用JSONP来从Twitter<a href="http://code.js-code.com/tag/huoqu/" target="_blank" class="keywords">获取</a>信息 </li> <li>dojo.DeferredList - 让我们在<a href="http://code.js-code.com/tag/huoqu/" target="_blank" class="keywords">获取</a>到所有信息之后一次性处理多个Twitter请求。</li> </ul> <p><a href="http://code.js-code.com/tag/dibu/" target="_blank" class="keywords">底部</a>的控制条已经在上<a href="http://code.js-code.com/tag/yige/" target="_blank" class="keywords">一个</a>教程中完成了。（<a href="javascript:void()" class="outlink" data="/link?url=http://blog.csdn.net/dojotoolkit/archive/2011/04/18/6330887.aspx" rel="nofollow" target="_blank">Dojo mobile TweetView 系列教程之二——TweetView启程</a> ）</p> <h2>Developing TweetView<br> </h2> <p>准备好了？现在就让我们一块一块开始做吧！</p> <h2>Adding <a href="http://code.js-code.com/tag/resourc/" target="_blank" class="keywords">resourc</a>es to the Page<br> </h2> <p>我们需要向app.html<a href="http://code.js-code.com/tag/yemian/" target="_blank" class="keywords">页面</a><a href="http://code.js-code.com/tag/tianjia/" target="_blank" class="keywords">添加</a>我们自己的样式表"TweetView.css":</p> <p><textarea cols="50" rows="15" name="code" class="xhtml"><link href="js/tweetview/<a href="http://code.js-code.com/tag/resourc/" target="_blank" class="keywords">resourc</a>es/TweetView.css" mce_href="js/tweetview/<a href="http://code.js-code.com/tag/resourc/" target="_blank" class="keywords">resourc</a>es/TweetView.css" rel="stylesheet" />@H_<a href="http://code.js-code.com/tag/675/" target="_blank" class="keywords">675</a>_50@ </p> <p>这个样式表将包含整个应用程序所需要的样式，不仅仅是Set<a href="http://code.js-code.com/tag/Tin/" target="_blank" class="keywords">Tin</a>g视图。</p> <h2>Tweets和Mentions视图模板<br> </h2> <p>我们在上<a href="http://code.js-code.com/tag/yige/" target="_blank" class="keywords">一个</a>教程中已经创建了Tweets和Mentions视图的模板：</p> <p><textarea cols="50" rows="15" name="code" class="c-sharp"> <div id="tweets" dojoType="dojox.mobile.ScrollableView" <a href="http://code.js-code.com/tag/SELE/" target="_blank" class="keywords">SELE</a>cted="true"> <h1 dojoType="dojox.mobile.<a href="http://code.js-code.com/tag/heading/" target="_blank" class="keywords">heading</a>">  <div dojoType="dojox.mobile.ToolBarButton" class="mblDomButton tweetview<a href="http://code.js-code.com/tag/refres/" target="_blank" class="keywords">refres</a>h" style="float<a href="http://code.js-code.com/tag/r/" target="_blank" class="keywords">:r</a>ight;" mce_style="float<a href="http://code.js-code.com/tag/r/" target="_blank" class="keywords">:r</a>ight;" icon="images/<a href="http://code.js-code.com/tag/refres/" target="_blank" class="keywords">refres</a>h.png"></div> Tweets </h1> <ul dojoType="dojox.mobile.RoundRectList"> <li dojoType="dojox.mobile.ListItem"> 这里将是Tweet条目 </li> </ul> </div>  <div id="mentions" dojoType="dojox.mobile.ScrollableView"> <h1 dojoType="dojox.mobile.<a href="http://code.js-code.com/tag/heading/" target="_blank" class="keywords">heading</a>">  <div dojoType="dojox.mobile.ToolBarButton" class="mblDomButton tweetview<a href="http://code.js-code.com/tag/refres/" target="_blank" class="keywords">refres</a>h" style="float<a href="http://code.js-code.com/tag/r/" target="_blank" class="keywords">:r</a>ight;" mce_style="float<a href="http://code.js-code.com/tag/r/" target="_blank" class="keywords">:r</a>ight;" icon="images/<a href="http://code.js-code.com/tag/refres/" target="_blank" class="keywords">refres</a>h.png"></div> Mentions </h1> <ul dojoType="dojox.mobile.RoundRectList"> <li dojoType="dojox.mobile.ListItem"> Mention tweet item here </li> </ul> </div>@H_<a href="http://code.js-code.com/tag/675/" target="_blank" class="keywords">675</a>_50@ </p> <p>我们在新控件完成时对这些模板进行更新，但现在我们不需要对这些HTML布局进行<a href="http://code.js-code.com/tag/xiugai/" target="_blank" class="keywords">修改</a>。</p> <h2>新的类：tweetview._View<a href="http://code.js-code.com/tag/mixi/" target="_blank" class="keywords">mixi</a>n</h2> <p>在看过所有的三个视图（Tweets,Mentions和Set<a href="http://code.js-code.com/tag/Tin/" target="_blank" class="keywords">Tin</a>gs）之后，很明显每<a href="http://code.js-code.com/tag/yige/" target="_blank" class="keywords">一个</a>视图都需要<a href="http://code.js-code.com/tag/xiugai/" target="_blank" class="keywords">修改</a>dojox.mobile.RoundRectList控件的domNode。为了防止每个视图对象中出现重复的<a href="http://code.js-code.com/tag/daima/" target="_blank" class="keywords">代码</a>，<a href="http://code.js-code.com/tag/womenchuang/" target="_blank" class="keywords">我们创</a>建<a href="http://code.js-code.com/tag/yige/" target="_blank" class="keywords">一个</a>名为_View<a href="http://code.js-code.com/tag/mixi/" target="_blank" class="keywords">mixi</a>n的类来提供<a href="http://code.js-code.com/tag/yige/" target="_blank" class="keywords">一个</a>用来<a href="http://code.js-code.com/tag/huoqu/" target="_blank" class="keywords">获取</a>列表节点的<a href="http://code.js-code.com/tag/fangfa/" target="_blank" class="keywords">方法</a>，这样我们就可以根据需要隐藏或<a href="http://code.js-code.com/tag/xianshi/" target="_blank" class="keywords">显示</a>这些节点。_View<a href="http://code.js-code.com/tag/mixi/" target="_blank" class="keywords">mixi</a>n还提供<a href="http://code.js-code.com/tag/yige/" target="_blank" class="keywords">一个</a>substitue<a href="http://code.js-code.com/tag/fangfa/" target="_blank" class="keywords">方法</a>，它相当与<a href="http://code.js-code.com/tag/yige/" target="_blank" class="keywords">一个</a>非常原始的模板系统。此外还有<a href="http://code.js-code.com/tag/yige/" target="_blank" class="keywords">一个</a>getElements<a href="http://code.js-code.com/tag/fangfa/" target="_blank" class="keywords">方法</a>用来根据CSS类<a href="http://code.js-code.com/tag/huoqu/" target="_blank" class="keywords">获取</a>元素。</p> <p><textarea cols="50" rows="15" name="code" class="javascript">// 提供类 dojo.provide("tweetview._View<a href="http://code.js-code.com/tag/mixi/" target="_blank" class="keywords">mixi</a>n"<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> // 声明类 dojo.declare("tweetview._View<a href="http://code.js-code.com/tag/mixi/" target="_blank" class="keywords">mixi</a>n",null,<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> // 返回列表节点 getListNode: function() <a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> return thi<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>getElements("tweetviewList",thi<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>domNod<a href="http://code.js-code.com/tag/E/" target="_blank" class="keywords">E)</a><a href="http://code.js-code.com/tag/0/" target="_blank" class="keywords">[0]</a>; },// 更新列表控件状态 showListNode: function(show) <a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> dojo[(show ? "remove" : "add") + "Class"](thi<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>listNode,"tweetviewHidden"<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> },// 将数据写入模板 substitute: function(template,obj) <a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> return template.<a href="http://code.js-code.com/tag/repla/" target="_blank" class="keywords">repla</a>ce(//$/<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a>(<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">[^</a>/s/:/}]+)(?:/:(<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">[^</a>/s/:/}]+))?/}/g,function(match,key)<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> return obj[key]; }<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> },// 根据CSS类<a href="http://code.js-code.com/tag/huoqu/" target="_blank" class="keywords">获取</a>元素 getElements: function(cssClass,rootNod<a href="http://code.js-code.com/tag/E/" target="_blank" class="keywords">E)</a> <a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> return (rootNode || dojo<a href="http://code.js-code.com/tag/b/" target="_blank" class="keywords">.b</a>ody()).getElementsByClassName(cssClass<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> } }<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a>@H_<a href="http://code.js-code.com/tag/675/" target="_blank" class="keywords">675</a>_50@ </p> <p>你会发现这些<a href="http://code.js-code.com/tag/fangfa/" target="_blank" class="keywords">方法</a>在整个教程中都很有用。</p> <p>！花一点时间看看每<a href="http://code.js-code.com/tag/yige/" target="_blank" class="keywords">一个</a><a href="http://code.js-code.com/tag/xiaoguo/" target="_blank" class="keywords">效果</a>图，你会发现<a href="http://code.js-code.com/tag/gongxiangde/" target="_blank" class="keywords">共享的</a>列表控件访问<a href="http://code.js-code.com/tag/fangfa/" target="_blank" class="keywords">方法</a>、模板，是很有必要的。如果你现在还不明白_View<a href="http://code.js-code.com/tag/mixi/" target="_blank" class="keywords">mixi</a>n<a href="http://code.js-code.com/tag/fangfa/" target="_blank" class="keywords">方法</a>的作用的话，不用担心，我们将在创建每个视图的时候重新讲解一遍。</p> <p>同时请注意，getElements<a href="http://code.js-code.com/tag/fangfa/" target="_blank" class="keywords">方法</a>是dojo.query的<a href="http://code.js-code.com/tag/yige/" target="_blank" class="keywords">一个</a>替代品。dojo.query<a href="http://code.js-code.com/tag/fangfa/" target="_blank" class="keywords">方法</a>包含了很多的<a href="http://code.js-code.com/tag/gongneng/" target="_blank" class="keywords">功能</a>和<a href="http://code.js-code.com/tag/daima/" target="_blank" class="keywords">代码</a>，而我们仅仅需要根据根据样式表类名来寻找节点，所以为了提高<a href="http://code.js-code.com/tag/xingneng/" target="_blank" class="keywords">性能</a>，我们不使用dojo.query</p> <h2>新的类：tweetview.TweetView</h2> <p>由于Tweets和Mentions视图需要根据<a href="http://code.js-code.com/tag/neirong/" target="_blank" class="keywords">内容</a>定制，我们将创建<a href="http://code.js-code.com/tag/yige/" target="_blank" class="keywords">一个</a>名为tweetview.TweetView的新类。这个类会扩展ScrollableView和_View<a href="http://code.js-code.com/tag/mixi/" target="_blank" class="keywords">mixi</a>n，并监管这个视图内所有的<a href="http://code.js-code.com/tag/gongneng/" target="_blank" class="keywords">功能</a>和<a href="http://code.js-code.com/tag/neirong/" target="_blank" class="keywords">内容</a>：</p> <p><textarea cols="50" rows="15" name="code" class="javascript">// Provide the UI class dojo.provide("tweetview.TweetView"<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> // Dependencies here dojo.<a href="http://code.js-code.com/tag/requ/" target="_blank" class="keywords">requ</a>ire("tweetview._View<a href="http://code.js-code.com/tag/mixi/" target="_blank" class="keywords">mixi</a>n"<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> dojo.<a href="http://code.js-code.com/tag/requ/" target="_blank" class="keywords">requ</a>ire("dojox.mobile.ScrollableView"<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> dojo.<a href="http://code.js-code.com/tag/requ/" target="_blank" class="keywords">requ</a>ire("dojo.DeferredList"<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> dojo.<a href="http://code.js-code.com/tag/requ/" target="_blank" class="keywords">requ</a>ire("dojo.io.script"<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> // 导入本地化模块 dojo.<a href="http://code.js-code.com/tag/requ/" target="_blank" class="keywords">requ</a>ire("dojo.i18n"<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> dojo.<a href="http://code.js-code.com/tag/requ/" target="_blank" class="keywords">requ</a>ireLocalization("dojo.cldr","gregorian","",""<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> // 声明类：继承ScrollableView dojo.declare("tweetview.TweetView",[dojox.mobile.ScrollableView,tweetview._View<a href="http://code.js-code.com/tag/mixi/" target="_blank" class="keywords">mixi</a>n],<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> // <a href="http://code.js-code.com/tag/shuxing/" target="_blank" class="keywords">属性</a>和<a href="http://code.js-code.com/tag/fangfa/" target="_blank" class="keywords">方法</a> }<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a>@H_<a href="http://code.js-code.com/tag/675/" target="_blank" class="keywords">675</a>_50@ </p> <p>在<strong>Tweets and Mentions视图</strong> 这一节中提到的额外的dojo资源也<a href="http://code.js-code.com/tag/zaizheli/" target="_blank" class="keywords">在这里</a>被加载。我们还加载了本地化模块，这样我们的时间戳（比如“小时”，“分钟”，“日期”）就会根据<a href="http://code.js-code.com/tag/yonghu/" target="_blank" class="keywords">用户</a>语言环境正确<a href="http://code.js-code.com/tag/xianshi/" target="_blank" class="keywords">显示</a>。</p> <h2>TweetView<a href="http://code.js-code.com/tag/shuxing/" target="_blank" class="keywords">属性</a></h2> <p>TweetView类创建完了，它同时用来支撑Tweets和 Mentions视图。现在我们必须思<a href="http://code.js-code.com/tag/kao/" target="_blank" class="keywords">考</a>这两个视图的区别，并为TweetView类创建可配置的<a href="http://code.js-code.com/tag/shuxing/" target="_blank" class="keywords">属性</a>。首先，我们知道<a href="http://code.js-code.com/tag/huoqu/" target="_blank" class="keywords">获取</a>tweets和mentions信息的URL格式是不同的，所以我们需要<a href="http://code.js-code.com/tag/weiqi/" target="_blank" class="keywords">为其</a>创建<a href="http://code.js-code.com/tag/yige/" target="_blank" class="keywords">一个</a><a href="http://code.js-code.com/tag/shuxing/" target="_blank" class="keywords">属性</a>。我们使用如下格式的URL来<a href="http://code.js-code.com/tag/huoqu/" target="_blank" class="keywords">获取</a>tweets信息：</p> <p><textarea cols="50" rows="15" name="code" class="javascript">// <a href="http://code.js-code.com/tag/huoqu/" target="_blank" class="keywords">获取</a>tweets的URL <a href="http://code.js-code.com/tag/servi/" target="_blank" class="keywords">servi</a>ceUrl: "<a href="http://code.js-code.com/tag/http/" target="_blank" class="keywords">http</a>://twitter.com/statuses/<a href="http://code.js-code.com/tag/user/" target="_blank" class="keywords">user_</a>timeline/$<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a>account}.json?since_id=$<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a>since_i<a href="http://code.js-code.com/tag/D/" target="_blank" class="keywords">D}</a>",@H_<a href="http://code.js-code.com/tag/675/" target="_blank" class="keywords">675</a>_50@ </p> <p>！注意<a href="http://code.js-code.com/tag/servi/" target="_blank" class="keywords">servi</a>ceUrl中的$(account)和$(since_id)片段。还记得<a href="http://code.js-code.com/tag/womenchuang/" target="_blank" class="keywords">我们创</a>建的_View<a href="http://code.js-code.com/tag/mixi/" target="_blank" class="keywords">mixi</a>n么？每次请求<a href="http://code.js-code.com/tag/yonghu/" target="_blank" class="keywords">用户</a>信息时，这个URL会被传到substitue<a href="http://code.js-code.com/tag/fangfa/" target="_blank" class="keywords">方法</a>中。</p> <p>看一下<a href="http://code.js-code.com/tag/xiaoguo/" target="_blank" class="keywords">效果</a>图，你会发现tweet列表中的每一条记录需要经过格式化来使得各个部分信息得以正确<a href="http://code.js-code.com/tag/xianshi/" target="_blank" class="keywords">显示</a>。所以让<a href="http://code.js-code.com/tag/womenchuang/" target="_blank" class="keywords">我们创</a>建<a href="http://code.js-code.com/tag/yige/" target="_blank" class="keywords">一个</a><a href="http://code.js-code.com/tag/shuxing/" target="_blank" class="keywords">属性</a>来提供tweet模板：</p> <p><textarea cols="50" rows="15" name="code" class="javascript">// 为tweets创建模板 tweetTemplate<a href="http://code.js-code.com/tag/Stri/" target="_blank" class="keywords">Stri</a>ng: '<img src="$<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a>avatar}" mce_src="$<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a>avatar}" alt="$<a href="http://code.js-code.com/tag/name/" target="_blank" class="keywords">{name</a>}" class="tweetviewAvatar" />' + '<div class="tweetviewTime" data-dojo-time="$<a href="http://code.js-code.com/tag/C/" target="_blank" class="keywords">{C</a>reated_at}">$<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a>tim<a href="http://code.js-code.com/tag/E/" target="_blank" class="keywords">E}</a></div>' + '<div class="tweetviewContent"> ' + '<div class="tweetviewUser">$<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a>user}</div>' + '<div class="tweetviewText">$<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a>text}</div>' + '</div><div class="tweetviewClear"></div>',@H_<a href="http://code.js-code.com/tag/675/" target="_blank" class="keywords">675</a>_50@ </p> <p>最后<a href="http://code.js-code.com/tag/yige/" target="_blank" class="keywords">一个</a>需要的<a href="http://code.js-code.com/tag/zidingyi/" target="_blank" class="keywords">自定义</a><a href="http://code.js-code.com/tag/shuxing/" target="_blank" class="keywords">属性</a>是表示<a href="http://code.js-code.com/tag/huoqu/" target="_blank" class="keywords">获取</a>新tweets中的<a href="http://code.js-code.com/tag/giftu/" target="_blank" class="keywords">gif图</a>片的路径：</p> <p><textarea cols="50" rows="15" name="code" class="javascript">// 加载状态图标 iconLoading: dojo.moduleUrl("tweetview","<a href="http://code.js-code.com/tag/resourc/" target="_blank" class="keywords">resourc</a>es/images/loading.gif"),@H_<a href="http://code.js-code.com/tag/675/" target="_blank" class="keywords">675</a>_50@ </p> <p>！<a href="http://code.js-code.com/tag/tongguoshi/" target="_blank" class="keywords">通过使</a>用dojo.moduleUrl，我们可以避免硬编码路径。这种方式使得我们可以更灵活地引用任何资源时——你不可能永远知道你所需要的模块来自哪里。</p> <p>现在<a href="http://code.js-code.com/tag/womendingyi/" target="_blank" class="keywords">我们定义</a>好了TweetView类，接下来我们需要更新我们的HTML模板来使用TweetView类为指定的视图提供定制的<a href="http://code.js-code.com/tag/gongneng/" target="_blank" class="keywords">功能</a>。</p> <h2>实现TweetView<br> </h2> <p>如同使用Dijit控件一样，你必须先在app.html中使用<a href="http://code.js-code.com/tag/requ/" target="_blank" class="keywords">requ</a>ire来导入所需资源：</p> <p><textarea cols="50" rows="15" name="code" class="javascript">// 为"Tweets"和"Mentions"导入资源 dojo.<a href="http://code.js-code.com/tag/requ/" target="_blank" class="keywords">requ</a>ire("tweetview.TweetView"<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a>@H_<a href="http://code.js-code.com/tag/675/" target="_blank" class="keywords">675</a>_50@ </p> <p>在导入了需要的类之后，需要为这两个视图更新HTML模板：</p> <p><textarea cols="50" rows="15" name="code" class="xhtml"> <div id="tweets" dojoType="tweetview.TweetView" <a href="http://code.js-code.com/tag/SELE/" target="_blank" class="keywords">SELE</a>cted="true"> <h1 dojoType="dojox.mobile.<a href="http://code.js-code.com/tag/heading/" target="_blank" class="keywords">heading</a>" fixed="top">  <div dojoType="dojox.mobile.ToolBarButton" class="mblDomButton tweetview<a href="http://code.js-code.com/tag/refres/" target="_blank" class="keywords">refres</a>h" icon="js/tweetview/<a href="http://code.js-code.com/tag/resourc/" target="_blank" class="keywords">resourc</a>es/images/<a href="http://code.js-code.com/tag/refres/" target="_blank" class="keywords">refres</a>h.png"></div> Tweets </h1> <ul dojoType="dojox.mobile.RoundRectList" class="tweetviewList"></ul> </div>  <div id="mentions" dojoType="tweetview.TweetView" <a href="http://code.js-code.com/tag/servi/" target="_blank" class="keywords">servi</a>ceUrl="<a href="http://code.js-code.com/tag/http/" target="_blank" class="keywords">http</a>://search.twitter.com/search.json?q=@$<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a>account}&since_id=$<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a>since_i<a href="http://code.js-code.com/tag/D/" target="_blank" class="keywords">D}</a>"> <h1 dojoType="dojox.mobile.<a href="http://code.js-code.com/tag/heading/" target="_blank" class="keywords">heading</a>" fixed="top">  <div dojoType="dojox.mobile.ToolBarButton" class="mblDomButton tweetview<a href="http://code.js-code.com/tag/refres/" target="_blank" class="keywords">refres</a>h" icon="js/tweetview/<a href="http://code.js-code.com/tag/resourc/" target="_blank" class="keywords">resourc</a>es/images/<a href="http://code.js-code.com/tag/refres/" target="_blank" class="keywords">refres</a>h.png"></div> Mentions </h1> <ul dojoType="dojox.mobile.RoundRectList" class="tweetviewList"></ul> </div>@H_<a href="http://code.js-code.com/tag/675/" target="_blank" class="keywords">675</a>_50@ </p> <p>请注意我们对模板所作的<a href="http://code.js-code.com/tag/xiugai/" target="_blank" class="keywords">修改</a>：</p> <ul> <li>每<a href="http://code.js-code.com/tag/yige/" target="_blank" class="keywords">一个</a>视图由dojox.mobile.ScrollableView变成了tweetview.TweetView。</li> <li>id为mentions的控件使用了<a href="http://code.js-code.com/tag/yige/" target="_blank" class="keywords">一个</a>定制的<a href="http://code.js-code.com/tag/servi/" target="_blank" class="keywords">servi</a>ceURL 来<a href="http://code.js-code.com/tag/huoqu/" target="_blank" class="keywords">获取</a>信息</li> <li><a href="http://code.js-code.com/tag/biaoti/" target="_blank" class="keywords">标题</a>栏<a href="http://code.js-code.com/tag/tianjia/" target="_blank" class="keywords">添加</a>了fixed="top"以<a href="http://code.js-code.com/tag/bian/" target="_blank" class="keywords">便</a>它可以固定在每个视图的顶部</li> <li>"float<a href="http://code.js-code.com/tag/r/" target="_blank" class="keywords">:r</a>ight"被从刷新按钮上移除了——这个样式将被移到<a href="http://code.js-code.com/tag/yige/" target="_blank" class="keywords">一个</a>之后我们将会创建的样式表中。</li> <li>RoundRectList控件<a href="http://code.js-code.com/tag/tianjia/" target="_blank" class="keywords">添加</a>了tweetviewList样式，这样我们就能对之后在其中创建出来的tweet条目节点的样式进行定制。</li> </ul> <p>！注意我们正在使用Tweitter的<a href="http://code.js-code.com/tag/chaxun/" target="_blank" class="keywords">查询</a>API来@L_264_53<a href="http://code.js-code.com/tag/m/" target="_blank" class="keywords">@m</a>entions信息。 Twitter的mentionsAPI需要OAuth验证，而实现OAuth超出了本教程的范围。如果你选择实现<a href="http://code.js-code.com/tag/yige/" target="_blank" class="keywords">一个</a>OAuth,你所需<a href="http://code.js-code.com/tag/yaozuo/" target="_blank" class="keywords">要做</a>的就是把<a href="http://code.js-code.com/tag/servi/" target="_blank" class="keywords">servi</a>ceUrl参数换成你自己搭建的服务地址。</p> <h2>处理Twitter帐号</h2> <p>TweetView中每<a href="http://code.js-code.com/tag/yige/" target="_blank" class="keywords">一个</a>视图（Tweets，Mention，和Set<a href="http://code.js-code.com/tag/Tin/" target="_blank" class="keywords">Tin</a>gs）都依赖一串账户信息。这意味着账户信息对所有的TweetView控件必须是可用的。我们<a href="http://code.js-code.com/tag/keyichuangjian/" target="_blank" class="keywords">可以创建</a><a href="http://code.js-code.com/tag/yige/" target="_blank" class="keywords">一个</a>“controller”控件来监督所有的TweetView控件并管理账户状态，不过这也超出了我们现在所需要的<a href="http://code.js-code.com/tag/gongneng/" target="_blank" class="keywords">功能</a>了。所以，我们还是直接把账户信息放到tweetview的命名空间中去：</p> <p><textarea cols="50" rows="15" name="code" class="javascript">// 在命名空间中直接设置账户信息 tweetview.ACCOUNTS = <a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> dojo: <a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> enabled: true },sitepen: <a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> enabled: true } };@H_<a href="http://code.js-code.com/tag/675/" target="_blank" class="keywords">675</a>_50@ </p> <p>ACCOUNTS对象包含一系列子对象，这些子对象包含了帐号名以及启用状态。更多<a href="http://code.js-code.com/tag/shuxing/" target="_blank" class="keywords">属性</a>将被<a href="http://code.js-code.com/tag/tianjia/" target="_blank" class="keywords">添加</a>到这些子对象中，不过它们都不需要被初始化。</p> <h2>TweetView startup<br> </h2> <p>现在一切就绪，是时候来<a href="http://code.js-code.com/tag/tianjia/" target="_blank" class="keywords">添加</a>TweetView的startup<a href="http://code.js-code.com/tag/fangfa/" target="_blank" class="keywords">方法</a>了。让我们一行行来看<a href="http://code.js-code.com/tag/daima/" target="_blank" class="keywords">代码</a>。</p> <p>保留控件原生startup<a href="http://code.js-code.com/tag/fangfa/" target="_blank" class="keywords">方法</a>所提供的<a href="http://code.js-code.com/tag/gongneng/" target="_blank" class="keywords">功能</a>：</p> <p><textarea cols="50" rows="15" name="code" class="javascript">// 当控件启动时 startup: function() <a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> // 保留dojox.mobile.ScrollableView的startup<a href="http://code.js-code.com/tag/fangfa/" target="_blank" class="keywords">方法</a>所提供的<a href="http://code.js-code.com/tag/gongneng/" target="_blank" class="keywords">功能</a> thi<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>inherited(arguments<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a>@H_<a href="http://code.js-code.com/tag/675/" target="_blank" class="keywords">675</a>_50@ </p> <p><a href="http://code.js-code.com/tag/huoqu/" target="_blank" class="keywords">获取</a>控件刷新按钮的引用，并保存原始<a href="http://code.js-code.com/tag/tupian/" target="_blank" class="keywords">图片</a>路径（这是为了以后我们要从刷新状态图标切换回来）</p> <p><textarea cols="50" rows="15" name="code" class="javascript">// <a href="http://code.js-code.com/tag/huoqu/" target="_blank" class="keywords">获取</a>刷新按钮和<a href="http://code.js-code.com/tag/tupian/" target="_blank" class="keywords">图片</a> thi<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a><a href="http://code.js-code.com/tag/refres/" target="_blank" class="keywords">refres</a>hButton = dijit<a href="http://code.js-code.com/tag/b/" target="_blank" class="keywords">.b</a>yId(thi<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>getElements("tweetview<a href="http://code.js-code.com/tag/refres/" target="_blank" class="keywords">refres</a>h",thi<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>domNod<a href="http://code.js-code.com/tag/E/" target="_blank" class="keywords">E)</a><a href="http://code.js-code.com/tag/0/" target="_blank" class="keywords">[0]</a>.id<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> thi<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>iconImage = thi<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a><a href="http://code.js-code.com/tag/refres/" target="_blank" class="keywords">refres</a>hButton.iconNode.sr<a href="http://code.js-code.com/tag/c/" target="_blank" class="keywords">c;</a>@H_<a href="http://code.js-code.com/tag/675/" target="_blank" class="keywords">675</a>_50@ </p> <p>为刷新按钮绑定onClick事件来刷新tweets：</p> <p><textarea cols="50" rows="15" name="code" class="javascript">// 为刷新按钮绑定onClick事件的处理<a href="http://code.js-code.com/tag/hanshu/" target="_blank" class="keywords">函数</a>"<a href="http://code.js-code.com/tag/refres/" target="_blank" class="keywords">refres</a>h" dojo.connect(thi<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a><a href="http://code.js-code.com/tag/refres/" target="_blank" class="keywords">refres</a>hButton,"onClick",this,"<a href="http://code.js-code.com/tag/refres/" target="_blank" class="keywords">refres</a>h"<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a>@H_<a href="http://code.js-code.com/tag/675/" target="_blank" class="keywords">675</a>_50@ </p> <p>马上通过<a href="http://code.js-code.com/tag/diaoyong/" target="_blank" class="keywords">调用</a><a href="http://code.js-code.com/tag/refres/" target="_blank" class="keywords">refres</a>h<a href="http://code.js-code.com/tag/fangfa/" target="_blank" class="keywords">方法</a>来加载tweets:</p> <p><textarea cols="50" rows="15" name="code" class="javascript">// 马上加载tweets! thi<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a><a href="http://code.js-code.com/tag/refres/" target="_blank" class="keywords">refres</a>h(<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a>@H_<a href="http://code.js-code.com/tag/675/" target="_blank" class="keywords">675</a>_50@ </p> <p>！这个<a href="http://code.js-code.com/tag/refres/" target="_blank" class="keywords">refres</a>h<a href="http://code.js-code.com/tag/diaoyong/" target="_blank" class="keywords">调用</a>将在Set<a href="http://code.js-code.com/tag/Tin/" target="_blank" class="keywords">Tin</a>g视图完成后被移除，不过<a href="http://code.js-code.com/tag/zaicizhiqian/" target="_blank" class="keywords">在此之前</a>它还是必要的。</p> <p>为该控件<a href="http://code.js-code.com/tag/tianjia/" target="_blank" class="keywords">添加</a>tweetviewPane样式：</p> <p><textarea cols="50" rows="15" name="code" class="javascript">// <a href="http://code.js-code.com/tag/tianjia/" target="_blank" class="keywords">添加</a>CSS类 dojo.addClass(thi<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>domNode,"tweetviewPane"<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a>@H_<a href="http://code.js-code.com/tag/675/" target="_blank" class="keywords">675</a>_50@ </p> <p><a href="http://code.js-code.com/tag/huoqu/" target="_blank" class="keywords">获取</a>RoundRectList控件的引用以<a href="http://code.js-code.com/tag/bian/" target="_blank" class="keywords">便</a>之后使用。现在先将其隐藏，因为它现在没有任何<a href="http://code.js-code.com/tag/neirong/" target="_blank" class="keywords">内容</a>。</p> <p><textarea cols="50" rows="15" name="code" class="javascript">// <a href="http://code.js-code.com/tag/huoqu/" target="_blank" class="keywords">获取</a>列表控件 thi<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>listNode = thi<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>getListNode(<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> // 隐藏列表，因为它现在还没有填充数据 thi<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>showListNode<a href="http://code.js-code.com/tag/false/" target="_blank" class="keywords">(false)</a>;@H_<a href="http://code.js-code.com/tag/675/" target="_blank" class="keywords">675</a>_50@ </p> <p>设定<a href="http://code.js-code.com/tag/yige/" target="_blank" class="keywords">一个</a>时间间隔，每过<a href="http://code.js-code.com/tag/jifenzhong/" target="_blank" class="keywords">几分钟</a>，刷新tweet时间：</p> <p><textarea cols="50" rows="15" name="code" class="javascript">// 每60秒，更新时间 se<a href="http://code.js-code.com/tag/Tin/" target="_blank" class="keywords">Tin</a>terval(dojo.hitch(this,function() <a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> dojo.forEach(thi<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>getElements("tweetviewTime",thi<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>domNod<a href="http://code.js-code.com/tag/E/" target="_blank" class="keywords">E)</a>,function() <a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> timeNode.innerHTML = thi<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>formatTime(dojo.attr(timeNode,"data-dojo-time")<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> },this<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> }),60000<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a>@H_<a href="http://code.js-code.com/tag/675/" target="_blank" class="keywords">675</a>_50@ </p> <p>这就是TweetView startup<a href="http://code.js-code.com/tag/fangfa/" target="_blank" class="keywords">方法</a>，<a href="http://code.js-code.com/tag/tajiang/" target="_blank" class="keywords">它将</a>推动整个程序。接下来我们需要创建<a href="http://code.js-code.com/tag/yige/" target="_blank" class="keywords">一个</a><a href="http://code.js-code.com/tag/refres/" target="_blank" class="keywords">refres</a>h<a href="http://code.js-code.com/tag/fangfa/" target="_blank" class="keywords">方法</a>来更新tweet列表！</p> <h2>TweetView <a href="http://code.js-code.com/tag/refres/" target="_blank" class="keywords">refres</a>h</h2> <p><a href="http://code.js-code.com/tag/refres/" target="_blank" class="keywords">refres</a>h<a href="http://code.js-code.com/tag/fangfa/" target="_blank" class="keywords">方法</a>将会从Twitter<a href="http://code.js-code.com/tag/huoqu/" target="_blank" class="keywords">获取</a>tweets信息。由于我们不能在一次请求中<a href="http://code.js-code.com/tag/huoqu/" target="_blank" class="keywords">获取</a>多个<a href="http://code.js-code.com/tag/yonghu/" target="_blank" class="keywords">用户</a>的tweets信息，我们需要为每<a href="http://code.js-code.com/tag/yige/" target="_blank" class="keywords">一个</a>账户发送<a href="http://code.js-code.com/tag/yige/" target="_blank" class="keywords">一个</a>单独的请求，然后统一处理返回的数据。这意味着我们需要创建多个dojo.io.script<a href="http://code.js-code.com/tag/diaoyong/" target="_blank" class="keywords">调用</a>，并在<a href="http://code.js-code.com/tag/yige/" target="_blank" class="keywords">一个</a>dojo.DeferredList回调<a href="http://code.js-code.com/tag/hanshu/" target="_blank" class="keywords">函数</a>中处理返回的结果。</p> <p><textarea cols="50" rows="15" name="code" class="javascript">// 从twitter<a href="http://code.js-code.com/tag/huoqu/" target="_blank" class="keywords">获取</a>tweets信息 <a href="http://code.js-code.com/tag/refres/" target="_blank" class="keywords">refres</a>h: function() <a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> // 更新刷新按钮图标 thi<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a><a href="http://code.js-code.com/tag/refres/" target="_blank" class="keywords">refres</a>hButton.iconNode.src = thi<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>iconLoading; // 按钮被"按下" thi<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a><a href="http://code.js-code.com/tag/refres/" target="_blank" class="keywords">refres</a>hButton.<a href="http://code.js-code.com/tag/SELE/" target="_blank" class="keywords">SELE</a>ct(<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> // 为每<a href="http://code.js-code.com/tag/yige/" target="_blank" class="keywords">一个</a>帐号向defs<a href="http://code.js-code.com/tag/tianjia/" target="_blank" class="keywords">添加</a><a href="http://code.js-code.com/tag/yige/" target="_blank" class="keywords">一个</a>deferred var defs = [],accounts = tweetview.ACCOUNTS; for(var account in accounts) <a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> // 如果账户处于启用状态 if(accounts[account].enabled) <a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> // <a href="http://code.js-code.com/tag/huoqu/" target="_blank" class="keywords">获取</a> tweets! def<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>push(dojo.io.script.get(<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> call<a href="http://code.js-code.com/tag/BAC/" target="_blank" class="keywords">BAC</a>kPara<a href="http://code.js-code.com/tag/mname/" target="_blank" class="keywords">mname</a>: "call<a href="http://code.js-code.com/tag/BAC/" target="_blank" class="keywords">BAC</a>k",preventCache: true,timeout: 3000,// "substitute" 来自 _View<a href="http://code.js-code.com/tag/mixi/" target="_blank" class="keywords">mixi</a>n url: thi<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>substitute(thi<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a><a href="http://code.js-code.com/tag/servi/" target="_blank" class="keywords">servi</a>ceUrl,<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> account: account,since_id: accounts[account].since || 1 }) })<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> } } // 创建<a href="http://code.js-code.com/tag/yige/" target="_blank" class="keywords">一个</a> dojo.Deferredlist 来处理所有返回的tweets // <a href="http://code.js-code.com/tag/tianjia/" target="_blank" class="keywords">添加</a> thi<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>onTweetsReceived 作为回调<a href="http://code.js-code.com/tag/hanshu/" target="_blank" class="keywords">函数</a> new dojo.DeferredList(defs).then(dojo.hitch(this,thi<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>onTweetsReceived)<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> },@H_<a href="http://code.js-code.com/tag/675/" target="_blank" class="keywords">675</a>_50@ </p> <p>！请确保为dojo.io.script.get<a href="http://code.js-code.com/tag/fangfa/" target="_blank" class="keywords">方法</a><a href="http://code.js-code.com/tag/tianjia/" target="_blank" class="keywords">添加</a>timeout参数，这样<a href="http://code.js-code.com/tag/nide/" target="_blank" class="keywords">你的</a><a href="http://code.js-code.com/tag/cuowu/" target="_blank" class="keywords">错误</a>处理回调<a href="http://code.js-code.com/tag/hanshu/" target="_blank" class="keywords">函数</a>会被正确地触发。</p> <p>关于<a href="http://code.js-code.com/tag/refres/" target="_blank" class="keywords">refres</a>h<a href="http://code.js-code.com/tag/fangfa/" target="_blank" class="keywords">方法</a>的一些注释：</p> <ul> <li>刷新图标在该<a href="http://code.js-code.com/tag/fangfa/" target="_blank" class="keywords">方法</a>被<a href="http://code.js-code.com/tag/diaoyong/" target="_blank" class="keywords">调用</a>时切换成旋转的<a href="http://code.js-code.com/tag/giftu/" target="_blank" class="keywords">gif图</a>片。</li> <li>某个账户的tweets信息只有在该账户被启用时才会被<a href="http://code.js-code.com/tag/huoqu/" target="_blank" class="keywords">获取</a>。</li> <li>注意账户的“since”<a href="http://code.js-code.com/tag/shuxing/" target="_blank" class="keywords">属性</a>被<a href="http://code.js-code.com/tag/tianjia/" target="_blank" class="keywords">添加</a>到URL中。该<a href="http://code.js-code.com/tag/shuxing/" target="_blank" class="keywords">属性</a>在第一次<a href="http://code.js-code.com/tag/huoqu/" target="_blank" class="keywords">获取</a>数据之后被初始化，以<a href="http://code.js-code.com/tag/bian/" target="_blank" class="keywords">便</a>之后同样的tweets信息不会被重复<a href="http://code.js-code.com/tag/huoqu/" target="_blank" class="keywords">获取</a>。</li> </ul> <h2>TweetView onTweetsReceived 和 sortTweets<br> </h2> <p>onTweetsReceived<a href="http://code.js-code.com/tag/fangfa/" target="_blank" class="keywords">方法</a><a href="http://code.js-code.com/tag/huoqu/" target="_blank" class="keywords">获取</a>所有通过dojo.io.script.calls创建的dojo.Deferreds的返回结果。现在我们已经有了每个账户中的tweets信息，但我们还有几个问题：</p> <ul> <li>这些tweets根据<a href="http://code.js-code.com/tag/yonghu/" target="_blank" class="keywords">用户</a>@L_157_<a href="http://code.js-code.com/tag/197/" target="_blank" class="keywords">197</a>@——我们需要将它们加入到同<a href="http://code.js-code.com/tag/yige/" target="_blank" class="keywords">一个</a>数组中。这是<a href="http://code.js-code.com/tag/yige/" target="_blank" class="keywords">一个</a>很容易<a href="http://code.js-code.com/tag/jiejue/" target="_blank" class="keywords">解决</a>的问题。</li> <li>所有的tweets在融合到一起之后，需要根据日期排序。</li> </ul> <p>在我们将tweets<a href="http://code.js-code.com/tag/shuchu/" target="_blank" class="keywords">输出</a>到控件中的列表前，我们必须先<a href="http://code.js-code.com/tag/duiqijinxingpaixu/" target="_blank" class="keywords">对其进行排序</a>。其中第一部分是将他们放入同<a href="http://code.js-code.com/tag/yige/" target="_blank" class="keywords">一个</a>数组中：</p> <p><textarea cols="50" rows="15" name="code" class="javascript">// 将tweets放入<a href="http://code.js-code.com/tag/yige/" target="_blank" class="keywords">一个</a>数组，并根据日期排序 sortTweets: function(deflist) <a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> // 为我们的tweets创建<a href="http://code.js-code.com/tag/yige/" target="_blank" class="keywords">一个</a>数组 var allTweets = []; // 为每<a href="http://code.js-code.com/tag/yige/" target="_blank" class="keywords">一个</a>def进行处理 dojo.forEach(deflist,function(def) <a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> // 定义要处理的<a href="http://code.js-code.com/tag/shuxing/" target="_blank" class="keywords">属性</a> // Tweet是“def[l]”,Mentions 是 def[1].results var tweets = (def[1].results ? def[1].results : def[1]<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> // 如果我们<a href="http://code.js-code.com/tag/huoqu/" target="_blank" class="keywords">获取</a>了一些数据 if(tweet<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>length) <a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> // <a href="http://code.js-code.com/tag/huoqu/" target="_blank" class="keywords">获取</a><a href="http://code.js-code.com/tag/yonghuming/" target="_blank" class="keywords">用户名</a>并更新since<a href="http://code.js-code.com/tag/shuxing/" target="_blank" class="keywords">属性</a> var username = !tweets<a href="http://code.js-code.com/tag/0/" target="_blank" class="keywords">[0]</a>.user ? def[1].query.<a href="http://code.js-code.com/tag/repla/" target="_blank" class="keywords">repla</a>ce("%40","") : tweets<a href="http://code.js-code.com/tag/0/" target="_blank" class="keywords">[0]</a>.user.screen_name; // 更新该<a href="http://code.js-code.com/tag/yonghu/" target="_blank" class="keywords">用户</a>的since<a href="http://code.js-code.com/tag/shuxing/" target="_blank" class="keywords">属性</a> tweetview.ACCOUNTS[username].since = tweets<a href="http://code.js-code.com/tag/0/" target="_blank" class="keywords">[0]</a>.id_str; // 如果这是<a href="http://code.js-code.com/tag/yige/" target="_blank" class="keywords">一个</a><a href="http://code.js-code.com/tag/chaxun/" target="_blank" class="keywords">查询</a>，我们需要为tweet<a href="http://code.js-code.com/tag/tianjia/" target="_blank" class="keywords">添加</a><a href="http://code.js-code.com/tag/yonghuming/" target="_blank" class="keywords">用户名</a> if(def[1].query) <a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> dojo.forEach(tweets,function(tweet) <a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> tweet.searchUser = username; }<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> } // 组成<a href="http://code.js-code.com/tag/yige/" target="_blank" class="keywords">一个</a>大数组 allTweets = allTweet<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>concat(tweets<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> } },this<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a>@H_<a href="http://code.js-code.com/tag/675/" target="_blank" class="keywords">675</a>_50@ </p> <p>！注意def[1]的处理、<a href="http://code.js-code.com/tag/yonghuming/" target="_blank" class="keywords">用户名</a>的<a href="http://code.js-code.com/tag/huoqu/" target="_blank" class="keywords">获取</a>以及def.query的检查。<a href="http://code.js-code.com/tag/chaxun/" target="_blank" class="keywords">查询</a>API返回<a href="http://code.js-code.com/tag/yige/" target="_blank" class="keywords">一个</a>与user timeline API不同的JSON结构。我们可以为处理mentions信息创建<a href="http://code.js-code.com/tag/yige/" target="_blank" class="keywords">一个</a>不同的子类，但是<a href="http://code.js-code.com/tag/zaiben/" target="_blank" class="keywords">在本</a>应用程序中我们还不需要花时间这么做，我们使用TweetView来处理tweets和mentions。</p> <p>现在所有的tweets都在<a href="http://code.js-code.com/tag/yige/" target="_blank" class="keywords">一个</a>大数组中了，接下来我们将把他们按时间排序，并将结果返回给onTweetsReceived<a href="http://code.js-code.com/tag/fangfa/" target="_blank" class="keywords">方法</a>。</p> <p><textarea cols="50" rows="15" name="code" class="javascript"> // 按时间排序 allTweets<a href="http://code.js-code.com/tag/so/" target="_blank" class="keywords">.so</a>rt(function(a,b) <a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> var atime = new Date(a.created_at),btime = new Date(b.created_at<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> // 普通的排序算法会返回b-a而不是a-b // 不过，我们想要把最近的时间放前面 // 所以我们使用atime-btime return atime - btime; }<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> // 返回tweets return allTweets; }@H_<a href="http://code.js-code.com/tag/675/" target="_blank" class="keywords">675</a>_50@ </p> <p>所有的tweets排序完后，是时候停止刷新按钮的旋转状态，并将tweets传给<a href="http://code.js-code.com/tag/updat/" target="_blank" class="keywords">updat</a>eContent<a href="http://code.js-code.com/tag/fangfa/" target="_blank" class="keywords">方法</a>来更新<a href="http://code.js-code.com/tag/yemian/" target="_blank" class="keywords">页面</a>了：</p> <p><textarea cols="50" rows="15" name="code" class="javascript">// 当所有<a href="http://code.js-code.com/tag/neirong/" target="_blank" class="keywords">内容</a>从Twitter加载完毕后触发 onTweetsReceived: function(rawTweetData) <a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> // 将tweets排序 tweetData = this<a href="http://code.js-code.com/tag/so/" target="_blank" class="keywords">.so</a>rtTweets(rawTweetData<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> // 设置刷新按钮的图标 thi<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a><a href="http://code.js-code.com/tag/refres/" target="_blank" class="keywords">refres</a>hButton.iconNode.src = thi<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>iconImage; thi<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a><a href="http://code.js-code.com/tag/refres/" target="_blank" class="keywords">refres</a>hButton.<a href="http://code.js-code.com/tag/SELE/" target="_blank" class="keywords">SELE</a>ct<a href="http://code.js-code.com/tag/true/" target="_blank" class="keywords">(true)</a>; // tweets不为空 if(tweetData.length) <a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> // 更新<a href="http://code.js-code.com/tag/neirong/" target="_blank" class="keywords">内容</a> thi<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a><a href="http://code.js-code.com/tag/updat/" target="_blank" class="keywords">updat</a>eContent(tweetData<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> } },@H_<a href="http://code.js-code.com/tag/675/" target="_blank" class="keywords">675</a>_50@ </p> <p>！Tweets根据时间排序，最新的排在最前面 ——这确保最新的tweets会被放在列表的最顶端。同时请注意，<a href="http://code.js-code.com/tag/updat/" target="_blank" class="keywords">updat</a>eContent<a href="http://code.js-code.com/tag/fangfa/" target="_blank" class="keywords">方法</a>只有在哦我们确实<a href="http://code.js-code.com/tag/huoqu/" target="_blank" class="keywords">获取</a>了新tweets之后才会被<a href="http://code.js-code.com/tag/diaoyong/" target="_blank" class="keywords">调用</a>。</p> <h2>TweetView <a href="http://code.js-code.com/tag/updat/" target="_blank" class="keywords">updat</a>eContent</h2> <p><a href="http://code.js-code.com/tag/updat/" target="_blank" class="keywords">updat</a>eContent<a href="http://code.js-code.com/tag/fangfa/" target="_blank" class="keywords">方法</a><a href="http://code.js-code.com/tag/huoqu/" target="_blank" class="keywords">获取</a>排序过的tweets，并为他们创建dojox.mobile.ListItem控件，然后将它们放到列表的顶端。在<a href="http://code.js-code.com/tag/womenchuang/" target="_blank" class="keywords">我们创</a>建<a href="http://code.js-code.com/tag/updat/" target="_blank" class="keywords">updat</a>eContent之前，我们需要一些工具<a href="http://code.js-code.com/tag/fangfa/" target="_blank" class="keywords">方法</a>来格式化tweet的时间戳和<a href="http://code.js-code.com/tag/wenzi/" target="_blank" class="keywords">文字</a><a href="http://code.js-code.com/tag/neirong/" target="_blank" class="keywords">内容</a>：</p> <p><textarea cols="50" rows="15" name="code" class="javascript">// 为<a href="http://code.js-code.com/tag/yige/" target="_blank" class="keywords">一个</a>字符串<a href="http://code.js-code.com/tag/tianjia/" target="_blank" class="keywords">添加</a>恰当的tweet linkification formatTweet: function(tweetText) <a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> return tweetText. <a href="http://code.js-code.com/tag/repla/" target="_blank" class="keywords">repla</a>ce(/(<a href="http://code.js-code.com/tag/http/" target="_blank" class="keywords">http</a>s?://///S+)/gi,'<a href="$1" mce_href="$1">$1</a>'). <a href="http://code.js-code.com/tag/repla/" target="_blank" class="keywords">repla</a>ce(/(^|/s)@(/w+)/g,'$1<a href="<a href="http://code.js-code.com/tag/http/" target="_blank" class="keywords">http</a>://twitter.com/$2" mce_href="<a href="http://code.js-code.com/tag/http/" target="_blank" class="keywords">http</a>://twitter.com/$2">@$2</a>'). <a href="http://code.js-code.com/tag/repla/" target="_blank" class="keywords">repla</a>ce(/(^|/s)#(/w+)/g,'$1<a href="<a href="http://code.js-code.com/tag/http/" target="_blank" class="keywords">http</a>://search.twitter.com/search?q=%23$2" mce_href="<a href="http://code.js-code.com/tag/http/" target="_blank" class="keywords">http</a>://search.twitter.com/search?q=%23$2">#$2</a>'<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> },// 格式化时间戳 formatTime: function(dat<a href="http://code.js-code.com/tag/E/" target="_blank" class="keywords">E)</a> <a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> // <a href="http://code.js-code.com/tag/huoqu/" target="_blank" class="keywords">获取</a>当前时间 var @L_<a href="http://code.js-code.com/tag/696/" target="_blank" class="keywords">696</a>_242@ = new Date(<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> // 根据时间戳<a href="http://code.js-code.com/tag/zifuchuanchuangjian/" target="_blank" class="keywords">字符串创建</a><a href="http://code.js-code.com/tag/yige/" target="_blank" class="keywords">一个</a>日期对象 var tweetDate = new Date(dat<a href="http://code.js-code.com/tag/E/" target="_blank" class="keywords">E)</a>; // 计算时间: 秒 var secondsDifferent = Math.floor((@L_<a href="http://code.js-code.com/tag/696/" target="_blank" class="keywords">696</a>_242@ - tweetDat<a href="http://code.js-code.com/tag/E/" target="_blank" class="keywords">E)</a> / 1000<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> if(secondsDifferent < 60) <a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> return secondsDifferent + " " + (thi<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>l10n["field-second"]) + (secondsDifferent > 1 ? "s" : ""<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> } // 计算时间: 分钟 var <a href="http://code.js-code.com/tag/minut/" target="_blank" class="keywords">minut</a>esDifferent = Math.floor(secondsDifferent / 60<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> if(<a href="http://code.js-code.com/tag/minut/" target="_blank" class="keywords">minut</a>esDifferent < 60) <a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> return <a href="http://code.js-code.com/tag/minut/" target="_blank" class="keywords">minut</a>esDifferent + " " + thi<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>l10n["field-<a href="http://code.js-code.com/tag/minut/" target="_blank" class="keywords">minut</a>e"] + (<a href="http://code.js-code.com/tag/minut/" target="_blank" class="keywords">minut</a>esDifferent > 1 ? "s" : ""<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> } // 计算时间: 小时 var hoursDifferent = Math.floor(<a href="http://code.js-code.com/tag/minut/" target="_blank" class="keywords">minut</a>esDifferent / 60<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> if(hoursDifferent < <a href="http://code.js-code.com/tag/24/" target="_blank" class="keywords">24)</a> <a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> return hoursDifferent + " " + thi<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>l10n["field-hour"] + (hoursDifferent > 1 ? "s" : ""<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> } // 计算时间: 天数 var daysDifferent = Math.floor(hoursDifferent / <a href="http://code.js-code.com/tag/24/" target="_blank" class="keywords">24)</a>; return daysDifferent + " " + thi<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>l10n["field-day"] + (daysDifferent > 1 ? "s" : ""<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> },@H_<a href="http://code.js-code.com/tag/675/" target="_blank" class="keywords">675</a>_50@ </p> <p>有了上述<a href="http://code.js-code.com/tag/fangfa/" target="_blank" class="keywords">方法</a>之后，我们<a href="http://code.js-code.com/tag/keyichuangjian/" target="_blank" class="keywords">可以创建</a>我们自己的<a href="http://code.js-code.com/tag/updat/" target="_blank" class="keywords">updat</a>eContent<a href="http://code.js-code.com/tag/fangfa/" target="_blank" class="keywords">方法</a>了：</p> <p><textarea cols="50" rows="15" name="code" class="javascript">// 在<a href="http://code.js-code.com/tag/huoqu/" target="_blank" class="keywords">获取</a>tweets之后触发 <a href="http://code.js-code.com/tag/updat/" target="_blank" class="keywords">updat</a>eContent: function(rawTweetData) <a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> // 处理每一条tweet信息 dojo.forEach(rawTweetData,function(tweet) <a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> // Get the user's screen name var screenName = tweet.searchUser || tweet.user.screen_name; // 创建<a href="http://code.js-code.com/tag/yige/" target="_blank" class="keywords">一个</a>新的列表元素，并<a href="http://code.js-code.com/tag/tianjia/" target="_blank" class="keywords">添加</a>到列表顶部 var item = new dojox.mobile.ListItem(<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> "class": "tweetviewListItem user-" + screenName }).placeAt(thi<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>listNode,"first"<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> // 使用我们的tweet模板更新列表元素的<a href="http://code.js-code.com/tag/neirong/" target="_blank" class="keywords">内容</a> ite<a href="http://code.js-code.com/tag/m/" target="_blank" class="keywords">m.</a>containerNode.innerHTML = thi<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>substitute(thi<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>tweetTemplate<a href="http://code.js-code.com/tag/Stri/" target="_blank" class="keywords">Stri</a>ng,<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> text: thi<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>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: thi<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>formatTime(tweet.created_at),created_at: tweet.created_at,id: tweet.id }<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> },this<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> // 现在列表<a href="http://code.js-code.com/tag/neirong/" target="_blank" class="keywords">内容</a>填充完毕，<a href="http://code.js-code.com/tag/xianshi/" target="_blank" class="keywords">显示</a>它 thi<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>showListNode<a href="http://code.js-code.com/tag/true/" target="_blank" class="keywords">(true)</a>; },@H_<a href="http://code.js-code.com/tag/675/" target="_blank" class="keywords">675</a>_50@ </p> <p>！注意，user-<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a>screenNam<a href="http://code.js-code.com/tag/E/" target="_blank" class="keywords">E}</a> CSS类被<a href="http://code.js-code.com/tag/tianjia/" target="_blank" class="keywords">添加</a>到每<a href="http://code.js-code.com/tag/yige/" target="_blank" class="keywords">一个</a>列表元素中。该CSS类将在下<a href="http://code.js-code.com/tag/yige/" target="_blank" class="keywords">一个</a>教程中将介绍的Set<a href="http://code.js-code.com/tag/Tin/" target="_blank" class="keywords">Tin</a>gs视图中启用/禁用<a href="http://code.js-code.com/tag/yonghu/" target="_blank" class="keywords">用户</a><a href="http://code.js-code.com/tag/gongneng/" target="_blank" class="keywords">功能</a>起到重要作用。</p> <p>我们为每一条<a href="http://code.js-code.com/tag/huoqu/" target="_blank" class="keywords">获取</a>的tweet创建<a href="http://code.js-code.com/tag/yige/" target="_blank" class="keywords">一个</a>新的列表元素。在新的列表元素创建之后，我们又<a href="http://code.js-code.com/tag/weiqi/" target="_blank" class="keywords">为其</a>填充格式化过的<a href="http://code.js-code.com/tag/wenzi/" target="_blank" class="keywords">文字</a><a href="http://code.js-code.com/tag/neirong/" target="_blank" class="keywords">内容</a>和时间戳。最后列表元素被<a href="http://code.js-code.com/tag/tianjia/" target="_blank" class="keywords">添加</a>到列表的最顶端。</p> <h2>Tweets 和 Mentions 的<a href="http://code.js-code.com/tag/gongneng/" target="_blank" class="keywords">功能</a>完成了</h2> <p>现在我们已经讲完了TweetView的TweeView类的所有JavaScript<a href="http://code.js-code.com/tag/neirong/" target="_blank" class="keywords">内容</a>！Tweets和Mentions视图现在可以读取tweets并进行刷新!让我们回顾下我们是怎么做的吧:</p> <ul> <li>创建<a href="http://code.js-code.com/tag/yige/" target="_blank" class="keywords">一个</a>被所有TweetView控件使用的_View<a href="http://code.js-code.com/tag/mixi/" target="_blank" class="keywords">mixi</a>n。</li> <li>创建<a href="http://code.js-code.com/tag/yige/" target="_blank" class="keywords">一个</a>tweetview命名空间下的TweetView类</li> <li>更新Tweets和Mentions的HTML<a href="http://code.js-code.com/tag/yemian/" target="_blank" class="keywords">页面</a>来使用新的TweetView控件</li> <li>在tweetview命名控件下设置<a href="http://code.js-code.com/tag/yige/" target="_blank" class="keywords">一个</a>ACCOUNTS对象来使得他们对所有控件是可见的</li> <li>为TweetView创建一系列<a href="http://code.js-code.com/tag/fangfa/" target="_blank" class="keywords">方法</a>来<a href="http://code.js-code.com/tag/huoqu/" target="_blank" class="keywords">获取</a>tweets、处理获得的数据、格式化并<a href="http://code.js-code.com/tag/xianshi/" target="_blank" class="keywords">显示</a>数据</li> </ul> <p>！现在所有的<a href="http://code.js-code.com/tag/gongneng/" target="_blank" class="keywords">功能</a>已经完成，回过头再来看看startup<a href="http://code.js-code.com/tag/fangfa/" target="_blank" class="keywords">方法</a>。现在所有的<a href="http://code.js-code.com/tag/fangfa/" target="_blank" class="keywords">方法</a>都已经实现，应该<a href="http://code.js-code.com/tag/bunanlijie/" target="_blank" class="keywords">不难理解</a>整个控件的生命周期中发生了什么。</p> <p>现在只剩下最后一步了：<a href="http://code.js-code.com/tag/xiugai/" target="_blank" class="keywords">修改</a>列表的样式。</p> <h2><a href="http://code.js-code.com/tag/xiugai/" target="_blank" class="keywords">修改</a>TweetView和其中子控件的样式</h2> <p>为列表<a href="http://code.js-code.com/tag/xiugai/" target="_blank" class="keywords">修改</a>样式是挺有意思的部分，可能也是最简单的。到目前为止，ListItem控件的<a href="http://code.js-code.com/tag/neirong/" target="_blank" class="keywords">内容</a>只能使用单行<a href="http://code.js-code.com/tag/wenzi/" target="_blank" class="keywords">文字</a>，所以我们需要在我们的TweetView.css样式表中改进这一点。</p> <p><textarea cols="50" rows="15" name="code" class="xhtml">.tweetviewHidden <a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> /* 我们使<a href="http://code.js-code.com/tag/yongzhege/" target="_blank" class="keywords">用这个</a>来隐藏节点 */ display:none; } .tweetviewList li <a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> /* 最小高度，确保<a href="http://code.js-code.com/tag/yonghu/" target="_blank" class="keywords">用户</a>头像可以<a href="http://code.js-code.com/tag/xianshi/" target="_blank" class="keywords">显示</a> */ min-height:55px; padding-top:8px; } .tweetviewListItem <a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> /* <a href="http://code.js-code.com/tag/neirong/" target="_blank" class="keywords">内容</a>可以分<a href="http://code.js-code.com/tag/duoxingxianshi/" target="_blank" class="keywords">多行显示</a> */ line-height<a href="http://code.js-code.com/tag/1/" target="_blank" class="keywords">:1</a>8px; height:auto; }@H_<a href="http://code.js-code.com/tag/675/" target="_blank" class="keywords">675</a>_50@ </p> <p>现在ListItem可以<a href="http://code.js-code.com/tag/xianshi/" target="_blank" class="keywords">显示</a>多行<a href="http://code.js-code.com/tag/neirong/" target="_blank" class="keywords">内容</a>了，接下来我们为已经在tweet item模板中定义的CSS类<a href="http://code.js-code.com/tag/tianjia/" target="_blank" class="keywords">添加</a>具体<a href="http://code.js-code.com/tag/neirong/" target="_blank" class="keywords">内容</a>：</p> <p><textarea cols="50" rows="15" name="code" class="xhtml">/* 在<a href="http://code.js-code.com/tag/dibu/" target="_blank" class="keywords">底部</a>提供适当的留白 */ .mblScrollableViewContainer <a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> padding-bottom<a href="http://code.js-code.com/tag/4/" target="_blank" class="keywords">:4</a>0px !important; } /* <a href="http://code.js-code.com/tag/yonghu/" target="_blank" class="keywords">用户</a>头像 */ .tweetviewAvatar <a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> float:left; } /* tweets<a href="http://code.js-code.com/tag/neirong/" target="_blank" class="keywords">内容</a>区域 */ .tweetviewContent <a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> padding-left:60px; } /* <a href="http://code.js-code.com/tag/yonghuming/" target="_blank" class="keywords">用户名</a>样式 */ .tweetviewUser <a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> font-size:80%; } /* tweet<a href="http://code.js-code.com/tag/wenzi/" target="_blank" class="keywords">文字</a>样式 */ .tweetviewText <a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> font-size:70%; font-weight:normal; padding-right:50px; padding-bottom<a href="http://code.js-code.com/tag/1/" target="_blank" class="keywords">:1</a>0px; } /* tweet time */ .tweetviewTime <a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> float<a href="http://code.js-code.com/tag/r/" target="_blank" class="keywords">:r</a>ight; color:#777; font-size:65%; font-weight:normal; padding-right<a href="http://code.js-code.com/tag/1/" target="_blank" class="keywords">:1</a>0px; } /* clears floats at the end of the list item */ .tweetviewClear <a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> clear:both; }@H_<a href="http://code.js-code.com/tag/675/" target="_blank" class="keywords">675</a>_50@ </p> <p>一切都搞定啦！<a href="http://code.js-code.com/tag/yige/" target="_blank" class="keywords">一个</a>和<a href="http://code.js-code.com/tag/xiaoguo/" target="_blank" class="keywords">效果</a>图一样漂亮的tweet列表！</p> <p><span style="font-size: medium;"><a href="javascript:void()" class="outlink" data="/link?url=http://dojotoolkit.org/documentation/tutorials/1.6/mobile/tweetview/starting_tweetview/demo/" rel="nofollow" target="_blank">查看示例</a> </span> </p> <h2>最难的部分已经过去！</h2> <p>和本文开始的时候保证的一样，Tweets和Mentions视图是本系列教程中最复杂的。<a href="http://code.js-code.com/tag/xiayipian/" target="_blank" class="keywords">下一篇</a>教程中，我们将着重介绍Set<a href="http://code.js-code.com/tag/Tin/" target="_blank" class="keywords">Tin</a>g视图，该视图用来启用/禁用指定账户。到那时，回顾下本教程中的示例和<a href="http://code.js-code.com/tag/daima/" target="_blank" class="keywords">代码</a>，确保你没有错过每一步!</p> <h2><br> </h2> <h2><a href="javascript:void()" class="outlink" data="/link?url=http://dojotoolkit.org/documentation/tutorials/1.6/mobile/tweetview/starting_tweetview/resources/Starting_TweetView.zip" rel="nofollow" target="_blank">下载源代码</a> <br> </h2> <h2>TweetView系列<a href="http://code.js-code.com/tag/zhongwen/" target="_blank" class="keywords">中文</a>教程</h2> <p><a href="javascript:void()" class="outlink" data="/link?url=http://blog.csdn.net/dojotoolkit/archive/2011/04/13/6321349.aspx" target="_blank" rel="nofollow">Dojo mobile TweetView 系列教程之一 —— dojox.mobile入门</a> </p> <p><a href="javascript:void()" class="outlink" data="/link?url=http://blog.csdn.net/dojotoolkit/archive/2011/04/18/6330887.aspx" target="_blank" rel="nofollow">Dojo mobile TweetView 系列教程之二 —— TweetView 启程</a> </p> <p><a href="javascript:void()" class="outlink" data="/link?url=http://blog.csdn.net/dojotoolkit/archive/2011/05/18/6430382.aspx" target="_blank" rel="nofollow">Dojo mobile TweetView 系列教程之三 —— Tweets和Mentions视图</a> </p> <p><a href="javascript:void()" class="outlink" data="/link?url=http://blog.csdn.net/dojotoolkit/archive/2011/06/10/6535813.aspx" rel="nofollow" target="_blank"><span class="title">Dojo mobile TweetView 系列教程之四 —— 创建Setting视图 </span> </a> </p><h2>大佬总结</h2> <p>以上是<a href="http://code.js-code.com" title="http://code.js-code.com">大佬教程</a>为你收集整理的<a href="http://code.js-code.com/dojo/338546.html" class="article_link" target="_blank">Dojo mobile TweetView 系列教程之三——Tweets和Mentions视图</a>全部内容，希望文章能够帮你解决<a href="http://code.js-code.com/dojo/338546.html" class="article_link" target="_blank">Dojo mobile TweetView 系列教程之三——Tweets和Mentions视图</a>所遇到的程序开发问题。</p> <p>如果觉得<a href="http://code.js-code.com" title="http://code.js-code.com">大佬教程</a>网站内容还不错，欢迎将<a href="http://code.js-code.com" title="http://code.js-code.com">大佬教程</a>推荐给程序员好友。</p> <blockquote>本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。<br>如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。</blockquote> </div> <div class="tags text-center clearfix center-block">标签：<a href="http://code.js-code.com/tag/dojo/" class="tag_link" target="_blank">dojo</a><a href="http://code.js-code.com/tag/mentions/" class="tag_link" target="_blank">mentions</a><a href="http://code.js-code.com/tag/mobile/" class="tag_link" target="_blank">mobile</a><a href="http://code.js-code.com/tag/tweetview/" class="tag_link" target="_blank">tweetview</a><a href="http://code.js-code.com/tag/zhisan/" class="tag_link" target="_blank">之三</a><a href="http://code.js-code.com/tag/jiaocheng/" class="tag_link" target="_blank">教程</a><a href="http://code.js-code.com/tag/xilie/" class="tag_link" target="_blank">系列</a><a href="http://code.js-code.com/tag/shitu/" class="tag_link" target="_blank">视图</a></div> </div> <div class="panel panel-default"> <ul class="list-group"> <li class="list-group-item"><a href="http://code.js-code.com/dojo/338545.html" class="prev" target="_self"> 上一篇: Dojo类似Jquery操作DOM的方法</a><a href="http://code.js-code.com/dojo/338547.html" class="text-muted pull-right" target="_self"> 下一篇:浅析dojo.connect的几种用法（一...</a></li> </ul> </div> <div class="panel panel-default"> </div> <div class="panel panel-default"> <div class="panel-heading font-weight-bold">猜你在找的Dojo相关文章</div> <ul class="list-group"><li class="list-group-item"> <a href="http://code.js-code.com/dojo/338974.html" title="Dojo学习笔记">Dojo学习笔记</a> <span class="text-muted pull-right">2022-04-21</span> </li><li class="list-group-item"> <a href="http://code.js-code.com/dojo/1324.html" title="第一个dojo hello world">第一个dojo hello world</a> <span class="text-muted pull-right">2019-10-11</span> </li><li class="list-group-item"> <a href="http://code.js-code.com/dojo/1323.html" title="dojo.addOnLoad">dojo.addOnLoad</a> <span class="text-muted pull-right">2019-10-11</span> </li><li class="list-group-item"> <a href="http://code.js-code.com/dojo/1322.html" title="dojo.byId and dijit.byId">dojo.byId and dijit.byId</a> <span class="text-muted pull-right">2019-10-11</span> </li><li class="list-group-item"> <a href="http://code.js-code.com/dojo/1321.html" title="dojo验证函数">dojo验证函数</a> <span class="text-muted pull-right">2019-10-11</span> </li><li class="list-group-item"> <a href="http://code.js-code.com/dojo/1320.html" title="dojo之ValidationTextbox">dojo之ValidationTextbox</a> <span class="text-muted pull-right">2019-10-11</span> </li><li class="list-group-item"> <a href="http://code.js-code.com/dojo/1319.html" title="用 Dojo 和 Ajax 创建可重用和可重新发布的组件">用 Dojo 和 Ajax 创建可重用和可重新发布的组件</a> <span class="text-muted pull-right">2019-10-11</span> </li><li class="list-group-item"> <a href="http://code.js-code.com/dojo/1318.html" title="dojo学习">dojo学习</a> <span class="text-muted pull-right">2019-10-11</span> </li><li class="list-group-item"> <a href="http://code.js-code.com/dojo/1317.html" title="掌握 Dojo 工具包，第 1 部分: Dojo 入门简介">掌握 Dojo 工具包，第 1 部分: Dojo 入门简介</a> <span class="text-muted pull-right">2019-10-11</span> </li><li class="list-group-item"> <a href="http://code.js-code.com/dojo/1316.html" title="Using the Dojo JavaScript Library to Build Ajax Applications一书翻译完毕">Using the Dojo JavaScript Library to Build Ajax Applications一书翻译完毕</a> <span class="text-muted pull-right">2019-10-11</span> </li></ul> </div> <div class="panel panel-default"> <div class="panel-heading"><a href="https://www.js-code.com/all" class="font-weight-bold">其他相关热搜词</a><span class="pull-right"><a href="https://www.js-code.com/all">更多</a></span></div> <div class="panel-body list-cloud"><a href="http://code.js-code.com/tag/php/">php</a><a href="http://code.js-code.com/tag/Java/">Java</a><a href="http://code.js-code.com/tag/Python/">Python</a><a href="http://code.js-code.com/tag/chengxuyuan/">程序员</a><a href="http://code.js-code.com/tag/load/">load</a><a href="http://code.js-code.com/tag/zhong/">中</a><a href="http://code.js-code.com/tag/ruhe/">如何</a><a href="http://code.js-code.com/tag/string/">string</a><a href="http://code.js-code.com/tag/shiyong/">使用</a><a href="http://code.js-code.com/tag/canshu/">参数</a><a href="http://code.js-code.com/tag/jquery/">jquery</a><a href="http://code.js-code.com/tag/kaifa/">开发</a><a href="http://code.js-code.com/tag/anzhuang/">安装</a><a href="http://code.js-code.com/tag/list/">list</a><a href="http://code.js-code.com/tag/linux/">linux</a><a href="http://code.js-code.com/tag/ios/">ios</a><a href="http://code.js-code.com/tag/android/">android</a><a href="http://code.js-code.com/tag/gongju/">工具</a><a href="http://code.js-code.com/tag/javascript/">javascript</a><a href="http://code.js-code.com/tag/cap/">cap</a></div> </div> </div> <div class="col-sm-3"> <div style="position:fixed!important;top:334px;height:550px;z-index:9999;"> <div class="_wfhdnfcjs9"></div> <script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6828100", container: "_wfhdnfcjs9", async: true }); </script>  <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js" async="async" defer="defer" > </script> </div> <div class="panel panel-default" style="display: none;"> <div class="panel-heading font-weight-bold">最新Dojo教程</div> <ul class="list-group"><li class="list-group-item"> <a href="http://code.js-code.com/dojo/338971.html" title="DOjo的一个幻灯片播放例子">DOjo的一个幻灯片播放例子</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/dojo/338973.html" title="Dojo Spreadsheet Widget - 基于Ajax的Excel">Dojo Spreadsheet Widget - 基于Ajax的Excel</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/dojo/338972.html" title="使用Dojo实现页面不刷新提交数据">使用Dojo实现页面不刷新提交数据</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/dojo/338974.html" title="Dojo学习笔记">Dojo学习笔记</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/dojo/338967.html" title="dojo学习笔记（四）">dojo学习笔记（四）</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/dojo/338970.html" title="为何你应该选择Dojo？">为何你应该选择Dojo？</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/dojo/338969.html" title="dojo学习笔记（二） dojo.lang.array & dojo.lang.func & dojo.string.extras">dojo学习笔记（二） dojo.lang.array & dojo.lang.func & dojo.string.extras</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/dojo/338966.html" title="dojo学习笔记（六）－ ContentPane">dojo学习笔记（六）－ ContentPane</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/dojo/338968.html" title="dojo学习笔记（三）">dojo学习笔记（三）</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/dojo/338963.html" title="Dojo学习笔记">Dojo学习笔记</a> </li></ul> </div> <div class="panel panel-default" style="display: none;"> <div class="panel-heading font-weight-bold">热门Dojo教程</div> <ul class="list-group"><li class="list-group-item"> <a href="http://code.js-code.com/dojo/338974.html" title="Dojo学习笔记">Dojo学习笔记</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/dojo/338973.html" title="Dojo Spreadsheet Widget - 基于Ajax的Excel">Dojo Spreadsheet Widget - 基于Ajax的Excel</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/dojo/338972.html" title="使用Dojo实现页面不刷新提交数据">使用Dojo实现页面不刷新提交数据</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/dojo/338971.html" title="DOjo的一个幻灯片播放例子">DOjo的一个幻灯片播放例子</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/dojo/338970.html" title="为何你应该选择Dojo？">为何你应该选择Dojo？</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/dojo/338969.html" title="dojo学习笔记（二） dojo.lang.array & dojo.lang.func & dojo.string.extras">dojo学习笔记（二） dojo.lang.array & dojo.lang.func & dojo.string.extras</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/dojo/338968.html" title="dojo学习笔记（三）">dojo学习笔记（三）</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/dojo/338967.html" title="dojo学习笔记（四）">dojo学习笔记（四）</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/dojo/338966.html" title="dojo学习笔记（六）－ ContentPane">dojo学习笔记（六）－ ContentPane</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/dojo/338965.html" title="DOJO学习笔记（七）－日期控件DropdownDatePicker和DatePicker">DOJO学习笔记（七）－日期控件DropdownDatePicker和DatePicker</a> </li></ul> </div> </div> </div> </div> <footer id="footer"> <div class="container"> <div class="row hidden-xs"> <dl class="col-sm-4 site-link"> <dt>最近更新</dt><dd> <a href="http://code.js-code.com/webqianduan/919677.html" title="面向前端开发人员的 20 个强大的 VS Code 扩展">面向前端开发人员的 20 个强大的...</a> <span class="text-muted pull-right">2024-04-28 </span> </dd><dd> <a href="http://code.js-code.com/webqianduan/919676.html" title="面向前端开发人员的 20 个强大的 VS Code 扩展">面向前端开发人员的 20 个强大的...</a> <span class="text-muted pull-right">2024-04-28 </span> </dd><dd> <a href="http://code.js-code.com/chengxubiji/919675.html" title="Linux——（1）基本命令">Linux——（1）基本命令</a> <span class="text-muted pull-right">2022-07-21 </span> </dd><dd> <a href="http://code.js-code.com/chengxubiji/919674.html" title="【UNIAPP】上传视频，进度条的前台与后端">【UNIAPP】上传视频，进度条的前...</a> <span class="text-muted pull-right">2022-07-21 </span> </dd><dd> <a href="http://code.js-code.com/chengxubiji/919673.html" title="You can't specify target table 'xxx' for update in FROM clause的解决">You can't specify target t...</a> <span class="text-muted pull-right">2022-07-21 </span> </dd><dd> <a href="http://code.js-code.com/chengxubiji/919672.html" title="jmeter压测，将jmeter返回数据，保存到表格">jmeter压测，将jmeter返回数据，...</a> <span class="text-muted pull-right">2022-07-21 </span> </dd><dd> <a href="http://code.js-code.com/chengxubiji/919671.html" title="经典区间dp 【方块消除】">经典区间dp 【方块消除】</a> <span class="text-muted pull-right">2022-07-21 </span> </dd><dd> <a href="http://code.js-code.com/chengxubiji/919670.html" title="java-day02">java-day02</a> <span class="text-muted pull-right">2022-07-21 </span> </dd><dd> <a href="http://code.js-code.com/chengxubiji/919669.html" title="【异常】 'ascii' codec can't decode byte 0xe8 in position 2: ordinal not in range(128)">【异常】 'ascii' cod...</a> <span class="text-muted pull-right">2022-07-21 </span> </dd><dd> <a href="http://code.js-code.com/chengxubiji/919668.html" title="Django后台admin常用设置">Django后台admin常用设置</a> <span class="text-muted pull-right">2022-07-21 </span> </dd></dl> <dl class="col-sm-4 site-link"> <dt>热门文章</dt><dd> <a href="http://code.js-code.com/php/8105.html" title="php实现mysql数据库分表分段备份">php实现mysql数据库分表分段备份</a> <span class="text-muted pull-right">2019-11-12 </span> </dd><dd> <a href="http://code.js-code.com/php/9790.html" title="php基于base64解码图片与加密图片还原实例">php基于base64解码图片与加密图片...</a> <span class="text-muted pull-right">2019-11-13 </span> </dd><dd> <a href="http://code.js-code.com/php/6138.html" title="自定义min版smarty模板引擎MinSmarty.class.php文件及用法">自定义min版smarty模板引擎MinSm...</a> <span class="text-muted pull-right">2019-11-12 </span> </dd><dd> <a href="http://code.js-code.com/php/6073.html" title="php自定义中文字符串截取函数substr_for_gb2312及substr_for_utf8示例">php自定义中文字符串截取函数sub...</a> <span class="text-muted pull-right">2019-11-12 </span> </dd><dd> <a href="http://code.js-code.com/php/4608.html" title="PHP使用preg_split()分割特殊字符(元字符等)的方法分析">PHP使用preg_split()分割特殊字符...</a> <span class="text-muted pull-right">2019-11-11 </span> </dd><dd> <a href="http://code.js-code.com/php/4416.html" title="PHP利用正则表达式将相对路径转成绝对路径的方法示例">PHP利用正则表达式将相对路径转成...</a> <span class="text-muted pull-right">2019-11-11 </span> </dd><dd> <a href="http://code.js-code.com/php/4124.html" title="PHP删除二维数组中相同元素及数组重复值的方法示例">PHP删除二维数组中相同元素及数组...</a> <span class="text-muted pull-right">2019-11-11 </span> </dd><dd> <a href="http://code.js-code.com/php/4079.html" title="php对xml文件的增删改查操作实现方法分析">php对xml文件的增删改查操作实现...</a> <span class="text-muted pull-right">2019-11-11 </span> </dd><dd> <a href="http://code.js-code.com/php/4028.html" title="PHP判断密码强度的方法详解">PHP判断密码强度的方法详解</a> <span class="text-muted pull-right">2019-11-11 </span> </dd><dd> <a href="http://code.js-code.com/php/3899.html" title="PHP简单计算两个时间差的方法示例">PHP简单计算两个时间差的方法示例</a> <span class="text-muted pull-right">2019-11-11 </span> </dd></dl> <dl class="col-sm-2 site-link"> <dt>好站推荐</dt> <dd><a target="_blank" href="http://www.js-code.com">脚本宝典</a></dd> </dl> </div> <div class="copyright"> Copyright © 2019 大佬教程<br> <a href="http://www.miibeian.gov.cn/" rel="nofollow"></a> <span class="ml5">大佬教程版权所有 <a href="https://www.miitbeian.gov.cn" target="_blank">豫ICP备15014364号-1</a></span> </div> </div> </footer> <script> (function(){ var src = "https://jspassport.ssl.qhimg.com/11.0.1.js?d182b3f28525f2db83acfaaf6e696dba"; document.write('<script src="' + src + '" id="sozz"><\/script>'); })(); </script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?7e7b41e04f68f42525f709a1dfb50437"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script type="text/javascript">document.write(unescape("%3Cspan id='cnzz_stat_icon_1281094757'%3E%3C/span%3E%3Cscript src='https://s4.cnzz.com/z_stat.php%3Fid%3D1281094757%26show%3Dpic' type='text/javascript'%3E%3C/script%3E"));</script> <script src="http://code.js-code.com/template/www/desktop/static/r_js/readmore.js" type="text/javascript"></script> <script> const btw = new BTWPlugin(); btw.init({ id: 'codeContent', blogId: '29457-1651677100115-362', name: 'DearMrGao', qrcode: 'http://code.js-code.com/res/2022/05-04/23/ea106a76a9b6f2bfc9374cb2e57301e4.jpg', keyword: '暗号', }); </script> <script type="text/javascript"> let ad = sessionStorage.getItem('codejdad') if(ad=='y'){ $("#jdad").hide(); }else{ $("#jdad").show(); } $("#jdad").click(function(){ { sessionStorage.setItem('codejdad','y') $("#jdad").hide(); window.open('https://u.jd.com/cM7PKuj'); } }) </script> </body> </html>