03 2017 档案

Omi框架学习之旅 - 插件机制之omi-finger 及原理说明
摘要：以前那篇我写的alloyfinger源码解读那篇帖子，就说过这是一个很好用的手势库，hammer能做的，他都能做到， 而且源码只有350来行代码，很容易看懂。 那么怎么把这么好的库作为omi库的一个插件呢，使dom，用起来更爽，更方便呢？ omi自己有个叫插件体系的功能，主要是赋予dom元素一些能力 阅读全文
posted @ 2017-03-30 11:20 Sorrow.X 阅读(580) 评论(0) 推荐(0)
Omi框架学习之旅 - 获取DOM节点 及原理说明
摘要：虽然绝大部分情况下，开发者不需要去查找获取DOM，但是还是有需要获取DOM的场景，所以Omi提供了方便获取DOM节点的方式。 这是官网的话，但是我一直都需要获取dom，对dom操作，所以omi提供的获取dom的方式对我来说还是比较重要的。 老规矩：先上demo代码, 然后提出问题, 之后解答问题, 阅读全文
posted @ 2017-03-25 15:09 Sorrow.X 阅读(462) 评论(0) 推荐(0)
Omi框架学习之旅 - 生命周期 及原理说明
摘要：生命周期 示意图 以上是官网的，看着让人还是挺明白的。但是我还是喜欢用我的理解解说一把。 生命周期指一个对象的生老病死。具体来说是继承Omi.Component类的子类的实例的生命周期。 1. 当我们 new 子类的时候， 子类的实例会得到Omi.Component类的所以属性和方法。 2. 当我们 阅读全文
posted @ 2017-03-24 16:47 Sorrow.X 阅读(515) 评论(0) 推荐(0)
Sublime3 - 插件cssrem
摘要：一个CSS的px值转rem值的Sublime Text 3自动完成插件。 插件效果如下： 安装： 1. 现在本地clone一份： git clone https://github.com/hyb628/cssrem.git 2. 进入packages目录：Sublime Text -> Prefer 阅读全文
posted @ 2017-03-24 13:36 Sorrow.X 阅读(214) 评论(0) 推荐(0)
Omi框架学习之旅 - 通过omi-id来实现组件通讯 及原理说明
摘要：这个demo是通过omi-id来获取子类的实例，然后更改data属性，之后updata一下就好了。 老规矩：先上demo代码, 然后提出问题, 之后解答问题, 最后源码说明。 结果也一样哈 demo的疑问和疑问的说明： 疑问1： <Hello omi-id="hello" />中的omi-id是什么 阅读全文
posted @ 2017-03-23 16:58 Sorrow.X 阅读(564) 评论(0) 推荐(0)
Omi框架学习之旅 - 通过对象实例来实现组件通讯 及原理说明
摘要：组件通讯不是讲完了吗(上帝模式还没讲哈)，怎么又多了种方式啊。 你484傻，多一种选择不好吗？ 其实这个不属于组件通讯啦，只是当父组件实例安装和渲染完毕后，可以执行installed这个方法(默认是空函数,是Component中的原型方法)，也就是生命周期中的一种。然后在这该方法中， 给子类的dat 阅读全文
posted @ 2017-03-23 16:12 Sorrow.X 阅读(257) 评论(0) 推荐(0)
Omi框架学习之旅 - 组件通讯(group-data通讯) 及原理说明
摘要：childrenData的方式可以批量传递数据给组件，但是有很多场景下data的来源不一定非要都从childrenData来， childrenData是个数组,会和组件的顺序一一对应，这就给不同传递方式的data必须全部集中的childrenData中， 非常不方便。group-data专门为解决 阅读全文
posted @ 2017-03-23 14:38 Sorrow.X 阅读(371) 评论(0) 推荐(0)
Omi框架学习之旅 - 组件通讯(data通讯) 及原理说明
摘要：接着上一篇的data-*通讯，这篇写data通讯。 data通讯主要为了复杂的数据通讯。 老规矩：先上demo代码, 然后提出问题, 之后解答问题, 最后源码说明。 个人说明： data通讯可以支持复杂数据的原理很简单，omi会自动从父组件的实例属性上去寻找data="xxx"后面的xxx对应的实例 阅读全文
posted @ 2017-03-22 18:06 Sorrow.X 阅读(357) 评论(0) 推荐(0)
Omi框架学习之旅 - 组件通讯(data-*通讯) 及原理说明
摘要：上一篇文章说了omi中的组件,以及组件如何使用及嵌套。 那omi中的组件是怎么通讯的呢？ 其实omi提供的通讯方式比较丰富，各有千秋，各有各的场景用途。所以按需使用即可。 老规矩：先上demo代码, 然后提出问题, 之后解答问题, 最后源码说明。 先看看omi中文文档的说明： 一般data-用来传递 阅读全文
posted @ 2017-03-22 17:08 Sorrow.X 阅读(386) 评论(0) 推荐(0)
Omi框架学习之旅 - 组件 及原理说明
摘要：hello world demo看完后其实基本的写法就会了。 但是omi中的组件是神马鬼？其实我也不知道组件是啥。 百度百科是这么说的： 是对数据和方法的简单封装。es6中，一个类其实也可以做到对方法和数据的封装。然后new出来的实例共享原型上的方法，至于属性最好不要共享啦， 如果需要共享，自己写静 阅读全文
posted @ 2017-03-21 18:05 Sorrow.X 阅读(5226) 评论(2) 推荐(0)
Omi框架学习之旅 - Hello World 及原理说明
摘要：学什么东西都从hello world开始, 我也不知道为啥。 恩，先上demo代码, 然后提出问题, 之后解答问题, 最后源码说明。 hello world - demo: 先看看omi中文文档的说明： 组件生成的HTML最终会插入到#app中。上面的例子展示了Omi的部分特性: data传递: n 阅读全文
posted @ 2017-03-19 22:08 Sorrow.X 阅读(1677) 评论(0) 推荐(1)
Omi框架学习之旅 - 之开篇扯蛋
摘要：说实话, 我也不知道Omi是干啥的, 只因此框架是alloyTeam出的, dntzhang写的, 也有其他腾讯大神参与了, 还有一些其他贡献者, 以上我也不太清楚, 当我胡说八嘎。 因其写法有人说好像react, 我个人也比较崇拜dntzhang, 所以就得好好学习omi框架, 以后做项目万一用到 阅读全文
posted @ 2017-03-19 19:59 Sorrow.X 阅读(422) 评论(0) 推荐(0)
AlloyTouch.js 源码 学习笔记及原理说明
摘要：alloyTouch这个库其实可以做很多事的, 比较抽象, 需要我们用户好好的思考作者提供的实例属性和一些回调方法(touchStart, change, touchMove, pressMove, tap, touchEnd, touchCancel, reboundEnd, animationE 阅读全文
posted @ 2017-03-10 16:19 Sorrow.X 阅读(2327) 评论(0) 推荐(0)
AlloyFinger.js 源码 学习笔记及原理说明
摘要：此手势库利用了手机端touchstart, touchmove, touchend, touchcancel原生事件模拟出了 rotate touchStart multipointStart multipointEnd pinch swipe tap doubleTap longTap singl 阅读全文
posted @ 2017-03-06 16:24 Sorrow.X 阅读(3174) 评论(0) 推荐(1)
Git 学习笔记
摘要：Git 学习笔记 阅读全文
posted @ 2017-03-06 08:11 Sorrow.X 阅读(190) 评论(0) 推荐(0)
从数组中每次取一个不同的数组成员 getRandomItem(arr)
摘要：积累些常用的方法, 都是随写的, 不好之处, 望指出。 getRandomItem(arr)函数如下: 测试一下是否有重复的： 阅读全文
posted @ 2017-03-03 10:22 Sorrow.X 阅读(571) 评论(0) 推荐(0)
move.js 源码 学习笔记
摘要：源码笔记： 使用姿势： 个人喜好，我改成了自己喜欢的源码，添加了随机取动画名字： 使用姿势： ps： 很喜欢的一个数字运动小型库，便于扩张各种运动。配合dnt的transform.js，真的很不错。 很多ios和安卓的前端动画都能轻松写出来。 比jq提供的动画更加强大和灵活。 我只是个搬运工，喜欢的 阅读全文
posted @ 2017-03-02 14:24 Sorrow.X 阅读(1327) 评论(0) 推荐(0)
observe.js 源码 学习笔记
摘要：使用姿势： ps: dnt大神写的一个观察任意对象任意属性变化的一个轻量级库。 个人很喜欢,很不错。 es6 的 Proxy 和 Reflect 很强大，也许哪天项目中使用了Proxy 和 Reflect，那此库可能就不用了。 源码地址： https://github.com/dntzhang/ob 阅读全文
posted @ 2017-03-02 09:50 Sorrow.X 阅读(525) 评论(0) 推荐(0)