摘要:
给omi-transform插件做个笔记,使用起来也很爽。 transform.js这个库,一直想写一篇帖子的,可是,数学不好,三维矩阵和二位矩阵理解的不好,所以迟迟没写了, 这也是一个神库,反正我很喜欢,那怎么和omi结合,怎么使用呢? 先看个demo吧。 废话不多说,实现很简单,以下只贴tran 阅读全文
摘要:
以前那篇我写的alloyfinger源码解读那篇帖子,就说过这是一个很好用的手势库,hammer能做的,他都能做到, 而且源码只有350来行代码,很容易看懂。 那么怎么把这么好的库作为omi库的一个插件呢,使dom,用起来更爽,更方便呢? omi自己有个叫插件体系的功能,主要是赋予dom元素一些能力 阅读全文
摘要:
虽然绝大部分情况下,开发者不需要去查找获取DOM,但是还是有需要获取DOM的场景,所以Omi提供了方便获取DOM节点的方式。 这是官网的话,但是我一直都需要获取dom,对dom操作,所以omi提供的获取dom的方式对我来说还是比较重要的。 老规矩:先上demo代码, 然后提出问题, 之后解答问题, 阅读全文
摘要:
生命周期 示意图 以上是官网的,看着让人还是挺明白的。但是我还是喜欢用我的理解解说一把。 生命周期指一个对象的生老病死。具体来说是继承Omi.Component类的子类的实例的生命周期。 1. 当我们 new 子类的时候, 子类的实例会得到Omi.Component类的所以属性和方法。 2. 当我们 阅读全文
摘要:
一个CSS的px值转rem值的Sublime Text 3自动完成插件。 插件效果如下: 安装: 1. 现在本地clone一份: git clone https://github.com/hyb628/cssrem.git 2. 进入packages目录:Sublime Text -> Prefer 阅读全文
摘要:
这个demo是通过omi-id来获取子类的实例,然后更改data属性,之后updata一下就好了。 老规矩:先上demo代码, 然后提出问题, 之后解答问题, 最后源码说明。 结果也一样哈 demo的疑问和疑问的说明: 疑问1: <Hello omi-id="hello" />中的omi-id是什么 阅读全文
摘要:
组件通讯不是讲完了吗(上帝模式还没讲哈),怎么又多了种方式啊。 你484傻,多一种选择不好吗? 其实这个不属于组件通讯啦,只是当父组件实例安装和渲染完毕后,可以执行installed这个方法(默认是空函数,是Component中的原型方法),也就是生命周期中的一种。然后在这该方法中, 给子类的dat 阅读全文
摘要:
childrenData的方式可以批量传递数据给组件,但是有很多场景下data的来源不一定非要都从childrenData来, childrenData是个数组,会和组件的顺序一一对应,这就给不同传递方式的data必须全部集中的childrenData中, 非常不方便。group-data专门为解决 阅读全文
摘要:
接着上一篇的data-*通讯,这篇写data通讯。 data通讯主要为了复杂的数据通讯。 老规矩:先上demo代码, 然后提出问题, 之后解答问题, 最后源码说明。 个人说明: data通讯可以支持复杂数据的原理很简单,omi会自动从父组件的实例属性上去寻找data="xxx"后面的xxx对应的实例 阅读全文
摘要:
上一篇文章说了omi中的组件,以及组件如何使用及嵌套。 那omi中的组件是怎么通讯的呢? 其实omi提供的通讯方式比较丰富,各有千秋,各有各的场景用途。所以按需使用即可。 老规矩:先上demo代码, 然后提出问题, 之后解答问题, 最后源码说明。 先看看omi中文文档的说明: 一般data-用来传递 阅读全文