一种组件渲染方法及装置

技术领域

本发明涉及组件渲染技术领域，特别是涉及一种组件渲染方法及装置。

背景技术

代码编辑器由于具有代码编辑功能，因此代码编辑器通常在各种前端框架下配合程序开发使用。

目前，前端框架下的组件一旦加载代码编辑器，则组件立即对代码编辑器进行渲染。在组件立即对代码编辑器进行渲染时，若组件的边框元素尚处于未显示状态，则组件渲染代码编辑器后，得到的代码编辑器的编辑界面为一个点，由于代码编辑器只渲染一次，当组件切换为显示状态时，用户观看到的编辑界面仍仅是一个点，此时编辑界面的尺寸异常，导致用户无法正常使用代码编辑器。

发明内容

有鉴于此，本发明提出了一种组件渲染方法及装置，主要目的在于降低组件被渲染出错误尺寸的概率。

第一方面，本发明提供了一种组件渲染方法，所述方法包括：

在前端框架下，与代码编辑器相应的组件加载代码编辑器时，检测所述组件的边框元素的当前显示尺寸是否达到第一预设尺寸；

若达到所述第一预设尺寸，渲染所述代码编辑器，得到所述代码编辑器对应的编辑界面。

第二方面，本发明提供了一种组件渲染装置，所述装置包括：

检测单元，用于在前端框架下与代码编辑器相应的组件加载代码编辑器时，检测所述组件的边框元素的当前显示尺寸是否达到第一预设尺寸；若达到所述第一预设尺寸，触发渲染单元；

渲染单元，用于在所述检测单元的触发下，渲染所述代码编辑器，得到所述代码编辑器对应的编辑界面。

第三方面，本发明提供了一种存储介质，其上存储有程序，该程序被处理器执行时实现第一方面中所述的组件渲染方法。

第四方面，本发明提供了一种处理器，所述处理器用于运行程序，其中，所述程序运行时执行第一方面中所述的组件渲染方法。

第五方面，本发明提供了一种设备，设备包括至少一个处理器、以及与处理器连接的至少一个存储器、总线；其中，处理器、存储器通过总线完成相互间的通信；处理器用于调用存储器中的程序指令，以执行第一方面中所述的组件渲染方法。

借由上述技术方案，本发明提供的一种组件渲染方法及装置，首先在前端框架下与代码编辑器相应的组件加载代码编辑器时，检测组件的边框元素的当前显示尺寸是否达到预设尺寸。若检测出边框元素的当前显示尺寸达到预设的尺寸时，则渲染代码编辑器，得到代码编辑器对应的编辑界面供用户进行代码编辑。可见，本发明提供的方案中当与代码编辑器相应的组件加载代码编辑器时，并不立即对代码编辑器进行渲染，而是当组件的边框元素的显示尺寸达到预期的预设尺寸时才渲染，从而得到符合用户预期的编辑界面。因此，本发明提供的方案能够降低组件渲染出错误尺寸的概率。

上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1示出了本发明一个实施例提供的一种组件渲染方法的流程图；

图2示出了本发明一个实施例提供的一种代码编辑器对应的编辑界面的示意图；

图3示出了本发明另一个实施例提供的一种组件渲染方法的流程图；

图4示出了本发明又一个实施例提供的一种组件渲染方法的流程图；

图5示出了本发明一个实施例提供的一种组件渲染装置的结构示意图；

图6示出了本发明另一个实施例提供的一种组件渲染装置的结构示意图；

图7示出了本发明一个实施例提供的一种设备的结构示意图。

具体实施方式

下面将参照附图更加详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。

如图1所示，本发明实施例提供了一种组件渲染方法，该方法主要包括：

101、在前端框架下，与代码编辑器相应的组件加载代码编辑器时，检测所述组件的边框元素的当前显示尺寸是否达到第一预设尺寸；若达到所述第一预设尺寸，执行102。

本实施例中所述的前端框架的具体类型可以基于业务要求确定，这里不作具体限定。可选的，前端框架至少包括：AngularJS(由Google维护的开源前端框架)、ReactJS(由Facebook研发的框架)、Bootstrap(github热门前端框架)、Fundation前端框架和VueJS前端开发框架。本实施例中所述的代码编辑器用于编辑代码，代码编辑器的具体类型可以基于业务要求确定，本实施例中不作具体限定。可选的，代码编辑器至少包括：Monaco editor编辑器、Nuclide编辑器、Atom编辑器、Sublime Text编辑器、Visual Studio Code编辑器、Vim编辑器、GNU Emacs编辑器、Spacemacs编辑器、Deco IDE编辑器、WebStorm编辑器和TextMate编辑器。代码编辑器能够在前端框架下为用户提供代码编辑界面，以便用户在前端框架下进行代码编辑工作。

