相信大家空闲的时候都会上上微博，推特等社交网站，每次我登陆微博时，我都会留意一下它有什么变化，小的有一些布局的变化，大的有API接口的改变等。
在首页登陆微博时，我们可以看到一栏“大家正在说”，它滚动显示着当前每个人发送的微博；刚看到这个效果觉得挺有趣的，所以我们将在接下来的文中介绍实现滚动显示微博信息的效果。
我们细细观察了微博的“大家正在说”，它是通过由上往下滚动来实现不断显示微博的，而且每一天新微博都是通过淡入效果显示的。
图1 微博“大家正在说”
1、定义微博插件
接下来，我们将定义一个插件用来获取某话题下的微博，这里我们将使用jQuery的扩建功能来定于一个微博的jQuery插件
由于jQuery提供了一种机制：让用户给核心模块增加自定义的方法和额外的功能；通过这种机制，jQuery允许我们创建自定义的插件封装常用的方法，从而提高我们的开发效率。
首先，我们通过定义自执行的函数（IIFE），然后把jQuery对象作为参数传递给该自执行函数，通过建立“$”和jQuery的对应关系，这样“$”就不会在其执行范围内被其他库覆盖了。
// Defines a jquery plugin. ; (function($) { $.fn.weiboSearch = function() { // your plugin logic }; })(jQuery);
上面，我们定义一个自执行函数（IIFE），并且在它里面定义了一个扩展方法weiboSearch()。
由于，微博API 2.0提供了一个接口search/topics来搜索某一话题下的微博，如果请求成功则返回JSON格式的数据。
图2微博搜索接口参数
通过上图，我们知道微博搜索接口需要提供应用的AppKey（非OAuth授权方式）和话题关键字（q）。
接下来，我们定义了一个字面量对象defaults，它包含微博接口的url、应用的AppKey、话题关键字（q）和单页返回的记录条数（count）等属性，具体定义如下：
// Defines weibo defaults type. $.fn.weiboSearch.defaults = { url: 'https://api.weibo.com/2/search/topics.json?q=', appKey: '5786724301', numWeibo: 15, term: '' };
2、发送跨源请求
我们可以通过发送ajax请求方式来调用微博搜索接口，如果请求成功服务器会给程序返回JSON格式数据，那么我们需要把返回的数据呈现到页面中。
$.getJSONP = function(s) { // Due to cross origin request, so we to use jsonp format. s.dataType = "jsonp"; $.ajax(s); // figure out what the callback fn is var $script = $(document.getElementsByTagName('head')[0].firstChild); var url = $script.attr('src') || ''; // Gets callback function var cb = (url.match(/callback=(\w+)/) || [])[1]; if (!cb) return; // bail var t = 0, cbFn = window[cb]; $script[0].onerror = function(e) { $script.remove(); handleError(s, {}, "error", e); clearTimeout(t); }; if (!s.timeout) return; window[cb] = function(json) { clearTimeout(t); cbFn(json); cbFn = null; }; // Gets time out function flag. t = setTimeout(function() { $script.remove(); handleError(s, {}, "timeout"); if (cbFn) window[cb] = function() { }; }, s.timeout); /** * Fix issue: "jQuery.handleError is not a function" */ function handleError(s, xhr, msg, e) { s.error && s.error.call(s.context, xhr, msg, e); s.global && $.event.trigger("ajaxError", [xhr, s, e || msg]); s.complete && s.complete.call(s.context, xhr, e || msg); } };
上面，我们定义了方法getJSONP()，它通过发送ajax请求的方式调用微博API，这时我们需要跨源请求数据，我们可以通过JSONP格式获取跨源数据，由于它允许在服务器端集成Script tags返回至客户端，通过Javascript callback的形式实现跨域访问。
接下来，我们在方法$.fn.weiboSearch()中定义私有方法grabWeibos()，它负责调用getJSONP()方法并且获取返回的JSON数据显示到页面中。
/** * Uses ajax request to grab weibos. */ function grabWeibos() { var url = opts.url; grabFlag = false; grabbing = true; $.getJSONP({ url: url, timeout: 30000, data: { source: opts.appKey, q: opts.term, count: opts.numWeibo }, error: function(xhr, status, e) { }, complete: function() { }, success: function(json) { if (json.error) { // Can't get results displays error. return; } // iterates weibo results $.each(json.data.statuses, function(i) { // Adds data to page. }) } }); }
上面，我们定义了grabWeibos()，它调用了getJSONP()方法并且在请求成功后把数据显示到页面中。