Node.js는 Weibo_javascript 기술을 모방하여 정보를 스크롤하고 표시하는 효과를 구현합니다.-JS 튜토리얼-php.cn

저는 누구나 시간이 나면 웨이보, 트위터, 기타 소셜 네트워킹 사이트에 로그인할 것이라고 믿습니다. 저는 웨이보에 로그인할 때마다 레이아웃의 작은 변화, 화면의 큰 변화 등 그 변화에 주의를 기울일 것입니다. API 인터페이스를 기다리세요.

홈페이지에서 웨이보에 로그인하면 현재 모든 사람이 보내는 웨이보 게시물을 스크롤하여 표시하는 '모두가 이야기하고 있습니다'라는 항목을 볼 수 있는데, 이 효과를 처음 봤을 때 꽤 흥미로웠어요. 다음에 추가하겠습니다. 이 글에서는 웨이보 정보를 스크롤하여 표시하는 효과를 소개합니다.

Weibo의 “Everyone is Talking”을 위에서 아래로 스크롤하여 지속적으로 표시하고 있으며, 페이드인 효과를 통해 매일 새로운 Weibo가 표시됩니다.

사진 1 웨이보 "다들 얘기하고 있어"

1. 웨이보 플러그인 정의
다음으로 특정 주제에 대해 Weibo를 얻기 위한 플러그인을 정의하겠습니다. 여기서는 jQuery의 확장 기능을 사용하여 Weibo용 jQuery 플러그인을 정의하겠습니다.

jQuery는 사용자가 이 메커니즘을 통해 사용자 정의 메소드와 추가 기능을 핵심 모듈에 추가할 수 있는 메커니즘을 제공하므로 일반적으로 사용되는 메소드를 캡슐화하는 사용자 정의 플러그인을 생성하여 개발 효율성을 높일 수 있습니다.

먼저 자체 실행 함수(IIFE)를 정의한 다음 jQuery 개체를 자체 실행 함수에 매개 변수로 전달하고 "$"와 jQuery 간의 대응 관계를 설정하여 "$"가 그 안에서 실행되지 마십시오. 범위가 다른 라이브러리에 포함되어 있습니다.

// Defines a jquery plugin.
; (function($) {
  $.fn.weiboSearch = function() {
    // your plugin logic
  };
})(jQuery);

로그인 후 복사

위에서 자체 실행 함수(IIFE)를 정의하고 그 안에 확장 메서드 weiboSearch()를 정의했습니다.

Weibo API 2.0은 특정 주제로 Weibo를 검색할 수 있는 인터페이스 검색/주제를 제공하기 때문에 요청이 성공하면 JSON 형식의 데이터가 반환됩니다.

그림 2 Weibo 검색 인터페이스 매개변수

위 그림에서 우리는 Weibo 검색 인터페이스가 애플리케이션의 AppKey(비OAuth 인증 방식)와 주제 키워드(q)를 제공해야 함을 알 수 있습니다.

다음으로 Weibo 인터페이스의 URL, 애플리케이션의 AppKey, 주제 키워드(q) 및 단일 페이지에 반환되는 레코드 수(count)와 같은 속성을 포함하는 리터럴 개체 기본값을 정의합니다. .구체적인 정의는 다음과 같습니다.

// Defines weibo defaults type.
$.fn.weiboSearch.defaults = {
  url: 'https://api.weibo.com/2/search/topics.json&#63;q=',
  appKey: '5786724301',
  numWeibo: 15,
  term: ''
};

로그인 후 복사

2. 교차 출처 요청 보내기
ajax 요청을 보내 Weibo 검색 인터페이스를 호출할 수 있습니다. 요청이 성공하면 서버는 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);
  }
};

로그인 후 복사

위에서는 ajax 요청을 보내 Weibo API를 호출하는 getJSONP() 메서드를 정의했습니다. 이때 JSONP 형식을 통해 크로스 소스 데이터를 요청할 수 있습니다. 스크립트 태그를 통합하고 클라이언트로 돌아가서 Javascript 콜백 형태로 도메인 간 액세스를 달성할 수 있습니다.

다음으로 getJSONP() 메서드를 호출하고 페이지에 표시할 반환된 JSON 데이터를 가져오는 일을 담당하는 $.fn.weiboSearch() 메서드에 전용 메서드 GrabWeibos()를 정의합니다.

/**
* 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.
      })
    }

  });
}

로그인 후 복사

위에서는 getJSONP() 메서드를 호출하고 요청이 성공한 후 페이지에 데이터를 표시하는 GrabWeibos()를 정의했습니다.

3. JSON 데이터 처리
이제 특정 주제로 Weibo를 검색하는 데 사용되는 jquery.weibo.search.js 플러그인을 기본적으로 구현했습니다. 시간 제약으로 인해 구체적인 HTML 코드는 다음과 같습니다.

<!-- From design-->
<!DOCTYPE html>
<html>
<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title></title>
  <link rel="stylesheet" type="text/css" href="css/weibo.serach.style.css">
</head>
<body>
<table>
  <tbody>
  <tr>
    <td>
      <div id="weibo1" class="weibo">
      </div>
    </td>
    <td>
      <div id="weibo2" class="weibo">
      </div>
    </td>
  </tr>
  </tbody>
</table>
</body>
</html>

로그인 후 복사

다음으로 페이지 코드에서 jQuery 라이브러리와 맞춤 Weibo 주제 검색 플러그인 jquery.weibo.search.js를 참조합니다.

<!-- Adds Javascript reference -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.weibo.search.js"></script>

로그인 후 복사

위에서는 구글에서 제공하는 jQuery 라이브러리를 직접 인용했습니다. 물론, jQuery 라이브러리도 로컬로 다운로드하여 프로젝트에 도입했습니다. 다음으로는 헤드에 웨이보 주제 검색 플러그인을 호출하는 코드를 추가했습니다. 요소의 구체적인 코드는 다음과 같습니다.

<!-- When document ready invokes charCount function-->
<script type="text/javascript">
  // Invokes webioSearch function.
  $(document).ready(function () {
    $("#weibo1").weiboSearch({
      term:'情人节',
      direction:'down'
    });

    $("#weibo2").weiboSearch({
      term:'元宵节',
      direction:'up'
    });
  });
</script>

로그인 후 복사

上面，我们在页面中调用了weiboSearch()的默认方法，并且搜索“情人节”话题下的微博。接下来，我们打开Chrome中Network选项，查看search/topics中的请求包含了source、count、q和callback（回调函数）参数。

图3 Ajax请求

由于Chrome中的JSON数据没有换行不便于查看，所以我们在Firefox中查看返回的JSON格式的数据。

图4微博JSON数据

上面的JSON数据不便于查看，这里我们使用JSON viewer格式化微博数据，格式化后的数据如下：

图5格式化的JSON数据

通过上图，我们发现微博数据包含在try/catch语句中，如果请求成功catch中将为空，反之，返回相应的错误提示信息。

接下来，我们把微博数据提取出来，然后去掉try/catch我们在JSON viewer中查看微博数据的结构。

图6 微博JSON数据

通过上图，我们知道返回数据是一个JSON数组，它的大小是根据我们的请求参数count决定的，而且微博规定每个请求最多返回200条微博。

接下来，我们需要把数据显示到页面中，现在让我们实现success方法吧！具体代码如下：

// Gets response data from weibo api.
success: function(json) {
  if (json.data.error) {
    // Can't get data displays error.
    failEye(json.data.error);
    return;
  }

  // Emptys contain with fade out effect.
  $cont.fadeOut('fast', function() {
    $cont.empty();

    // iterates weibo results
    $.each(json.data.statuses, function(i) {
      if (!opts.filter.call(opts, this) || this.truncated)
        return; // skip this weibo, some weibos may be deleted.
      var $img, $text, w,
                  tweet = opts.formatter(this, opts),
                  $tweet = $(tweet);

      // Weibo data.
      $tweet.css(opts.css['tweet']);
      $img = $tweet.find('.weiboSearchProfileImg').css(opts.css['img']);
      $tweet.find('.weiboSearchUser').css(opts.css['user']);
      $tweet.find('.weiboSearchTime').css(opts.css['time']);
      $tweet.find('a').css(opts.css['a']);
      $tweet.appendTo($cont);
      $text = $tweet.find('.weiboSearchText').css(opts.css['text']);

      if (opts.avatar) {
        w = $img.outerWidth() + parseInt($tweet.css('paddingLeft'));
        $text.css('paddingLeft', w);
      }
    })

    // Loads weibos with fade in effect.
    $cont.fadeIn('fast');

    // Invokes weibo api again.
    if (json.data.statuses.length < 2) {
      if (opts.refreshSeconds)
        setTimeout(gradWeibos, opts.refreshSeconds * 1000);
      return;
    }

  });
}

로그인 후 복사

在success()方法中，我们使用了jQuery的fadeIn()和fadeOut()函数实现微博加载时淡入和清除时淡出的效果。

接着，我们使用$.each()方法遍历JSON数组中的每条微博信息，然后把它们添加到页面DOM中。

图7 微博信息

我们通过跨源请求调用微博search/topics接口，然后把服务器返回的JSON数据显示到页面中。

5、微博相对时间
现在，基本实现了jquery.weibo.search.js插件了，但我们发现每条微博显示时间好像不太正常，而且还没有实现滚动（animate）和淡入（fadeIn）效果。

由于微博是使用相对时间来表示微博插件时间，当然我们也可以显示具体时间，接下来，让我们把微博创建时间（created_at）转化为相对时间的形式，由于微博的时间格式为：“Thu Feb 14 20:33:30 +0800 2013”，所以我们定义了方法relativeTime()把微博时间转换为相对时间。

function relativeTime(dateString) {
  var values = dateString.split(" ");
  dateString = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
  var parsed_date = Date.parse(dateString);
  var relative_to = (arguments.length > 1) &#63; arguments[1] : new Date();
  var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
  delta = delta + (relative_to.getTimezoneOffset() * 60);

  if (delta < 60) {
    return 'just now';
  } else if (delta < 120) {
    return 'a minute ago';
  } else if (delta < (60 * 60)) {
    return (parseInt(delta / 60)).toString() + ' minutes ago';
  } else if (delta < (120 * 60)) {
    return 'about an hour ago';
  } else if (delta < (24 * 60 * 60)) {
    return 'about ' + (parseInt(delta / 3600)).toString() + ' hours ago';
  } else if (delta < (48 * 60 * 60)) {
    return '1 day ago';
  } else {
    return (parseInt(delta / 86400)).toString() + ' days ago';
  }
}

로그인 후 복사

上面，我们定义了方法relativeTime()，首先它通过拼接方式转换时间格式为“Feb 14, 2013 20:33:30”，然后把dateString转换为Date，接着获取当前时间减去微博时间（created_at）计算出相对时间（delta）。

图8 relativeTime计算相对时间

5、微博动态效果
上面，我们通过方法relativeTime()把微博的时间转换为相对时间，接下来，我们需要实现微博的滚动（animate）和淡入（fadeIn）效果。

在新浪微博大厅里，我们可以看到“大家正在说”中每条微博由上往下地滚动着，其实要实现该滚动效果我们可以使用jQuery的animate()方法，具体实现如下：

/**
* Weibos rolling from top to bottom
*/
function weiboIn() {
  if (paused || grabbing) {
    setTimeout(weiboIn, 500);
    return;
  }

  // Gets last element.
  var h, $el = $cont.children(':last'), $elFirst = $cont.children(':first');

  // Gets last weibo item height.
  h = $el.outerHeight();

  // Animate: increases the first weibo item margin top to 'h'.
  // Then decreases the first weibo item margin top to '0'.
  $elFirst.animate({ marginTop: h }, opts.animInSpeed, function() {
    $elFirst.css({ marginTop: 0, opacity: 1 });
    /*@cc_on
    try { el.style.removeAttribute('filter'); } // ie cleartype fix
    catch (smother) { }
    @*/

    // append the last weibo item first.
    $el.css(opts.css['tweet']).hide().prependTo($cont);

    // Fade in display new item.
    $el.fadeIn(opts.animInSpeed);

    // Loop
    setTimeout(grabFlag &#63; grabWeibos : weiboIn, opts.timeout);

  });
}

로그인 후 복사

上面，我们定义了weiboIn()方法，它实现微博由上往下滚动显示效果，我们通过animate()方法动态地修改div元素的marginTop属性。

接着，我们需要把滚动到最后的微博重新插入到当前第一条微博上，然后通过fadeIn()函数实现微博淡入显示。

现在，我们基本实现了微博“大家正在说”的向下滚动和淡入效果了，我们先用animate()方法修改div元素的marginTop属性，然后通过淡入方式显示滚动下来的微博。

也许有人会问：“如果要实现向上滚动和淡出效果呢”？其实，该效果和我们之前实现的效果恰好相反，首先需要淡出隐藏微博，然后向上滚动。

现在，我们已经有实现的思路了，那么接下来让我们实现向上滚动和淡出效果吧！具体实现如下：

/**
* Weibos rolling from bottom to top.
*/
function weiboOut() {
  if (paused || grabbing) {
    setTimeout(weiboOut, 500);
    return;
  }

  // Gets last element.
  var h, $el = $cont.children(':first'), el = $el[0];

  // Implements fade out effect. 
  $el.animate(opts.animOut, opts.animOutSpeed, function() {

    // Gets first weibo item height.
    h = $el.outerHeight();

    $el.animate({ marginTop: -h }, opts.animInSpeed, function() {
      $el.css({ marginTop: 0, opacity: 1 });
      /*@cc_on
      try { el.style.removeAttribute('filter'); } // ie cleartype fix
      catch (smother) { }
      @*/

      // append the last weibo item last.
      $el.css(opts.css['tweet']).show().appendTo($cont);
      setTimeout(grabFlag &#63; grabWeibos : weiboOut, opts.timeout);
    });
  });
}

로그인 후 복사

在weiboOut()方法中，我们通过修改$el的opacity属性实现淡出效果，当然我们也可以使用fadeOut()方法实现淡出，同样我们使用方法animate()修改marginTop属性，不同的是从-h开始变化。

现在，我们已经实现了淡出、淡入以及滚动效果了，接下来我们需要给界面添加CSS样式让程序更加美观。

// Weibo css style in jquery plugin.
css:{
  // default styling
  a:{ textDecoration:'none', color:'#3B5998' },
  eye:{ width:'40px', height:'40px', position:'absolute', left:'-30px', top:'-20px', border:'none' },
  container:{ overflow:'hidden', backgroundColor:'#eee', height:'100%' },
  fail:{ background:'#6cc5c3 url(./images/error_page_small.png) no-repeat 50% 50%', height:'100%', padding:'10px' },
  frame:{ border:'10px solid #C2CFF1', borderRadius:'10px', '-moz-border-radius':'10px', '-webkit-border-radius':'10px' },
  tweet:{ padding:'5px 10px', clear:'left' },
  img:{ 'float':'left', margin:'5px', width:'48px', height:'48px' },
  loading:{ padding:'20px', textAlign:'center', color:'#888' },
  text:{},
  time:{ fontSize:'smaller', color:'#888' },
  title:{ backgroundColor:'#C2CFF1', margin:0, padding:'0 0 5px 0', textAlign:'center', fontWeight:'bold', fontSize:'large', position:'relative' },
  titleLink:{ textDecoration:'none', color:'#3B5998' },
  user:{ fontWeight:'bold' }
}
然后，我们weibo.serach.style.css文件中添加以下样式，具体定义如下：

div.weibo { margin: auto; width: 300px }
#weibo1 { height: 300px;}
#weibo2 { height: 300px; }
body { background-color: white }
body, div { font-family: '微软雅黑', helvetica, verdana, arial, sans-serif }
body { margin: 20px 0; padding: 0; font-size: small; color: #333 }
div {display: block}


/* Image rounded corner*/
.weiboSearchProfileImg{
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

table {
  margin: auto;
  border-collapse: separate;
  border-spacing: 25px;
}

table {
  border-collapse: collapse;
}

로그인 후 복사