太原做网站:使用jQuery构建一个简单的Reddit API Web应用程序

2019.05.28 太原做网站

163

越来越多的第三方API创造了一群热情的开发人员。但是没有时间去研究文档,这让一些人感到好奇,没有任何方法去实际构建任何东西。我喜欢使用这些API,因为一旦您了解了基本知识,大多数API都非常简单,很容易理解。

太原做网站在本教程中,我想介绍使用以下方法创建Reddit域搜索web应用程序的过程jQuery。您只需输入任何网站的根级域(例如:speckybel.com它将在Reddit上显示最新的25份意见书。这甚至可以扩展到WordPress插件展示最新的Reddit提交从您自己的网站。

太原做网站

建立网页

首先,我将下载jQuery的本地副本,以便将其包含在文档头中。我还创建了两个名为电笔.js。由于这更适合于API访问,所以我将跳过样式表,因为它包含相当基本的代码。

<!doctype html><html lang="en-US"><head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html">
  <title>Reddit API Webapp Demo - Speckyboy</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="shortcut icon" href="http://speckycdn.sdm.netdna-cdn.com/wp-content/themes/speckyboy_responsive_v0.7/favicon.ico">
  <link rel="icon" href="http://speckycdn.sdm.netdna-cdn.com/wp-content/themes/speckyboy_responsive_v0.7/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
  <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
  <script type="text/javascript" src="js/redditjson.js"></script></head>

页面本身非常贫乏,因为所有内容都将通过jQuery/JSON动态加载。当第一次加载页面时,您会注意到一个可爱的Reddit外星标志这是我根据Dribbble上的免费矢量图形定制的。搜索字段本身是一个标准文本输入,它不使用典型的Submit按钮。

按下‘Enter’键将触发表单提交,然后将表单提交绑定到jQuery事件处理程序。最后一个页面对象是一个带有ID的空div。#含量这包含了所有的内部HTML数据。我通过JSON提取结果,并在Reddit上遍历每个条目,以提供页面上动态加载的链接列表。

<div id="logo">
      <h1>Reddit API Domain Search</h1>
    </div>
    
    <p>Enter a domain without <code>http://www.</code> to browse recent submissions in Reddit.</p>
    
    <div id="searchfield">
      <form id="domainform" name="domainform">
        <input type="text" class="search" id="s" name="s" placeholder="ex: youtube.com">
      </form>
    </div>
    
    <div id="content"></div>

所以现在让我们跳过去.js看看脚本是如何运行的。

提交事件触发器

太原做网站正在将事件处理程序连接到搜索字段#域形并防止提交事件发生。事件预防防御()是最常用的方法。当这种情况发生时,我们知道用户正在寻找搜索结果,因此在JSON请求期间,我添加了一个小型加载器gif,让用户知道后台发生了什么事情。

$(function(){
  $('#domainform').on('submit', function(event){
    event.preventDefault();
    $('#content').html('<center><img src="img/loader.gif" alt="loading..."></center>');
    
    var domain = $('#s').val();
    var newdomain = domain.replace(/\//g, ''); // remove all slashes
    var requrl = "http://www.reddit.com/domain/";
    
    var fullurl = requrl + domain + ".json";

然后,我需要取出一些变量,这些变量将被传递到请求中。上下文通知指出,用户应该省略任何域的第一部分(例如:http://www),只需使用后一段。JavaScript有一个名为替换()这样我们就可以去掉任何不必要的斜线。现在,实际的请求URL只是一个完整的Reddit permalink,它有一个额外的.json最后。

所以域搜索speckybel.com可以通过删除最后的尾随斜杠并连接到本地JSON文件,从而将其拼凑在一起。这个URL.

 $.getJSON(fullurl, function(json){
    var listing = json.data.children;
    var html = '<ul class="linklist">\n';

使用原型getJSON()方法可以远程访问这些文件并提取API数据,而无需使用任何特殊的API密钥。要对帐户进行身份验证,需要为Web应用程序创建额外的设置,但是对于基本的JSON响应,我们不需要任何东西。返回数据被传递到回调函数中,我们使用变量访问完整的数据集。json.data.

如果您希望看到所有可能的选项,请编写如下代码控制台日志(json.data)并查看控制台窗口中显示的内容。为了节省时间,我将变量分解为子元素,每个元素代表Reddit中提交的链接。每个搜索页面返回25个结果,所以我想这是这个演示中最简单的数字。

遍历JSON

在调用循环之前,我创建了一个名为HTML。这将最终取代内容div中的小型加载gif,并且每个链接将被截断为一个大字符串。我的变量“清单”中包含每个JSON对象json.data.child.

  for(var i=0, l=listing.length; i<l; i++) {
    var obj = listing[i].data;

    var votes     = obj.score;
    var title     = obj.title;
    var subtime   = obj.created_utc;
    var thumb     = obj.thumbnail;
    var subrdt    = "/r/"+obj.subreddit;
    var redditurl = "http://www.reddit.com"+obj.permalink;
    var subrdturl = "http://www.reddit.com/r/"+obj.subreddit+"/";
    var exturl    = obj.url;
	
    var timeago = timeSince(subtime);

    if(obj.thumbnail === 'default' || obj.thumbnail === 'nsfw' || obj.thumbnail === '')
      thumb = 'img/default-thumb.png';
  
    html += '<li class="clearfix">\n';
    html += '<img src="'+thumb+'" class="thumbimg">\n';
    html += '<div class="linkdetails"><h2>'+title+'</h2>\n';
    html += '<p class="subrdt">posted to <a href="'+subrdturl+'" target="_blank">'+subrdt+'</a> '+timeago+'</p>';
    html += '<p><a href="'+exturl+'" class="blubtn" target="_blank">visit link</a> - <a href="'+redditurl+'" class="blubtn" target="_blank">view on reddit</a></p>';
    html += '</div></li>\n';
  } // end for{} loop
  htmlOutput(html);

  }); // end getJSON()}); // end .on(submit) listener

因此,在每个循环中,我们通过一个接一个的链接,提取需要显示在页面上的特定信息。每个对象都可以通过清单[n]带着n是当前数字(0-24)。内部的数据将包含自然的键值对,用于总票数、链接URL、Subreddit名称,甚至缩略图图像。

你可能会注意到有一个小的若{}逻辑语句检查缩略图URL。如果没有任何照片,或者是NSFW,那么我使用的是直接从Reddit保存的默认缩略图。然后将所有这些变量连接到相同的HTML字符串中,这将到达我们循环到下一项的底部。当没有更多的项时,这个巨大的HTML字符串将应用到一个名为htmlOutput().

  function htmlOutput(html) {
    html += '</ul>';
    
    $('#content').html(html);
    //console.log(html);
  }

很简单吧?我在循环之外创建了无序列表,最后通过这个函数调用关闭了它。我留下了一行与控制台相关的注释代码,您可能对测试目的感兴趣。

格式化时间间隔

如果您注意到在循环中有一个变量名为蒂亚戈,它引用了一个唯一的函数。TimeSince()。Reddit API在Unix中提取提交时间,我希望它以“xx时间前”的格式显示。

浏览堆栈溢出时,我偶然发现这个美丽的解决方案为了在本教程中工作,我稍微调整了一下。你不需要完全理解这个函数,但是浏览一下并试着消化一些东西并不会有什么坏处。

  /**
   * Return time since link was posted
   * https://stackoverflow.com/a/3177838/477958
  **/
  function timeSince(date) {
    var seconds = Math.floor(((new Date().getTime()/1000) - date))

    var interval = Math.floor(seconds / 31536000);

    if (interval >= 1) {
      if(interval == 1) return interval + " year ago";
      else 
        return interval + " years ago";
    }
    interval = Math.floor(seconds / 2592000);
    if (interval >= 1) {
      if(interval == 1) return interval + " month ago";
      else
        return interval + " months ago";
    }
    interval = Math.floor(seconds / 86400);
    if (interval >= 1) {
      if(interval == 1) return interval + " day ago";
      else
        return interval + " days ago";
    }
    interval = Math.floor(seconds / 3600);
    if (interval >= 1) {
      if(interval == 1) return interval + " hour ago";
      else
        return interval + " hours ago";
    }
    interval = Math.floor(seconds / 60);
    if (interval >= 1) {
      if(interval == 1) return interval + " minute ago";
      else
        return interval + " minutes ago";
    }
    return Math.floor(seconds) + " seconds ago";
  }

基本上,整个时间戳都是从Unix标准1970年1月1日编码的。随着时间的推移,这些数字还在不断上升。这个函数本身将把这个数字分解成几个月、几天、几分钟等较小的部分。

它还将检查单数项,以确保以正确的语法显示1分钟/2分钟。这可能不是必要的,但它确实为每一次提交增加了一些创造性的洞察力。知道一个故事是两天前发布的还是两个月前(甚至是2年前),这很有帮助。

如果我们太原做网站在没有结果的情况下走到这一步,那么HTML变量将简单地将加载gif替换为空间。这不是一个完美的解决方案,但是如果您花时间查看JSON响应数据,您可以真正定制这个API,使其以任何您喜欢的方式运行。看看我的现场演示,随时可以下载一份教程代码。

太原做网站

关闭

随着Digg卖给Betaworks,Reddit已经成为最著名的社交新闻网站。有成千上万,如果不是成百上千的新链接提交每天.Reddit API可以访问用户数据、评论以及更多的内容!我希望本教程能让您开始定制APIWeb开发。


最新案例

联系电话 400-6065-301
赚钱高手两组三中三-三中三复式计算公式-三码中特全免费公开码 本港台现场报码直播j2-本港开奖结果现场开码-本港台现场搅珠直播 正版管家婆一句赢大钱-www管家婆27735com-管家婆小鱼儿论坛心水 九龙心水三肖永不改料-九龙心水525757com-九龙老牌图库彩图大全 澳门123696com开奖结果-626969cc澳门资料大全-2021澳门合彩开彩结果