javascript - yamanetoshi's diary

最近、えらい javascript づいている。
だから、という訳ではないのですが、こないだ見つけた_Interesting tips in JavaScript_を見つつ色々確認してみました。

そのいち

load なタイミングが制御できる模様。試験してみたサンプルが以下です。

<html>
<head>
<script type="text/javascript">
var api = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";

//The function that loads any external JavaScript dynamically
function loadScript(src) {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = src;
  document.body.appendChild(script);
}


//Google maps api callback
function initialize() {
  var myLatlng = new google.maps.LatLng(-34.397, 150.644);
  var myOptions = {
    zoom: 8,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
<body>
<div id="map_canvas" style="width:500px; height:500px"></div>
<input type="button" value="Load Map" onclick="loadScript(api)" />  
</body>
</html>

たしかにボタンがクリックされるまで地図が出力されません。
む。これって

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&callback=initialize"></script>

なソレが動的に、という事なんか。へー、って言いつつ callback な URL について Google 先生にお伺いした所、ここで以下なサンプルの記述を発見。

function initialize() {
  var myLatlng = new google.maps.LatLng(-34.397, 150.644);
  var myOptions = {
    zoom: 8,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
  
function loadScript() {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
  document.body.appendChild(script);
}
  
window.onload = loadScript;

Asynchronously Loading the Javascript API の項です。これを微妙に変形させたのが例示されているナニと見た。しかし凄いな。

そのに

次の例は new を使わないインスタンス生成に関する記述。しかしこれ、何故に属性へのアクセサの定義を記述しなくて良いのかが謎。
ここはクラス定義に関する自分の知識不足です。別途確認してみます。

そのさん

memoize との記述あり。ただ、

createXhrObject: function() { // Factory method.

な記述があって意味不明。上記記述でググッたら The Factory Pattern にヒット。コードを以下に引用しときます。後で確認。

/* BicycleShop class. */

var BicycleShop = function() {};
BicycleShop.prototype = {
  sellBicycle: function(model) {
    var bicycle;

    switch(model) {
      case 'The Speedster':
        bicycle = new Speedster();
        break;
      case 'The Lowrider':
        bicycle = new Lowrider();
        break;
      case 'The Comfort Cruiser':
      default:
        bicycle = new ComfortCruiser();
    }
    Interface.ensureImplements(bicycle, Bicycle);

あら、これって_そのに_のクラス定義にあったソレと同じだな。

てか

memoize の例、字下げが微妙でよみちがいしていた。これなら読み易い。

createXhrObject: function() { // Factory method.
	var methods = [
	  function() { return new XMLHttpRequest(); },
  	  function() { return new ActiveXObject('Msxml2.XMLHTTP'); },
	  function() { return new ActiveXObject('Microsoft.XMLHTTP'); }
	];
	for(var i = 0, len = methods.length; i < len; i++) {
		try {
			methods[i]();
		}
		catch(e) {
			continue;
		}
  	        // If we reach this point, method[i] worked.
	        this.createXhrObject = methods[i]; // Memoize the method.
	        return methods[i];	
	}
	// If we reach this point, none of the methods worked.
	throw new Error('SimpleHandler: Could not create an XHR object.');	
	}	
};

例外が発生しなければその手続きをメモって戻す模様。

それにしても

javascript もなかなか強力。Gauche みたく REPL なナニがあれば良いのに、ってブラウザ上で動くナニがあったりするんだろうな。