読者です 読者をやめる 読者になる 読者になる

Javascriptから.jsを読み込む方法をvimperatorに絡ませる

vimperator

TODOにしていた内容を調べた。

Javascriptの仕様としてincludeやrequireがないそうなのでその辺をもうちょっと調べる。

JavaScriptポケットリファレンス第3版では、Javascript内で呼ぶ方法の記載が見つけられなかった。
【見つけた関連内容】

  • での方法
  • 日本語コードによるブラウザ環境の動作チェック

期待している結果は得られず残念。


サイ本にはこの件についてどのように載っているんだろうか??持っていないので立ち読みしてこよう。>TODO

Web

人力はてな

まず最初に見つけたのが、下記の人力はてなでの質問

JavaScript で、他の JavaScript ファイルを読み込むにはどうしたらよいでしょうか?
http://q.hatena.ne.jp/1161158347

  • XMLHttpRequestとActiveXObjectを使う方法。
  • scriptオブジェクトを作る方法

scriptオブジェクトを作る方法は面白いと思いました。

CodeRepos

もうちょっと調べてみたら、これはすごいと思うJSライブラリがcodereposにUPされていました。
依存関係で読み込み順や読み込み待ちまでしてくれる優れもの。これはすごい。

JavaScriptで外部ライブラリを読み込むためのスクリプトをCodeRepos.orgに上げた。 - ヒルズで働く@robarioの技ログ
http://d.hatena.ne.jp/holidays-l/20070923/p1

【機能】

loader.js.inc

○onloadイベント以降でもブックマークレットでも使える。
○外部ドメインのライブラリが読み込める
△(多少のタイムラグはあるが)後続スクリプトは、確実に読み込み完了していることを期待して良い
○UIスレッドは停止しない

試してみました。
詳しい使用方法は作者の記事を見て頂けたらと思います。


【呼び出されるJS】

//読み込んだらHelloを表示する。Againを表示する関数
function again(){
alert("Again");
}
alert("Hello");

Javascript内で呼び出す】

<html>
<head>
<script type="text/javascript" charset="utf-8">
//loader.js.inc
(function(l){var f,m,p,e,t;(function g(){m=l.shift();if(!m)return f&&f();if(typeof m=='string'||m instanceof String)m={window:m};for(p in m){if(p=='window'||eval('typeof '+p)=='undefined'){e=document.createElement('script');e.type='text/javascript';e.src=m[p];document.documentElement.appendChild(e)}}t=setInterval(function(){for(p in m){if(eval('typeof '+p)=='undefined')return}clearInterval(t);g()},99)})();return function(c){return function(){var a=arguments;f=function(){c.apply(c, a)}}}})
([
	{again:'hello_read.js'}
])
(function(){
	again();
})();
</script>
</head>
<body>
<input value="func_call" type="button" onclick="again();" />
</body>
</html>

動作確認をすると・・・


おぉー。できた!!これは本当に素晴らしい。
すごく汎用性とか柔軟にできるので、これをvimperatorのプラグインで使ってみたいと思います。

vimperatorで使ってみる

同じコードをvimperatorのプラグインで書いたら

E121 Undefined variable: typeof again

とエラーが表示されてしまいます。


なにが原因なのかと下記コードを使って試してみました。


【HTMLScriptElementを作成】

var s=document.createElement('script');
s.charset='Shift_JIS';
s.src='http://www.mysite.local/hello_read.js';
alert(s);

シンプルにalertデバッグをしてみたところ、オブジェクトのタイプが「XULElement」と表示されます。
HTMLで同じコードを試すと、「HTMLScriptElement」と表示されます。

えぇ!?HTMLとvimperatorで書く場合でオブジェクトのtypeが違う!!
期待しているのはHTMLScriptElementだったので、vimperator特有の現象だとわかりました。


vimperatorの事もJavascriptの事もきちんとわかっていない状態で危険です。
踏み込む領域のレベルについていけてない・・・


初心に戻ってvimperatorの事をもっと知るべきだと思いました。
vimperatorのマニュアルを読み漁るのに重点をおく。>TODO


今思った事なんですけど、ステータスラインを利用するてもいい感じな気がしてきました…。でも、それはある程度結果と結論がでてからの方針検討にしよう。

Keep

  • 原因を調べる
  • わかるところから手をつける
  • 本を読む
  • 継続

Problem

  • 中途半端は駄目
  • コードはシンプルなところから始めること
    • エラーがでてしょぼんとしてしまう。*1
    • 結局デバッグに時間がかかる。
  • やりたいことがいっぱい(><

Try

  • サイ本を立ち読み*2
  • vimperatorのマニュアルを読む。
  • vimperatorのプラグイン作成方法の情報収集。

*1:テンション

*2:欲しかったら購入も検討