github/h5-Dooring
1
0
Fork 0
mirror of https://github.com/MrXujiang/h5-Dooring.git synced 2026-01-06 03:38:10 +00:00
Code Issues Packages Projects Releases Wiki Activity
h5-Dooring/doc-dist/assets/js/21.390bb49b.js
xujiang c24264e8dc 🆕 add deploy doc
2021-03-24 03:07:39 +08:00

381 lines
22 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

(window.webpackJsonp = window.webpackJsonp || []).push([
[21],
{
386: function(t, s, a) {
'use strict';
a.r(s);
var n = a(42),
p = Object(n.a)(
{},
function() {
var t = this,
s = t.$createElement,
a = t._self._c || s;
return a('ContentSlotsDistributor', { attrs: { 'slot-key': t.$parent.slotKey } }, [
a('h1', { attrs: { id: '组件结构' } }, [
a('a', { staticClass: 'header-anchor', attrs: { href: '#组件结构' } }, [t._v('#')]),
t._v(' 组件结构'),
]),
t._v(' '),
a('p', [t._v('dooring的组件设计包含以下3个部分组件：')]),
t._v(' '),
a('p', [t._v('1、component 组件主体')]),
t._v(' '),
a('p', [t._v('2、schema 组件的DSL，结构协议层')]),
t._v(' '),
a('p', [t._v('3、template 定义了组件的类型、外观、从属关系，后期考虑纳入schema')]),
t._v(' '),
a('p', [
t._v(
'接下来我会介绍一个基本的组件主体设计，以为template设计，在下一章会具体介绍schema部分。',
),
]),
t._v(' '),
a('h2', { attrs: { id: '组件设计' } }, [
a('a', { staticClass: 'header-anchor', attrs: { href: '#组件设计' } }, [t._v('#')]),
t._v(' 组件设计'),
]),
t._v(' '),
a('p', [t._v('我们这里拿基本的header组件来举例，如下是header组件的代码：')]),
t._v(' '),
a('div', { staticClass: 'language-jsx extra-class' }, [
a('pre', { pre: !0, attrs: { class: 'language-jsx' } }, [
a('code', [
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('interface')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token class-name' } }, [
t._v('HeaderPropTypes'),
]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('extends')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token class-name' } }, [
t._v('IHeaderConfig'),
]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n isTpl'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' boolean'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
t._v('\n\n'),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('const')]),
t._v(' Header '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token function' } }, [t._v('memo')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
a('span', { pre: !0, attrs: { class: 'token parameter' } }, [
t._v('props'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' HeaderPropTypes'),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=>')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('const')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v(' bgColor'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v(' logo'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v(' logoText'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v(' fontSize'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v(' color '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=')]),
t._v(' props'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('return')]),
t._v(' props'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
t._v('isTpl '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('?')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token tag' } }, [
a('span', { pre: !0, attrs: { class: 'token tag' } }, [
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('<')]),
t._v('div'),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('>')]),
]),
a('span', { pre: !0, attrs: { class: 'token plain-text' } }, [
t._v('\n < img style='),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('width'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'100%'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token plain-text' } }, [t._v(' src=')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('logos'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token plain-text' } }, [
t._v(' alt="" />\n '),
]),
a('span', { pre: !0, attrs: { class: 'token tag' } }, [
a('span', { pre: !0, attrs: { class: 'token tag' } }, [
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('</')]),
t._v('div'),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('>')]),
]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token tag' } }, [
a('span', { pre: !0, attrs: { class: 'token tag' } }, [
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('<')]),
t._v('header'),
]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token attr-name' } }, [
t._v('className'),
]),
a('span', { pre: !0, attrs: { class: 'token script language-javascript' } }, [
a(
'span',
{ pre: !0, attrs: { class: 'token script-punctuation punctuation' } },
[t._v('=')],
),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('styles'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
t._v('header'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token attr-name' } }, [t._v('style')]),
a('span', { pre: !0, attrs: { class: 'token script language-javascript' } }, [
a(
'span',
{ pre: !0, attrs: { class: 'token script-punctuation punctuation' } },
[t._v('=')],
),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v(' backgroundColor'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' bgColor '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('>')]),
]),
a('span', { pre: !0, attrs: { class: 'token plain-text' } }, [
t._v('\n '),
]),
a('span', { pre: !0, attrs: { class: 'token tag' } }, [
a('span', { pre: !0, attrs: { class: 'token tag' } }, [
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('<')]),
t._v('div'),
]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token attr-name' } }, [
t._v('className'),
]),
a('span', { pre: !0, attrs: { class: 'token script language-javascript' } }, [
a(
'span',
{ pre: !0, attrs: { class: 'token script-punctuation punctuation' } },
[t._v('=')],
),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('styles'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
t._v('logo'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('>')]),
]),
a('span', { pre: !0, attrs: { class: 'token plain-text' } }, [
t._v('\n < img src='),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('logo '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('&&')]),
t._v(' logo'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('[')]),
a('span', { pre: !0, attrs: { class: 'token number' } }, [t._v('0')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(']')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
t._v('url'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token plain-text' } }, [t._v(' alt=')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('logoText'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token plain-text' } }, [
t._v(' />\n '),
]),
a('span', { pre: !0, attrs: { class: 'token tag' } }, [
a('span', { pre: !0, attrs: { class: 'token tag' } }, [
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('</')]),
t._v('div'),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('>')]),
]),
a('span', { pre: !0, attrs: { class: 'token plain-text' } }, [
t._v('\n '),
]),
a('span', { pre: !0, attrs: { class: 'token tag' } }, [
a('span', { pre: !0, attrs: { class: 'token tag' } }, [
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('<')]),
t._v('div'),
]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token attr-name' } }, [
t._v('className'),
]),
a('span', { pre: !0, attrs: { class: 'token script language-javascript' } }, [
a(
'span',
{ pre: !0, attrs: { class: 'token script-punctuation punctuation' } },
[t._v('=')],
),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('styles'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]),
t._v('title'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token attr-name' } }, [t._v('style')]),
a('span', { pre: !0, attrs: { class: 'token script language-javascript' } }, [
a(
'span',
{ pre: !0, attrs: { class: 'token script-punctuation punctuation' } },
[t._v('=')],
),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v(' fontSize'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v(' color '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('>')]),
]),
a('span', { pre: !0, attrs: { class: 'token plain-text' } }, [
t._v('\n '),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('logoText'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token plain-text' } }, [
t._v('\n '),
]),
a('span', { pre: !0, attrs: { class: 'token tag' } }, [
a('span', { pre: !0, attrs: { class: 'token tag' } }, [
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('</')]),
t._v('div'),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('>')]),
]),
a('span', { pre: !0, attrs: { class: 'token plain-text' } }, [t._v('\n ')]),
a('span', { pre: !0, attrs: { class: 'token tag' } }, [
a('span', { pre: !0, attrs: { class: 'token tag' } }, [
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('</')]),
t._v('header'),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('>')]),
]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n'),
]),
]),
]),
a('p', [
t._v(
'我们只需要按照上面的方式编写组件即可，props是DSL定义的数据层，用来控制组件的shape，也就是组件的表现。我们看看header对应的template。',
),
]),
t._v(' '),
a('h2', { attrs: { id: 'template设计' } }, [
a('a', { staticClass: 'header-anchor', attrs: { href: '#template设计' } }, [
t._v('#'),
]),
t._v(' template设计'),
]),
t._v(' '),
a('div', { staticClass: 'language-js extra-class' }, [
a('pre', { pre: !0, attrs: { class: 'language-js' } }, [
a('code', [
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('const')]),
t._v(' template '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n type'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'Header'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n h'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token number' } }, [t._v('28')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n displayName'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'页头组件'")]),
t._v('\n'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n'),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('export')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('default')]),
t._v(' template'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n'),
]),
]),
]),
a('p', [
t._v(
'以上就是我们template的结构，type用来定义组件的类型，方便渲染器动态查找，h代表组件的初始化高度，我们可以自由设置。displayName是组件的中文名，用来在左侧组件面板中展示，方便用户理解，我们可以在template中自定义更多辅助信息，方便使用者更高效的使用我们的编辑器。',
),
]),
]);
},
[],
!1,
null,
null,
null,
);
s.default = p.exports;
},
},
]);
Reference in New Issue View Git Blame Copy Permalink