Javascriptの効率的な使い方を、日々研究している、ユゲタです。
ASPサービスを個人的に作っている時に気がついたんですが、Javascriptライブラリはたくさんありますが、
１つのサービス（機能）で１ライブラリ構成になっているため、比較的大きなくくりでのライブラリがJavascriptの特徴です。
これを、細かな1機能ごとに、ライブラリとして持たせることは、効率的なのか？
また、実際にそんなASPを作ったとしたら、ユーザーライクなのか？、開発側で管理しやすいのか？
そもそも、実現可能なのか？？？
という疑問の元、とりあえず、javascriptの関数を文字列として扱って、実行できるようにする方法を見つけたので、備忘録しておきます。
Javascriptのfunctionを文字列に変換する方法
まず、サンプルとして、次のようなプログラムを用意してみました。
function test(){
console.log("test");
this.init();
}
test.prototype.init = function(a){
console.log("test-init");
};
これを実行するには、次のようにするだけで、それぞれのconsole.logの値がコンソールに表示されます。
new test();
> test
> test-init
普通に、関数をコンソールに表示しようとすると・・・
console.log(test);
> ƒ test(){
> console.log("test");
> this.init();
> }
関数内部の文字列が取得できてはいますが、ファンクション記号がついてきて気持ち悪いです。
でも、次のようにすると、いい感じに取得できるます。
console.log(test.toString());
> function test(){
> console.log("test");
> this.init();
> }
でも、実はこの段階では、property関数の部分が、取得できておらず、文字列としては、未完成です。
そこで次のようにしてみると、いい感じにprototype関数も全て取得することができます。
function get_func(func){
if(!func){return null;}
let prg = func.toString();
for(let prt in func.prototype){
prg += func.name+".prototype."+prt+"="+func.prototype[prt].toString();
}
return prg;
}
$ get_func(test)
> "function test(){\n console.log(\"test\");\n this.init();\n}test.prototype.init=function(a){\n console.log(\"test-init\");\n}"
改行もタブもそのまま取得できますが、trimなどを使って、圧縮化してあげると、いい感じのコード文字列jになると思います。
文字列可した関数を実行する方法
次にfunctionから取得した文字列を実行するには、eval関数に入れるだけでもセットできます。
eval("function test(){\n console.log(\"test\");\n this.init();\n}test.prototype.init=function(a){\n console.log(\"test-init\");\n}")
new test();
> test
> test-init
セキュリティの観点から、evalは使わないという方は、Function関数を使って、実行してみることをおすすめします。
文字列関数を使って何ができる？
この文字列を下位互換性をもたせるバージョン管理として、管理して、localStorageなどにキャッシュすれば、
webサイトで、無駄な読み込みの発生しないjavascriptが構成できます。
開発側としては、バージョン管理と、モジュール同士の互換性や、コンフリクト管理をするということで、これまでよりも、大きなプロジェクト対応に対応することが可能になります。
さらにその文字列を暗号化したり圧縮化することで、さらなる効率アップにつながるでしょう。
ここまでのASPサービスを行っているSaaS提供会社って、どのくらい有るんでしょうね？
最近Googleのツールも、JSエラーが出まくっているのは、みんな気がついていないのかしら？？？
0 件のコメント:
コメントを投稿