Omi框架Store体系的前世今生

原文链接-https://github.com/AlloyTeam/omi Store 体系先说说Store系统是干什么的!为什么要造这样一个东西?能够系统架构带来什么? 当我们组件之间,拥有共享的数据的时候,经常需要进行组件通讯.在Omi框架里,父组件传递数据给子组件非常方便: 通过在组件上声明 data-* 或者 :data-* 传递给子节点通过在组件上声明 data 或者 :data 传递给子节点 (支持复杂数据类型的映射) 声明 group-data 把数组里的data传给一堆组件传…

Omi教程-插件体系

插件体系 Omi是Web组件化框架,怎么又来了个插件的概念? 可以这么理解: Omi插件体系可以赋予dom元素一些能力,并且可以和组件的实例产生关联. omi-drag 且看这个例子: 点击这里→在线试试 import OmiDrag from './omi-drag.js'; OmiDrag.init(); class App extends Omi.Component { constructor(data) { super(data); } render() { return ` <div>…

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框架学习之旅 - 插件机制之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框架学习之旅 - 组件及原理说明

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

[javaSE] 集合框架（体系概述）

为什么出现集合类为了方便对多个对象的操作,对对象进行存储,集合就是存储对象最常用的一种方式数组和集合的不同数组是固定长度的,集合是可变长度的数组可以存储基本数据类型,集合只能存储对象数组只能存储同一种对象,集合可以存储多种对象常见体系容器有很多种,有特性和共性,我们对共性进行不断的向上抽取,就形成了一个体系,这就是集合框架最顶层Collection接口,分出两个常用的子接口List和Set List接口分出三个常见的ArrayList,LinkedList,Vector Set接…

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

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

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

给omi-transform插件做个笔记,使用起来也很爽. transform.js这个库,一直想写一篇帖子的,可是,数学不好,三维矩阵和二位矩阵理解的不好,所以迟迟没写了, 这也是一个神库,反正我很喜欢,那怎么和omi结合,怎么使用呢? 先看个demo吧. Omi.OmiTransform.init(); // 这个是初始化(源码是这么OmiTransform.init()写,为了方便,自己加了下) class App extends Omi.Component { constructor(d…

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

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

Omi框架学习之旅 - 生命周期及原理说明

生命周期 name avatars company constructor 构造函数 new的时候 install 初始化安装,这可以拿到用户传进的data进行处理实例化 installed 安装完成,HTML已经插入页面之后执行实例化 uninstall 卸载组件.执行remove方法会触发该事件销毁时 beforeUpdate 更新前存在期 afterUpdate 更新后存在期示意图以上是官网的,看着让人还是挺明白的.但是我还是喜欢用我的理解解说一把. 生命周期指一个对象的生老…

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…

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

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

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

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

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

接着上一篇的data-*通讯,这篇写data通讯. data通讯主要为了复杂的数据通讯. 老规矩:先上demo代码, 然后提出问题, 之后解答问题, 最后源码说明. class Hello extends Omi.Component { constructor(data) { super(data); } style() { return ` h1 { cursor: pointer; } `; } handleClick(target, click) { console.log(target.…

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

上一篇文章说了omi中的组件,以及组件如何使用及嵌套. 那omi中的组件是怎么通讯的呢? 其实omi提供的通讯方式比较丰富,各有千秋,各有各的场景用途.所以按需使用即可. 老规矩:先上demo代码, 然后提出问题, 之后解答问题, 最后源码说明. class Hello extends Omi.Component { constructor(data) { super(data); } style() { return ` h1 { cursor: pointer; } `; } handleC…

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，全面拥抱 Web Components

Omi - 合一下一代 Web 框架,去万物糟粕,合精华为一 → https://github.com/Tencent/omi 特性 4KB 的代码尺寸,比小更小顺势而为,顺从浏览器的发展和 API 设计 Webcomponents + JSX 相互融合为一个框架 Omi Webcomponents 也可以数据驱动视图, UI = fn(data) JSX 是开发体验最棒(智能提示).语法噪音最少的 UI 表达式独创的 Path Updating 机制,基于 Proxy 全自动化的精准更新…

Omi v1.0震撼发布 - 开放现代的Web组件化框架

[转帖]ORM框架的前世今生

ORM框架的前世今生 https://www.cnblogs.com/7tiny/p/9551754.html 目录一.ORM简介二.ORM的工作原理三.ORM的优缺点四.常见的ORM框架一.ORM简介 ORM(Object Relational Mapping)对象关系映射,一般指持久化数据和实体对象的映射数据存储是绝大多数软件系统都要接触到的技术,具有一定规模的软件产品,为了方便存储和管理数据,便引入了数据库这一工具,但是数据如何从程序写入数据库的呢? 为方便程序员通过代码将数据写入数…

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 如果你…

ORM框架的前世今生

目录一.ORM简介二.ORM的工作原理三.ORM的优缺点四.常见的ORM框架一.ORM简介 ORM(Object Relational Mapping)对象关系映射,一般指持久化数据和实体对象的映射数据存储是绝大多数软件系统都要接触到的技术,具有一定规模的软件产品,为了方便存储和管理数据,便引入了数据库这一工具,但是数据如何从程序写入数据库的呢? 为方便程序员通过代码将数据写入数据库,一般的语言开发的厂商都会为各种数据库适配数据库连接的驱动程序,比如ADO.Net,JDBC等. 但是数据库…

跨界 - Omi 发布多端统一框架 Omip 打通小程序与 Web

Omip 今天,Omi 不仅仅可以开发桌面 Web.移动 H5,还可以直接开发小程序!直接开发小程序!直接开发小程序! Github Omi 简介 Omi 框架是微信支付线研发部研发的下一代前端框架, 基于 Web Components 规范设计的组件化框架,可以开发 PC Web.移动端 H5,也可以直接使用 Omi 开发小程序.Omi 服务于微信支付 H5 页面, 微信支付 PC 网站以及内部 OA 系统,微信支付相关的小程序等.自去年年底开源以来,该项目共获得 Star 数 7000+,贡…

Omi架构与React Fiber

原文链接-https://github.com/AlloyTeam/omi/tree/master/tutorial 写在前面 Omi框架在架构设计的时候就决定把update的控制权交给了开发者,视灵活性比生命还重要.不然的话,如果遇到React Fiber要解决的这类问题的话,就需要推翻原有架构重新搞了. React Fiber 先引用下我们团队小鲜肉Stark伟-复旦大四 / 腾讯@AlloyTeam在知乎上的回答 React 的核心思想是每次对于界面 state 的改动,都会重新渲染整个…

解密国内BAT等大厂前端技术体系-腾讯篇（长文建议收藏）

1 引言为了了解当前前端的发展趋势,让我们从国内各大互联网大厂开始,了解他们的最新动态和未来规划.这是解密大厂前端技术体系的第三篇,前两篇已经讲述了阿里和百度在前端技术这几年的技术发展.这一篇从腾讯讲起. 2 腾讯团队介绍 2018年9月30日,腾讯宣布正式启动新一轮战略升级,优化组织架构,将原有的七大事业群拆分重组,在保留原有四个事业群的基础上新增平台与内容事业群和云与智慧产业群. 平台与内容事业群(PCG)成立后,把过去散落在QQ.QQ浏览器等不同产品中的团队聚集到一起.腾讯是希望,5G时…

Omi教程-组件

组件 Omi框架完全基于组件体系设计,我们希望开发者可以像搭积木一样制作Web程序,一切皆是组件,组件也可以嵌套子组件形成新的组件,新的组件又可以当作子组件嵌套至任意组件形成新的组件... 简单组件这里使用Todo的例子来讲解Omi组件体系的使用. class Todo extends Omi.Component { constructor(data) { super(data); } add (evt) { evt.preventDefault(); this.data.items.push…

Omi新成员omi-router正式发布

原文链接-https://github.com/AlloyTeam/omi/blob/master/tutorial omi-router omi-router是Omi框架专属的router插件,文件尺寸轻量,使用简便,功能强大.用于Omi制作Web单页应用的首选解决方案. 单页的好处也是非常明显: 无刷新加载页面内容无刷新前进和后退页面路由中的某个链接的传播和分享(别人看到的和你一样的状态) 转场动画(a标签跳转不仅要白屏,而且没有转场动画) 资源复用(单页中的许多资源一定是可以共用的,最…

QQ日迹Omi实战开发，从0到1

写在前面相信大家对Omi应该都不陌生了,如果还有不了解的同学先看看这里.了解并使用Omi之后你会发现真的回不去了~~~ 精通Omi框架先简单说一下吧,Omi就是一个可以快速开发项目的组件化框架,和vue/react一样为了节省生产力的.想了解Omi和vue还有react区别的,上面文档有讲解,或者加入群256426170,可以面对面咨询Omi作者dnt.我这篇文章将使用Omi从0到1来完成一个移动端的项目,让大家了解Omi开发的方便快捷. 开发准备: 这次我们挑选了一个日迹发现页来作为例子开…

Westore 1.0 正式发布 - 小程序框架一个就够

世界上最小却强大的小程序框架 - 100多行代码搞定全局状态管理和跨页通讯 Github: https://github.com/dntzhang/westore 众所周知,小程序通过页面或组件各自的 setData 再加上各种父子.祖孙.姐弟.嫂子与堂兄等等组件间的通讯会把程序搞成一团浆糊,如果再加上跨页面之间的组件通讯,会让程序非常难维护和调试.虽然市面上出现了许多技术栈编译转小程序的技术,但是我觉没有戳中小程序的痛点.小程序不管从组件化.开发.调试.发布.灰度.回滚.上报.统计.监控和最近…

【Omi框架Store体系的前世今生】的更多相关文章