本实施例中，为了保证代码编辑器可以在前端框架下使用，则前端框架下需要部署有与代码编辑器相应的组件，以便利用组件加载代码编辑器，使得代码编辑器可以在前端框架下使用。在前端框架下不存在与代码编辑器相应的组件时，则基于前端框架的框架类型，封装出与代码编辑器相应的组件。具体的，封装组件的具体过程至少为：根据前端框架的框架类型(名称、通用方法等)定义组件构造器，声明组件要渲染的内容，然后将组件构造器注册到前端框架中，从而在前端框架下封装出代码编辑器对应的组件。需要说明的是，同一代码编辑器在不同前端框架下的组件不同。另外，为了在同一前端框架下可以使用多种代码编辑器，可以在该前端框架下部署不同代码编辑器对应的组件。

本实施例中所述的组件中包括有边框元素，该边框元素的尺寸直接决定渲染代码编辑器后，得到代码编辑器对应的编辑界面的尺寸。需要说明的是，在组件加载代码编辑器之后，组件的边框元素的显示尺寸是随着时间推移而增大，直到增大到第二预设尺寸为止。其中，第二预设尺寸至少存在如下两种：第一种，用户最理想的编辑界面的尺寸。第二种，组件渲染代码编辑器时，边框元素增大到的显示尺寸。为了保证代码编辑器渲染后可以得到用户期望尺寸的编辑界面，则在前端框架下与代码编辑器相应的组件加载代码编辑器时，检测组件的边框元素的当前显示尺寸是否达到预设尺寸。

下面对检测组件的边框元素的当前显示尺寸是否达到预设尺寸的方法进行说明，该方法至少包括如下两种：

第一种，依据定时器设定的时间频率，检测所述组件的边框元素的当前显示尺寸是否达到预设尺寸。

示例性的，定时器中设定的时间频率为0.25秒，则每隔0.25秒检测一次边框元素的当前显示尺寸是否达到预设尺寸。

具体的，为了避免在组件出现边框元素的尺寸不能达到预设尺寸的问题时，无休止的执行“检测所述组件的边框元素的当前显示尺寸是否达到预设尺寸”，则基于组件加载到代码编辑器的时间点和预设时长，设定报警时间点；若检测出当前时间点为报警时间点，且未渲染所述代码编辑器时，报警。

第二种，依据预设的次数，有限次检测所述组件的边框元素的当前显示尺寸是否达到预设尺寸。

具体的，为了避免在组件出现边框元素的尺寸不能达到预设尺寸的问题时，无休止的执行“检测所述组件的边框元素的当前显示尺寸是否达到预设尺寸”，则设定检测的次数，仅对边框元素的显示尺寸进行有限次的检测。

示例性，预设次数为5次，若5次或5次内检测出组件的边框元素的显示尺寸达到预设尺寸，则渲染代码编辑器。若第5次仍检测出组件的边框元素的显示尺寸未达到预设尺寸，则停止检测，说明组件或代码编辑器可能存在问题，需要进行相应的异常处理。需要说明的是，5次检测可以以相同的时间间隔执行，也可以以不同的时间间隔执行。

本实施例中所述的第一预设尺寸的含义至少包括如下两种：

第一种，第一预设尺寸为用户最小可接受的编辑界面的尺寸。

具体的，第一预设尺寸为用户最小可接受的编辑界面的尺寸，则当检测出组件的边框元素的当前显示尺寸达到第一预设尺寸时，边框元素的尺寸仍然在随着时间推移增大，因此，渲染代码编辑器得到的编辑界面的尺寸可能为第一预设尺寸也可能是大于第一预设尺寸的尺寸。

具体的，边框元素的显示尺寸随着时间推移而增大，且直到增大到第二预设尺寸为止。这里所述的第二预设尺寸与第一预设尺寸不同，该第二预设尺寸为用户最理想的编辑界面的尺寸。若当检测出组件的边框元素的当前显示尺寸达到第一预设尺寸时，边框元素的尺寸仍然在随着时间推移增大，若未及时渲染，则边框元素的尺寸也仅能增大致第二预设尺寸为止，这里第二预设尺寸大于等于第一预设尺寸。

