再入門

JavaScript html

ちょっとqiita.com
をみてJavaScriptに再入門した。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <title>mediator</title>
  </head>
  <body>
    <div id="results"></div>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/mediator.js"></script>
  </body>
</html>
  • //url.jsがポイント
  • jsはおしりに持ってきましょう。
/**
 *  use strictを覚えた
 * 関数単位で宣言することが望ましいらしい
 */
"use strict";

/** 
 * window.onloadを覚えた
 */
window.onload = function(){
    
};

/**
 * プロトタイプベースのオブジェクト志向
 */
function ObserversList(){
  this.handlers = [];
}

ObserversList.prototype = {
  add : function(obj){
    this.handlers.push(obj);
  }
};

var hoge = new ObserversList();

/**
 * キー入力を取得する取っ掛かりを得た
 */
window.onkeypress = mediator.keypress;
function mediator(){}
mediator.prototype = {
  keypress: function(e){
    e = e || window.event; // ID
    if (e.which === 49){ // key "1"
      mediator.players.home.play();
      return;
    }
    if (e.which === 48){ // key "0"
      mediator.players.guest.play();
      return;
    }
  }
};

/**
 * ここはまだ理解出来てない
 */
//引数を切り取っている
var args = Array.prototype.slice.call(arguments,0);
for(var i=0,len = this.handlers.length;i<len;i++){
  // apply
  this.handlers[i].update.apply(null,args);
}

call/applyはこの辺りか。Array.prototype.method.call以外のcallはロジックを壊しそうだから使わないな。自分で作ったfunctionに使い出すと死ねそうだ。taiju.hatenablog.com
ここを読む限りそうでもないのかもqiita.com
thisを差し込めることが有効な場面もあると。qiita.com
カリー化やべぇかっこいい。

function add(x) {return function(y){return x + y;};}
add(100)(299);