腾讯 Omi 5.0 发布 - Web 前端 MVVM 王者归来,mappingjs 强力加持
写在前面
腾讯 Omi 框架正式发布 5.0,依然专注于 View,但是对 MVVM 架构更加友好的集成,彻底分离视图与业务逻辑的架构。
你可以通过 omi-cli 快速体验 MVVM:
$ npm i omi-cli -g
$ omi init-mvvm my-app
$ cd my-app
$ npm start
$ npm run build
npx omi-cli init-mvvm my-app
也支持(要求 npm v5.2.0+)
MVVM 演化
MVVM 其实本质是由 MVC、MVP 演化而来。
目的都是分离视图和模型,但是在 MVC 中,视图依赖模型,耦合度太高,导致视图的可移植性大大降低,在 MVP 模式中,视图不直接依赖模型,由 P(Presenter)负责完成 Model 和 View 的交互。MVVM 和 MVP 的模式比较接近。ViewModel 担任这 Presenter 的角色,并且提供 UI 视图所需要的数据源,而不是直接让 View 使用 Model 的数据源,这样大大提高了 View 和 Model 的可移植性,比如同样的 Model 切换使用 Flash、HTML、WPF 渲染,比如同样 View 使用不同的 Model,只要 Model 和 ViewModel 映射好,View 可以改动很小甚至不用改变。
Mappingjs
当然 MVVM 这里会出现一个问题, Model 里的数据映射到 ViewModel 提供该视图绑定,怎么映射?手动映射?自动映射?在 ASP.NET MVC 中,有强大的 AutoMapper 用来映射。针对 JS 环境,我特地封装了 mappingjs 用来映射 Model 到 ViewModel。
const testObj = {
same: 10,
bleh: 4,
firstName: 'dnt',
lastName: 'zhang',
a: {
c: 10
}
}
const vmData = mapping({
from: testObj,
to: { aa: 1 },
rule: {
dumb: 12,
func: function () {
return 8
},
b: function () {
//可递归映射
return mapping({ from: this.a })
},
bar: function () {
return this.bleh
},
//可以重组属性
fullName: function () {
return this.firstName + this.lastName
},
//可以映射到 path
'd[2].b[0]': function () {
return this.a.c
}
}
})
你可以通后 npm 安装使用:
npm i mappingjs
再举例说明:
var a = { a: 1 }
var b = { b: 2 }
assert.deepEqual(mapping({
from: a,
to: b
}), { a: 1, b: 2 })
Deep mapping:
QUnit.test("", function (assert) {
var A = { a: [{ name: 'abc', age: 18 }, { name: 'efg', age: 20 }], e: 'aaa' }
var B = mapping({
from: A,
to: { d: 'test' },
rule: {
a: null,
c: 13,
list: function () {
return this.a.map(function (item) {
return mapping({ from: item })
})
}
}
})
assert.deepEqual(B.a, null)
assert.deepEqual(B.list[0], A.a[0])
assert.deepEqual(B.c, 13)
assert.deepEqual(B.d, 'test')
assert.deepEqual(B.e, 'aaa')
assert.deepEqual(B.list[0] === A.a[0], false)
})
Deep deep mapping:
QUnit.test("", function (assert) {
var A = { a: [{ name: 'abc', age: 18, obj: { f: 'a', l: 'b' } }, { name: 'efg', age: 20, obj: { f: 'a', l: 'b' } }], e: 'aaa' }
var B = mapping({
from: A,
rule: {
list: function () {
return this.a.map(function (item) {
return mapping({
from: item, rule: {
obj: function () {
return mapping({ from: this.obj })
}
}
})
})
}
}
})
assert.deepEqual(A.a, B.list)
assert.deepEqual(A.a[0].obj, B.list[0].obj)
assert.deepEqual(A.a[0].obj === B.list[0].obj, false)
})
Omi MVVM Todo 实战
定义 Model:
let id = 0
export default class TodoItem {
constructor(text, completed) {
this.id = id++
this.text = text
this.completed = completed || false
this.author = {
firstName: 'dnt',
lastName: 'zhang'
}
}
clone() {
return new TodoItem(this.text, this.completed)
}
}
Todo 就省略不贴出来了,太长了,可以直接 看这里。反正统一按照面向对象程序设计进行抽象和封装。
定义 ViewModel:
import mapping from 'mappingjs'
import shared from './shared'
import todoModel from '../model/todo'
import ovm from './other'
class TodoViewModel {
constructor() {
this.data = {
items: []
}
}
update(todo) {
//这里进行映射
todo &&
todo.items.forEach((item, index) => {
this.data.items[index] = mapping({
from: item,
to: this.data.items[index],
rule: {
fullName: function() {
return this.author.firstName + this.author.lastName
}
}
})
})
this.data.projName = shared.projName
}
add(text) {
todoModel.add(text)
this.update(todoModel)
ovm.update()
}
getAll() {
todoModel.getAll(() => {
this.update(todoModel)
ovm.update())
})
}
changeSharedData() {
shared.projName = 'I love omi-mvvm.'
ovm.update()
this.update()
}
}
const vd = new TodoViewModel()
export default vd
- vm 只专注于 update 数据,视图会自动更新
- 公共的数据或 vm 可通过 import 依赖
定义 View, 注意下面是继承自 ModelView 而非 WeElement。
import { ModelView, define } from 'omi'
import vm from '../view-model/todo'
import './todo-list'
import './other-view'
define('todo-app', class extends ModelView {
vm = vm
onClick = () => {
//view model 发送指令
vm.changeSharedData()
}
install() {
//view model 发送指令
vm.getAll()
}
render(props, data) {
return (
<div>
<h3>TODO</h3>
<todo-list items={data.items} />
<form onSubmit={this.handleSubmit}>
<input onChange={this.handleChange} value={this.text} />
<button>Add #{data.items.length + 1}</button>
</form>
<div>{data.projName}</div>
<button onClick={this.onClick}>Change Shared Data</button>
<other-view />
</div>
)
}
handleChange = e => {
this.text = e.target.value
}
handleSubmit = e => {
e.preventDefault()
if(this.text !== ''){
//view model 发送指令
vm.add(this.text)
this.text = ''
}
}
})
- 所有数据通过 vm 注入
- 所以指令通过 vm 发出
define('todo-list', function(props) {
return (
<ul>
{props.items.map(item => (
<li key={item.id}>
{item.text} <span>by {item.fullName}</span>
</li>
))}
</ul>
)
})
可以看到 todo-list 可以直接使用 fullName
。
mapping.auto
是不是感觉映射写起来略微麻烦?? 简单的还好,复杂对象嵌套很深就会很费劲。没关系 mapping.auto
拯救你!
- mapping.auto(from, [to]) 其中 to 是可选参数
举个例子:
class TodoItem {
constructor(text, completed) {
this.text = text
this.completed = completed || false
this.author = {
firstName: 'dnt',
lastName: 'zhang'
}
}
}
const res = mapping.auto(new TodoItem('task'))
deepEqual(res, {
author: {
firstName: "dnt",
lastName: "zhang"
},
completed: false,
text: "task"
})
你可以把任意 class 映射到简单的 json obj!那么开始改造 ViewModel:
class TodoViewModel {
constructor() {
this.data = {
items: []
}
}
update(todo) {
todo && mapping.auto(todo, this.data)
this.data.projName = shared.projName
}
...
...
...
以前的一堆映射逻辑变成了一行代码: mapping.auto(todo, this.data)
。当然由于没有 fullName 属性了,这里需要在视图里直接使用映射过来的 author:
define('todo-list', function(props) {
return (
<ul>
{props.items.map(item => (
<li key={item.id}>
{item.text} <span>by {item.author.firstName + item.author.lastName}</span>
</li>
))}
</ul>
)
})
小结
从宏观的角度来看,Omi 的 MVVM 架构也属性网状架构,网状架构目前来看有:
- Mobx + React
- Hooks + React
- MVVM (Omi)
大势所趋!简直是前端工程化最佳实践!也可以理解成网状结构是描述和抽象世界的最佳途径。那么网在哪?
- ViewModel 与 ViewModel 之间相互依赖甚至循环依赖的网状结构
- ViewModel 一对一、多对一、一对多、多对多依赖 Models 形成网状结构
- Model 与 Model 之间形成相互依赖甚至循环依赖的网状结构
- View 一对一依赖 ViewModel 形成网状结构
总结如下:
Model | ViewModel | View | |
---|---|---|---|
Model | 多对多 | 多对多 | 无关联 |
ViewModel | 多对多 | 多对多 | 一对一 |
View | 无关联 | 一多一 | 多对多 |
其余新增特性
单位 rpx 的支持
import { render, WeElement, define, rpx } from 'omi'
define('my-ele', class extends WeElement {
css() {
return rpx(`div { font-size: 375rpx }`)
}
render() {
return (
<div>abc</div>
)
}
})
render(<my-ele />, 'body')
比如上面定义了半屏幕宽度的 div。
htm 支持
htm 是谷歌工程师,preact作者最近的作品,不管它是不是未来,先支持了再说:
import { define, render, WeElement } from 'omi'
import 'omi-html'
define('my-counter', class extends WeElement {
static observe = true
data = {
count: 1
}
sub = () => {
this.data.count--
}
add = () => {
this.data.count++
}
render() {
return html`
<div>
<button onClick=${this.sub}>-</button>
<span>${this.data.count}</span>
<button onClick=${this.add}>+</button>
</div>`
}
})
render(html`<my-counter />`, 'body')
你甚至可以直接使用下面代码在现代浏览器中运行,不需要任何构建工具:
Hooks 类似的 API
你也可以定义成纯函数的形式:
import { define, render } from 'omi'
define('my-counter', function() {
const [count, setCount] = this.use({
data: 0,
effect: function() {
document.title = `The num is ${this.data}.`
}
})
this.useCss(`button{ color: red; }`)
return (
<div>
<button onClick={() => setCount(count - 1)}>-</button>
<span>{count}</span>
<button onClick={() => setCount(count + 1)}>+</button>
</div>
)
})
render(<my-counter />, 'body')
如果你不需要 effect 方法, 可以直接使用 useData
:
const [count, setCount] = this.useData(0)
更多的模板选择
Template Type | Command | Describe |
---|---|---|
Base Template | omi init my-app |
基础模板 |
TypeScript Template(omi-cli v3.0.5+) | omi init-ts my-app |
使用 TypeScript 的模板 |
SPA Template(omi-cli v3.0.10+) | omi init-spa my-app |
使用 omi-router 单页应用的模板 |
omi-mp Template(omi-cli v3.0.13+) | omi init-mp my-app |
小程序开发 Web 的模板 |
MVVM Template(omi-cli v3.0.22+) | omi init-mvvm my-app |
MVVM 模板 |
Star & Fork
腾讯 Omi 5.0 发布 - Web 前端 MVVM 王者归来,mappingjs 强力加持的更多相关文章
- IIS7.0发布Web服务器0002
asp.net发布到IIS中出现错误:处理程序“PageHandlerFactory-Integrated”在其模块列表中有一个错误模块“ManagedPipelineHandler” 分类: BS学 ...
- 腾讯 AlloyCrop 1.0 发布
写在前面 AlloyCrop 这个项目是8个月前发布的,作为AlloyFinger 的典型案例,发布之后被BAT等其他公司广泛使用.但是发布之后,有两个问题一直没有抽出时间去解决: 裁剪图像的分辨率太 ...
- IIS7.0发布Web服务-0001
配置错误 不能在此路径中使用此配置节.如果在父级别上锁定了该节,便会出现这种情况.锁定是默认设置的 (overrideModeDefault="Deny"),或者是通过包含 ove ...
- Eclipse如何发布web项目
目录结构: // contents structure [-] 需要的环境 下载和配置JDK 下载和配置Tomcat 下载Eclipse Eclipse 4.4.0 发布Web步骤 创建server ...
- 腾讯发布新版前端组件框架 Omi,全面拥抱 Web Components
Omi - 合一 下一代 Web 框架,去万物糟粕,合精华为一 → https://github.com/Tencent/omi 特性 4KB 的代码尺寸,比小更小 顺势而为,顺从浏览器的发展和 AP ...
- Omi v1.0震撼发布 - 令人窒息的Web组件化框架
原文链接--https://github.com/AlloyTeam/omi 写在前面 Omi框架经过几十个版本的迭代,越来越简便易用和强大. 经过周末的连续通宵加班加点,Omi v1.0版本终于问世 ...
- Omi v1.0震撼发布 - 开放现代的Web组件化框架
原文链接--https://github.com/AlloyTeam/omi 写在前面 Omi框架经过几十个版本的迭代,越来越简便易用和强大. 经过周末的连续通宵加班加点,Omi v1.0版本终于问世 ...
- 2015腾讯web前端笔试题
1 请实现,鼠标点击页面中的任意标签,alert该标签的名称.(注意兼容性) 2 请指出一下代码的性能问题,并经行优化. var info="腾讯拍拍网(www.paipai.com)是 ...
- TFC2017 腾讯Web前端大会参会小结
简述 上周有幸参加TFC腾讯Web前端大会,见识了各路前端大神的精彩演讲,干货满满的.会议流程分为上午主会场,以及下午的三个分会场.分享的主题涵盖Web新技术.Node.js.框架.工程化. 图形处理 ...
随机推荐
- spring学习总结——装配Bean学习一(自动装配)
一.Spring配置的可选方案 Spring容器负责创建应用程序中的bean并通过DI来协调这些对象之间的关系.但是,作为开发人员,你需要告诉Spring要创建哪些bean并且如何将其装配在一起.当描 ...
- [20181109]12c sqlplus rowprefetch参数5
[20181109]12c sqlplus rowprefetch参数5.txt --//这几天一直在探究设置sqlplus参数rowprefetch与arraysize的关系,有必要做一些总结以及一 ...
- [Hive_9] Hive 的排序
0. 说明 全排序(order by) | 部分排序(sort by) | hash 分区(distribute by) | cluster by 1. 前期准备 1.1 建表 create tab ...
- C++多线程同步技巧(二)--- 事件
简介 Windows在线程控制方面提供了多种信号处理机制,其中一种便是使用 CreateEvent() 函数创建事件,然后使用信号控制线程运行.其中将事件变为有信号可使用 SetEvent() 函数, ...
- 如何激活windows或office
郑重承诺:该激活软件没有病毒,有任何侵害行为,找我QQ:122317653 Step one: 首先你需要安装KMS Auto Net激活器,但我们都知道一些杀毒软件都会将此类激活器警告成木马病毒,原 ...
- ESLint笔记
ESLint是JavaScript的代码检查工具.因为JS是弱类型的语言,不需要编译,代码错误是在运行时调适的,所以需要个工具在编码的过程发现问题.ESLint的初衷是为了让程序员可以创建自己的检测规 ...
- Beta阶段 - 博客链接合集
Beta阶段 - 博客链接合集 项目Github地址 安卓端(Stardust):https://github.com/StardustProject/Stardust 服务器端(Gravel):ht ...
- InfluxDB部署
InfluxDB介绍 官网:https://www.influxdata.com/ 文档:https://docs.influxdata.com/influxdb/v1.2/introduction/ ...
- VS code常用的几个插件
VScode是一个我最近才开始用的编辑器,在此列几个自己在用的插件,以备换机时的需要. auto close tagbeautify css/sass/scss/lessone dark themes ...
- c# 行转列动态赋值给layui
数据库存储格式 期望前端显示样式 以下是代码: (1)控制器: [HttpGet("SocialImportLedgerInfo")] public ResultData GetS ...