课程表

Omi课程

工具箱
速查手册

Omi 组件

当前位置:免费教程 » JS/JS库/框架 » Omi

Omi框架完全基于组件体系设计,我们希望开发者可以像搭积木一样制作Web程序,一切皆是组件,组件也可以嵌套子组件形成新的组件,新的组件又可以当作子组件嵌套至任意组件形成新的组件...

简单组件

这里使用Todo的例子来讲解Omi组件体系的使用。

  1. class Todo extends Omi.Component {
  2. constructor(data) {
  3. super(data);
  4. }
  5. add (evt) {
  6. evt.preventDefault();
  7. this.data.items.push(this.data.text);
  8. this.data.text = '';
  9. this.update();
  10. }
  11. style () {
  12. return `
  13. h3 { color:red; }
  14. button{ color:green;}
  15. `;
  16. }
  17. handleChange(target){
  18. this.data.text = target.value;
  19. }
  20. render () {
  21. return `<div>
  22. <h3>TODO</h3>
  23. <ul> {{#items}} <li>{{.}}</li> {{/items}}</ul>
  24. <form onsubmit="add(event)" >
  25. <input type="text" onchange="handleChange(this)" value="{{text}}" />
  26. <button>Add #{{items.length}}</button>
  27. </form>
  28. </div>`;
  29. }
  30. }
  31. Omi.render(new Todo({ items: [] ,text : '' }),"body");

组件生成的HTML最终会插入到body中。上面的例子展示了Omi的部分特性:

  • data传递: new Todo(data,..)的data可以直接提供给render方法里的模板
  • 局部CSS: h3只对render里的h3生效,不会污染外面的h3;button也是同样的
  • 声明式事件绑定: onchange调用的就是组件内的handleChange,this可以拿到当然的DOM元素,还可以拿到当前的event
  • 需要手动调用update方法才能更新组件

这里需要特别强调的是,为了更加的自由和灵活度。Omi没有内置数据变更的自动更新,需要开发者自己调用update方法。 你也可以和oba或者mobx一起使用来实现自动更新。

点击这里→在线试试

组件嵌套

如果页面超级简单的话,可以没有组件嵌套。但是绝大部分Web网页或者Web应用,需要嵌套定义的组件来完成所有的功能和展示。比如上面的Todo,我们也是可以抽取出List。 这样让程序易维护、可扩展、方便复用。如,我们抽取出List:

  1. class List extends Omi.Component {
  2. constructor(data) {
  3. super(data);
  4. }
  5. render () {
  6. return `<ul> {{#items}} <li>{{.}}</li> {{/items}}</ul>`;
  7. }
  8. }

怎么使用这个List?我们需要使用Omi.makeHTML把List制作成可以声明式的标签,在render方法中就能直接使用该标签。如下所示:

  1. import List from './list.js';
  2. Omi.makeHTML('List', List);
  3. class Todo extends Omi.Component {
  4. constructor(data) {
  5. super(data);
  6. this.data.length = this.data.items.length;
  7. this.listData = { items : this.data.items };
  8. }
  9. add (evt) {
  10. evt.preventDefault();
  11. this.list.data.items.push(this.data.text);
  12. this.data.length = this.list.data.items.length;
  13. this.data.text = '';
  14. this.update();
  15. }
  16. style () {
  17. return `
  18. h3 { color:red; }
  19. button{ color:green;}
  20. `;
  21. }
  22. handleChange(target){
  23. this.data.text = target.value;
  24. }
  25. render () {
  26. return `<div>
  27. <h3>TODO</h3>
  28. <List name="list" data="listData" />
  29. <form onsubmit="add(event)" >
  30. <input type="text" onchange="handleChange(this)" value="{{text}}" />
  31. <button>Add #{{length}}</button>
  32. </form>
  33. </div>`;
  34. }
  35. }
  • 第3行,通过makeHTML方法把组件制作成可以在render中使用的标签。当然Omi.makeHTML('List', List);也可以写在List组件的代码下面。
  • 第34行,在父组件上定义listData属性用来传递给子组件。
  • 第34行,在render方法中使用List组件。其中name方法可以让你在代码里通过this快速方法到该组件的实例。data="listData"可以让你把this.listData传递给子组件。

需要注意的是,父组件的this.listData会被通过Object.assign浅拷贝到子组件。 这样做的目的主要是希望以后DOM的变更都尽量修改子组件自身的data,然后再调用其update方法,而不是去更改父组件的listData。

关于Omi组件通讯其实有4种方案,这个后续教程会专门来讲。

点击这里→在线试试

转载本站内容时,请务必注明来自W3xue,违者必究。
 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号