用JSON描述布局，是低代码热潮下的大势原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】所趋。通过http传输一段JSON，就可【版权所有，侵权必究】原创内容，盗版必究。以在前端基于一套引擎代码，渲染出完全不同原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。的界面和交互，这是低代码分发的一种重要形【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】式。这一背景下，JSON Schema【版权所有】唐霜 www.tangshuang.net被委以重任，被广泛采用。但在尝试使用之后转载请注明出处：www.tangshuang.net【未经授权禁止转载】，我发现JSON Schema只适合描述【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。数据结构（如后端的数据模型），而不适合描【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。述布局。而结合现代前端开发范式，我提出了未经授权，禁止复制转载。未经授权，禁止复制转载。一种HyperJSON，即HyperSc【原创不易，请尊重版权】【原创内容，转载请注明出处】ript的JSON表达，更适合用来让JS著作权归作者所有，禁止商业用途转载。【本文受版权保护】ON描述布局。

HyperScript【版权所有，侵权必究】

在react、vue中被广泛使用，【转载请注明来源】hyperscript【原创内容，转载请注明出处】是用javascript描述hypert转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】ext（超文本）的一种方式。

var h = require('hyperscript')
h('div#page',
  h('div#header',
    h('h1.classy', 'h', { style: {'background-color': '#22f'} })),
  h('div#menu', { style: {'background-color': '#2f2'} },
    h('ul',
      h('li', 'one'),
      h('li', 'two'),
      h('li', 'three'))),
    h('h2', 'content title',  { style: {'background-color': '#f22'} }),
    h('p',
      "so it's just like a templating engine,\n",
      "but easy to use inline with javascript\n"),
    h('p',
      "the intention is for this to be used to create\n",
      "reusable, interactive html widgets. "))

在react中，通过React.crea【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.netteElement实现这一效果，并进行了【作者：唐霜】本文作者：唐霜，转载请注明出处。内部约束。

HyperJSON【原创内容，转载请注明出处】

为了用JSON描述布局，可将HyperS本文作者：唐霜，转载请注明出处。【本文受版权保护】cript的表达形式进行转化，并再进一步【原创不易，请尊重版权】【版权所有，侵权必究】进行内部规范。例如，我们将下面的jsx用【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。JSON来表达：

function MyComponent() {
  return (
    <div className="hyperjson-container">
      <h3>HyperJSON</h3>
      <p>HyperJSON is a schema for discribing JSX</p> 
    </div>
  )
}

用JSON描述就是：原创内容，盗版必究。

["div", { "className": "hyperjson-container" },
    ["h3", null, "HyperJSON"],
    ["p", null, "HyperJSON is a schema for describing JSX."]
]

简单说，就是将createElement【未经授权禁止转载】【转载请注明来源】的参数用嵌套（递归）的JSON来表示。数未经授权，禁止复制转载。【未经授权禁止转载】组的第一个值代表要使用的组件，第二个值代【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net表渲染组件时使用的props，后面剩下的原创内容，盗版必究。未经授权，禁止复制转载。值表示组件的children，child【版权所有，侵权必究】原创内容，盗版必究。ren部分将会作为hyperjson递归【作者：唐霜】【版权所有】唐霜 www.tangshuang.net处理。

HyperJSON就是基于这样的表达方式本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】，增加了一些语法规则：

• 动态语法： 【访问 www.tangshuang.net 获取更多精彩内容】
  • 表达式：在JSON中使用特殊的标记 原创内容，盗版必究。{} 指定该标记内的内容为动态语法表达式著作权归作者所有，禁止商业用途转载。
  【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】
  • 作用域：作用域中只能读取该作用域内预设的【原创内容，转载请注明出处】【作者：唐霜】变量，预设变量由props指定
  原创内容，盗版必究。【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。
  • 函数式：属性名以 转载请注明出处：www.tangshuang.net() 或 【作者：唐霜】(p1,p2,p3) 的形式结尾的，表示这是一个函数，函数体本文作者：唐霜，转载请注明出处。【本文受版权保护】为动态语法表达式
  【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net【本文受版权保护】
【本文受版权保护】【本文首发于唐霜的博客】【原创不易，请尊重版权】
• 宏：属性末尾以【版权所有】唐霜 www.tangshuang.net!结尾，表示这是一个需要使用解析器再次解析转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。的jsx表达体
【关注微信公众号：wwwtangshuangnet】【本文受版权保护】本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】

一个简单的HyperJSON示例：【本文首发于唐霜的博客】

{
  "props": ["value", "onChange"],
  "render!": [
    "input,
    { "value": "{ value }", "onChange(e)": "{ onChange(e.target.value) }" }
  ]
}

下面我会详细解释其中的每一部分。【原创不易，请尊重版权】

动态语法【转载请注明来源】

