一种组件渲染方法及装置制造方法及图纸

本发明专利技术公开了一种组件渲染方法及装置，涉及组件渲染技术领域，主要目的在于降低组件渲染出错误尺寸的概率；主要技术方案包括：在前端框架下，与代码编辑器相应的组件加载代码编辑器时，检测所述组件的边框元素的当前显示尺寸是否达到第一预设尺寸；若达到所述第一预设尺寸，组件渲染所述代码编辑器，得到所述代码编辑器对应的编辑界面。

【技术实现步骤摘要】
一种组件渲染方法及装置
本专利技术涉及组件渲染
，特别是涉及一种组件渲染方法及装置。
技术介绍
代码编辑器由于具有代码编辑功能，因此代码编辑器通常在各种前端框架下配合程序开发使用。目前，前端框架下的组件一旦加载代码编辑器，则组件立即对代码编辑器进行渲染。在组件立即对代码编辑器进行渲染时，若组件的边框元素尚处于未显示状态，则组件渲染代码编辑器后，得到的代码编辑器的编辑界面为一个点，由于代码编辑器只渲染一次，当组件切换为显示状态时，用户观看到的编辑界面仍仅是一个点，此时编辑界面的尺寸异常，导致用户无法正常使用代码编辑器。
技术实现思路
有鉴于此，本专利技术提出了一种组件渲染方法及装置，主要目的在于降低组件被渲染出错误尺寸的概率。第一方面，本专利技术提供了一种组件渲染方法，所述方法包括：在前端框架下，与代码编辑器相应的组件加载代码编辑器时，检测所述组件的边框元素的当前显示尺寸是否达到第一预设尺寸；若达到所述第一预设尺寸，渲染所述代码编辑器，得到所述代码编辑器对应的编辑界面。第二方面，本专利技术提供了一种组件渲染装置，所述装置包括：检测单元，用于在前端框架下与代码编辑器相应的组件加载代码编辑器时，检测所述组件的边框元素的当前显示尺寸是否达到第一预设尺寸；若达到所述第一预设尺寸，触发渲染单元；渲染单元，用于在所述检测单元的触发下，渲染所述代码编辑器，得到所述代码编辑器对应的编辑界面。第三方面，本专利技术提供了一种存储介质，其上存储有程序，该程序被处理器执行时实现第一方面中所述的组件渲染方法。第四方面，本专利技术提供了一种处理器，所述处理器用于运行程序，其中，所述程序运行时执行第一方面中所述的组件渲染方法。第五方面，本专利技术提供了一种设备，设备包括至少一个处理器、以及与处理器连接的至少一个存储器、总线；其中，处理器、存储器通过总线完成相互间的通信；处理器用于调用存储器中的程序指令，以执行第一方面中所述的组件渲染方法。借由上述技术方案，本专利技术提供的一种组件渲染方法及装置，首先在前端框架下与代码编辑器相应的组件加载代码编辑器时，检测组件的边框元素的当前显示尺寸是否达到预设尺寸。若检测出边框元素的当前显示尺寸达到预设的尺寸时，则渲染代码编辑器，得到代码编辑器对应的编辑界面供用户进行代码编辑。可见，本专利技术提供的方案中当与代码编辑器相应的组件加载代码编辑器时，并不立即对代码编辑器进行渲染，而是当组件的边框元素的显示尺寸达到预期的预设尺寸时才渲染，从而得到符合用户预期的编辑界面。因此，本专利技术提供的方案能够降低组件渲染出错误尺寸的概率。上述说明仅是本专利技术技术方案的概述，为了能够更清楚了解本专利技术的技术手段，而可依照说明书的内容予以实施，并且为了让本专利技术的上述和其它目的、特征和优点能够更明显易懂，以下特举本专利技术的具体实施方式。附图说明为了更清楚地说明本专利技术实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本专利技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。图1示出了本专利技术一个实施例提供的一种组件渲染方法的流程图；图2示出了本专利技术一个实施例提供的一种代码编辑器对应的编辑界面的示意图；图3示出了本专利技术另一个实施例提供的一种组件渲染方法的流程图；图4示出了本专利技术又一个实施例提供的一种组件渲染方法的流程图；图5示出了本专利技术一个实施例提供的一种组件渲染装置的结构示意图；图6示出了本专利技术另一个实施例提供的一种组件渲染装置的结构示意图；图7示出了本专利技术一个实施例提供的一种设备的结构示意图。具体实施方式下面将参照附图更加详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。如图1所示，本专利技术实施例提供了一种组件渲染方法，该方法主要包括：101、在前端框架下，与代码编辑器相应的组件加载代码编辑器时，检测所述组件的边框元素的当前显示尺寸是否达到第一预设尺寸；若达到所述第一预设尺寸，执行102。本实施例中所述的前端框架的具体类型可以基于业务要求确定，这里不作具体限定。可选的，前端框架至少包括：AngularJS(由Google维护的开源前端框架)、ReactJS(由Facebook研发的框架)、Bootstrap(github热门前端框架)、Fundation前端框架和VueJS前端开发框架。本实施例中所述的代码编辑器用于编辑代码，代码编辑器的具体类型可以基于业务要求确定，本实施例中不作具体限定。可选的，代码编辑器至少包括：Monacoeditor编辑器、Nuclide编辑器、Atom编辑器、SublimeText编辑器、VisualStudioCode编辑器、Vim编辑器、GNUEmacs编辑器、Spacemacs编辑器、DecoIDE编辑器、WebStorm编辑器和TextMate编辑器。代码编辑器能够在前端框架下为用户提供代码编辑界面，以便用户在前端框架下进行代码编辑工作。本实施例中，为了保证代码编辑器可以在前端框架下使用，则前端框架下需要部署有与代码编辑器相应的组件，以便利用组件加载代码编辑器，使得代码编辑器可以在前端框架下使用。在前端框架下不存在与代码编辑器相应的组件时，则基于前端框架的框架类型，封装出与代码编辑器相应的组件。具体的，封装组件的具体过程至少为：根据前端框架的框架类型(名称、通用方法等)定义组件构造器，声明组件要渲染的内容，然后将组件构造器注册到前端框架中，从而在前端框架下封装出代码编辑器对应的组件。需要说明的是，同一代码编辑器在不同前端框架下的组件不同。另外，为了在同一前端框架下可以使用多种代码编辑器，可以在该前端框架下部署不同代码编辑器对应的组件。本实施例中所述的组件中包括有边框元素，该边框元素的尺寸直接决定渲染代码编辑器后，得到代码编辑器对应的编辑界面的尺寸。需要说明的是，在组件加载代码编辑器之后，组件的边框元素的显示尺寸是随着时间推移而增大，直到增大到第二预设尺寸为止。其中，第二预设尺寸至少存在如下两种：第一种，用户最理想的编辑界面的尺寸。第二种，组件渲染代码编辑器时，边框元素增大到的显示尺寸。为了保证代码编辑器渲染后可以得到用户期望尺寸的编辑界面，则在前端框架下与代码编辑器相应的组件加载代码编辑器时，检测组件的边框元素的当前显示尺寸是否达到预设尺寸。下面对检测组件的边框元素的当前显示尺寸是否达到预设尺寸的方法进行说明，该方法至少包括如下两种：第一种，依据定时器设定的时间频率，检测所述组件的边框元素的当前显示尺寸是否达到预设尺寸。示例性的，定时器中设定的时间频率为0.25秒，则每隔0.25秒检测一次本文档来自技高网...

