EzoGP Team Blog

Efficient for Web development recording activities.

Webリソースの書き方

takuji_mezawa

4月の後半にodakaさんとやり取りをしたメールにJavascriptの書き方についての話題があった。記述方針は、

  • 埋め込み型スクリプトは、エンクロージング型定義とする。
  • ページ内スクリプトは、モジュール型定義とする。

です。それに基づいて記述例を示すと、

埋め込みJavascriptの場合(エンクロージング型)

var SomeObject = function(...) {
    var xxxx;

    function xxxxx() {
        ...
    };

    this.xxxx = function(...) {
        ...
    };

    return this;
};
someOj = new SomeObject();

そして、

ページ内Javascriptの場合(モジュール型)

SomeObject = function(...) {
    var xxx;

    return {
        initialize:function(...) {

        }, ...
    };
}();

という具合。odakaさんによると「何気にスクリプトのコードが増える。外部化すれば、ページロードの負荷が高くなる」ので、

  1. 適当な単位に分割して提供する(基本)
  2. 分からない人にはまとめたものを提供する

というのが望ましいのでは?というものでした。これには私も合意しました。全くの同感ですから。

昨日いつものかき集めたフィードの中から@ITのフィードで「Webページを早く見せるための5つのちょっとした工夫」というのを見つけました。これは、

  1. CSSソースコードの上部に記述する
  2. Javascriptソースコードの下部に記述する
  3. CSSJavascriptを書く順番
  4. Javascriptを圧縮して読み込みを速くする
  5. 読み込みが遅いブログパーツには要注意

という要約が載っていました。最後のブログパーツに関しては、とりあえず今のところ問題になりそうもないので、スキップしますが、特に気になったのが、2番目の点です。理想はソースコード*1の最後に記述するべきだ、とあります。同時にHEADタグに埋め込んで使用するJavascriptもあるから一概には・・・というのも記載されています。

確かに、そうなのかな、とも思うのだけど個人的にはイマイチなので、今のところは次のような方針でSyracavaサンプルアプリケーションを再構築中です。
それ以外については、当記事で書かれているような内容と同じ対処をしていると判断したので、いいことにしよう。

  1. ページ内に記述するスクリプトは、モジュール型でオブジェクト定義をする。これは出来るだけ早めに実装定義を済ませる。
  2. 何らかの定義をする。
  3. 最後に、イベントをリスナー登録してしまう。標準は、winow.onloadとする。つまり、ページローディング時にイベントを発動させる。タイミングが適切であるイベントに限る。

この方針で記述したら次のようになるはず。

<script type="text/javascript">
// <![CDATA[
var jq = jQuery.noConflict();
ExampleApp = function() {
    /*  */
    return {
        initialize:function() {
            jq('a#egp-foot-link').attr('title', syI18N.message('info.another_win', syI18N.arguments(syI18N.message('exm.egp_home', ''))));
            exmcom.effectLogo('#egp-sy-logo');
            exmcom.effectMenu('#exm-img-header', 'normal');
            exmcom.showPrintDialog('a.egp-sy-print');
            exmcom.refreshMenu();
        }
    };
}();
// ]]>
</script>

<script id="exm-app-main" type="text/javascript">
// <![CDATA[
var syracava;
var log = new Log(Log.DEBUG, Log.consoleLogger);

window.onload = function() {
    syracava = new SyracavaApp(log);
    syracava.initialize();
    ExampleApp.initialize();
};
// ]]>
</script>

scriptタグで分けているのは、見通しを良くしようと考えてのこと。特別分けなくてもいいと思う。

*1:HTMLのBODYタグ内を指しているようです。