HyperJSON表达和JSX一致的布局著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。描述，但是我们都知道，JSX是给视图框架本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】实时运算的材料，要得到结果，往往依赖一些【本文首发于唐霜的博客】【本文首发于唐霜的博客】变量（状态）才能算出实时的布局。因此，在【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.netHyperJSON中，需要添加一些动态语【本文受版权保护】本文作者：唐霜，转载请注明出处。法来支持这种计算。

表达式【原创内容，转载请注明出处】

动态语法表达式以 未经授权，禁止复制转载。{} 为标记，例如：【本文受版权保护】

["input", {
  "value": "{ value }" 
}]

其中 【本文首发于唐霜的博客】value 的值 【本文首发于唐霜的博客】"{ value }" 中的 【版权所有，侵权必究】value 部分就是表达式。表达式和javascr原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.netipt表达式非常像，你可以在表达式中使用【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。一些运算符。例如

value + 1
ie ? '1' : '0'
parent.child // 返回一个子属性的值
{ a: 1 } // 返回一个对象

表达式不能有js中常见的语句，不支持复杂【作者：唐霜】本文作者：唐霜，转载请注明出处。表达式。

作用域【版权所有】唐霜 www.tangshuang.net

在JSX中，我们习惯使用如下语法：【访问 www.tangshuang.net 获取更多精彩内容】

function MyComponent(props) {
  return <input value={props.value} onChange={props.onChange} placeholder="请输入..." />
}

通过 {} 来表达值是动态值，̶【作者：唐霜】原创内容，盗版必究。1;” 表达静态值。它的作用原创内容，盗版必究。原创内容，盗版必究。域就是组件所在的作用域，具体到上面这段代本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net码，就是指 with(props) 这个本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。作用域。

而在HyperJSON中，由于一段Hyp原创内容，盗版必究。【原创内容，转载请注明出处】erJSON只描述一个组件的内容，因此，【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。它需要有一个前置的描述，也就是对 pro原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。ps 的描述：

{
  "props": ["value", "onChange"],
  "render!": [ ... ]
}

上面的代码中，”props&转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。#8221;指明了当前作用域可以使用那些【原创不易，请尊重版权】【本文首发于唐霜的博客】从props上读取的属性值。它相当于真实未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.netjs代码：

function Component(props) {
  const { value, onChange } = props
  ...
}

“props”的未经授权，禁止复制转载。【版权所有，侵权必究】形式有三种：

{
  "props": {
    "value": "$value"
  },
  "render!": [
    "input",
    { "value": "{ $value }" }
  ]
}

函数式原创内容，盗版必究。

上面示例代码中已经出现了函数式：本文版权归作者所有，未经授权不得转载。

["input", { "onChange(e)": "{ onChange(e) }" }]

函数式中的参数，会覆盖上一级作用域中的变转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】量。

宏【未经授权禁止转载】

默认情况下props部分表达的是值或函数【版权所有，侵权必究】【本文受版权保护】，但有的时候，你需要让它赋予新的含义，比原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。如当你需要接收一个jsx作为props的著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。一部分的时候：

<SomeItem
  title={<h3>title</h3>}
  content={<div>content</div>}
/>

这种时候，HyperJSON通过宏来定义【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。这种特殊需求。

["SomeItem", {
  "title!": ["h3", null, "title"],
  "content!": ["div", null, "content"]
}]

通过在属性的末尾加一个 ! 来表达这是一【原创不易，请尊重版权】【原创内容，转载请注明出处】个特殊的props属性，需要用特殊的解释【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。器来执行它的值。

其他方面【关注微信公众号：wwwtangshuangnet】

Fragment著作权归作者所有，禁止商业用途转载。

内置的组件，等于React.Fragme【本文受版权保护】原创内容，盗版必究。nt，例如：

["Fragment", {}, 
  ["div"],
  ["div"]
]

null本文作者：唐霜，转载请注明出处。

在jsx中是支持null的，同时，基于某转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。些特定的语法，也需要null支持。例如：

<div>
  {v === 1 ? <div>1111</div> : null}
  {v === 2 ? <div>222</div> : null}
</div>

在HyperJSON中如下表达：转载请注明出处：www.tangshuang.net

["div", {}, 
  ["{ v === 1 ? 'div' : null }", {}, "1111"],
  ["{ v === 2 ? 'div' : null }", {}, "2222"]
]

当HyperJSON中的第一个值为nul【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。l时，表示这一句将不被渲染。

结语本文作者：唐霜，转载请注明出处。

HyperJSON是一种新的协议，面对新【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net事物，不同的人接受程度不同。目前 Hyp转载请注明出处：www.tangshuang.net【作者：唐霜】erJSON 已经在腾讯内源项目 For本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】mast 和前端框架 Nautil【关注微信公众号：wwwtangshuangnet】 中使用。如果你觉得这种协议有助于你的项【转载请注明来源】著作权归作者所有，禁止商业用途转载。目，不妨和我一起探讨。

2021-03-01 5298