第二种，第一预设尺寸为用户最理想的编辑界面的尺寸。

具体的，第一预设尺寸为用户最理想的编辑界面的尺寸，则当检测出组件的边框元素的当前显示尺寸达到第一预设尺寸时，边框元素的尺寸不再随着时间推移增大，因此，渲染代码编辑器得到的编辑界面的尺寸为第一预设尺寸。

具体的，边框元素的显示尺寸随着时间推移而增大，且直到增大到第二预设尺寸为止。这里所述的第二预设尺寸与第一预设尺寸相同，该第二预设尺寸为用户最理想的编辑界面的尺寸。

102、渲染所述代码编辑器，得到所述代码编辑器对应的编辑界面。

本实施例中，渲染代码编辑器的方法至少包括：调用与组件相应的渲染方法，根据组件的边框元素的当前显示尺寸，渲染出代码编辑器对应的编辑界面。

控制组件渲染代码编辑器的还可以是与检测组件边框元素当前显示尺寸步骤相同的控制器，当检测到组件的边框元素的当前显示尺寸达到第一预设尺寸时，控制器控制组件开始渲染代码编辑器。

示例性的，组件的边框元素的当前显示尺寸为“长度10和宽度5”，则渲染出如图2所示的代码编辑器对应的编辑界面。图2中的10A则为编辑界面对应的区域。由于是当组件的边框元素的显示尺寸达到预期的预设尺寸时才渲染代码编辑器，因此可以得到符合用户预期尺寸的编辑界面。

本发明实施例提供的组件渲染方法，首先在前端框架下与代码编辑器相应的组件加载代码编辑器时，检测组件的边框元素的当前显示尺寸是否达到预设尺寸。若检测出边框元素的当前显示尺寸达到预设的尺寸时，则渲染代码编辑器，得到代码编辑器对应的编辑界面供用户进行代码编辑。可见，本发明实施例提供的方案中当与代码编辑器相应的组件加载代码编辑器时，并不立即对代码编辑器进行渲染，而是当组件的边框元素的显示尺寸达到预期的预设尺寸时才渲染，从而得到符合用户预期的编辑界面。因此，本发明实施例提供的方案能够降低组件渲染出错误尺寸的概率。

进一步的，根据图1所示的方法，本发明的另一个实施例还提供了一种组件渲染方法，如图3所示，所述方法主要包括：

201、检测前端框架下，与代码编辑器相应的组件是否加载代码编辑器；若是，执行202和206；否则，继续执行本步骤。

具体的，在检测出与代码编辑器相应的组件未加载代码编辑器，则说明不需要对组件进行渲染。此时为了保证在组件加载代码编辑器时，可以及时对组件进行渲染处理，则需继续执行本步骤。

具体的，在检测出与代码编辑器相应的组件加载代码编辑器时，说明需要对代码编辑器进行渲染。此时为了保证代码编辑器进行渲染之后，能够得到满足用户尺寸需求的编辑界面，则执行202。

202、依据定时器设定的时间频率，检测所述组件的边框元素的当前显示尺寸是否达到第一预设尺寸，若达到所述第一预设尺寸，执行204；否则，执行203。

具体的，在检测出组件的边框元素的当前显示尺寸达到第一预设尺寸时，说明此时渲染代码编辑器，可以得到满足用户尺寸需求的编辑界面，则执行204。

具体的，在检测出组件的边框元素的当前显示尺寸未达到第一预设尺寸时，说明此时渲染代码编辑器，不能得到满足用户尺寸需求的编辑界面，则执行203。

203、拦截渲染所述代码编辑器，并结束当前流程。

具体的，为了防止渲染代码编辑器后得到错误尺寸的编辑界面，则拦截渲染代码编辑器，使得不能渲染代码编辑器。比如，阻拦调用渲染方法，或阻拦向组件发出渲染代码编辑器的指令。

204、销毁所述定时器。

具体的，为了避免定时器的空间占用或避免不同组件渲染的定时器的引用出现混乱，则需要销毁定时器。

205、渲染代码编辑器，得到所述代码编辑器对应的编辑界面，并结束当前流程。

具体的，本步骤的详解与上述的步骤102的详解基础相同，因此这里将不再赘述。

