Downloaded 17 times
![4. Mithrilの特徴③
m.mount
var myCtrl = function(){ ~controller処理~ };
var myView = function(ctrl){
return [
m(“div”, “test”),
m(“p”, ctrl.description() )
];
};
m.mount( document.getElementById("root"), {
controller: myCtrl,
view : myView
});
Mithrilで定義したアプリケーションを実行](https://image.slidesharecdn.com/jsframeworkmithril-150527114121-lva1-app6891/85/Js-framework-mithril-13-320.jpg)
![4. Mithrilの特徴③
m
m(“br”) => <br>
m(“div”, “Hello”) => <div>Hello</div>
m("div", {class: "container"}, "Hello");
=> <div class="container">Hello</div>
m("div.container", "Hello");
=> <div class="container">Hello</div>
m("div[href='hoge.html']", "Hello");
=> <div href="hoge.html">Hello</div>
VirtualDOMの生成に使用するAPI](https://image.slidesharecdn.com/jsframeworkmithril-150527114121-lva1-app6891/85/Js-framework-mithril-15-320.jpg)
![4. Mithrilの特徴③
m.withAttr
var myCtrl = function() {
this.alert = function(value){
alert(value); //click
};
}
var myView = function(ctrl) {
return [
(“button", {onclick: m.withAttr("value", ctrl.alert), value: ”click” } )
];
}
イベントのCallback処理を定義](https://image.slidesharecdn.com/jsframeworkmithril-150527114121-lva1-app6891/85/Js-framework-mithril-16-320.jpg)
Uploaded byShoyo Kyou
海外で注目されてるJs framework “mithril”の特徴
mithrilの特徴についてざっくり。 Data Binding JS Night で発表した資料。 http://vuejs-meetup.connpass.com/event/14017/
海外で注目されてるJs framework “mithril”の特徴
- 1.
- 2.
- 3.
- 4.
- 5. 軽量 v0.11.8 v0.13.2 v1.3.15 v2.0.7 v0.2.0 V3.3.0 v0.7.2Ractive.js -> 162KB AngularJS-> 123KB React -> 119KB Vue.js -> 59KB knockout -> 55KB Mithril -> 19KB Riot -> 9KB 2. Mithrilの特徴①
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12. 4. Mithrilの特徴③ m.mount(root, module) ⇒Mithrilで定義したアプリケーションを実行 m.prop() ⇒ getter/setter API m(selector, obj, value) ⇒ VirtualDOMの生成に使用するAPI m.withAttr(prop, callback) ⇒ “onclick”や“onchange”等のイベント発生時に実行する関数を定義す る際に使用 4つの主要API
- 13. 4. Mithrilの特徴③ m.mount var myCtrl= function(){ ~controller処理~ }; var myView = function(ctrl){ return [ m(“div”, “test”), m(“p”, ctrl.description() ) ]; }; m.mount( document.getElementById("root"), { controller: myCtrl, view : myView }); Mithrilで定義したアプリケーションを実行
- 14. 4. Mithrilの特徴③ m.prop var myCtrl= function() { this.name = m.prop("hoge"); console.log( this.name ); // -> function(){...} console.log( this.name() ); // -> "hoge" //change value this.name("fuga"); console.log( this.name() ); // -> "fuga" }; getter/setter API
- 15. 4. Mithrilの特徴③ m m(“br”) =><br> m(“div”, “Hello”) => <div>Hello</div> m("div", {class: "container"}, "Hello"); => <div class="container">Hello</div> m("div.container", "Hello"); => <div class="container">Hello</div> m("div[href='hoge.html']", "Hello"); => <div href="hoge.html">Hello</div> VirtualDOMの生成に使用するAPI
- 16. 4. Mithrilの特徴③ m.withAttr var myCtrl= function() { this.alert = function(value){ alert(value); //click }; } var myView = function(ctrl) { return [ (“button", {onclick: m.withAttr("value", ctrl.alert), value: ”click” } ) ]; } イベントのCallback処理を定義
- 17.
- 18. 4. Mithrilの特徴③ m.startComputation var myCtrl= function() { var that=this; this.text = m.prop("first"); setTimeout(function(){ m.startComputation(); that.text ( "setTimeout“); m.endComputation(); },2000); }; Viewの描画を行う m.mount、m.route、m.request、event実行処理の内部でも使用されている。 endComputationのタイミングで再描画通知が送信される。
- 19. 4. Mithrilの特徴③ m.redraw var myCtrl= function() { var that=this; this.text = m.prop("first"); setTimeout(function(){ that.text ( "setTimeout“); m.redraw(true); },2000); }; Viewの強制再描画を行う 強制的に再描画通知を送る場合使用。
- 20. 4. Mithrilの特徴③ m.redraw.strategy var myCtrl= function() { var that=this; this.text = m.prop("first"); console.log(m.redraw.strategy()); //-> all m.redraw.strategy("none"); console.log(m.redraw.strategy()); //-> none setTimeout(function(){ that.text ( "setTimeout“); console.log(m.redraw.strategy()); //-> diff m.redraw(true); },2000); }; 描画方法を設定可能 all、diff、noneの3種類。引数省略で取得可能。
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27. 7. Mithrilの特徴⑤ 0.1.34は気合で作ってくれって内容でしたが… m(“a”, {href:item.url}, item.title)
- 28.
- 29. 8. Mithrilの特徴⑦ BROWSER ・IE8以下は非対応。 ⇒ es5-shim.min.jsやpolyfill.min.jsを読みこめば使える。 indexOf、map、keysが内部的に使われている為。 ・pushstateを使う場合は注意。 ⇒ 一部AndroidデフォルトブラウザやIE9以下、OperaMiniで 動かない為。
- 30.
- 31.