Life is Really Short, Have Your Life!!

ござ先輩の主に技術的なメモ

jQuery以前のJSのソースコードを見て勉強しよう

javascript

地方のIT企業のWebサイト巡りという新しい趣味を見出し、心がぴょんぴょんしてます。本日は、アキタシステムマネジメントさんのソースコードに学びましょう。

https://www.tps-shop.com/R/common/js/common.js

サーバーサイドはASP.NET x IIS6.0 のようで、GENERATORタグにVisual Studio.NET 8.0って書いてある。調べたら2005年発売のソフト。え、これってもうとっくにサポート切れてるよね。この頃ってIE6.0全盛の頃だし、IE5とかをサポートしていた頃のJSのコードになるんだろう。すごい掘り出し物だ！心がぴょんぴょんする！

ASP.NETには Post Back(ポストバック) という独自機構がある。ASP.NETってPOST先を自分にするのが通例らしく、そこでビジネスロジックを実行したりするらしい。検索ボタンを押すと同一HTMLにテーブルが表示されるみたいなイメージ。ポストバックされたことを検知してASP.NET上のロジックが走るみたい。当時はカッコ良かったんだろうけど、今となっては気持ち悪い。

ポストバックの管理を統一的に管理して画面遷移を制御したいってのが、このJavascriptの最も大きな責務のようだ。

本JSのコードで実現してること

大きく言えばこの２つ。

  • ASP.NETにおける画面遷移
  • 小画面起動

以下、このコードを見て思ったことをつらつらと書きます。

まずは定数宣言

JavaScriptには定数としてのconstがあるが、今でさえIE10以上はサポートしていない。元々言語仕様としてfinalやconstが使えないし、Pythonにも定数はない。「これはconstだから変更するな」と空気を読んでもらうしかない、と。

画面遷移用のキーワードはこの定数を使って参照せよ、と。今で言うとAndroidのstring.xmlと同じことやん。

変数名と関数名の頭に$がついている

謎の命名規則や。PerlかPHPの影響を色濃く受け取るなこれは。

ページ遷移関数(PageMove)

document.body == null ってハンドリング初めて見た
 //bodyが存在するか
    if ( document.body == null ) {
        //存在しない場合終了
        return false;
    }

え？bodyの存在チェックってどーゆーこっちゃ？

ページ遷移できなくてもそのうちDOMが構築されるからfalse返せばええんちゃうという牧歌的な趣を感じる。どういう時にfalseになるんだろう。可能性としてあるのは複数Webページのロードだから、フレームか何かですかね。昔はフレーム全盛だった時代もあったなぁ...

document.all って何これ
if ( document.all != null ) { 
} else {
}

IE限定のオブジェクトらしいな...質問です! Operaって、document.all使えるんですか？ 【OKWave】に詳しい。でも、elseブロックで書いてあるcreateelementに統一できなかったのだろうか。最初はdocument.all前提のコードを書いてて、Firefoxじゃ動かねえみたいな話になってif分岐が増えたような香りがする。

onclick内でformをsubmitしてfalse返したら動かないのかな

こんなかんじのコードが書いてある。

<input type="button" onclick="return hoge()"/>
function hoge () {

formobj.submit();
//成功
return true;
}

これ、false返したらどうなるんだろ。submitは実行されるのかな。気になってきた。あとでローカルで試そう。

POST Backを小画面にさせる技

小画面起動の場合は空のHTMLを起動させておいて、document.writelnでポストバックするためのフォームを書き込んでonloadでsubmitさせるという技を使っているみたい。親画面から小画面に向かってPOSTするのは確かに出来ないから、小画面で頑張ってもらうしか無い、と。html毎サーバーサイドで生成して表示してるんじゃないかな。これはこれでアリだし、Ajaxが無い時代では主流だったように思う。

GETの値を取得するロジックはシンプルでよかった
  • ?以降のクエリストリングを全部文字列で取得
  • &でsplitしてkey=valueの配列を作り、更に=でsplit
  • key,valueのオブジェクトを作って返す

なるほどね！これはこれで勉強になった！

おもしろかった

1時間半もかけて読んじゃった。おもしろかった。