1. Hello World! 基本的render方法接收2个参数:模板和渲染对象
  2. JSX jsx语法允许html和js混写,这是facebook发明的规范
  3. 展开数组 当jsx变量遇到数组时,会自动遍历每项,这是个递归的过程
  4. 扩展参数 属性支持传入rest参数,将自动展开对象
  5. 转义编码 所有文本变量都会被自动转义,如果想避免,请使用dangerouslySetInnerHTML设置属性
  6. 自定义组件 当jsx中的html的tagName为一个继承自migi.Component的类时,将生产一个组件类的实例,并调用其render()方法渲染。它的props属性为第1个参数,来自于attribute
  7. 作为普通模板 一个自定义组件或jsx的模板对象,因为覆写了toString()方法,所以可以作为一个String类型被使用
  8. children属性 自定义组件拥有children属性,是个数组,指向实际运行时其html的孩子节点
  9. shadow作用域隔离 如同WebComponent一样,如果组件声明了allowPropagation为false,组件内的事件是不向外冒泡的,但这并不能阻止捕获。在下面的css组件中,如果使用了jaw构建,css也将shadow化
  10. allowPropagation 如果组件声明了allowPropagation为true(默认值),那么所有事件可以冒泡。注意DOM属性优先级大于js属性优先级
  11. find find和findAll寻找VirtualDom下的孩子(们),支持当前浏览器的选择器;findChild和findChildren则寻找参数下的孩子(们),只支持name
  12. DOM事件和fake 组件和vd被添加到DOM上时,会触发Event.DOM事件;当没覆写render方法时其子节点会被作为children渲染添加到DOM上,否则并没有,此时也有DOM事件但第一个参数fake为true表明是假的
  13. 侦听操作DOM 当渲染完毕时,自定义组件拥有element对象指向其根节点DOM,即render()方法的根节点
  14. parent&top VirtualDom和Component都拥有parent&top引用,可访问父级和最近的顶级组件
  15. ref引用 组件还可以通过ref快速访问VirtualDom的引用
  16. 事件绑定 vd或组件采用onxxx(忽略大小写)语法绑定事件,并且this指向当前对象,回调参数分别为标准event、绑定vd、触发vd;示例中有个活用bind更改this的示范
  17. 事件代理 你可能想采用类似jquery的on或delegate来提升事件性能,migi也实现了类似功能,并且采用类似选择器预编译解析的方式使得体积和性能都提升很多
  18. get/set单向数据绑定 自定义组件类中声明了get/set方法的变量,同时用@bind注解了set的话,在render()中渲染将产生数据绑定,一旦发生改变,会联动
  19. @bind注解简写语法 特别的,对于@bind注解绑定的变量,可以使用简化语法避免过多的代码,它会生成等效的get/set方法,内部变量名追加双下划线__来保存
  20. get/set双向数据绑定 同上,只是view层发生改变时model层同步
  21. 显式声明绑定 可能有get没set或者mv和m层数据分开的原因,可用为get方法添加@link注解,显示声明绑定哪个变量,其接收绑定变量名参数
  22. Ajax非可视组件 当一个自定义组件无需DOM时,可继承NonVisualComponent,它render()返回空字符串
  23. 文字动画 展示了如何用数据绑定来实现动画的效果
  24. 继承缓存组件 绑定数据频繁操作时会引发大量重绘,此时继承CacheComponent是个很好的选择,它将缓存结果在短时间内只渲染1次
  25. 清空缓存 如果有特定需求,想对缓存数据渲染进行同步调用,可以使用flush()方法
  26. 自定义事件 组件既可侦听dom事件,也可以侦听自定义事件,区别在于on和on-的标签语法;dom事件不区分大小写,自定义事件却区分
  27. 任意js表达式数据都被侦听 jsx中的js表达式包含的绑定变量可能不止1个
  28. 侦听数组 对于数组的一些常用操作方法,进行了侦听,使得数组更新可以做到
  29. 添加删除元素 演示了各种情况,更新DOM和文本节点。get/set的对象是个引用时需重新自己赋值一下
  30. DomDiff 利用虚拟DOM比对来提升性能
  31. 切换按钮 一个Switch的示例
  32. css组件 将Switch用到的css用jaw解析进来形成单一静态资源文件
  33. 伪类 也支持css2的伪类
  34. 属性 也支持css2的属性,建议组件使用单层级class,从性能上考虑
  35. 媒体查询 甚至支持部分媒体查询特性(高、宽、像素比、屏幕高宽、屏幕像素比)
  36. 不排他 自定义组件示例对象可以单独使用,作为一个普通js对象
  37. 下拉菜单 这是一个模拟下拉菜单的组件,它通过前面的Ajax组件读取一个数据源并进行展示
  38. 数据桥接bridge 这是联动下拉菜单的组件,它通过前面的Ajax组件读取一个省市信息展示,使用bridge进行桥接单向数据联动、middleware进行数据处理
  39. Model数据模型 可以为组件赋值model属性为一个数据模型对象,这样更有利于专门的数据管理,它也可以通过model标签赋值给组件
  40. Model桥接 Model对象可以和组件对象一样,互相bridge桥接,甚至桥接EventBus
  41. 共用Model 任意多个组件,可共享一个Model对象,如此实现多个组件一份数据
  42. model@bind注解简写语法 对于Model,@bind简写同样适用
  43. 数据中转事件总线 虽然用find方法可以找到若干个组件进行数据联动,但毕竟不方便。migi.eventBus作为事件总线外,还可以用作数据中转站,同样的bridge接口串联2个组件数据
  44. tap事件 类似zepto的tap事件,实际上是转换成click,对于延迟处理,已内置fastclick库。对于包括document.body在内的每个隔离作用域的组件,都会应用之
  45. 基本touch手势 改写自zepto的touch库,内置了doubleTap、longTap、swipe、swipeUp、swipeRight、swipeDown、swipeLeft事件
  46. 翻页组件 一个综合的例子,体现了migi的数据绑定、css组件、shadowDom、单一静态资源文件、事件侦听代理、手势等特性
  47. 性能测试 http://leeluolee.github.io/js-repaint-perfs/

github source