Kanasan.JS#LT0114

1,782 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,782
On SlideShare
0
From Embeds
0
Number of Embeds
23
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Kanasan.JS#LT0114

  1. 1. Inside JSmary.Plugin JavaScript で外部 JS 動的ロードの実際 shogo4405<shogo4405@gmail.com> Inside JSmarty.Plugin
  2. 2. Agenda
  3. 3. はじめに <ul><li>JSmarty って… </li></ul><ul><ul><li>PHP の Smarty ライクなテンプレートエンジンです。 </li></ul></ul><ul><ul><li>http://code.google.com/p/jsmarty で配布中 </li></ul></ul><ul><li>JSmarty.Plugin オブジェクト </li></ul><ul><ul><li>外部 JS を動的に読み込んで JSmarty のプラグインとして扱う為のオブジェクト。 </li></ul></ul><ul><ul><li>これを作ったときの話をすこしします。 </li></ul></ul>JSmarty
  4. 4. include <hoge.js> <ul><li>そもそも JavaScript には、他 JS ファイルのインクルード機能がない。さみしい>< </li></ul><ul><ul><li>include “path/to/javascript.js”; </li></ul></ul><ul><ul><li>require “path/to/javascript.js”; </li></ul></ul><ul><li>⇒ 無ければ作りましょう。 (^o^) </li></ul>include / require
  5. 5. Café Break <ul><li>0101010101001000000001 </li></ul><ul><li>0101010101010101010100 </li></ul><ul><li>1010101110101001010010 </li></ul><ul><li>1010101010101010111111 </li></ul><ul><li>1111010101010101000001 </li></ul><ul><li>1010101010101001010101 </li></ul><ul><li>どうやってやろう… </li></ul>
  6. 6. ステップ <ul><li>外部 JS ファイルを、テキストとして取得 </li></ul><ul><li>⇒ XMLHttpRequest </li></ul><ul><li>2. 取得したテキストを JS として解釈 </li></ul><ul><li>⇒ eval, new Function() </li></ul><ul><li>以上 </li></ul>XMLHttpRequest, eval, new Function
  7. 7. ソースコード 1 <ul><li>10 | var xhr = new XMLHttpRequest(); </li></ul><ul><li>20 | xhr.open(‘GET’, ’path/to/hoge.js’, false ); </li></ul><ul><li>30 | xhr.send(‘’); </li></ul><ul><li>40 | </li></ul><ul><li>50 | var code = xhr.responseText; </li></ul><ul><li>60 | var lambda = new Function(code); </li></ul><ul><li>70 | </li></ul><ul><li>80 | lambda(); // alert(“hoge”); </li></ul><ul><li>90 | alert(typeof(hoge)); // undefined </li></ul>■ hoge.js function hoge() { alert(“hoge”); }; hoge();
  8. 8. ソースコード 2 <ul><li>parse : function(script, pluginName) </li></ul><ul><li>{ </li></ul><ul><li>var global = this.get('util.global'); </li></ul><ul><li>var realname = this.realname(pluginName); </li></ul><ul><li>var f, suffix = 'return ' + realname + ';'; </li></ul><ul><li>if(global(realname)) </li></ul><ul><li>{ </li></ul><ul><li>this[pluginName] = global()[realname]; </li></ul><ul><li>return !!this[pluginName]; </li></ul><ul><li>}; </li></ul><ul><li>try </li></ul><ul><li>{ </li></ul>if(script){ script += 'return ' + realname +';'; }; f = new Function(script || 'return null;'); this[pluginName] = f(); } catch(e) { this[pluginName] = null; JSmarty.Logger.invoke('error')(e); }; return !!this[pluginName]; } script = “function sprintf(){ ~ };” If(script){ script += “return sprintf”; }; f = new Function(script); JSmarty.Plugin[‘php.sprintf’] = f();
  9. 9. デモ <ul><li>JSmarty.Plugin.importer を利用して、 php.sprintf.js と php.range.js を呼込みます。 </li></ul>importer JSmarty.Plugin.importer( ‘ php.sprintf’,’php.range’ ); alert(sprintf(‘%02d’, ‘1’)); // 01 alert(range(‘a’,’z’)) ; // a, b, c, ・・・ x,y, z
  10. 10. 他にも… なんだかオブジェクトいっぱいあります。 JSmarty.* オブジェクト JSmarty.Classes.* JSmarty.System JSmarty.Classes.Buffer JSmarty.Templatec JSmarty.Classes.History JSmarty.Plugin JSmarty.Classes.HashMap JSmarty.Navigator JSmarty.Classes.Item JSmarty.Logger JSmarty.Classes.Loader JSmarty.Compiler JSmarty.Classes.String JSmarty.Classes
  11. 11. おしまい

×