jQuery.Moxa ぼくのかんがえた最弱のフレームワーク
React.js, AngularJS, Backbone.jsとすばらしいフレームワークが既にあるので恐縮ですが、フロント向けフレームワークを作ってみました。
makoto31.github.io
解決したかったこと
有用なフレームワークを使おうとすると、学習コストが高くて導入が難しかったりします。
そこでフレームワークを導入せず、いろいろな人がJavaScriptを素でガリガリ触っていくと。。。
- 1つのファイルに全て詰め込まれてる問題
- グローバル関数、変数が乱立する問題
- ajax処理がファイル内に散らばっててサーバとのI/Fが分かりにくい問題
- ajaxで取得したデータの持ち主が分からない問題
- (gulpでconcat&minifyしたい)
ということが往々にしてあります。
役割分担
以下5つの役割に分けることでカオスになる諸問題を解決したいと思いました。
とController、Viewを位置づけました。(実際にはViewからもajax呼べちゃいます)
この3つは、よく共通的にしたかったり、コードの見通しを良くしたい場面が個人的に多かったので切り出しました。
使い方
$.moxa.controller(function(... // ajax処理やviewに通知 $.moxa.view(name, function(... // クリック処理、DOM操作等々 $.moxa.def({... $.moxa.util({... $.moxa.ajax({...
jQuery.Moxaが提供するAPIはこれだけです。
学習コストが低く誰にでもすぐに使えるようにしたかったので、逆になんの機能もない最弱のフレームワークに仕上がりました。
controllerとviewに関数を登録すると、$(document).ready()のタイミングでそれぞれ実行されます。
それぞれの役割に応じて関数内にコードを分けていくイメージです。(役割ごとにjsファイルを分けたり)
簡単な使い方はこちらに書いたのですがイメージがわきにくいと思います。
サンプルの方がわかりやすいと思いますので、よったら見てください。