とにかく、Javascriptが肌に合う、ユゲタです。
自分用のライブラリは、もはや100本は軽く超えて作っていると思うんだけど、
最近でも半年に1回ぐらい、自分のコーディングルールが更新されています。
もはやclassも使えるJavascriptなんですが、できれば、下位互換も重要視したいので、
なるべく使わないようにしているんですが、きっとそっちにメリットを感じたら、
一気に方向転換してしまうんだろうな・・・
今回は、自分ライブラリを作る時のjavascriptの標準的な（自分的に）書き方をブログに残しておきます。
そして、Javascriptプログラミング学習者の人も少しは参考になるかと思います。
関数を覚えたての時のライブラリ関数の書き方
まず、Javascriptのプログラミングを学習し始めた時に、関数を覚えた時に、次のように書きます。
<script type="module">
function lib(data){
console.log(data);
}
lib("data-view");
</script>
非常に簡単な、単に文字列をコンソールに表示するだけの関数ですが、グローバル領域にfunctionを定義するだけの、
至ってシンプルな書き方です。
お手本というか、マニュアルどおりですね。
変数に関数を格納する書き方
次にjavascript独特の関数を変数保持方式の関数の書き方で、これが理解できると、連想配列内に、関数を仕込んだりして、
少し効率的な構造体を作ることができます。
<script type="module">
var lib = (function(data){
console.log(data);
});
lib("data-view");
</script>
無名関数を覚えたてでのライブラリ関数の書き方
グローバルの変数や定数を汚さないための書き方は、次のようにします。
<script type="module">
(function(){
function lib(data){
console.log(data);
}
lib("data-view");
})();
lib("data-view");
</script>
functionがいくつか並んでいて、わかりにくい人もいるかもしれませんが、これが読めたら、javascript初級者からは抜けられるでしょう。
ちなみに、一番下の行のlib関数実行はエラーがでます。
無名関数内での関数や変数定義は、ちゃんとスコープ処理されて、そのスコープの外には影響されなくなります。
ポイントは、無名関数の後ろに()を書くと、その無名関数を即時実行してくれるようになるので、この書き方は慣れておいたほうがいいでしょう。
インスタンスを覚えた人の書き方
次に関数をインスタンスで実行するという方式を覚えると、「ガベージコレクション」という言葉を耳にし始めます。
※ガベージコレクションについては、今回は説明しません。
<script type="module">
(function(){
function lib(data){
this.str = data;
}
lib.prototype.view = function(data2){
console.log(this.str +"/"+ data2);
};
new lib("a").view("b");
})();
</script>
関数のprototypeという属性を覚えると、thisを便利に使えたり、色々なデータを継承することができ、
慣れると、大きなシステムでも対応できるので、この方式は、是非、覚えておきたい！！
起動関数のみで、処理したいと思った時のスニペット
そして、今現在の自分の最終形のライブラリ関数の作り方が、
<script type="module">
(function(){
function lib(){
let mode = "",
args = [];
for(let i=0; i<arguments.length; i++){
if(i===0){
mode = arguments[i];
}
else{
args.push(arguments[i]);
}
}
if(!mode){return;}
if(this[mode] === undefined){return;}
return this[mode].apply(this , args);
}
lib.prototype.view = function(data){
console.log(data);
};
new lib("view" , "test-view");
})();
</script>
libという関数のviewというpropertyに、new lib("view")という起動方法でアクセスできるようにする方法です。
ポイントは、function libの定義は、あくまでlibというクラスのような定義をする意味にして、その中で、
argumentsという、引数を配列で取得できる方式で、1つ目の変数を、下層に存在する、子関数名を定義して、
その後ろを、それぞれの送り値とする方式です。
ほとんどのライブラリが、この方式で、効率的に動作できるようになりました。
またcookieを便利に書いたり読んだりする関数を作るときには、function定義する時に、cookie名を、初期関数定義内で、this.nameのように持つとかなり便利にできるので、
その際は少し内容を変える必要がありますけど、この応用で、ほぼなんでもイケます。
こうした自分にとって便利な関数を作りためていくと、ホームページ制作も、人よりも何倍も早くなるかもね・・・
いや、ソレは自分次第・・・
0 件のコメント:
コメントを投稿