Omi原理-Hello Omi

【Omi原理-Hello Omi】的更多相关文章

Hello Omi Omi框架的每个组件都继承自Omi.Component,本篇会去完成Omi的Component的基本锥形,让其能够渲染第一个组件. omi.js实现 var Omi = {}; Omi._instanceId = 0; Omi.getInstanceId = function () { return Omi._instanceId++; }; Omi.render = function(component, renderTo){ component.renderTo = ty…

Omi原理-环境搭建

环境搭建 Omi框架使用 Webpack + ES6 的方式去开发:使用karma+jasmine来作为Omi的测试工具. Karma介绍 Karma是一个基于Node.js的JavaScript测试执行过程管理工具(Test Runner).该工具可用于测试所有主流Web浏览器,也可集成到CI(Continuous integration)工具,也可和其他代码编辑器一起使用.这个测试工具的一个强大特性就是,它可以监控(Watch)文件的变化,然后自行执行.但是集成到travis ci要把sin…

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-touch 及原理说明

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

2017年试试Web组件化框架Omi

Open and modern framework for building user interfaces. Omi的Github地址https://github.com/AlloyTeam/omi 如果想体验一下Omi框架,请点击Omi Playground 如果想使用Omi框架,请阅读 Omi使用文档如果想一起开发完善Omi框架,有更好的解决方案或者思路,请阅读从零一步步打造web组件化框架Omi 关于上面的两类文档,如果你想获得更佳的阅读体验,可以访问Docs Website 如果你…

Omi教程-通讯通讯攻略大全

组件通讯 Omi框架组建间的通讯非常遍历灵活,因为有许多可选方案进行通讯: 通过在组件上声明 data-* 传递给子节点通过在组件上声明 data 传递给子节点 (支持复杂数据类型的映射) 父容器设置 childrenData 自动传递给子节点声明 group-data 传递(支持复杂数据类型的映射) 完全面向对象,可以非常容易地拿到对象的实例,之后可以设置实例属性和调用实例的方法所以通讯变得畅通无阻,下面一一来举例说明. data-*通讯 class Hello extends Omi.…

Omi教程-生命周期和事件处理

生命周期名称含义时机 constructor 构造函数 new的时候 install 初始化安装,这可以拿到用户传进的data进行处理实例化 installed 安装完成,HTML已经插入页面之后执行实例化 uninstall 卸载组件.执行remove方法会触发该事件销毁时 beforeUpdate 更新前存在期 afterUpdate 更新后存在期示意图需要注意的是installed在实例化期也会执行,上图没有标出.比如组件被移除再进行还原会执行,再比如新增新的组件也会执…

Omi实战-QQ附近用户列表Web页

原文地址https://github.com/AlloyTeam/omi/blob/master/docs/cn_pr_nearby.md 写在前面 Omi很适合大型复杂的Web页面开发,例如一些Web在线工具的开发.但是制作这种简单的QQ附近用户列表Web页,也不会有大炮哄蚊子的感觉. 项目开始之前,实现选择一个脚手架.这个项目用的就是Omi Github上的scaffolding作为其项目脚手架.主要基于 Gulp + Webpack + Babel + BrowserSync 进行开发和部…

Omi v1.0震撼发布 - 令人窒息的Web组件化框架

原文链接--https://github.com/AlloyTeam/omi 写在前面 Omi框架经过几十个版本的迭代,越来越简便易用和强大. 经过周末的连续通宵加班加点,Omi v1.0版本终于问世.虽然版本遵循小步快跑.频繁迭代,但是Omi团队成员都有着克制之心,处女座占了半壁江山,所以Omi的API除了增量的API,其他的历史API没有任何变化. Github:https://github.com/AlloyTeam/omi 废话不多说,这就为大家介绍到目前1.0版本为止,关于Omi,你必…

Omi v1.0.2发布 - 正式支持传递javascript表达式

原文地址:https://github.com/AlloyTeam/omi/ 写在前面 Omi框架可以通过在组件上声明 data-* 把属性传递给子节点. Omi从设计之初,就是往标准的DOM标签的标准传递方式靠齐.比如: 下划线自动转驼峰, data-page-index传到子组件就变成this.data.pageIndex data-xx 传递到子节点全都变成字符串,如data-page-index="1"到子节点中this.data.pageIndex就是字符串"1&q…