206、基于组件加载到代码编辑器的时间点和预设时长，设定报警时间点。若检测出当前时间点为所述报警时间点，且未渲染所述代码编辑器时，执行207；若检测出当前时间点未达到所述报警时间点，且未渲染所述代码编辑器时，执行202。

具体的，为了避免在组件出现边框元素的尺寸不能达到预设尺寸的问题时，无休止的执行“检测所述组件的边框元素的当前显示尺寸是否达到预设尺寸”，则在步骤201检测出与代码编辑器相应的组件加载代码编辑器时，需要基于组件加载到代码编辑器的时间点和预设时长，设定报警时间点。示例性的，组件加载到代码编辑器的时间点为“8:00”，预设时长为“1分钟”，则设定的报警时间点为“8:01”。

具体的，若检测出当前时间点为报警时间点，且组件并未渲染代码编辑器时，说明组件可能出现边框元素的尺寸不能达到预设尺寸的异常问题，此时需要进行针对异常问题的异常处理，则报警。报警的目的是为了提醒用户，组件或代码编辑器可能存在问题，代码编辑器的编辑界面不能被渲染到用户期望的尺寸，以便用户可以基于报警信息及时进行异常处理。具体的，报警的方式可以包括但不限于文本报警或声音报警。另外，需要说明的是，检测出当前时间点为报警时间点，且未渲染代码编辑器时，停止检测组件的边框元素的当前显示尺寸是否达到第一预设尺寸。

具体的，若检测出当前时间点未达到报警时间点，且组件并未渲染代码编辑器时，说明检测组件的边框元素的显示尺寸的持续时长尚短，故继续执行步骤202。

207、报警。

进一步的，根据图1所示的方法，本发明的另一个实施例还提供了一种组件渲染方法，如图4所示，所述方法主要包括：

301、检测前端框架下与代码编辑器相应的组件是否加载代码编辑器；若是，执行302；否则，继续执行本步骤。

302、依据预设的次数，有限次检测所述组件的边框元素的当前显示尺寸是否达到第一预设尺寸，若达到所述第一预设尺寸，执行305；否则，执行303。

具体的，为了避免在组件出现边框元素的尺寸不能达到预设尺寸的问题时，无休止的执行“检测所述组件的边框元素的当前显示尺寸是否达到预设尺寸”，则设定检测的次数，仅对边框元素的显示尺寸进行有限次的检测。

303、拦截渲染所述代码编辑器，并结束当前流程。

304、判断检测所述组件的边框元素的当前显示尺寸的总次数是否小于预设的次数；若是，执行302；否则，执行306。

具体的，在判断出判断检测组件的边框元素的当前显示尺寸的总次数不小于预设的次数时，说明组件可能出现边框元素的尺寸不能达到预设尺寸的异常问题，此时需要进行针对异常问题的异常处理，则执行306。

具体的，在判断出判断检测组件的边框元素的当前显示尺寸的总次数小于预设的次数时，说明检测次数不够，则执行302。

305、渲染所述代码编辑器，得到所述代码编辑器对应的编辑界面，并结束当前流程。

306、报警。

进一步的，依据上述方法实施例，本发明的另一个实施例还提供了一种组件渲染装置，如图5所示，所述装置包括：

检测单元41，用于在前端框架下与代码编辑器相应的组件加载代码编辑器时，检测所述组件的边框元素的当前显示尺寸是否达到第一预设尺寸；若达到所述第一预设尺寸，触发渲染单元42；

渲染单元42，用于在所述检测单元41的触发下，渲染所述代码编辑器，得到所述代码编辑器对应的编辑界面。

本发明实施例提供的组件渲染装置，首先在前端框架下与代码编辑器相应的组件加载代码编辑器时，检测组件的边框元素的当前显示尺寸是否达到预设尺寸。若检测出边框元素的当前显示尺寸达到预设的尺寸时，则渲染代码编辑器，得到代码编辑器对应的编辑界面供用户进行代码编辑。可见，本发明实施例提供的方案中当与代码编辑器相应的组件加载代码编辑器时，组件并不立即对代码编辑器进行渲染，而是当组件的边框元素的显示尺寸达到预期的预设尺寸时才渲染，从而得到符合用户预期的编辑界面。因此，本发明实施例提供的方案能够降低组件渲染出错误尺寸的概率。

