[femtoJS]DOM操作のための軽量化されたjavascriptライブラリを試してみました。

JavaScriptjavascript, メソッド, ライブラリ

Jqueryに比べて軽量なDOMライブラリのようです。

こちらのサイトで存在を知りました。

jsファイルのサイズだけを比べてもかなり小さいです。

jquery-3.3.1.min.js – 84.8kb
femtoJS.min.js – 2.16kb

読み込むデータが少ないので動作も早いのではと期待されます。

femtoJSとは?

Really small JavaScript (ES6) library for DOM manipulation.
So, what is femtoJS? femtoJS is a JavaScript library for basic DOM manipulation. It has a jQuery-inspired syntax and supports chaining.
femtoJS is about 100 lines of code in size, and the entire library weighs in at just under 0.9kB compressed and gzipped.
Because FemtoJS is so small and simple, you can add or remove methods directly in the library, meaning it’s very customizable. All methods are unrelated, so removing one will not affect any others in any way.
This library is designed to be personalized to meet your needs. It’s easy to modify the code to add new methods or change existing ones.

https://vladocar.github.io/femtoJS/
femtoJSはDOM操作のための軽量化されたjavascriptライブラリです。
Jqueryのような構文を使用しており、連携をサポートしています。
femtoJSは約100行でライブラリ全体のサイズは0.9KBにgzip圧縮されています。
femtoJSは小さくシンプルなので直接ライブラリにメソッドを追加/削除可能でカスタマイズしやすくなっています。全てのメソッドは連携していないのでメソッドの削除が他のメソッド影響を与えることはありません。
このライブラリーは個別のニーズに応えるられるように設計されています。
既存メソッドの編集、新しいメソッドの追加が非常に簡単に行えます。

とにかく、シンプルで軽量かつカスタマイズが容易であることが売りのようです。

使い方

ライブラリをダウンロードして使う

以下のURLからzipファイルをダウンロードしてsrcフォルダ内のfemtoJS.min.jsを使用します。

<script type="text/javascript" src="femtoJS.min.js"></script>

CDNを使用する

下記いずれかのコードを使用します。

<script src="https://unpkg.com/femtojs@1.0.1/src/femtoJS.min.js"></script>

または

<script src="https://cdn.jsdelivr.net/npm/femtojs@1.0.1/src/femtoJS.min.js"></script>

上記のCDNがアクセスできない場合は以下のURLで最新情報を確認してください。

femtoJSの書き方

紹介文にある通り、jqueryと同じように記載すれば動きます。

以下のように書けば動きます。jqueryと一緒です。

$('#a').html("<p>Hello World!</p>");

イベントを設定する場合はonメソッドを使用して以下のように記載します。

$('#b').on('click', function(){
$('#a').html("<p>Hello World!</p>");
});

但し、軽量化されているのでJqueryで使用できる全てのメソッドが利用できるわけではありません。かなり限られています。

イベントも全てに対応しているわけではないようです。

ページロード時の動作

loadを試したところ、以下のように記述してもページロード時に動きませんでした。

$('body').on('load', function(){ //$('body')または$('window')
$('#a').html("<p>Hello World!</p>");
});

結果、このようにして動きました。

function onLoading() {
$('#a').html("<p>Hello World!</p>");
}
window.addEventListener('load',onLoading,true);

いい方法をご存知の方がいたら教えて下さい。

まとめ

$を使用するのでjqueryとは競合してしまい、同時利用はできません。

femtoJSでサポートされていないメソッドを使用したい場合は今まで通りjqueryを使用したほうがよいでしょう。

jsファイルに使用したいメソッドを追加して使用するという手段もありますが、上級者向けになりますし、そもそもそこまでしてfemtoJSにこだわる必要はないかもしれません。

個人的は最近のWEBページでほとんどついているscrollTopが利用できないので今のところ使用しないと思います。

scrollTopのメソッドを追加できるほどのスキルもないので…