LoginSignup
1
1

More than 5 years have passed since last update.

Javascriptのcallback周りを共通化して可読性を向上させる

Last updated at Posted at 2012-12-26

特別なことではなく、通信部分を共通化する関数を書くといいという話。特に、通信はややこしくなりがちで、共通化するとうれしい部分なので、ここはべた書きしないように気をつけたい。url success callback等のメソッドを持つオブジェクトをそれに適用するとみかけ上のコールバックの記述を減らせ、可読性が向上する。もちろん、通信回数を減らす発想はそれに優先する(http://qiita.com/items/09929c072b342adec2a2)。
下記は最小構成のイメージ。実際は他にもローカルのデータを利用する部分を組み込んだり、UIのrollbackの共通処理を組み込んだり、UIのhtmlをjsonからparseして自動で構築したりしている。繰り返しになるが、通信周りは共通化できる部分が多い。他はさぼってもいいけど、ここは頭をひねる所だと思う。たとえば、ざっくりとした話で言うと、1度だけ使う個別具体的な処理よりも、5回使われる共通処理に力を入れた方が、何らかの生産性が5倍くらいあるイメージが頭にある。そういったプログラミングにおける力を入れるところと入れないところの見極めが、念能力の流っぽくて心踊る。

下記の処理の順番は、
1.event.coffeeで着火
2.common.coffeeで処理するオブジェクトを選択
3.response.coffeeで実際の処理をする

event.coffee
$(window).load ()->
  common.contact 'feed'
common.coffee
#共通の通信部分
common.contact = (name,p={}) ->
  req = request[name]
  req.setup p.setup 
  $.ajax 
    url: req.url p.url
    type: 'GET'
    dataType: 'json'
    data: p.param
    success:req.success
    error:req.error
  req.teardown p.teardown
request.coffee
request.feed = 
  url:()-> '/feed'
  setup:()->
    #POST系なら、ここに通信に先行してIF側の処理を記述しておけば、
    #通信前にレスポンスできるので、体感速度が向上する(http://qiita.com/items/876fc951866001fb7f83)
    console.log "get feed"
  success:(data)->
    #ここに、通信成功時の処理を記述する
    #もしsetupで既に処理を書いているなら、
    #特に書くものはない
    console.log data
  error:(status)->
    #setupでPOST系の処理を記述している場合、
    #IFのrollback処理をここに記述する
    #rollback処理も簡単に書けるので、そのうち紹介する
    console.log status
  teardown:()->
    #最後の処理
    #何かやることがあればどうぞ
    console.log "teardown" 
1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1