動機
自作のSPAをスクラップ＆ビルドするので今度はDIを使ってみようと思ったけどinverify はなんだか面倒くさそうなので bottlejs を使う。
前準備
Webpackとnpm install --save bottlejs とかやっておいた。
実装
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Kamishibai framework</title>
</head>
<body>
<!-- IE11 promise -->
<script src="https://www.promisejs.org/polyfills/promise-7.0.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.4/fetch.min.js"></script>
<script src="/js/bundle.js"></script>
</body>
</html>
app.js
import Bottle from 'bottlejs'
window.kms = window.kms||{};
window.kms.Unko=function(){
this.color = "brown";
}
window.kms.rootBottle = new Bottle();
window.kms.rootBottle.service("💩",window.kms.Unko);
window.kms.unko = window.kms.rootBottle.container["💩"];
alert("💩の色は"+window.kms.unko.color);
結論
見事にボトルに💩を詰めておくことができた。
これで何ができるかってことだけど、処理の流れとオブジェクトの作られ方が分離できるってことかなと思う。
例えば、その💩に🐝がついていたとしても、ロジック側でその設計を考える必要がなくなるというか。あらかじめ🐝付きの💩をボトルに詰めときゃいいじゃんっていう。
その用途だったらかなり古いけど bottlejs で十分機能するかなと思って実験中。