jQuery.Moxa ぼくのかんがえた最弱のフレームワーク

備忘録

React.js, AngularJS, Backbone.jsとすばらしいフレームワークが既にあるので恐縮ですが、フロント向けフレームワークを作ってみました。
makoto31.github.io

解決したかったこと

有用なフレームワークを使おうとすると、学習コストが高くて導入が難しかったりします。
そこでフレームワークを導入せず、いろいろな人がJavaScriptを素でガリガリ触っていくと。。。

  1. 1つのファイルに全て詰め込まれてる問題
  2. グローバル関数、変数が乱立する問題
  3. ajax処理がファイル内に散らばっててサーバとのI/Fが分かりにくい問題
  4. ajaxで取得したデータの持ち主が分からない問題
  5. (gulpでconcat&minifyしたい)

ということが往々にしてあります。

役割分担

以下５つの役割に分けることでカオスになる諸問題を解決したいと思いました。
f:id:MSitter29:20150923214001p:plain

  • ajax処理してデータを保持するのはControllerの役割
  • DOMの追加削除、クリック・CSS処理はViewの役割

とController、Viewを位置づけました。(実際にはViewからもajax呼べちゃいます)

  • Ajax: ajax関数群（GET, POST）
  • Util: ユーティリティ関数群
  • Def: 定義値（メッセージ文言、URL、フラグ等）

この３つは、よく共通的にしたかったり、コードの見通しを良くしたい場面が個人的に多かったので切り出しました。

使い方

$.moxa.controller(function(... // ajax処理やviewに通知
$.moxa.view(name, function(... // クリック処理、DOM操作等々
$.moxa.def({...
$.moxa.util({...
$.moxa.ajax({...

jQuery.Moxaが提供するAPIはこれだけです。
学習コストが低く誰にでもすぐに使えるようにしたかったので、逆になんの機能もない最弱のフレームワークに仕上がりました。

controllerとviewに関数を登録すると、$(document).ready()のタイミングでそれぞれ実行されます。
それぞれの役割に応じて関数内にコードを分けていくイメージです。（役割ごとにjsファイルを分けたり）
簡単な使い方はこちらに書いたのですがイメージがわきにくいと思います。
サンプルの方がわかりやすいと思いますので、よったら見てください。

公開するためにやったこと

  1. GitHubソース登録&リリース
  2. bowerに登録
  3. jQuery pluginに登録失敗(廃止方向らしく、新規登録は受け付けてませんでした)
  4. npmに登録&CommonJS対応
  5. Readme.md
  6. サンプルコード
  7. GitHub Pages(ランディングページ)
  8. 英訳(ほぼgoogle翻訳)

コードをちゃんと公開したのは初めてで、jQuery.Moxa本体をつくるよりも、公開できるように整える方が大変でした。世の中に公開されてる人ってすごいですね。

よかったら使ってください。

JavaScript 第6版

JavaScript 第6版

Amazon