【Omi框架学习之旅 - 通过对象实例来实现组件通讯 及原理说明】的更多相关文章

Omi框架学习之旅 - 通过对象实例来实现组件通讯 及原理说明

组件通讯不是讲完了吗(上帝模式还没讲哈),怎么又多了种方式啊. 你484傻,多一种选择不好吗? 其实这个不属于组件通讯啦,只是当父组件实例安装和渲染完毕后,可以执行installed这个方法(默认是空函数,是Component中的原型方法),也就是生命周期中的一种.然后在这该方法中, 给子类的data赋值,然后update(),这种方式野蛮好玩的. 老规矩:先上demo代码, 然后提出问题, 之后解答问题, 最后源码说明. class Hello extends Omi.Component {…

Omi框架学习之旅 - 之开篇扯蛋

说实话, 我也不知道Omi是干啥的, 只因此框架是alloyTeam出的, dntzhang写的, 也有其他腾讯大神参与了, 还有一些其他贡献者, 以上我也不太清楚, 当我胡说八嘎. 因其写法有人说好像react, 我个人也比较崇拜dntzhang, 所以就得好好学习omi框架, 以后做项目万一用到呢. 扯了这么多, 其实我对omi的理解也不多, 所以带着学习. 目前我的理解是: omi中一切皆组件,组件可以嵌套, 可以通信. 接下来学习中将有demo, 和demo的疑问,进入源码的学习之路.…

Omi框架学习之旅 - Hello World 及原理说明

学什么东西都从hello world开始, 我也不知道为啥. 恩,先上demo代码, 然后提出问题, 之后解答问题, 最后源码说明. hello world - demo: class Hello extends Omi.Component { // 1. Hello类先继承Component类 constructor(str, data) { // 2. Hello类构造函数的参数和个数随便传,但是必须要有个数据对象data(其实可以是对象或者传undefined,因为其还有第二个参数,不传u…

Omi框架学习之旅 - 组件 及原理说明

hello world demo看完后其实基本的写法就会了. 但是omi中的组件是神马鬼?其实我也不知道组件是啥. 百度百科是这么说的: 是对数据和方法的简单封装.es6中,一个类其实也可以做到对方法和数据的封装.然后new出来的实例共享原型上的方法,至于属性最好不要共享啦, 如果需要共享,自己写静态属性,或者Object.assign到原型上去.这里有点扯远了. 我的理解是一个组件就是一个类,至于组件嵌套,其实就是父类和子类,无非就是挂载到对应的属性下 (父类会主动帮我们自动的new 子类(被…

Omi框架学习之旅 - 组件通讯(group-data通讯) 及原理说明

childrenData的方式可以批量传递数据给组件,但是有很多场景下data的来源不一定非要都从childrenData来, childrenData是个数组,会和组件的顺序一一对应,这就给不同传递方式的data必须全部集中的childrenData中, 非常不方便.group-data专门为解决上面的痛点而生,专门是为了给一组组件批量传递data. 这是官网的原话,一般官网的专业话语,我听着很是变扭,请容忍我用大白话说一说(说的不对,欢迎指出). group-data也是通讯中的一种, 他的…

Omi框架学习之旅 - 插件机制之omi-touch 及原理说明

这个插件也能做好多好多的事,比如上拉下拉加载数据,轮播,等一切和运动有关的特效. 具体看我的allowTouch这篇博客,掌握了其用法,在来看它是怎么和omi结合的.就会很简单. 当然使用起来也比较方便. 老规矩,先看demo: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>omi-touch</title&…

Omi框架学习之旅 - 插件机制之omi-router及原理说明

先来看看官网的介绍吧:https://github.com/AlloyTeam/omi/tree/master/plugins/omi-router 其实我推荐直接看官网的介绍.我所写的,主要给个人做的笔记.也许看的get不到点吧.所以强烈看官网 文档:https://alloyteam.github.io/omi/website/docs-cn.html github: https://github.com/AlloyTeam/omi 好了,该做笔记了.这次主要记录一下omi-router插件…

Omi框架学习之旅 - 插件机制之omi-finger 及原理说明

以前那篇我写的alloyfinger源码解读那篇帖子,就说过这是一个很好用的手势库,hammer能做的,他都能做到, 而且源码只有350来行代码,很容易看懂. 那么怎么把这么好的库作为omi库的一个插件呢,使dom,用起来更爽,更方便呢? omi自己有个叫插件体系的功能,主要是赋予dom元素一些能力,并且可以和组件的实例产生关联. 这当然棒极了.那怎么实现的呢? 还是先看个demo,看看用起来爽不,爽的话,再看原理也不迟啊. OmiFinger.init(); // 初始化OmiFinger插件…

Omi框架学习之旅 - 获取DOM节点 及原理说明

虽然绝大部分情况下,开发者不需要去查找获取DOM,但是还是有需要获取DOM的场景,所以Omi提供了方便获取DOM节点的方式. 这是官网的话,但是我一直都需要获取dom,对dom操作,所以omi提供的获取dom的方式对我来说还是比较重要的. 老规矩:先上demo代码, 然后提出问题, 之后解答问题, 最后源码说明. class Hello extends Omi.Component { constructor(data) { super(data); } style() { return ` h1…

Omi框架学习之旅 - 通过omi-id来实现组件通讯 及原理说明

这个demo是通过omi-id来获取子类的实例,然后更改data属性,之后updata一下就好了. 老规矩:先上demo代码, 然后提出问题, 之后解答问题, 最后源码说明. class Hello extends Omi.Component { constructor(data) { super(data); } style() { return ` h1 { cursor: pointer; } `; } handleClick(target, click) { console.log(ta…