【技术保护点】
1.一种组件渲染方法，其特征在于，包括：/n在前端框架下，与代码编辑器相应的组件加载代码编辑器时，检测所述组件的边框元素的当前显示尺寸是否达到第一预设尺寸；/n若达到所述第一预设尺寸，渲染所述代码编辑器，得到所述代码编辑器对应的编辑界面。/n

【技术特征摘要】
1.一种组件渲染方法，其特征在于，包括：
在前端框架下，与代码编辑器相应的组件加载代码编辑器时，检测所述组件的边框元素的当前显示尺寸是否达到第一预设尺寸；
若达到所述第一预设尺寸，渲染所述代码编辑器，得到所述代码编辑器对应的编辑界面。


2.根据权利要求1所述的方法，其特征在于，在前端框架下，与代码编辑器相应的组件加载代码编辑器时，所述边框元素的显示尺寸随着时间推移而增大，且直到增大到第二预设尺寸为止。


3.根据权利要求1所述的方法，其特征在于，所述检测所述组件的边框元素的当前显示尺寸是否达到第一预设尺寸，包括：
依据定时器设定的时间频率，检测所述组件的边框元素的当前显示尺寸是否达到第一预设尺寸。


4.根据权利要求3所述的方法，其特征在于，所述方法还包括：
若检测出所述组件的边框元素的当前显示尺寸达到第一预设尺寸，销毁所述定时器。


5.根据权利要求1所述的方法，其特征在于，所述检测所述组件的边框元素的当前显示尺寸是否达到第一预设尺寸，包括：
依据预设的次数，有限次检测所述组件的边框元素的当前显示尺寸是否达到第一预设尺寸。<...

【专利技术属性】
技术研发人员：何忠杰，
申请(专利权)人：北京国双科技有限公司，
类型：发明
国别省市：北京;11