気ままなタンス*プログラミングなどのノートブック

プログラミングやRPGツクール、DTM、VOCALOIDについてのんびり書きます。

【ティラノスクリプト】tyrano.jsのプラグイン読み込みの流れ

ワンダーコレクションの創作ログにも書きましたが、
ソースコードシンタックスハイライト等、やり方がわからなかったので、内容が非常に読みづらくなっておりました。
そこで、はてなブログにも投稿します。

【自らの課題】
ティラノスクリプトでkagプラグインが読み込まれる順序が不明。

【目的】
課題の解決。
勉強のため、tyrano.jsでプラグインが読み込まれる流れを追いました。

【ポイント】
・index.html(メインページ)で以下のJavaScriptファイルを読んでいることを認識する

<script type="text/javascript" src="./tyrano/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="./tyrano/jquery-ui-1.8.20.custom.min.js"></script>
<script type="text/javascript" src="./tyrano/jquery.a3d.min.js"></script>
<script type="text/javascript" src="./tyrano/jsrender.min.js"></script>

<script type="text/javascript" src="./tyrano/html2canvas.js"></script>

<script type="text/javascript" src="./tyrano/flash.js" ></script>
<script type="text/javascript" src="./tyrano/libs.js" ></script>
<script type="text/javascript" src="./tyrano/config.js" ></script>
<script type="text/javascript" src="./tyrano/tyrano.js" ></script>
<script type="text/javascript" src="./tyrano/tyrano.base.js" ></script>

・tyrano.jsに定義されたobjectという関数を利用し、オブジェクトインスタンスを生成している
・object.fはインスタンス生成前の空の関数プロパティ(呼び方これであってるかわからんけど)で、初期化用として利用している。
・別ファイルに記載されたオブジェクトはグローバル変数windowを経由してライブラリに取り込んでいる
・kag.jsを本体、kag_hogeたちをオプションという扱いとしている


【コードリーディング】
[tyrano.js]https://github.com/ShikemokuMK/tyranoscript/blob/master/tyrano/tyrano.js

// ◆198行目
var TYRANO = object(tyrano.core);
/*
	tyrano.jsに定義されているtyrano.coreというオブジェクトを引数として、
    object関数を呼び出す
*/

// ◆1行目
function object(o) {
var f = object.f, i, len, n, prop; ...
/*
	tyrano.jsのオブジェクトリテラルとして定義されているobject.fを
    変数fに代入する。
    コードをみた感じだと、object.fは関数オブジェクト(初期化用)で、
    毎回それを使っているような感じかな?
	変数fに格納された関数オブジェクトのプロトタイプとして、
    198行目で渡されたtyrano.coreを指定する
    (これで、tyrano.coreをプロトタイプとして保有できる)
*/

// ◆4行目
n = new f;
/*
	tyrano.coreのインスタンスオブジェクトを作成して、変数nに格納する。
*/
// ◆5行目~7行目
/*
	prop引数の役割はまだいまいちわかっていない。
*/

// ◆8行目
/*
	作成したtyrano.coreのインスタンスオブジェクトを呼び出し元に返却する
*/
	
// ◆199行目
/*
	TYRANO変数に格納されたtyrano.coreインスタンスオブジェクトを
	window.TYRANO変数にグローバル変数として格納する
*/

// ◆201行目
if(!(‘console’ in window)) {
  window.console = {};
  window.console.log = function(str) { return str; }; }
}
/*
	consoleがwindowオブジェクトのプロパティに存在しない場合
	①window.consoleにオブジェクトリテラルを作成
	②window.console.log関数を定義(引数:strで受け取った文字をそのまま返却?)
*/

// ◆214行目
TYRANO.init();
/*
	tyrano.coreプロパティのinitメソッドを呼び出す
*/

// ◆32行目
init:function(options) {

  var that = this;

  this.base = object(tyrano.base);
/*
	tyrano.coreのスコープ?(this)をthatに代入
	baseオブジェクトを作成
	baseプロパティにtyrano.baseオブジェクトインスタンスが設定される
	※object関数は省略
*/

// ◆37行目
this.base.init(this);
/*
	[tyrano.base.js]内のinitメソッドが呼び出される。
	tyrano.base.tyranoに対して、tyrano.coreインスタンスが設定される
*/
// ◆39行目
this.config = window.config;
/*
	config.js内で、var config = { … }という形で、グローバル変数windowのプロパティとして
	configを定義している。
	このconfigをtyrano.core.configに設定し直す
*/

// ◆41行目
var array_plugins = this.config.init.plugins;
/*
	[config.js]の3行目のinitプロパティからpluginsプロパティ 
	plugins[‘kag’]を取得し、array_pluginsに格納する
*/

// ◆44行目
this.loadPlugins(array_plugins, function(array_src) {
  that.loadModule(array_src);
});
/*
	tyrano.coreのloadPluginsメソッドを呼び出す
	array_pluginsには[‘kag’]を設定
	コールバックとして、function(array_src) { that.loadModule(array_src); } );
	を設定している
*/
		
// ◆51行目
loadPlugins:function(array_src, call_back) {

  var that = this;

  var count_src = 0;

  for(var i = 0; i<array_src.length; i++) {
    $.getScript(“./tyrano/plugins/“+array_src[i]+”/“+array_src[i]+”.js”, function() {
      count_src++;
      
      if(count_src == array_src.length) {
        if(call_back) {
          call_back(array_src);
      }
    });
  }
/*
array_src : [‘kag’]
call_back :function(array_src) { that.loadModule(array_src); } );

	jQueryのライブラリ($.getScript)を用いて、./tyrano/plugins/kag/kag.jsを読み込む
	この時、array_srcのlengthは1であるため、
	count_srcとarray_src.lengthの比較は1度目で終了し、
	call_backを呼び出す。
	call_backの呼び出しには、array_srcをそのまま用いている。
	つまり、
	function(array_src) { that.loadModule(array_src); } という関数リテラルを
	[‘kag’]の引数で実行する
*/
// ◆74行目
loadModule:function(array_src) {

  var that = this;

  for(var i=0;i<array_src.length;i++){
    this[array_src[i]] = object(tyrano.plugin[array_src[i]]);
/*
  	[kag.js]に定義されているtyrano.plugin[‘kag’]オブジェクトのインスタンスを作成し、
	this[‘kag’]に格納する。
*/

// ◆83行目
(function() {

  var _name = array_src[i];

  that.loadPluginModules(_name, that[_name].options.modules,
    function() {
      that[_name].init();
      that.completeLoad(_name);
    });

})();
/*
	無名関数を呼び出し、その中のloadPluginメソッドで、kagプラグイン(オプション?)を読み込む
	that[_name].options.modulesは、
	[kag.js]の17,18行目あたりに配列のリテラルが書かれてある。
	options: {
	  modules: [“order”, “parse”, “tag”, “layer”, “menu”, “tag_audio”, “tag_system”, “tag_ext”, “key_mouse”]
	},
*/

// ◆51行目
loadPlugins: function(array_src, call_back) {/*
	’./tyrano/plugins/kag/’に存在する9個のファイルを
	jQuery関数getScriptで取得する。
	すべての走査が終わった段階で、コールバック関数を呼び出す

	なお、コールバック関数では
	89行目 that[_name].init();として、[kag.js]のinitが呼び出される。
*/

// ◆90行目
that.completeLoad(_name);
/*
	134行目のcompleteLoad関数を呼び出す
*/
	
// ◆134行目
completeLoad:function(plugin_name) {
  
  // console.log(plugin_name);
  
  // 読み込み対象のプラグイン数分実行されたらビルド処理へ

  this.status.loaded_plugin++;

  //console.log(this.status.loaded_plugin);

  if(this.status.loaded_plugin === this.config.init.plugins.length){
    this.build();
  }
}
/*
	config.jsで定義したplugins数分だけ読み込んだらbuildメソッドを呼び出す。
	buildメソッドはプロパティとして153行目に定義されているが、
	中身は特に書かれていない。
*/

以上、ざっくりとこんな形だと理解しました。
用語の使い方がちょっと怪しい。

気になる点などあれば教えてください。