Javascript:CSS記述風の引数

・sample(“Title”,1920,1080,640,480,”test.jpg”,-1,”Hello World”);
 上記のように関数の引数が増えてくるとわかりにくいので、何か良い方法は無いかと思い考え、CSS記述っぽく「キー:値;」で受け渡すようしたらどうだろうとサンプルプログラムを作ってみました。

特長
・CSS記述風なので「変数=値」なのでわかりやすい。
・引数の順番を自由にできます。

欠点
・引数が長くなる(・・でもわかりやすい)
・ソースが長くなる。


※プログラム初心者のため、このページのプログラムソースは正常に動作しない事がありますご注意下さい。
(あっちこっちのサイトの情報を寄せ集めてるので思わぬ不具合があるかも)


サンプルプログラムの概要

 「キー:値;キー:値;・・・」の形式の引数を分解して、「キーに一致する変数=値」に格納してるだけです。

引数はこんな感じに書くことが出来ます。

test(" width:1920;  height:1080;  file:test.jpg;  text:ハロー; ");

特別な処理として
・「キー側」の前後に半角スペースやTABが入っても大丈夫なようにしてあります。
 「width:1920;height:1080;file:test.jpg;」よりも
 「width :1920;    height :1080;    file :test.jpg;」
 とスペースを入れる事で見やすくできます。
 (※↑は表示の都合上 で無理やりスペース空けてます)

・値側に「”」「\」「:」「;」はそのまま使えませんが「\”」「\\」「::」「;;」とする事で使用可能
 (※Windowだと半角「\」が半角「¥」と表示される事があります)

・キー側は大文字は小文字に変換されます。(半角のみ)
 なので、 Width や WIDTH と色々な書き方に柔軟に対応します。


デモプログラム

http://www.achiachi.net/objectvr/javascript_test/argument.html


備考

 理想では下記のように書きたかったのだが、Javascriptの仕様では改行があるとエラーが出て止まってしまいます。・・・残念!!

test("
  width:1920;
  height:1080;
  file:test.jpg;
  text:Hello World;
");

 「:;」を使えるようにする部分で replace を使うために変数を文字列型にしています。数列を使う時は数列型に戻さないといけません(サンプルではif文の所で行っています。)
 全て文字列と限定するなら、連想配列を使い if文の所を str[key]=value; の1行※だけにできます。(※追記:別で変数の宣言は必要)

備忘録
 自分が次使う時のために忘れないように・・・

 公開してから気がついたが、「:」はURLを書く時 http: ←で使うのでURLを使う事があるのでURLを使う時は「:」を「=」にするなどあまり使わない文字を利用するのが良い。
 もし改良する機会があれば「キー:値;」の一個目の : 以降は文字列をして扱うようにすると、特殊文字を1文字だけにできる。([“][\]はJavascriptの仕様上の制限なので回避策無し )雰囲気的には

str = str.replace(/\\/g, "\\0\\");
str = str.replace(/;;/g, "\\1\\");
//削除str = str.replace(/::/g, "\\:\\");
split_A = str.split(";");                                 //key:v:a:l:u:e

for(var i = 0; i < split_A.length; i++){
  //↓追加 :を全部仮文字に変換
  split_A[i] = split_A[i].replace(/:/g, "\\2\\");         //key\\2\\v\\2\\a\\2\\l\\2\\u\\2\\e
  //↓追加  一個目の:(仮文字//2//)だけ戻す
  str = str.replace(/\\2\\/, ":");                        //key:v\\2\\a\\2\\l\\2\\u\\2\\e
  //以下同じ
  split_B=split_A[i].split(":");
  key=split_B[0];


 こんな感じで一行削除して二行追加するだけ。未確認

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA