Omi - 合一

下一代 Web 框架，去万物糟粕，合精华为一

omi

→ https://github.com/Tencent/omi

特性

4KB 的代码尺寸，比小更小
顺势而为，顺从浏览器的发展和 API 设计
Webcomponents + JSX 相互融合为一个框架 Omi
Webcomponents 也可以数据驱动视图, UI = fn(data)
JSX 是开发体验最棒(智能提示)、语法噪音最少的 UI 表达式
独创的 Path Updating 机制，基于 Proxy 全自动化的精准更新，功耗低，自由度高，性能卓越，方便集成 requestIdleCallback
使用 store 系统不需要调用 this.udpate，它会自动化按需更新局部视图
看看Facebook React 和 Web Components对比优势，Omi 融合了各自的优点，而且给开发者自由的选择喜爱的方式
Shadom DOM 与 Virtual DOM 融合，Omi 既使用了虚拟 DOM，也是使用真实 Shadom DOM，让视图更新更准确更迅速
类似 WeStore 体系，99.9% 的项目不需要什么时间旅行,也不仅仅 redux 能时间旅行,请不要上来就 redux，Omi store 体系可以满足所有项目
局部 CSS 最佳解决方案(Shadow DOM)，社区为局部 CSS 折腾了不少框架和库(使用js或json写样式，如:Radium，jsxstyle，react-style；与webpack绑定使用生成独特的className文件名—类名—hash值，如：CSS Modules，Vue)，都是 hack 技术；Shadow DOM Style 是最完美的方案

对比同样开发 TodoApp， Omi 和 React 渲染完的 DOM 结构:

16685d64491c9999?w=239&h=244&f=jpeg&s=22541 16685d8a2b1980cd?w=211&h=162&f=jpeg&s=13767

左(上)边是Omi，右(下)边是 React，Omi 使用 Shadow DOM 隔离样式和语义化结构。

一个 HTML 完全上手
Getting Started
- Install
- Hello Element
- TodoApp
- Store
- 生命周期
文档
- My First Element
- Props
- Event
- Custom Event
- Ref
- Store System
生态
浏览器兼容
Links
License

一个 HTML 完全上手

下面这个页面不需要任何构建工具就可以执行

点击这里看执行结果。
Omi.js CDN

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>Add Omi in One Minute</title>
</head><body><script src="https://unpkg.com/omi"></script><script>const { WeElement, h, render, define } = Omiclass LikeButton extends WeElement {install() {this.data = { liked: false }}render() {if (this.data.liked) {return 'You liked this.'}return h('button',{onClick: () => {this.data.liked = truethis.update()}},'Like')}}define('like-button', LikeButton)render(h('like-button'), 'body')</script>
</body></html>

Getting Started

Install

$ npm i omi-cli -g               # install cli
$ omi init your_project_name     # init project, you can also exec 'omi init' in an empty folder
$ cd your_project_name           # please ignore this command if you executed 'omi init' in an empty folder
$ npm start                      # develop
$ npm run build                  # release

Cli 自动创建的项目脚手架是基于单页的 create-react-app 改造成多页的，有配置方面的问题可以查看 create-react-app 用户指南。

Hello Element

先创建一个自定义元素:

