こんばんは、Sorakimeです。
昨日の投稿を読んでくださると内容が理解できると思うので、先にそちらのほうご一読を推奨します。
昨日の投稿では、骨組みだけを作りましたがあれでは結局なにも動作しません。ですから、簡単に作り方をここに書いておきます。
メソッドというかなんというかを作る方法
昨日の投稿でやりましたね。現在以下のようなソースコードになっていると思います。
var _$={
version: '1.0'
}
window._$=_$;
これは、機能も言った通り連想配列です。ですから、ここからもっと下にキーと値というかここで言うメソッドとその動作する機能の実装をしていばよいわけです。まずは、version: '1.0'の後に,を追加して、改行してから書いていきましょう。
例えば、ここではselectという名前で、querySelectorのそのままの実装を作ってみましょう。ちなみに、この場合には無名関数、function () {}的な書き方かアロー関数、() => {}でもよいです。ここでは、引数は仮にqueryとしておきましょう。そうすれば、以下のようなソースコードが出来上がると思います。
var _$={
version: '1.0',
select: (query) => {
return document.querySelector(query);
}
}
window._$=_$
ちょっと違う、という人もいるかと思います。あと、空白に関しては一行目と4行目以外は無視してくれてよいです。
var _$={
version: '1.0',
select: function (query) {
return document.querySelector(query);
}
}
window._$=_$
これでも違う人はまぁコピペしよう。
基本的な機能はこれで完成です。まぁ、
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="shortwrite.js"></script>
</head>
<body>
<script>console.log(_$.select())</script>
</body>
</html>
なんて文書かれたらこの場合はどうしようもありませんけどね。対処法としてはif文とかでqueryに何か入ってるかを確認してから動作させるなんてことをすればよいと思います。まぁこんな感じかなぁ。
var _$={
version: '1.0',
select: (query) => {
if (query!=null) {
return document.querySelector(query);
} else {
return false;
}
}
}
window._$=_$
とまぁこんな感じで機能をどんどん追加していきます。ちなみに何個かメソッドを追加していく方法は知っていますが、メソッドなしの動作方法は知りません。考えておきますが、忘れてる可能性もあります。
ちなみに、Class文とか使うとIEでのサポートができなくなり、少し文も見にくい気がするのでこっちで書いてます。アロー関数使ってる時点でIE無理だけどね。
MDNへGO!
まぁ、最適というだけで使えるので、ファイルサイズ削減にもいいんじゃないかな。昨日さえ思いついたら、全部乗っけていって作ってもいいかも。
ということで、若干雑かもしれないですが終わります。
最後まで読んでくださり、ありがとうございました。