javascriptコントロール開発のダイナミックロード(2)

3642 ワード

JavaScript フレームコントロールの開発

前の記事はinit.jsファイル内でロード対象を作成しました.これをもとに、init.jsファイル内でグローバル変数をもう一つ定義し、スタート関数として、bodyロードが完了したら実行します.
    また、もう一つのjsをロードできるファイルを用意します.comonディレクトリの下で新たにファイルを追加します.static Script.js、コードの中には行列のオブジェクトしかありません.ロードの状況を検証するために、簡単なスタイルのcomp.com Style.cssファイルを追加します.
ファイルディレクトリは以下の通りです
+--デモ
     +--スクリプト
          +--common
               +--init.js
               +--static Script.js
          +--css
               +--comp.com Style.css
     +--web
          +--test.
init.jsの新たに増加したコードは、startUpというコードの発想では、まずスクリプトリストファイルを読み込むというスタンtic Script.jsファイルになります.そしてファイル内のファイル配列リストに従って、順番にページにロードして、最後にOShowイベント関数を呼び出します.
startUpは私たちのシステムの枠組み全体の起動関数です.オペレーティングシステムのbootStartと似ています.bodyのロードが完了したら、startUp関数を呼び出すコードを追加して、setIntervalでタイミング判断します.


//win object
var thisWindow = new scriptUtil();
function startUp() {
        //      
	var initsrc = thisWindow.getPath();
        //      js  。
	thisWindow.Import(["staticScript.js"], function(state) {
		if (state && typeof staticScript != "undefined") {
			var len = staticScript.length;          
                        //        。                      
			thisWindow.Import(staticScript, function(state) {               
                        //        。
				    if (typeof thisWindow.onShow == "function") {
					    thisWindow.onShow();
				    }                
			}, initsrc);
		}
	}, initsrc);
};
//  body   ，  startUp
var sartHandel = setInterval(function() {
    if(document.getElementsByTagName("body") != null) {
        clearInterval(sartHandel)
        startUp();        
    } else {
        thisWindow.LogInfo("waitting loading...");
    }
},20);

スクリプトリストファイルは、ここの相対パスは、init.jsのディレクトリを起点として、前のフォルダに進み、cssフォルダに入ります.
static Script.js


staticScript = [
    "../css/com.comStyle.css"
];

スタイルファイルは以下の通りです


.winStyle {
    border:1px solid #C3D2E6;
    font-size:12px;
    width:10px;
    height:10px;
}

ここで、まずテストを行ってもいいです.
直接ブラウザでtestを開けてコンソールを見ると、次のように出力されます.


"import script ../script/common/staticScript.js sucess."
"import css ../script/common/../css/com.comStyle.css sucess."

これまでのビューアを通して確認されたhtmlソースコードは、次のコードになりました.


<!DOCTYPE html>
<html>
    <head>
        <title>test</title>
        <script type="text/javascript" src="../script/common/init.js"></script>
        <script type="text/javascript" src="../script/common/staticScript.js"></script>
        <link rel="stylesheet" type="text/css" href="../script/common/../css/com.comStyle.css"></link>
    </head>
    <body>
    </body>
</html>

既存のhtmlコードとの違いは大きいですか?
元のhtmlコードは以下の通りです.


<!DOCTYPE html>
  <head><title>test</title>
    <script src="../script/common/init.js" type="text/javascript"></script>
  </head>  
  <body>
  </body>
</html>

ここに来て、あなたも興奮していますか?あなたにも無限の想像空間を与えましたか?
添付ファイルは今まで書いたスクリプトパッケージです.テストをダウンロードできます.
次の記事に注目してください.コントロール開発の継承関係

JavaScriptコントロールフロー