import { tag, WeElement, render } from 'omi'@tag('hello-element')
class HelloElement extends WeElement {onClick = (evt) => {//trigger CustomEventthis.fire('abc', { name : 'dntzhang', age: 12 })evt.stopPropagation()}css() {return `div{color: red;cursor: pointer;}`}render(props) {return (<div onClick={this.onClick}>Hello {props.msg} {props.propFromParent}<div>Click Me!</div></div>)}   
}

使用该元素:

import { tag, WeElement, render } from 'omi'
import './hello-element'@tag('my-app')
class MyApp extends WeElement {static get data() {return { abc: '', passToChild: '' }}//bind CustomEvent onAbc = (evt) => {// get evt data by evt.detailthis.data.abc = ' by ' + evt.detail.namethis.update()   }css() {return `div{color: green;}`}render(props, data) {return (<div>Hello {props.name} {data.abc}<hello-element onAbc={this.onAbc} prop-from-parent={data.passToChild} msg="WeElement"></hello-element></div>)}
}render(<my-app name='Omi v4.0'></my-app>, 'body')

告诉 Babel 把 JSX 转化成 Omi.h() 的调用:

{"presets": ["env", "omi"]
}

需要安装下面两个 npm 包支持上面的配置:

"babel-preset-env": "^1.6.0",
"babel-preset-omi": "^0.1.1",

如果不想把 css 写在 js 里，你可以使用 to-string-loader, 比如下面配置:

{test: /[\\|\/]_[\S]*\.css$/,use: ['to-string-loader','css-loader']
}

如果你的 css 文件以 _ 开头, css 会使用 to-string-loader. 如：

import { tag, WeElement render } from 'omi'
//typeof cssStr is string
import cssStr from './_index.css' @tag('my-app')
class MyApp extends WeElement {css() {return cssStr}.........

TodoApp

下面列举一个相对完整的 TodoApp 的例子:

import { tag, WeElement, render } from 'omi'@tag('todo-list')
class TodoList extends WeElement {render(props) {return (<ul>{props.items.map(item => (<li key={item.id}>{item.text}</li>))}</ul>);}
}@tag('todo-app')
class TodoApp extends WeElement {static get data() {return { items: [], text: '' }}render() {return (<div><h3>TODO</h3><todo-list items={this.data.items} /><form onSubmit={this.handleSubmit}><inputid="new-todo"onChange={this.handleChange}value={this.data.text}/><button>Add #{this.data.items.length + 1}</button></form></div>);}handleChange = (e) => {this.data.text = e.target.value}handleSubmit = (e) => {e.preventDefault();if (!this.data.text.trim().length) {return;}this.data.items.push({text: this.data.text,id: Date.now()})this.data.text = ''}
}render(<todo-app></todo-app>, 'body')

Store

使用 Store 体系可以告别 update 方法，基于 Proxy 的全自动属性追踪和更新机制。强大的 Store 体系是高性能的原因，除了靠 props 决定组件状态的组件，其余组件所有 data 都挂载在 store 上,

export default {data: {items: [],text: '',firstName: 'dnt',lastName: 'zhang',fullName: function () {return this.firstName + this.lastName},globalPropTest: 'abc', //更改我会刷新所有页面,不需要再组件和页面声明data依赖ccc: { ddd: 1 } //更改我会刷新所有页面,不需要再组件和页面声明data依赖},globalData: ['globalPropTest', 'ccc.ddd'],add: function () {if (!this.data.text.trim().length) {return;}this.data.items.push({text: this.data.text,id: Date.now()})this.data.text = ''}//默认 false，为 true 会无脑更新所有实例//updateAll: true
}

自定义 Element 需要声明依赖的 data，这样 Omi store 根据自定义组件上声明的 data 计算依赖 path 并会按需局部更新。如:

class TodoApp extends WeElement {static get data() {//如果你用了 store，这个只是用来声明依赖，按需 Path Updatingreturn { items: [], text: '' }}.........handleChange = (e) => {this.store.data.text = e.target.value}handleSubmit = (e) => {e.preventDefault()this.store.add()}
}

数据的逻辑都封装在了 store 定义的方法里 (如 store.add)
视图只负责传递数据给 store （如上面调用 store.add 或设置 store.data.text）

需要在 render 的时候从根节点注入 store 才能在所有自定义 Element 里使用 this.store:

render(<todo-app></todo-app>, 'body', store)

→ Store 完整的代码

总结一下:

store.data 用来列出所有属性和默认值(除去 props 决定的视图的组件)
组件和页面的 data 用来列出依赖的 store.data 的属性 (omi会记录path)，按需更新
如果页面简单组件很少，可以 updateAll 设置成 true，并且组件和页面不需要声明 data，也就不会按需更新
globalData 里声明的 path，只要修改了对应 path 的值，就会刷新所有页面和组件，globalData 可以用来列出所有页面或大部分公共的属性 Path

文档

My First Element

import { WeElement, tag, render } from 'omi'@tag('my-first-element')
class MyFirstElement extends WeElement {render() {return (<h1>Hello, world!</h1>)}
}render(<my-first-element></my-first-element>, 'body')

在 HTML 开发者工具里看看渲染得到的结构:

16685def00adb405?w=228&h=67&f=png&s=25053

除了渲染到 body，你可以在其他任意自定义元素中使用 my-first-element。

Props

import { WeElement, tag, render } from 'omi'@tag('my-first-element')
class MyFirstElement extends WeElement {render(props) {return (<h1>Hello, {props.name}!</h1>)}
}render(<my-first-element name="world"></my-first-element>, 'body')

你也可以传任意类型的数据给 props:

import { WeElement, tag, render } from 'omi'@tag('my-first-element')
class MyFirstElement extends WeElement {render(props) {return (<h1>Hello, {props.myObj.name}!</h1>)}
}render(<my-first-element my-obj={{ name: 'world' }}></my-first-element>, 'body')

my-obj 将映射到 myObj，驼峰的方式。

Event

class MyFirstElement extends WeElement {onClick = (evt) => {alert('Hello Omi!')}render() {return (<h1 onClick={this.onClick}>Hello, wrold!</h1>)}
}

Custom Event

@tag('my-first-element')
class MyFirstElement extends WeElement {onClick = (evt) => {this.fire('myevent', { name: 'abc' })}render(props) {return (<h1 onClick={this.onClick}>Hello, world!</h1>)}
}render(<my-first-element onMyEvent={(evt) => { alert(evt.detail.name) }}></my-first-element>, 'body')

通过 this.fire 触发自定义事件，fire 第一个参数是事件名称，第二个参数是传递的数据。通过 evt.detail 可以获取到传递的数据。

Ref

@tag('my-first-element')
class MyFirstElement extends WeElement {onClick = (evt) => {console.log(this.h1)}render(props) {return (<div><h1 ref={e => { this.h1 = e }} onClick={this.onClick}>Hello, world!</h1></div>)}
}render(<my-first-element></my-first-element>, 'body')

在元素上添加 ref={e => { this.anyNameYouWant = e }} ，然后你就可以 JS 代码里使用 this.anyNameYouWant 访问该元素。

Store System

import { WeElement, tag, render } from 'omi'@tag('my-first-element')
class MyFirstElement extends WeElement {//You must declare data here for view updatingstatic get data() {return { name: null }}onClick = () => {//auto update the viewthis.store.data.name = 'abc'}render(props, data) {//data === this.store.data when using store stystemreturn (<h1 onClick={this.onClick}>Hello, {data.name}!</h1>)}
}const store = {data: { name: 'Omi' }
}
render(<my-first-element name="world"></my-first-element>, 'body', store)

当使用 store 体系是，static get data 就仅仅被用来声明依赖，举个例子:

static get data() {return {a: null,b: null,c: { d: [] },e: []}
}

会被转换成：

{a: true,b: true,'c.d':true,e: true
}

举例说明 Path 命中规则:

diffResult	updatePath	是否更新
abc	abc	更新
abc[1]	abc	更新
abc.a	abc	更新
abc	abc.a	不更新
abc	abc[1]	不更新
abc	abc[1].c	不更新
abc.b	abc.b	更新

以上只要命中一个条件就可以进行更新！

总结就是只要等于 updatePath 或者在 updatePath 子节点下都进行更新！

看可以看到 store 体系是中心化的体系？那么怎么做到部分组件去中心化？使用 tag 的第二个参数:

@tag('my-first-element', true)

纯元素！不会注入 store!

生命周期

Lifecycle method	When it gets called
`install`	before the component gets mounted to the DOM
`installed`	after the component gets mounted to the DOM
`uninstall`	prior to removal from the DOM
`beforeUpdate`	before `render()`
`afterUpdate`	after `render()`

生态

https://www.webcomponents.org/
https://www.webcomponents.org/elements

在里面查找你想要的组件，直接使用，或者花几分钟就能转换成 Omi Element（把模板拷贝到 render 方法，style拷贝到 css 方法）。

浏览器兼容

Omi 4.0+ works in the latest two versions of all major browsers: Safari 10+, ~~IE 11+~~, and the evergreen Chrome, Firefox, and Edge.

Browsers Support

→ polyfills

由于需要使用 Proxy 的原因，放弃IE!

Star &　Fork

Github
omijs.org

License

MIT © Tencent

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

Omi-router实战 Sorrow.X的web简历
其实这篇文章，真的没啥写的。主要是为了学以致用，使用了omi-router写了个，个人简历。路由demo实战源码：https://github.com/SorrowX/resume_demo demo效果： https://sorrowx.github.io/resume_demo/ 转载于:https://www.cnblogs.com/sorrowx/p/6739957.html...
2024/4/20 17:38:06
Smali反编译Java文件
我们在开发安卓中，有时需要对其他apk文件进行反编译，以便我们方便进行学习交流研究使用。我们使用 Android SDK 默认生成的工程会自动添加一些类到我们的工程中。这些类在程序发布后会仍然保留在apk 文件中。我们对其进行反编译后可以发现会有Smali后缀名的文件。我们怎…...
2024/4/20 17:38:05
java防止反编译代码混淆
由于Java字节码的抽象级别较高，因此它们较容易被反编译。下面介绍了几种常用的方法，用于保护Java字节码不被反编译。通常，这些方法不能够绝对防止程序被反编译，而是加大反编译的难度而已，因为这些方法都有自己的使用环境和弱点。1.隔离Java程序最简单的方法就是让用户不能…...
2024/4/21 10:32:41
eclipse安装JAVA反编译插件
前言：在实际的开发中几乎都会使用到一些框架来辅助项目的开发工作，对于一些框架的代码我们总怀有一些好奇之心，想一探究竟，有源码当然更好了，对于有些JAR包中的代码我们就需要利用反编译工具来看一下了，下面是我常使用的一种安装JAVA反编译工具的方法，操作比较简单，不过…...
2024/5/6 7:03:44
跨界 - Omi 发布多端统一框架 Omip 打通小程序与 Web
Omip 今天，Omi 不仅仅可以开发桌面 Web、移动 H5，还可以直接开发小程序！直接开发小程序！直接开发小程序！ Github Omi 简介 Omi 框架是微信支付线研发部研发的下一代前端框架，基于 Web Components 规范设计的组件化框架，可以开发 PC Web、移动端 H5，也可以直接使用 Omi…...
2024/4/21 10:32:39
Java反编译工具JD-GUI以及Eclipse的反编译插件
什么是反编译高级语言源程序经过编译变成可执行文件，反编译就是逆过程。但是通常不能把可执行文件变成高级语言源代码，只能转换成汇编程序。反编译是一个复杂的过程,所以越是高级语言,就越难于反编译,但目前还是有许许多多的反编译软件:通过对他人软件的目标程序（可执行程序…...
2024/4/21 10:32:37
Omi框架学习之旅 - 组件通讯(data-*通讯) 及原理说明
上一篇文章说了omi中的组件,以及组件如何使用及嵌套。那omi中的组件是怎么通讯的呢？其实omi提供的通讯方式比较丰富，各有千秋，各有各的场景用途。所以按需使用即可。老规矩：先上demo代码, 然后提出问题, 之后解答问题, 最后源码说明。class Hello extends Omi.Component…...
2024/4/21 10:32:37
java源文件编译后产生byte code （试题）（自己写的解释）
下列说法哪一个是正确的。（ B）A．Java程序经编译后会产生machine code B．Java程序经编译后会产生bytecodeC．Java程序经编译后会产生DLL D．以上都不正确bytecode（字节码文件），也就是.class文件。Java字节码是Java源文件编译产生的中间文件，java程序在编译（javac .java…...
2024/4/21 10:32:35
多投资脖子以上，做有思想的女人
早上的广州，人来人往，熙熙攘攘。大学毕业了，今天是来广州上班的第一天，微风吹着细雨，小菲在路边买了两个鸡蛋，两个肉包。娇小玲珑的她，踏着流星大步，穿过斑马线，在地铁入口摘下鞋套，包起来放进手提袋。别人的手提袋装的是镜子、口红、化妆盒，而小菲的袋子里是拖鞋、…...
2024/4/21 10:32:34
omi-mp-create源码加注
omi-mp-create是dntzhang写的小程序框架，主要功能是实现全局状态自动更新和页面间通信，传送门。代码虽然简单但是注释不多读起来还是需要一点时间理解，因此在上面加入了个人理解的注释方便查看~ 在里面还用到的一个监听更改库obaa /*!* omi-mp-create v0.1.0 by dntzhang*…...
2024/4/21 10:32:33
编译时JAVA最常见的错误
学习一种新的编程语言总是一种挑战，因为简单的失误就可以产生错误，对于门外汉来说都是神秘和充满困惑的。如果你不是足够幸运有一个有经验的程序员在旁边看着你并提供指导，排除你代码的故障将是非常令人沮丧的。如果你正学习Java语言，你在编译和执行代码的时候遇到问题，一…...
2024/4/21 10:32:35
怎么用java自带反编译工具查看java字节码文件
怎么用java自带反编译工具查看java字节码文件图文教程，用java自带反编译工具查看java字节码文件，首先，配置好java开发环境，环境变量各种配置，这里就不一一说了，相信大家都配置好了。下面入正题----怎么用java自带反编译工具查看java字节码文件工具/原料javapjava+java开发…...
2024/5/4 19:23:47
Omi 入坑指南 Third field 事件入门
不知不觉又到了第三场的学习了，这次的任务很简单。就是了解html里常用事件在Omi中是如何实现。今天主要讲坑中坑需要注意的写法 import { define, WeElement } from omi import style from ./_index.cssdefine(app-intro, class extends WeElement {static observe = true;…...
2024/4/21 10:32:30
cmd命令编译java文件和运行java文件
学习java一段时间了，基本上都是习惯性的用编译软件直接编译运行，但今天心血来潮，想用命令编译一下，结果。。。出乎意料。没能成功。上网查了一下，已解决：我的问题是编译成功，但是无法运行，总是提示无法加载此类：解决如下：首先要看你的cmd命令下输入javac以及java的…...
2024/4/21 10:32:29
java反编译网页，可直接用
http://javare.cn/ 工作需要找了一些反编译软件，发现该网页可直接反编译，并且效果不错...
2024/4/21 10:32:29
MAC下Java 反编译利器 JD-GUI/Jad/JadClipse
https://blog.csdn.net/yueyeqingshan/article/details/52883520 MAC下Java 反编译利器 JD-GUI/Jad/JadClipse对于Java开发人员而言，没有源码可能让你无法忍受，不知道大家跟我是否有相同的感受？尤其是当调试debug遇到问题的时候，你是否有冲动并急需想了解第三方jar内部实…...
2024/5/6 5:41:11
Omi 6.0 - Store 的设计哲学
写在前面 Store 是 Omi 内置的中心化数据仓库，他解决了下面两个问题: 组件树数据共享数据变更按需更新依赖的组件而这一切都是在运行时搞定。一段代码完全上手 Store import { render, WeElement, define } from omidefine(my-counter, class extends WeElement {static use…...
2024/4/21 10:32:26
Java源文件的编译、下载、解释和执行
Java应用程序的开发周期包括编译、下载、解释和执行几个部分。Java编译程序将Java源程序翻译为JVM可执行代码—字节码。这一编译过程同C/C++的编译有些不同。当C编译器编译生成一个对象的代码时，该代码是为在某一特定硬件平台运行而产生的。因此，在编译过程中，编译程序通过查…...
2024/4/21 10:32:25
Java动态编译和动态加载详解
一.动态编译在某些情况下，我们需要动态生成java代码，通过动态编译，然后执行代码。JAVA API提供了相应的工具（JavaCompiler）来实现动态编译。//获取JavaCompiler JavaCompiler compiler = ToolProvider.getSystemJavaCompiler();//获取java文件管理类 StandardJavaFileMana…...
2024/5/5 21:55:45
MeteoInfoLab脚本示例：OMI Swath HDF数据
这个例子读取OMI卫星Swath数据中的CloudFaction变量并绘图。脚本程序：#Add data file folder = D:/Temp/hdf/ fns = OMI-Aura_L2-OMNO2_2008m0720t2016-o21357_v003-2008m0721t101450.he5 fn = folder + fns f = addfile(fn) lon_v = f[Longitude] lat_v = f[Latitude] lon = …...
2024/4/20 17:38:15

腾讯发布新版前端组件框架 Omi，全面拥抱 Web Components

Omi - 合一

特性

一个 HTML 完全上手

Getting Started

Install

Hello Element

TodoApp

Store

文档

My First Element

Props

Event

Custom Event

Ref

Store System

生命周期

生态

浏览器兼容

Star &　Fork

License

相关文章

最新文章

腾讯发布新版前端组件框架 Omi，全面拥抱 Web Components

Omi - 合一

特性

一个 HTML 完全上手

Getting Started

Install

Hello Element

TodoApp

Store

文档

My First Element

Props

Event

Custom Event

Ref

Store System

生命周期

生态

浏览器兼容

Star & Fork

License

相关文章

最新文章

Star &　Fork