创建可重用组件的模式

Posted 2023-03-08

【中文标题】创建可重用组件的模式

【英文标题】：Pattern for creating reuseable components

【发布时间】：2014-10-30 04:45:42

【问题描述】：

我目前正在开发一个长期的 Web 应用程序 Meteor。随着时间的推移，开发人员会来去去去。因此，为了确保整个应用程序保持相同的外观和感觉，我希望能够使用流星的模板系统创建标准组件。因此，功能模板不应包含任何 html，而这应全部包含在组件模板中。

我尝试过meteor-polymer，但它只是让我的应用程序崩溃，感觉我应该使用流星模板系统而不是添加另一个库。此外，聚合物很大程度上依赖于 Meteor 也依赖的模板标签，所以我不太确定

基本上我想在我的模板中做的是：

<template name="someRandomFeature">
    #_RadioGroup name="dataInput" context=. formData=formData
        #_setLabelTest set/_setLabel
        #_addRow
            assignValues value="random"
            #_setCaptionRandom/_setCaption
        /_addRow
        #_addRow
            assignValues value="expression"
            #_setCaptionExpression: _TextInput name="testSetExpression" inline=true/_setCaption
        /_addRow
    /_RadioGroup

    #_FormGroup
        #_Config
            assignValues numRows=2
        /_Config

        #_setRow 0
            #_SetLabelNumber of tests/_SetLabel
            #_setStageContent
                > _DropDown name="numberOfTests" items=numberOfTestsList formData=formData
            /_setStageContent
        /_setRow

        #_setRow 1
            #_SetLabelTo email address/_SetLabel
            #_setStageContent
                > _TextInput name='respondentSelection' formData=formData
                <span class="help-block text-left">Send all test mails to this email adress</span>
            /_setStageContent
        /_setRow
    /_FormGroup
</template>

组件示例：

<template name="_FormGroup">
#with numRows=0 context=. formdata=formdata stage='config'
    #with execBlock UI.contentBlock
        <div class="form-group">
            #each getRows
                #unless ../disableLabels
                    <label class="control-label">
                        #with _constructStageList 1='rows' 2=_id 3='label'
                            > UI.contentBlock stage=this stageContext=../../context
                        /with
                    </label>
                /unless

                <div class="row#unless ../disableLabels controls/unless">
                    <div class="#if ../fullWidthcol-md-16elsecol-md-8/if">
                        #with _constructStageList 1='rows' 2=_id 3='content'
                            > UI.contentBlock stage=this stageContext=../../context
                        /with
                    </div>
                </div>
            /each
        </div>
    /with
/with
</template>

这可行，但是：

组件本身过于复杂，大量的上下文切换使得理解组件成为一个活生生的地狱 多次更新打破了这种模式

那么有人尝试过这样做吗？和/或找到适用于此的模式？

【问题讨论】：

确实是一个非常好的问题！

你考虑过使用 react 吗？

【参考方案1】：

有一个正在开发的项目可以做到这一点：UI Harness，来自Respond.ly 的创建者。不过目前是私人的。您可以通过Phil Cockfield’s talk at the July 2014 Devshop (YouTube link) 了解它。如果您不想等待 UI Harness 的发布，您应该从演讲视频中了解如何构建自己的组件。

【讨论】：

github 上的项目已经开放，它只是关闭的 .com 站点 (github.com/Respondly/meteor-ui-harness) 但是这个解决方案虽然看起来很有希望，但并不是我想要的。