可选的，在前端框架下，与代码编辑器相应的组件加载代码编辑器时，所述边框元素的显示尺寸随着时间推移而增大，且直到增大到第二预设尺寸为止。

可选的，如图6所示，所述检测单元41包括：

第一检测模块411，用于依据定时器设定的时间频率，检测所述组件的边框元素的当前显示尺寸是否达到第一预设尺寸。

可选的，如图6所示，所述装置还包括：

销毁单元43，用于在所述检测单元41检测出所述组件的边框元素的当前显示尺寸达到第一预设尺寸，销毁所述定时器。

可选的，如图6所示，所述检测单元41包括：

第二检测模块412，用于依据预设的次数，有限次检测所述组件的边框元素的当前显示尺寸是否达到第一预设尺寸。

可选的，如图6所示，所述装置还包括：

拦截单元44，用于在所述检测单元41检测出所述边框元素的当前显示尺寸未达到所述第一预设尺寸，拦截渲染所述代码编辑器。

可选的，如图6所示，所述装置还包括：

确定单元45，用于基于所述组件加载到所述代码编辑器的时间点和预设时长，设定报警时间点；

报警单元46，用于若检测出当前时间点为所述确定单元45设定的所述报警时间点，且未渲染所述代码编辑器时，报警。

可选的，如图6所示，所述装置还包括：

封装单元47，用于基于所述前端框架的框架类型，封装出与所述代码编辑器相应的组件。

所述组件渲染装置包括处理器和存储器，上述检测单元、渲染单元、销毁单元、拦截单元、确定单元、报警单元和封装单元等均作为程序单元存储在存储器中，由处理器执行存储在存储器中的上述程序单元来实现相应的功能。

处理器中包含内核，由内核去存储器中调取相应的程序单元。内核可以设置一个或以上，通过调整内核参数来降低组件被渲染出错误尺寸的概率。

本发明实施例提供了一种存储介质，其上存储有程序，该程序被处理器执行时实现所述组件渲染方法。

本发明实施例提供了一种处理器，所述处理器用于运行程序，其中，所述程序运行时执行所述组件渲染方法。

本发明实施例提供了一种设备，如图7所示，设备包括至少一个处理器51、以及与处理器51连接的至少一个存储器52、总线53；其中，处理器51、存储器52通过总线53完成相互间的通信；处理器51用于调用存储器52中的程序指令，以执行上述的组件渲染方法。本文中的设备可以是服务器、PC、PAD、手机等。

本发明实施例还提供了一种计算机程序产品，当在数据处理设备上执行时，适于执行初始化有如下方法步骤的程序：

在前端框架下，与代码编辑器相应的组件加载代码编辑器时，检测所述组件的边框元素的当前显示尺寸是否达到预设尺寸；

若达到所述预设尺寸，渲染所述代码编辑器，得到所述代码编辑器对应的编辑界面。

可选的，所述边框元素的显示尺寸随着时间推移而增大，且直到增大到所述预设尺寸为止。

可选的，所述检测所述组件的边框元素的当前显示尺寸是否达到预设尺寸，包括：依据定时器设定的时间频率，检测所述组件的边框元素的当前显示尺寸是否达到预设尺寸。

可选的，所述方法还包括：若检测出所述组件的边框元素的当前显示尺寸达到预设尺寸，销毁所述定时器。

可选的，所述检测所述组件的边框元素的当前显示尺寸是否达到预设尺寸，包括：依据预设的次数，有限次检测所述组件的边框元素的当前显示尺寸是否达到预设尺寸。

可选的，所述方法还包括：若检测出所述边框元素的当前显示尺寸未达到所述预设尺寸，拦截渲染所述代码编辑器。

可选的，所述方法还包括：基于所述组件加载到所述代码编辑器的时间点和预设时长，设定报警时间点；若检测出当前时间点为所述报警时间点，且未渲染所述代码编辑器时，报警。

可选的，所述方法还包括：基于所述前端框架的框架类型，封装出与所述代码编辑器相应的组件。

本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

在一个典型的配置中，设备包括一个或多个处理器(CPU)、存储器和总线。设备还可以包括输入/输出接口、网络接口等。

存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)，存储器包括至少一个存储芯片。存储器是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括要素的过程、方法、商品或者设备中还存在另外的相同要素。

本领域技术人员应明白，本申请的实施例可提供为方法、系统或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

以上仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。