site - update omis docs
This commit is contained in:
dntzhang
parent
7dc95e2c76
commit
8f50b42862
|
|
@ -11,7 +11,7 @@ const config = {
|
|||
{
|
||||
title: '基础概念',
|
||||
list: [
|
||||
{ name: 'JSX', md: 'jsx-hyperscript' },
|
||||
{ name: 'JSX-Hyperscript', md: 'jsx-hyperscript' },
|
||||
{ name: 'Props', md: 'props' },
|
||||
{ name: '事件', md: 'event' },
|
||||
{ name: '生命周期', md: 'lifecycle' },
|
||||
|
|
@ -32,7 +32,7 @@ const config = {
|
|||
{
|
||||
title: 'Base',
|
||||
list: [
|
||||
{ name: 'JSX', md: 'jsx-hyperscript' },
|
||||
{ name: 'JSX-Hyperscript', md: 'jsx-hyperscript' },
|
||||
{ name: 'Props', md: 'props' },
|
||||
{ name: 'Event', md: 'event' },
|
||||
{ name: 'Lifecycle', md: 'lifecycle' },
|
||||
|
|
|
|||
|
|
@ -1,10 +1,6 @@
|
|||
## JSX
|
||||
## JSX and Hyperscript
|
||||
|
||||
JSX is the best UI expression with the least grammatical noise, the strongest expressive ability and Turing complete. The template engine is not complete, the template string is Turing complete, but the grammatical noise is too big.
|
||||
|
||||
```js
|
||||
JSX > JS
|
||||
```
|
||||
JSX and Hyperscript is the best UI expression with the least grammatical noise, the strongest expressive ability and Turing complete. The template engine is not complete, the template string is Turing complete, but the grammatical noise is too big.
|
||||
|
||||
## Hello JSX
|
||||
|
||||
|
|
@ -22,20 +18,22 @@ Variables or expressions, or JS statement blocks, are wrapped in single parenthe
|
|||
<h1>{user.name}</h1>
|
||||
```
|
||||
|
||||
Try it in Omi's render method:
|
||||
Hyperscript version:
|
||||
|
||||
```jsx
|
||||
define('my-element', class extends WeElement {
|
||||
render(props) {
|
||||
return <h1>{props.name}</h1>
|
||||
}
|
||||
})
|
||||
```js
|
||||
h('h1', {}, user.name)
|
||||
```
|
||||
|
||||
Using element:
|
||||
Try it in Omis:
|
||||
|
||||
```jsx
|
||||
<my-element name='dntzhang' />
|
||||
const Comp = props => <h1>{props.name}</h1>
|
||||
```
|
||||
|
||||
Using Comp:
|
||||
|
||||
```jsx
|
||||
<Comp name='omis' />
|
||||
```
|
||||
|
||||
You can also write expressions:
|
||||
|
|
@ -53,7 +51,7 @@ JSX can also be embedded in expressions:
|
|||
The above three elements are actually if else. If only if, you can:
|
||||
|
||||
```jsx
|
||||
<h1>{ user.age > 18 && <div>成年</div> }<h1>
|
||||
<h1>{ user.age > 18 && <div>Adult</div> }<h1>
|
||||
```
|
||||
|
||||
Powerful!
|
||||
|
|
@ -107,37 +105,45 @@ If it's a `{}'package, you need `return'. If you need an index:
|
|||
Here is a ninety-nine multiplication table:
|
||||
|
||||
```jsx
|
||||
import { define, render, WeElement } from 'omi'
|
||||
import { render, h } from 'omis'
|
||||
|
||||
define('my-app', class extends WeElement {
|
||||
|
||||
static css = `span{
|
||||
display: inline-block;
|
||||
width: 68px;
|
||||
}`
|
||||
|
||||
render(props) {
|
||||
return (
|
||||
const MultiplicationTable = props =>
|
||||
<div>
|
||||
{props.numbers.map((a, indexA) =>
|
||||
<div>
|
||||
{props.numbers.map((a, indexA) =>
|
||||
<div>
|
||||
{
|
||||
props.numbers.map((b, indexB) => {
|
||||
return indexA <= indexB && <span>{a}*{b}={a * b} </span>
|
||||
})
|
||||
}
|
||||
</div>
|
||||
)}
|
||||
{
|
||||
props.numbers.map((b, indexB) => {
|
||||
return indexA <= indexB && <span>{a}*{b}={a * b} </span>
|
||||
})
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
|
||||
render(<my-app numbers={[1, 2, 3, 4, 5, 6, 7, 8, 9]} />, 'body')
|
||||
|
||||
MultiplicationTable.css = `
|
||||
span{
|
||||
display: inline-block;
|
||||
width: 68px;
|
||||
}
|
||||
`
|
||||
|
||||
render(<MultiplicationTable numbers={[1, 2, 3, 4, 5, 6, 7, 8, 9]} />, 'body')
|
||||
```
|
||||
|
||||
Result display:
|
||||
|
||||
|
||||
|
||||
[→ Online Demo](https://tencent.github.io/omi/packages/omi/examples/99/)
|
||||
[→ Online Demo](https://codepen.io/dntzhang-the-typescripter/pen/qebEOq)
|
||||
|
||||
It can also be implemented directly with hyperscript:
|
||||
|
||||
```js
|
||||
const MultiplicationTable = props =>
|
||||
h('div', {}, props.numbers.map((a, indexA) =>
|
||||
h('div', {}, props.numbers.map((b, indexB) =>
|
||||
indexA <= indexB && h('span', {}, `${a}*${b}=${a * b}`)
|
||||
))
|
||||
))
|
||||
```
|
||||
|
|
@ -1,10 +1,6 @@
|
|||
## JSX
|
||||
## JSX 和 Hyperscript
|
||||
|
||||
JSX 是目前为止开发体验最棒、语法噪音最少、表达能力最强且图灵完备的 UI 表达式，模板引擎不完备，模板字符串图灵完备但是语法噪音太大。即：
|
||||
|
||||
```js
|
||||
JSX > JS
|
||||
```
|
||||
JSX 和 Hyperscript 是目前为止开发体验最棒、语法噪音最少、表达能力最强且图灵完备的 UI 表达式，模板引擎不完备，模板字符串图灵完备但是语法噪音太大。即：
|
||||
|
||||
## Hello JSX
|
||||
|
||||
|
|
@ -22,20 +18,22 @@ const element = <h1>Hello, world!</h1>
|
|||
<h1>{user.name}</h1>
|
||||
```
|
||||
|
||||
在 Omi 的 render 里试试:
|
||||
Hyperscript 版本:
|
||||
|
||||
```js
|
||||
h('h1', {}, user.name)
|
||||
```
|
||||
|
||||
用在 Omis 里:
|
||||
|
||||
```jsx
|
||||
define('my-element', class extends WeElement {
|
||||
render(props) {
|
||||
return <h1>{props.name}</h1>
|
||||
}
|
||||
})
|
||||
const Comp = props => <h1>{props.name}</h1>
|
||||
```
|
||||
|
||||
使用元素:
|
||||
|
||||
```jsx
|
||||
<my-element name='dntzhang' />
|
||||
<Comp name='omis' />
|
||||
```
|
||||
|
||||
还可以写表达式:
|
||||
|
|
@ -107,37 +105,45 @@ JSX 渲染:
|
|||
这里举一个九九乘法表:
|
||||
|
||||
```jsx
|
||||
import { define, render, WeElement } from 'omi'
|
||||
import { render, h } from 'omis'
|
||||
|
||||
define('my-app', class extends WeElement {
|
||||
|
||||
static css = `span{
|
||||
display: inline-block;
|
||||
width: 68px;
|
||||
}`
|
||||
|
||||
render(props) {
|
||||
return (
|
||||
const MultiplicationTable = props =>
|
||||
<div>
|
||||
{props.numbers.map((a, indexA) =>
|
||||
<div>
|
||||
{props.numbers.map((a, indexA) =>
|
||||
<div>
|
||||
{
|
||||
props.numbers.map((b, indexB) => {
|
||||
return indexA <= indexB && <span>{a}*{b}={a * b} </span>
|
||||
})
|
||||
}
|
||||
</div>
|
||||
)}
|
||||
{
|
||||
props.numbers.map((b, indexB) => {
|
||||
return indexA <= indexB && <span>{a}*{b}={a * b} </span>
|
||||
})
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
|
||||
render(<my-app numbers={[1, 2, 3, 4, 5, 6, 7, 8, 9]} />, 'body')
|
||||
|
||||
MultiplicationTable.css = `
|
||||
span{
|
||||
display: inline-block;
|
||||
width: 68px;
|
||||
}
|
||||
`
|
||||
|
||||
render(<MultiplicationTable numbers={[1, 2, 3, 4, 5, 6, 7, 8, 9]} />, 'body')
|
||||
```
|
||||
|
||||
结果展示:
|
||||
|
||||
|
||||
|
||||
[→ 在线查看](https://tencent.github.io/omi/packages/omi/examples/99/)
|
||||
[→ 在线查看](https://codepen.io/dntzhang-the-typescripter/pen/qebEOq)
|
||||
|
||||
也可以使用 hyperscript 直接实现：
|
||||
|
||||
```js
|
||||
const MultiplicationTable = props =>
|
||||
h('div', {}, props.numbers.map((a, indexA) =>
|
||||
h('div', {}, props.numbers.map((b, indexB) =>
|
||||
indexA <= indexB && h('span', {}, `${a}*${b}=${a * b}`)
|
||||
))
|
||||
))
|
||||
```
|
||||
|
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"cn.css": "static/css/cn.4dd07f49.css",
|
||||
"cn.css.map": "static/css/cn.4dd07f49.css.map",
|
||||
"cn.js": "static/js/cn.012c6df7.js",
|
||||
"cn.js.map": "static/js/cn.012c6df7.js.map",
|
||||
"cn.js": "static/js/cn.53100b87.js",
|
||||
"cn.js.map": "static/js/cn.53100b87.js.map",
|
||||
"index.css": "static/css/index.4dd07f49.css",
|
||||
"index.css.map": "static/css/index.4dd07f49.css.map",
|
||||
"index.js": "static/js/index.7e68da19.js",
|
||||
"index.js.map": "static/js/index.7e68da19.js.map",
|
||||
"index.js": "static/js/index.e0f0300b.js",
|
||||
"index.js.map": "static/js/index.e0f0300b.js.map",
|
||||
"static/js/0.562b04d5.chunk.js": "static/js/0.562b04d5.chunk.js",
|
||||
"static/js/0.562b04d5.chunk.js.map": "static/js/0.562b04d5.chunk.js.map",
|
||||
"static/js/1.c601f4e5.chunk.js": "static/js/1.c601f4e5.chunk.js",
|
||||
|
|
@ -17,8 +17,8 @@
|
|||
"static/js/11.61d18500.chunk.js.map": "static/js/11.61d18500.chunk.js.map",
|
||||
"static/js/12.6358c19b.chunk.js": "static/js/12.6358c19b.chunk.js",
|
||||
"static/js/12.6358c19b.chunk.js.map": "static/js/12.6358c19b.chunk.js.map",
|
||||
"static/js/13.cbe9d912.chunk.js": "static/js/13.cbe9d912.chunk.js",
|
||||
"static/js/13.cbe9d912.chunk.js.map": "static/js/13.cbe9d912.chunk.js.map",
|
||||
"static/js/13.eb7ae032.chunk.js": "static/js/13.eb7ae032.chunk.js",
|
||||
"static/js/13.eb7ae032.chunk.js.map": "static/js/13.eb7ae032.chunk.js.map",
|
||||
"static/js/14.5b1e373f.chunk.js": "static/js/14.5b1e373f.chunk.js",
|
||||
"static/js/14.5b1e373f.chunk.js.map": "static/js/14.5b1e373f.chunk.js.map",
|
||||
"static/js/15.83ba513e.chunk.js": "static/js/15.83ba513e.chunk.js",
|
||||
|
|
@ -31,8 +31,8 @@
|
|||
"static/js/2.cb1a208e.chunk.js.map": "static/js/2.cb1a208e.chunk.js.map",
|
||||
"static/js/3.8c523d89.chunk.js": "static/js/3.8c523d89.chunk.js",
|
||||
"static/js/3.8c523d89.chunk.js.map": "static/js/3.8c523d89.chunk.js.map",
|
||||
"static/js/4.bdb6f020.chunk.js": "static/js/4.bdb6f020.chunk.js",
|
||||
"static/js/4.bdb6f020.chunk.js.map": "static/js/4.bdb6f020.chunk.js.map",
|
||||
"static/js/4.9d52b03b.chunk.js": "static/js/4.9d52b03b.chunk.js",
|
||||
"static/js/4.9d52b03b.chunk.js.map": "static/js/4.9d52b03b.chunk.js.map",
|
||||
"static/js/5.ecb6524c.chunk.js": "static/js/5.ecb6524c.chunk.js",
|
||||
"static/js/5.ecb6524c.chunk.js.map": "static/js/5.ecb6524c.chunk.js.map",
|
||||
"static/js/6.a0043810.chunk.js": "static/js/6.a0043810.chunk.js",
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="shortcut icon" href="./favicon.ico"><link rel="stylesheet" href="./highlight/prism.css"><style>*{-webkit-tap-highlight-color:rgba(255,255,255,0);-moz-user-focus:none}</style><title>Omi - Next Front End Framework</title><link href="./static/css/cn.4dd07f49.css" rel="stylesheet"></head><body><script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script><script src="./highlight/prism.js"></script><script src="./js/remarkable.min.js"></script><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="./static/js/cn.012c6df7.js"></script></body></html>
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="shortcut icon" href="./favicon.ico"><link rel="stylesheet" href="./highlight/prism.css"><style>*{-webkit-tap-highlight-color:rgba(255,255,255,0);-moz-user-focus:none}</style><title>Omi - Next Front End Framework</title><link href="./static/css/cn.4dd07f49.css" rel="stylesheet"></head><body><script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script><script src="./highlight/prism.js"></script><script src="./js/remarkable.min.js"></script><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="./static/js/cn.53100b87.js"></script></body></html>
|
||||
|
|
@ -1 +1 @@
|
|||
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="shortcut icon" href="./favicon.ico"><link rel="stylesheet" href="./highlight/prism.css"><style>*{-webkit-tap-highlight-color:rgba(255,255,255,0);-moz-user-focus:none}</style><title>Omi - Next Front End Framework</title><link href="./static/css/index.4dd07f49.css" rel="stylesheet"></head><body><script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script><script src="./highlight/prism.js"></script><script src="./js/remarkable.min.js"></script><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="./static/js/index.7e68da19.js"></script></body></html>
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="shortcut icon" href="./favicon.ico"><link rel="stylesheet" href="./highlight/prism.css"><style>*{-webkit-tap-highlight-color:rgba(255,255,255,0);-moz-user-focus:none}</style><title>Omi - Next Front End Framework</title><link href="./static/css/index.4dd07f49.css" rel="stylesheet"></head><body><script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script><script src="./highlight/prism.js"></script><script src="./js/remarkable.min.js"></script><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="./static/js/index.e0f0300b.js"></script></body></html>
|
||||
|
|
@ -1 +1 @@
|
|||
"use strict";var precacheConfig=[["./cn.html","d4c3ecd33f1415b95b28468cdb9930ef"],["./index.html","0ec0dda5356d3c88ccaa8999314ba919"],["./static/css/cn.4dd07f49.css","476d16186dc05ff3faa0a5d4dc9ac72c"],["./static/css/index.4dd07f49.css","9ad340cc60e8fed0f9856b562708144e"],["./static/js/0.562b04d5.chunk.js","0b5ba46ab04d4ea25e7a8ab932a72bd3"],["./static/js/1.c601f4e5.chunk.js","979fdd76ff1a99676e21cd2c0ebe1ace"],["./static/js/10.1cf15716.chunk.js","9a37f9aac6ae384d5716796004db9443"],["./static/js/11.61d18500.chunk.js","58f727718eaeef33960cac6bc7e8fef1"],["./static/js/12.6358c19b.chunk.js","2b084c0d7a4e3037c111f8e2028f4492"],["./static/js/13.cbe9d912.chunk.js","83819360b3f2cb3c1d2866db8bfed391"],["./static/js/14.5b1e373f.chunk.js","a0f9bf6fd6a235a64e1bab1979aa0844"],["./static/js/15.83ba513e.chunk.js","a9bcb2f44b85191b2dd15ee05d19e834"],["./static/js/16.9f7b0d62.chunk.js","741e6791835fe0806f961353e7f91b03"],["./static/js/17.4b2bd9bb.chunk.js","5d634dd578578cecf497da7d9dce5994"],["./static/js/2.cb1a208e.chunk.js","d616e8e00766ace515c353fe850553d6"],["./static/js/3.8c523d89.chunk.js","7efc30fb26f4a0c73a27f6a5f311c8b7"],["./static/js/4.bdb6f020.chunk.js","aed9401a0fb834609c7f1eb4df3a8c34"],["./static/js/5.ecb6524c.chunk.js","d888bbe81fe4ae288a5b4bd7c05a30dc"],["./static/js/6.a0043810.chunk.js","ae17482a50254d2be3bc9eb7f0ab889f"],["./static/js/7.a8754bc4.chunk.js","ea53b6a6cb44bfa32ef89170a4734a03"],["./static/js/8.8d224a42.chunk.js","794340334a59d79664621541b3ae4236"],["./static/js/9.00a193aa.chunk.js","ef89493908d669f3a18975c843541920"],["./static/js/cn.012c6df7.js","b2ba00a522ad13f8042b07dcd79dd8bc"],["./static/js/index.7e68da19.js","670996a16befffb720f70238fe89bbf4"],["./static/media/omi-logo2019.923166c3.svg","923166c362dce831a15c447b19a622f9"]],cacheName="sw-precache-v3-sw-precache-webpack-plugin-"+(self.registration?self.registration.scope:""),ignoreUrlParametersMatching=[/^utm_/],addDirectoryIndex=function(e,t){var a=new URL(e);return"/"===a.pathname.slice(-1)&&(a.pathname+=t),a.toString()},cleanResponse=function(t){return t.redirected?("body"in t?Promise.resolve(t.body):t.blob()).then(function(e){return new Response(e,{headers:t.headers,status:t.status,statusText:t.statusText})}):Promise.resolve(t)},createCacheKey=function(e,t,a,c){var n=new URL(e);return c&&n.pathname.match(c)||(n.search+=(n.search?"&":"")+encodeURIComponent(t)+"="+encodeURIComponent(a)),n.toString()},isPathWhitelisted=function(e,t){if(0===e.length)return!0;var a=new URL(t).pathname;return e.some(function(e){return a.match(e)})},stripIgnoredUrlParameters=function(e,a){var t=new URL(e);return t.hash="",t.search=t.search.slice(1).split("&").map(function(e){return e.split("=")}).filter(function(t){return a.every(function(e){return!e.test(t[0])})}).map(function(e){return e.join("=")}).join("&"),t.toString()},hashParamName="_sw-precache",urlsToCacheKeys=new Map(precacheConfig.map(function(e){var t=e[0],a=e[1],c=new URL(t,self.location),n=createCacheKey(c,hashParamName,a,/\.\w{8}\./);return[c.toString(),n]}));function setOfCachedUrls(e){return e.keys().then(function(e){return e.map(function(e){return e.url})}).then(function(e){return new Set(e)})}self.addEventListener("install",function(e){e.waitUntil(caches.open(cacheName).then(function(c){return setOfCachedUrls(c).then(function(a){return Promise.all(Array.from(urlsToCacheKeys.values()).map(function(t){if(!a.has(t)){var e=new Request(t,{credentials:"same-origin"});return fetch(e).then(function(e){if(!e.ok)throw new Error("Request for "+t+" returned a response with status "+e.status);return cleanResponse(e).then(function(e){return c.put(t,e)})})}}))})}).then(function(){return self.skipWaiting()}))}),self.addEventListener("activate",function(e){var a=new Set(urlsToCacheKeys.values());e.waitUntil(caches.open(cacheName).then(function(t){return t.keys().then(function(e){return Promise.all(e.map(function(e){if(!a.has(e.url))return t.delete(e)}))})}).then(function(){return self.clients.claim()}))}),self.addEventListener("fetch",function(t){if("GET"===t.request.method){var e,a=stripIgnoredUrlParameters(t.request.url,ignoreUrlParametersMatching),c="index.html";(e=urlsToCacheKeys.has(a))||(a=addDirectoryIndex(a,c),e=urlsToCacheKeys.has(a));var n="./index.html";!e&&"navigate"===t.request.mode&&isPathWhitelisted(["^(?!\\/__).*"],t.request.url)&&(a=new URL(n,self.location).toString(),e=urlsToCacheKeys.has(a)),e&&t.respondWith(caches.open(cacheName).then(function(e){return e.match(urlsToCacheKeys.get(a)).then(function(e){if(e)return e;throw Error("The cached response that was expected is missing.")})}).catch(function(e){return console.warn('Couldn\'t serve response for "%s" from cache: %O',t.request.url,e),fetch(t.request)}))}});
|
||||
"use strict";var precacheConfig=[["./cn.html","3e002050b0bc79727e58130270ed3992"],["./index.html","63ec877df48380f03ed0cfddfbe475c7"],["./static/css/cn.4dd07f49.css","476d16186dc05ff3faa0a5d4dc9ac72c"],["./static/css/index.4dd07f49.css","9ad340cc60e8fed0f9856b562708144e"],["./static/js/0.562b04d5.chunk.js","0b5ba46ab04d4ea25e7a8ab932a72bd3"],["./static/js/1.c601f4e5.chunk.js","979fdd76ff1a99676e21cd2c0ebe1ace"],["./static/js/10.1cf15716.chunk.js","9a37f9aac6ae384d5716796004db9443"],["./static/js/11.61d18500.chunk.js","58f727718eaeef33960cac6bc7e8fef1"],["./static/js/12.6358c19b.chunk.js","2b084c0d7a4e3037c111f8e2028f4492"],["./static/js/13.eb7ae032.chunk.js","ece72bba21d36cc2b025512376f61fa1"],["./static/js/14.5b1e373f.chunk.js","a0f9bf6fd6a235a64e1bab1979aa0844"],["./static/js/15.83ba513e.chunk.js","a9bcb2f44b85191b2dd15ee05d19e834"],["./static/js/16.9f7b0d62.chunk.js","741e6791835fe0806f961353e7f91b03"],["./static/js/17.4b2bd9bb.chunk.js","5d634dd578578cecf497da7d9dce5994"],["./static/js/2.cb1a208e.chunk.js","d616e8e00766ace515c353fe850553d6"],["./static/js/3.8c523d89.chunk.js","7efc30fb26f4a0c73a27f6a5f311c8b7"],["./static/js/4.9d52b03b.chunk.js","6367f5c7f18622aac57775dc91f10bc7"],["./static/js/5.ecb6524c.chunk.js","d888bbe81fe4ae288a5b4bd7c05a30dc"],["./static/js/6.a0043810.chunk.js","ae17482a50254d2be3bc9eb7f0ab889f"],["./static/js/7.a8754bc4.chunk.js","ea53b6a6cb44bfa32ef89170a4734a03"],["./static/js/8.8d224a42.chunk.js","794340334a59d79664621541b3ae4236"],["./static/js/9.00a193aa.chunk.js","ef89493908d669f3a18975c843541920"],["./static/js/cn.53100b87.js","662ed96e01b4c531975f9fb265463160"],["./static/js/index.e0f0300b.js","c645c3968aa53fe0004e04d81b45906f"],["./static/media/omi-logo2019.923166c3.svg","923166c362dce831a15c447b19a622f9"]],cacheName="sw-precache-v3-sw-precache-webpack-plugin-"+(self.registration?self.registration.scope:""),ignoreUrlParametersMatching=[/^utm_/],addDirectoryIndex=function(e,t){var a=new URL(e);return"/"===a.pathname.slice(-1)&&(a.pathname+=t),a.toString()},cleanResponse=function(t){return t.redirected?("body"in t?Promise.resolve(t.body):t.blob()).then(function(e){return new Response(e,{headers:t.headers,status:t.status,statusText:t.statusText})}):Promise.resolve(t)},createCacheKey=function(e,t,a,c){var n=new URL(e);return c&&n.pathname.match(c)||(n.search+=(n.search?"&":"")+encodeURIComponent(t)+"="+encodeURIComponent(a)),n.toString()},isPathWhitelisted=function(e,t){if(0===e.length)return!0;var a=new URL(t).pathname;return e.some(function(e){return a.match(e)})},stripIgnoredUrlParameters=function(e,a){var t=new URL(e);return t.hash="",t.search=t.search.slice(1).split("&").map(function(e){return e.split("=")}).filter(function(t){return a.every(function(e){return!e.test(t[0])})}).map(function(e){return e.join("=")}).join("&"),t.toString()},hashParamName="_sw-precache",urlsToCacheKeys=new Map(precacheConfig.map(function(e){var t=e[0],a=e[1],c=new URL(t,self.location),n=createCacheKey(c,hashParamName,a,/\.\w{8}\./);return[c.toString(),n]}));function setOfCachedUrls(e){return e.keys().then(function(e){return e.map(function(e){return e.url})}).then(function(e){return new Set(e)})}self.addEventListener("install",function(e){e.waitUntil(caches.open(cacheName).then(function(c){return setOfCachedUrls(c).then(function(a){return Promise.all(Array.from(urlsToCacheKeys.values()).map(function(t){if(!a.has(t)){var e=new Request(t,{credentials:"same-origin"});return fetch(e).then(function(e){if(!e.ok)throw new Error("Request for "+t+" returned a response with status "+e.status);return cleanResponse(e).then(function(e){return c.put(t,e)})})}}))})}).then(function(){return self.skipWaiting()}))}),self.addEventListener("activate",function(e){var a=new Set(urlsToCacheKeys.values());e.waitUntil(caches.open(cacheName).then(function(t){return t.keys().then(function(e){return Promise.all(e.map(function(e){if(!a.has(e.url))return t.delete(e)}))})}).then(function(){return self.clients.claim()}))}),self.addEventListener("fetch",function(t){if("GET"===t.request.method){var e,a=stripIgnoredUrlParameters(t.request.url,ignoreUrlParametersMatching),c="index.html";(e=urlsToCacheKeys.has(a))||(a=addDirectoryIndex(a,c),e=urlsToCacheKeys.has(a));var n="./index.html";!e&&"navigate"===t.request.mode&&isPathWhitelisted(["^(?!\\/__).*"],t.request.url)&&(a=new URL(n,self.location).toString(),e=urlsToCacheKeys.has(a)),e&&t.respondWith(caches.open(cacheName).then(function(e){return e.match(urlsToCacheKeys.get(a)).then(function(e){if(e)return e;throw Error("The cached response that was expected is missing.")})}).catch(function(e){return console.warn('Couldn\'t serve response for "%s" from cache: %O',t.request.url,e),fetch(t.request)}))}});
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
webpackJsonp([13],{43:function(n,e){n.exports="## JSX\n\nJSX is the best UI expression with the least grammatical noise, the strongest expressive ability and Turing complete. The template engine is not complete, the template string is Turing complete, but the grammatical noise is too big. \n\n```js\nJSX > JS\n```\n\n## Hello JSX\n\nWith JSX, closed XML tags can be written in JS to express DOM structures, such as:\n\n```jsx\nconst element = <h1>Hello, world!</h1>\n```\n\n## Data binding\n\nVariables or expressions, or JS statement blocks, are wrapped in single parentheses according to the binding:\n\n```jsx\n<h1>{user.name}</h1>\n```\n\nTry it in Omi's render method:\n\n```jsx\ndefine('my-element', class extends WeElement {\n render(props) {\n return <h1>{props.name}</h1>\n }\n})\n```\n\nUsing element:\n\n```jsx\n<my-element name='dntzhang' />\n```\n\nYou can also write expressions:\n\n```jsx\n<h1>{user.age > 18 ? 'Adult' : 'Minor'}<h1>\n```\n\nJSX can also be embedded in expressions:\n\n```jsx\n<h1>{ user.age > 18 ? <div>Adult</div> : <div>Minor</div> }<h1>\n```\n\nThe above three elements are actually if else. If only if, you can:\n\n```jsx\n<h1>{ user.age > 18 && <div>\u6210\u5e74</div> }<h1>\n```\n\nPowerful!\n\n## List rendering\n\nDatasource:\n\n```js\nconst arr = [{\n message: 'foo',\n}, {\n message: 'bar'\n}]\n```\n\nJSX rendering:\n\n```jsx\n<ul>\n {arr.map(item =>\n <li>{item.message}</li>\n )}\n</ul>\n```\n\nEquate to:\n\n```jsx\n<ul>\n {\n arr.map(item => {\n return <li>{item.message}</li>\n })\n }\n</ul>\n```\n\nIf it's a `{}'package, you need `return'. If you need an index:\n\n```jsx\n<ul>\n {arr.map((item, index) =>\n <li>{index}: {item.message}</li>\n )}\n</ul>\n```\n\n## Comprehensive example\n\nHere is a ninety-nine multiplication table:\n\n```jsx\nimport { define, render, WeElement } from 'omi'\n\ndefine('my-app', class extends WeElement {\n\n static css = `span{\n display: inline-block;\n width: 68px;\n }`\n\n render(props) {\n return (\n <div>\n {props.numbers.map((a, indexA) =>\n <div>\n {\n props.numbers.map((b, indexB) => {\n return indexA <= indexB && <span>{a}*{b}={a * b} </span>\n })\n }\n </div>\n )}\n </div>\n )\n }\n})\n\nrender(<my-app numbers={[1, 2, 3, 4, 5, 6, 7, 8, 9]} />, 'body')\n```\n\nResult display:\n\n\n\n[\u2192 Online Demo](https://tencent.github.io/omi/packages/omi/examples/99/)"}});
|
||||
//# sourceMappingURL=13.cbe9d912.chunk.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,2 @@
|
|||
webpackJsonp([13],{43:function(n,e){n.exports="## JSX and Hyperscript\n\nJSX and Hyperscript is the best UI expression with the least grammatical noise, the strongest expressive ability and Turing complete. The template engine is not complete, the template string is Turing complete, but the grammatical noise is too big. \n\n## Hello JSX\n\nWith JSX, closed XML tags can be written in JS to express DOM structures, such as:\n\n```jsx\nconst element = <h1>Hello, world!</h1>\n```\n\n## Data binding\n\nVariables or expressions, or JS statement blocks, are wrapped in single parentheses according to the binding:\n\n```jsx\n<h1>{user.name}</h1>\n```\n\nHyperscript version:\n\n```js\nh('h1', {}, user.name)\n```\n\nTry it in Omis:\n\n```jsx\nconst Comp = props => <h1>{props.name}</h1>\n```\n\nUsing Comp:\n\n```jsx\n<Comp name='omis' />\n```\n\nYou can also write expressions:\n\n```jsx\n<h1>{user.age > 18 ? 'Adult' : 'Minor'}<h1>\n```\n\nJSX can also be embedded in expressions:\n\n```jsx\n<h1>{ user.age > 18 ? <div>Adult</div> : <div>Minor</div> }<h1>\n```\n\nThe above three elements are actually if else. If only if, you can:\n\n```jsx\n<h1>{ user.age > 18 && <div>Adult</div> }<h1>\n```\n\nPowerful!\n\n## List rendering\n\nDatasource:\n\n```js\nconst arr = [{\n message: 'foo',\n}, {\n message: 'bar'\n}]\n```\n\nJSX rendering:\n\n```jsx\n<ul>\n {arr.map(item =>\n <li>{item.message}</li>\n )}\n</ul>\n```\n\nEquate to:\n\n```jsx\n<ul>\n {\n arr.map(item => {\n return <li>{item.message}</li>\n })\n }\n</ul>\n```\n\nIf it's a `{}'package, you need `return'. If you need an index:\n\n```jsx\n<ul>\n {arr.map((item, index) =>\n <li>{index}: {item.message}</li>\n )}\n</ul>\n```\n\n## Comprehensive example\n\nHere is a ninety-nine multiplication table:\n\n```jsx\nimport { render, h } from 'omis'\n\nconst MultiplicationTable = props =>\n <div>\n {props.numbers.map((a, indexA) =>\n <div>\n {\n props.numbers.map((b, indexB) => {\n return indexA <= indexB && <span>{a}*{b}={a * b} </span>\n })\n }\n </div>\n )}\n </div>\n\n\nMultiplicationTable.css = `\nspan{\n display: inline-block;\n width: 68px;\n}\n`\n\nrender(<MultiplicationTable numbers={[1, 2, 3, 4, 5, 6, 7, 8, 9]} />, 'body')\n```\n\nResult display:\n\n\n\n[\u2192 Online Demo](https://codepen.io/dntzhang-the-typescripter/pen/qebEOq)\n\nIt can also be implemented directly with hyperscript:\n\n```js\nconst MultiplicationTable = props =>\n h('div', {}, props.numbers.map((a, indexA) =>\n h('div', {}, props.numbers.map((b, indexB) =>\n indexA <= indexB && h('span', {}, `${a}*${b}=${a * b}`)\n ))\n ))\n```"}});
|
||||
//# sourceMappingURL=13.eb7ae032.chunk.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,2 @@
|
|||
webpackJsonp([4],{52:function(n,e){n.exports="## JSX \u548c Hyperscript\n\nJSX \u548c Hyperscript \u662f\u76ee\u524d\u4e3a\u6b62\u5f00\u53d1\u4f53\u9a8c\u6700\u68d2\u3001\u8bed\u6cd5\u566a\u97f3\u6700\u5c11\u3001\u8868\u8fbe\u80fd\u529b\u6700\u5f3a\u4e14\u56fe\u7075\u5b8c\u5907\u7684 UI \u8868\u8fbe\u5f0f\uff0c\u6a21\u677f\u5f15\u64ce\u4e0d\u5b8c\u5907\uff0c\u6a21\u677f\u5b57\u7b26\u4e32\u56fe\u7075\u5b8c\u5907\u4f46\u662f\u8bed\u6cd5\u566a\u97f3\u592a\u5927\u3002\u5373\uff1a\n\n## Hello JSX\n\n\u4f7f\u7528 JSX\uff0c\u53ef\u4ee5\u5728 JS \u4e2d\u4e66\u5199\u95ed\u5408\u7684 XML \u6807\u7b7e\u6765\u8868\u8fbe DOM \u7ed3\u6784\u7b49\uff0c\u6bd4\u5982:\n\n```jsx\nconst element = <h1>Hello, world!</h1>\n```\n\n## \u6570\u636e\u7ed1\u5b9a\n\n\u636e\u7ed1\u5b9a\u4f7f\u7528\u5355\u62ec\u53f7\u5c06\u53d8\u91cf\u6216\u8868\u8fbe\u5f0f\u3001\u6216JS\u8bed\u53e5\u5757\u5305\u8d77\u6765\uff1a\n\n```jsx\n<h1>{user.name}</h1>\n```\n\nHyperscript \u7248\u672c:\n\n```js\nh('h1', {}, user.name)\n```\n\n\u7528\u5728 Omis \u91cc:\n\n```jsx\nconst Comp = props => <h1>{props.name}</h1>\n```\n\n\u4f7f\u7528\u5143\u7d20:\n\n```jsx\n<Comp name='omis' />\n```\n\n\u8fd8\u53ef\u4ee5\u5199\u8868\u8fbe\u5f0f:\n\n```jsx\n<h1>{user.age > 18 ? '\u6210\u5e74' : '\u672a\u6210\u5e74'}<h1>\n```\n\n\u8868\u8fbe\u5f0f\u91cc\u4e5f\u53ef\u4ee5\u5d4c\u5165 JSX\uff1a\n\n```jsx\n<h1>{ user.age > 18 ? <div>\u6210\u5e74</div> : <div>\u672a\u6210\u5e74</div> }<h1>\n```\n\n\u4e0a\u9762\u7684\u4e09\u5143\u5176\u5b9e\u5c31\u662f if else\uff0c\u5982\u679c\u4ec5\u4ec5\u9700\u8981 if\uff0c\u53ef\u4ee5\uff1a\n\n```jsx\n<h1>{ user.age > 18 && <div>\u6210\u5e74</div> }<h1>\n```\n\n\u5f3a\u5927\uff01\n\n## \u5217\u8868\u6e32\u67d3\n\n\u6570\u636e\u6e90:\n\n```js\nconst arr = [{\n message: 'foo',\n}, {\n message: 'bar'\n}]\n```\n\nJSX \u6e32\u67d3:\n\n```jsx\n<ul>\n {arr.map(item =>\n <li>{item.message}</li>\n )}\n</ul>\n```\n\n\u7b49\u540c\u4e8e:\n\n```jsx\n<ul>\n {\n arr.map(item => {\n return <li>{item.message}</li>\n })\n }\n</ul>\n```\n\n\u5982\u679c\u662f `{}` \u5305\u88f9\uff0c\u5c31\u9700\u8981 `return`\u3002\u5982\u679c\u9700\u8981 index:\n\n```jsx\n<ul>\n {arr.map((item, index) =>\n <li>{index}: {item.message}</li>\n )}\n</ul>\n```\n\n## \u7efc\u5408\u4f8b\u5b50\n\n\u8fd9\u91cc\u4e3e\u4e00\u4e2a\u4e5d\u4e5d\u4e58\u6cd5\u8868:\n\n```jsx\nimport { render, h } from 'omis'\n\nconst MultiplicationTable = props =>\n <div>\n {props.numbers.map((a, indexA) =>\n <div>\n {\n props.numbers.map((b, indexB) => {\n return indexA <= indexB && <span>{a}*{b}={a * b} </span>\n })\n }\n </div>\n )}\n </div>\n\n\nMultiplicationTable.css = `\nspan{\n display: inline-block;\n width: 68px;\n}\n`\n\nrender(<MultiplicationTable numbers={[1, 2, 3, 4, 5, 6, 7, 8, 9]} />, 'body')\n```\n\n\u7ed3\u679c\u5c55\u793a:\n\n\n\n[\u2192 \u5728\u7ebf\u67e5\u770b](https://codepen.io/dntzhang-the-typescripter/pen/qebEOq)\n\n\u4e5f\u53ef\u4ee5\u4f7f\u7528 hyperscript \u76f4\u63a5\u5b9e\u73b0\uff1a\n\n```js\nconst MultiplicationTable = props =>\n h('div', {}, props.numbers.map((a, indexA) =>\n h('div', {}, props.numbers.map((b, indexB) =>\n indexA <= indexB && h('span', {}, `${a}*${b}=${a * b}`)\n ))\n ))\n```"}});
|
||||
//# sourceMappingURL=4.9d52b03b.chunk.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +0,0 @@
|
|||
webpackJsonp([4],{52:function(n,e){n.exports="## JSX\n\nJSX \u662f\u76ee\u524d\u4e3a\u6b62\u5f00\u53d1\u4f53\u9a8c\u6700\u68d2\u3001\u8bed\u6cd5\u566a\u97f3\u6700\u5c11\u3001\u8868\u8fbe\u80fd\u529b\u6700\u5f3a\u4e14\u56fe\u7075\u5b8c\u5907\u7684 UI \u8868\u8fbe\u5f0f\uff0c\u6a21\u677f\u5f15\u64ce\u4e0d\u5b8c\u5907\uff0c\u6a21\u677f\u5b57\u7b26\u4e32\u56fe\u7075\u5b8c\u5907\u4f46\u662f\u8bed\u6cd5\u566a\u97f3\u592a\u5927\u3002\u5373\uff1a\n\n```js\nJSX > JS\n```\n\n## Hello JSX\n\n\u4f7f\u7528 JSX\uff0c\u53ef\u4ee5\u5728 JS \u4e2d\u4e66\u5199\u95ed\u5408\u7684 XML \u6807\u7b7e\u6765\u8868\u8fbe DOM \u7ed3\u6784\u7b49\uff0c\u6bd4\u5982:\n\n```jsx\nconst element = <h1>Hello, world!</h1>\n```\n\n## \u6570\u636e\u7ed1\u5b9a\n\n\u636e\u7ed1\u5b9a\u4f7f\u7528\u5355\u62ec\u53f7\u5c06\u53d8\u91cf\u6216\u8868\u8fbe\u5f0f\u3001\u6216JS\u8bed\u53e5\u5757\u5305\u8d77\u6765\uff1a\n\n```jsx\n<h1>{user.name}</h1>\n```\n\n\u5728 Omi \u7684 render \u91cc\u8bd5\u8bd5:\n\n```jsx\ndefine('my-element', class extends WeElement {\n render(props) {\n return <h1>{props.name}</h1>\n }\n})\n```\n\n\u4f7f\u7528\u5143\u7d20:\n\n```jsx\n<my-element name='dntzhang' />\n```\n\n\u8fd8\u53ef\u4ee5\u5199\u8868\u8fbe\u5f0f:\n\n```jsx\n<h1>{user.age > 18 ? '\u6210\u5e74' : '\u672a\u6210\u5e74'}<h1>\n```\n\n\u8868\u8fbe\u5f0f\u91cc\u4e5f\u53ef\u4ee5\u5d4c\u5165 JSX\uff1a\n\n```jsx\n<h1>{ user.age > 18 ? <div>\u6210\u5e74</div> : <div>\u672a\u6210\u5e74</div> }<h1>\n```\n\n\u4e0a\u9762\u7684\u4e09\u5143\u5176\u5b9e\u5c31\u662f if else\uff0c\u5982\u679c\u4ec5\u4ec5\u9700\u8981 if\uff0c\u53ef\u4ee5\uff1a\n\n```jsx\n<h1>{ user.age > 18 && <div>\u6210\u5e74</div> }<h1>\n```\n\n\u5f3a\u5927\uff01\n\n## \u5217\u8868\u6e32\u67d3\n\n\u6570\u636e\u6e90:\n\n```js\nconst arr = [{\n message: 'foo',\n}, {\n message: 'bar'\n}]\n```\n\nJSX \u6e32\u67d3:\n\n```jsx\n<ul>\n {arr.map(item =>\n <li>{item.message}</li>\n )}\n</ul>\n```\n\n\u7b49\u540c\u4e8e:\n\n```jsx\n<ul>\n {\n arr.map(item => {\n return <li>{item.message}</li>\n })\n }\n</ul>\n```\n\n\u5982\u679c\u662f `{}` \u5305\u88f9\uff0c\u5c31\u9700\u8981 `return`\u3002\u5982\u679c\u9700\u8981 index:\n\n```jsx\n<ul>\n {arr.map((item, index) =>\n <li>{index}: {item.message}</li>\n )}\n</ul>\n```\n\n## \u7efc\u5408\u4f8b\u5b50\n\n\u8fd9\u91cc\u4e3e\u4e00\u4e2a\u4e5d\u4e5d\u4e58\u6cd5\u8868:\n\n```jsx\nimport { define, render, WeElement } from 'omi'\n\ndefine('my-app', class extends WeElement {\n\n static css = `span{\n display: inline-block;\n width: 68px;\n }`\n\n render(props) {\n return (\n <div>\n {props.numbers.map((a, indexA) =>\n <div>\n {\n props.numbers.map((b, indexB) => {\n return indexA <= indexB && <span>{a}*{b}={a * b} </span>\n })\n }\n </div>\n )}\n </div>\n )\n }\n})\n\nrender(<my-app numbers={[1, 2, 3, 4, 5, 6, 7, 8, 9]} />, 'body')\n```\n\n\u7ed3\u679c\u5c55\u793a:\n\n\n\n[\u2192 \u5728\u7ebf\u67e5\u770b](https://tencent.github.io/omi/packages/omi/examples/99/)"}});
|
||||
//# sourceMappingURL=4.bdb6f020.chunk.js.map
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue