(window.webpackJsonp = window.webpackJsonp || []).push([ [21], { 384: 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('\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('')]), ]), 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('')]), ]), 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('\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; }, }, ]);