最近ちょいちょい使うjsプラクティス

Standard

http://bugcloud.com/worcloud/tb/
規模が小さいときはだいたいこんな感じで書いてるので、Tumblr APIで画像を取得して並べただけのもので紹介してみます。
index.html

<!DOCTYPE html>
<html dir="ltr" lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>.T.umblr</title>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
    <script type="text/javascript" src="js/obj.js"></script>
    <script type="text/javascript" src="js/Tumblr.js"></script>
    <script type="text/javascript" src="js/Common.js"></script>
    <script type="text/javascript" src="js/Page.js"></script>
    <script type="text/javascript" src="js/Init.js"></script>
    <script type="text/javascript" src="js/bind.js"></script>
    <link href='http://fonts.googleapis.com/css?family=Gravitas+One' rel='stylesheet' type='text/css'>
    <link href="css/reset.css" type="text/css" rel="stylesheet"/>
    <link href="css/default.css" type="text/css" rel="stylesheet"/>
    <link href="css/style.css" type="text/css" rel="stylesheet"/>
  </head>
  <body>
    <h1 id="siteName">.T.umblr</h1>
    <div id="wrapper">
    </div>
    <div id="buttonLoad">
      <a href="javascript:void(0);"><img src="img/refresh.png" alt="load more" title="" /></a>
    </div>
  </body>
</html>

読み込んでいるjsについて上から。
 
 
jquery

ないと仕事できないので説明不要。
 
 
js/obj.js

/*
 *  * object - オブジェクトを作る
 *  * Object object(BaseObj [, mixinObj1 [, mixinObj2...]])
 */
function object(o) {
    var f = object.f, i, len, n, prop;
    f.prototype = o;
    n = new f;
    for (i=1, len=arguments.length; i<len; ++i)
        for (prop in arguments[i])
            n[prop] = arguments[i][prop];
    return n;
}
object.f = function(){};

“functionを定義してそれにprototypeを設定してnewしてオブジェクトを作る”っていうのを object(o) という関数に隠匿しています。プロトタイプベースのJavascriptで普段利用しているクラスベース言語でいうところのクラスのようなオブジェクトを簡単に利用できるようになります。
参考 → newを封印して、JavaScriptでオブジェクト指向する
 
 
js/Tumblr.js

var Tumblr = {
  init: function() {},
  apiConsumerKey: "SyMOX3RGVS4OnK2bGWBcXNUfX34lnzQJY5FRB6uxpFqjEHz2SY",
  hostName: "dvdp.tumblr.com",
  offset: 0,
  photoPosts: function() {
    var me = this
    var url = "http://api.tumblr.com/v2/blog/" + me.hostName + "/posts/photo"
    var data = {api_key: me.apiConsumerKey, offset: me.offset}
    $.ajax({
      url: url,
      data: data,
      dataType: 'jsonp',
      jsonp: 'jsonp',
      success: function(data, type) {
        me.photoPostsCallback(data, type)
      },
      error: function(XMLHttpRequest, textStatus, errorThrown) {
        console.log(errorThrown)
      }
    })
  },
  photoPostsCallback: function(data, type) {
    console.log(data)
  }
}

上のjs/obj.jsを利用する為にTumblr(クラスのような)オブジェクトを定義しています。
見たままですが、Tumblr APIをコールするためのWrapperのようなオブジェクトです。

var myTumblr = object(Tumblr)
myTumblr.photoPosts()

とすればhttp://dvdp.tumblr.com/の投稿から画像のものを取得してログに出力します。

var myTumblr2 = object(Tumblr)
myTumblr2.hostName = "shyouhei.tumblr.com"
myTumblr2.photoPostsCallback = function() {
  $.each(data.response.posts, function() {
    $('body').append('<p>' + this.body + '</p>')
  })
}

で、http://shyouhei.tumblr.com/の投稿をhtml bodyに出力します。ここでわかるように定義しておいたオブジェクトからobject関数を使ってオブジェクトを作った後に、そのオブジェクトのメンバを変更することができます。

因みに、入門な話をすると、

var s = {
  a: 'a',
  b: function() {...}
}

という書き方は

var s = new Object
s.a = 'a'
s.b = function() {...}

のシンタックスシュガーです。
 
 
js/Common.js

var Common = {
  init: function() {},
  randomColor: function() {
    var c = "rgba(" + Math.floor(Math.random()*256) + ","
    c = c + Math.floor(Math.random()*256) + ","
    c = c + Math.floor(Math.random()*256) + ","
    c = c + "0.65)"
    return c
  }
}

共通関数を定義しています。どのサイトでも使いまわせるものをここに入れています。
 
 
js/Page.js

var Page = {
  currentIndex: 0,
  currentLeft: 0,
  init: function() {
    this.currentIndex = 1
  },
  increment: function() {
    this.currentIndex = this.currentIndex + 1
  }
}

ページ全体で使う関数を定義しています。レイアウトを調整するような関数があればここで定義します。
 
 
js/Init.js

var _mysiteTumblr = object(Tumblr)
var _mysiteCommon = object(Common)
var _mysitePage = object(Page)

$(function() {
  _mysiteTumblr.init()
  _mysiteCommon.init()
  _mysitePage.init()
})

グローバル変数の定義と各オブジェクトの初期化です。グローバル変数はまとめて書くようにしておかないと、そのうち追えなくなって破綻します。
 
 
js/bind.js

$(function() {
  _mysiteTumblr.photoPostsCallback = function(data, type) {
    _mysiteTumblr.offset = _mysiteTumblr.offset + data.response.posts.length
    $.each(data.response.posts, function() {
      $.each(this.photos, function() {
        var html = '<div class="floatbox" style="'
        html = html + 'background-color:'
        _mysitePage.increment()
        html = html + _mysiteCommon.randomColor() + ';">'
        html = html + '<a href="' + this.original_size.url + '" target="_blank"><img src="' + this.alt_sizes[0].url + '"/></a>'
        html = html + '</div>'
        $("#wrapper").append(html)
      })
    })
  }
  _mysiteTumblr.photoPosts()
  $("#buttonLoad a").bind('click', function() {
    _mysiteTumblr.photoPosts()
  })
})

MVCで言ったらコントローラーです。onLoadで、Tumblr#photoPostsCallbackの振る舞いを設定してから実行しています。またボタンのクリックイベントのバインドをしています。
 
 
 
とりあえずjsはこれで全部です。
 
 
会社用に書いたんだよこれ恥ずかしい

Facebook comments:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>