Rendering method and device for business component in page and business component

Abstract

The invention relates to the technical field of computers, and provides a rendering method and device for a business component in a page and the business component, and the rendering method comprises the following steps: obtaining a target business component; an instance reference of a target component instance to be introduced into the target business component is determined, the instance reference points to the target component instance, and the target component instance is obtained by instantiating a preset reusable component outside the view; and in the view, rendering the target component instance by referencing the instance reference. According to the method and the device, the problem of parameter transmission errors possibly caused by repeated parameter transmission due to repeated reference of the component instance can be solved, repeated reference and repeated parameter transmission of the component instance can be avoided, logic maintenance of the service component is facilitated, and the accuracy of service implementation and the development efficiency are improved.

Description

Technical Field

[0001] The present disclosure relates to the field of computer technology, and in particular to a method and device for rendering a business component in a page, and a business component. Background Art

[0002] In Web front-end development, a writing method that separates view, control, and style is generally adopted. For example, view can be implemented by Hyper Text Markup Language (HTML), control can be implemented by JavaScript language, and style can be implemented by Cascading Style Sheets (CSS).

[0003] In this 3-separated development structure, components are currently instantiated directly in the view, which requires that the configuration data of the control part must be synchronously passed to the view part; on the other hand, if the instance itself needs to be used in the control logic part, it is necessary to reversely reference the instance in the view. This implementation process makes the view and control mutually coupled. The view part needs to use control variables, and the control part needs to use references when controlling the component state. It is necessary to repeatedly reference component instances and pass parameters between modules. Summary of the invention

[0004] Due to the mutual coupling between the view and the control, the component instance needs to be repeatedly referenced and multiple parameter transfers occur. This is not convenient for the maintenance of business logic on the one hand, as references must be used to participate in the instantiation of components on both the view side and the control side. On the other hand, due to the multiple and repeated parameter transfers, the possibility of parameter transfer errors increases, which is not conducive to improving development efficiency. In view of this, the present disclosure provides a rendering method and device for business components in a page, and business components to at least solve or alleviate the above problems. The technical solution of the present disclosure is as follows:

[0005] According to a first aspect of the present disclosure, a method for rendering a business component in a page is provided, the rendering method comprising: obtaining a target business component, wherein the target business component comprises a view; determining an instance reference of a target component instance to be introduced into the target business component, wherein the instance reference points to the target component instance, and the target component instance is obtained by instantiating a preset reusable component outside the view; in the view, rendering the target component instance by referencing the instance reference.

[0006] As an example, the target business component also includes a controller, wherein the target component instance is obtained in the following manner: introducing the reusable component in the controller; creating parameters in the controller and passing in the properties of the reusable component to configure the properties of the target component instance; creating a listener in the controller and passing in the events of the reusable component to configure the events of the target component instance; instantiating the reusable component based on the properties of the target component instance and the events of the target component instance to obtain the target component instance.

[0007] As an example, the rendering method further includes: checking whether the parameters in the target component instance are consistent with the corresponding parameters in the reusable component; and / or checking whether the parameters in the target component instance conform to the parameter type constrained in the controller.

[0008] As an example, the rendering method also includes: in response to updating the state of the target component instance in the controller, in the view, updating the rendering of the target component instance by referencing the updated target component instance from the controller, wherein updating the state of the target component instance includes: modifying the component property value of the target component instance in the controller by directly calling the variable of the target component instance; and / or, adding or removing the listening event of the target component instance in the controller by modifying the listener of the target component instance.

[0009] As an example, the rendering method further includes: displaying the current state of the target component instance by calling the target component instance from the controller, wherein the current state of the target component instance includes properties, events and / or methods of the target component instance.

[0010] As an example, the rendering method further includes: extracting the code logic of the target component instance from the controller, and encapsulating the code logic into a reusable instance logic, wherein the reusable instance logic can be introduced into the controller of other business components.

[0011] As an example, the rendering method further includes: in the view, rendering another component instance instantiated in a controller of another business component by referring to the another component instance.

[0012] According to a second aspect of the present disclosure, a rendering device for a business component in a page is provided, the rendering device comprising: an acquisition unit, configured to acquire a target business component, wherein the target business component comprises a view; a determination unit, configured to determine an instance reference of a target component instance to be introduced into the target business component, wherein the instance reference points to the target component instance, and the target component instance is obtained by instantiating a preset reusable component outside the view; and a rendering unit, configured to render the target component instance in the view by referring to the instance reference.

[0013] According to a third aspect of the present disclosure, a computing device is provided, comprising: a processor; and a memory for storing computer executable instructions, wherein the computer executable instructions, when executed by the processor, prompt the processor to execute the method for rendering business components in a page according to the present disclosure.

[0014] According to a fourth aspect of the present disclosure, a computer-readable storage medium is provided. When instructions in the computer-readable storage medium are executed by a processor of a computing device, the computing device is enabled to execute the method for rendering business components in a page according to the present disclosure.

[0015] According to a fifth aspect of the present disclosure, a computer program product is provided, which includes computer executable instructions, and when the computer executable instructions are executed by at least one processor, the method for rendering business components in a page according to the present disclosure is implemented.

[0016] The technical solution provided by the present disclosure brings at least the following beneficial effects:

[0017] By adopting the component rendering scheme disclosed in the present invention, the preset reusable component can be instantiated outside the view of the created business component to obtain the target component instance, and the rendering of the target component instance is realized by referencing the instance reference of the target component instance in the view. In this way, the component instantiation process can be realized outside the view, and the view can directly reference the instantiated component instance without realizing the instantiation in the view, and without passing the configuration data of the instance to the view. By decoupling the view from the component instantiation, the repeated reference of the component instance and multiple parameter passing are avoided, which facilitates the logical maintenance of the business component and improves the accuracy of business implementation and development efficiency.

[0018] It is to be understood that the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the present disclosure. BRIEF DESCRIPTION OF THE DRAWINGS

[0019] The drawings herein are incorporated into and constitute a part of the specification, illustrate embodiments consistent with the present disclosure, and together with the description are used to explain the principles of the present disclosure, and do not constitute improper limitations on the present disclosure.

[0020] Figure 1 is a schematic block diagram of a component instantiation scheme according to the related art.

[0021] Figure 2 is a schematic flowchart of a method for rendering a business component in a page according to an exemplary embodiment of the present disclosure.

[0022] Figure 3 It is a schematic flowchart of the steps of instantiating a reusable component in a method for rendering a business component in a page according to an exemplary embodiment of the present disclosure.

[0023] Figure 4 It is a schematic block diagram of a method for rendering a business component in a page according to an exemplary embodiment of the present disclosure.

[0024] Figure 5 It is a schematic block diagram of a rendering device for a business component in a page according to an exemplary embodiment of the present disclosure.

[0025] Figure 6 is a block diagram of a computing device according to an exemplary embodiment of the present disclosure. DETAILED DESCRIPTION

[0026] In order to enable ordinary persons in the art to better understand the technical solutions of the present disclosure, the present application will clearly and completely describe the technical solutions in the embodiments of the present disclosure in conjunction with the accompanying drawings.

[0027] It should be noted that the terms "first", "second", etc. in the specification and claims of the present disclosure and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchanged where appropriate, so that the embodiments of the present disclosure described herein can be implemented in an order other than those illustrated or described herein. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with the present disclosure. Instead, they are merely examples of devices and methods consistent with some aspects of the present disclosure as detailed in the appended claims.

[0028] It should be noted that the phrase "at least one of the items" in the present disclosure includes three types of parallel situations: "any one of the items", "a combination of any number of the items", and "all of the items". For example, "including at least one of A and B" includes the following three parallel situations: (1) including A; (2) including B; (3) including A and B. Another example is "executing at least one of step 1 and step 2" which means the following three parallel situations: (1) executing step 1; (2) executing step 2; (3) executing step 1 and step 2.

[0029] As mentioned earlier, during the front-end development of business components, components are instantiated directly in the view, causing component instances to be repeatedly referenced between modules and requiring multiple parameter transfers, making it inconvenient to maintain business logic and potentially causing parameter transfer errors.

[0030] Specifically, starting with the tool library represented by jQuery, as the front-end applications become more complex, large-scale and engineered, more and more work focuses on control logic based on languages ​​such as JavaScript, and this language-based code separation is becoming increasingly difficult to maintain. Subsequently, with the emergence of node.js files, front-end module loading solutions and engineering packaging and preprocessing tools have also flourished. Front-end module loading solutions include, for example, Asynchronous Module Definition (AMD), CommonJS standard, Universal Module Definition (UMD), ECMA Script Module (ES Module), etc. Engineering packaging and preprocessing tools include, for example, Webpack module packager, Rollup module packager, Vite front-end building tool, etc. Here, each file can form a module with its own scope, and can only expose specific variables and functions to the outside.

[0031] In the development of such front-end technology, the idea of ​​view componentization is one of the most important links. Based on the idea of ​​page componentization development, HTML, JavaScript, and CSS can be combined into a small piece. The isolation of components can be used to prevent mutual influence, achieve decoupling and reuse. In front-end development, front-end frameworks such as Angular, React, and Vue all use componentization solutions to split code and combine businesses.

[0032] However, these technologies are consistent in the use of component instantiation, which is to implement component instantiation by initializing the component and binding and referencing related states in the view part.

[0033] Specifically, Figure 1 The following shows an example of component instantiation in front-end frameworks such as Angular, React, and Vue. Figure 1 As shown, in step 110, a reusable component in the project can be created through the scheme defined by the framework, and in step 120, a business component can be created based on the reusable component. In step 130, the reusable component can be instantiated directly in the view part in the business component. Here, a binding variable for storing instance properties and events is created in the control part. The binding variable needs to be bound to the component instance. In step 140, the binding variable needs to be referenced in the view and the component instance is bound, and in step 150, a reference to the component instance to the variable in the controller needs to be created. If the properties and events of the component instance are modified, in step 160, it needs to be achieved by operating the variable. If the internal properties of the component instance are called or modified, in step 170, it needs to be achieved by operating the reference variable.

[0034] In such an instantiation scheme, the view and the control are coupled with each other, and there are repeated references between the view part and the control component. It is also inconvenient in operation, and variables need to be created multiple times for transfer and reference. In addition, since the component instance is strongly bound to the view, it cannot be conveniently transferred and used across components.

[0035] In addition, when using a programming language such as TypeScript, during the instantiation process, it is not convenient to effectively constrain the attributes and event types in the view, and when referencing in reverse, a second declaration of the generic reference is required.

[0036] In view of the above, exemplary embodiments of the present disclosure propose a method for rendering a business component in a page, an apparatus for rendering a business component in a page, a business component, a computing device, a computer-readable storage medium, and a computer program product, which can solve or at least alleviate the above problems.

[0037] In a first aspect of an exemplary embodiment of the present disclosure, a method for rendering a business component in a page is provided. The method can be applied to any page generation scenario or page rendering scenario. An example implementation scenario of the method for rendering a business component in a page according to an exemplary embodiment of the present disclosure is given below.

[0038] The execution subject of the method can be any type of computing device that can perform rendering of business components in a page. For example, the computing device can obtain a target business component, wherein the target business component includes a view. The computing device can determine an instance reference of a target component instance to be introduced into the target business component, wherein the instance reference points to the target component instance, and the target component instance is obtained by instantiating a preset reusable component outside the view. The computing device can also render the target component instance in the view by referencing the instance reference.

[0039] The computing device may be, but is not limited to, a desktop computer, a laptop computer, a tablet computer, a personal digital assistant, a smart phone, or other device capable of performing component rendering. However, the implementation scenario of the above method is only an example scenario, and the component rendering method according to the exemplary embodiment of the present disclosure may also be applied to other application scenarios, for example, a user may request a server to generate a page through a network at a user terminal (e.g., a mobile phone, a desktop computer, a tablet computer, etc.), and the server may render the business components in the page by executing the component rendering method according to the exemplary embodiment of the present disclosure, and here, the server may be an independent server, a server cluster, a cloud computing platform, or a virtualization center.

[0040] The following will refer to Figures 2 to 4 An example of a method for rendering a business component in a page according to an embodiment of the present disclosure is described. Figure 2 As shown, the rendering method may include the following steps:

[0041] In step 210, a target business component may be obtained.

[0042] Specifically, the target business component can be a component used to constitute the functions and content of a page. In Web development, a page (also called a "web page") can usually include multiple business components, each of which is responsible for handling specific functions or displaying specific content. Business components can encapsulate code that implements specific business logic, and some business logic can be triggered when a user interacts with a web page.

[0043] The page may be, for example, but not limited to, a page in a public network update platform, an enterprise update management system, a user management platform, etc., and the business component may be, for example, but not limited to, a work task management component, a user information management component, a resource planning component, a report and analysis component, etc. The embodiments of the present disclosure have no particular restrictions on the type, function, and content of the page and the business component, and any front-end development project may be used.

[0044] The target business component may include views and controllers. The view may be the part visible to the user in the user interface development. For front-end development, it generally refers to HTML, which is a standard markup language for creating web pages. The view is used to display data and information of the business component to the user, which may be, for example, but not limited to, text, images, tables, charts, etc. The view may also receive user interaction on the page, such as clicking a button, filling out a form, selecting an option, etc.

[0045] Controllers can be used to control the flow of data to model objects and update views when data changes. For example, user interaction on a page may cause component states to change, triggering a view update. Controllers can separate views from models, and can correspond to JavaScript and TypeScript language logic control, for example. JavaScript is a high-level, interpreted programming language used by the vast majority of websites in the world and supported by the world's major browsers. TypeScript is designed for developing large applications and is a superset of JavaScript, where the TypeScript language can be translated into the JavaScript language.

[0046] In step 210, in one example, the target business component may be an existing or created business component, and the business component may be directly obtained to introduce the target component instance in subsequent operations. In another example, the target business component may also be created in this step, for example, Figure 4 As shown, the target business component Bar can be created based on the reusable component Foo.

[0047] In step 220, an instance reference of a target component instance to be introduced into a target business component may be determined.

[0048] Here, the instance reference may point to a target component instance, and the target component instance may be obtained by instantiating a preset reusable component outside the view.

[0049] Specifically, the outside of the view can be the part of the target business component other than the view, such as the controller of the target business component; it can also be a location outside the target business component, such as another business component or a separately stored JavaScript (js) file or TypeScript (ts) file. Whether in the controller or outside the target business component, when the target component instance is obtained, the corresponding instance reference can be determined, so that the target component instance can be accessed by referencing the instance reference.

[0050] Reusable components can be pre-created in the current page development project through the scheme defined by the framework. Reusable components can be extracted and merged by repeating codes. They can be reused and are located at the bottom of the framework. Other functions are dependent on components and can be used by different functions with strong independence. For example, Figure 4 In step 410, a reusable component Foo may be created (with reference to the Vue template syntax and single-file component specification), which may have attributes width and modalContent, events show and close, internal variables isShow and modelContentClickTimes, and internal methods showModal and closeModal.

[0051] As an example, the reusable component Foo can be implemented in a xue file, for example, a file "Foo.xue" can be generated. An example of a "Foo.xue" file is given below.

[0052] For example, the file can be displayed as a pop-up prompt dialog box, including prompt text related to the reusable component Foo, wherein a button can be rendered, such as rendering a "button" element, and a prompt "Show Modal" can be displayed on the button, and a click event can be listened to through "@click", for example.

[0053] The above process can be performed in the controller " <script>< / script> " is implemented in. Specifically, in response to the current button being clicked, the show Modal function can be executed. The showModal function can be bound to the display button. When the button is clicked, a click event is triggered. The bound function showModal is executed, which can make isShow become true to display the dialog box. In the dialog box, a close button can also be displayed. When the close button is clicked, the close Modal function is executed to close it. The closeModal function can be bound to the close button, which can make isShow become false and send a close event to the outside.

[0054] In addition, the attribute "width" can be used to control the width of elements such as "div", that is, the width of the dialog box. You can also use "x-if" to control whether the element is displayed. The initial value of isShow can be "false", indicating that the dialog box is not displayed. Here, you can render the prompt text in the dialog box. For example, the text content is the value of modalContent, and when the value of modalContent is empty, the displayed text is "default content". Here, you can also add a click event listener "@click" to the text. When clicking the text, record the number of clicks on the dialog text. Each click can increase the counting variable "modelContentClickTimes" by 1.

[0055] In the controller, you can declare the parameters that need to be passed in externally when instantiating the component and the types of the corresponding parameters. For example, you can identify the numeric attribute width and the string attribute modalContent that need to be passed in externally. The value of the modalContent attribute is not required and can be empty. You can also define events that the component can send to the outside, such as show events and close events. The business component using the Foo component can listen to the show and close events of Foo. In the controller, you can listen to changes in the variable isShow. In response to changes in isShow, the dialog box is hidden or displayed, and the value of modelContentClickTimes is reset to 0.

[0056] It should be noted that, although for ease of understanding, the above-mentioned reusable component Foo will be used as an example to describe the embodiment, the embodiments of the present disclosure are not limited to the above-mentioned example, and the reusable component may also be other components, such as any existing reusable component.

[0057] The target component instance can be obtained by instantiating the reusable component, thereby obtaining the corresponding instance reference.

[0058] As described above, the instantiation process can be completed outside the view. In one example, the reusable component can be instantiated in the controller of the target business component to obtain the target component instance. Figure 3 As shown, the target component instance can be obtained in the following ways:

[0059] In step 310, a reusable component may be introduced into a controller of a target business component.

[0060] In this step, the controller of the target business component can access the declaration of the reusable component and thus introduce the reusable component. Figure 4In step 420, a target business component Bar can be created, and a reusable component Foo can be introduced into the controller of the target business component Bar. For example, the controller of the target business component Bar can be implemented in a xue file, and the reusable component Foo can be introduced into the controller through "import FooXue from ′. / Foo.xue'", such as the Foo.xue file described above.

[0061] In step 320, the properties of the target component instance may be configured by creating parameters in the controller and passing in the properties of the reusable component.

[0062] In step 330, a listener may be created in the controller and the event of the reusable component may be passed in to configure the event of the target component instance.

[0063] Here, the reusable component can be converted into a class in a JavaScript language such as ECMAScript 2015, and the instantiation parameters can correspond to the properties and events of the component. The component instance is the corresponding class instance, thereby realizing the instantiation of the component.

[0064] Specifically, the parameters in the controller can assign values ​​to the properties of the reusable component. For example, taking the above-mentioned reusable component Foo as an example, the property value of its property width can be 500. The listener in the controller can be a component or object used to listen to and respond to events or state changes in the UI, which can be used to listen to component events. For example, the listener can listen to user behavior, such as clicking a button, submitting a form, moving the mouse, etc., and perform corresponding actions, such as displaying corresponding content in response to the user clicking the "Show" button.

[0065] Take the reusable component Foo as an example. Figure 4 As shown in step 430 in FIG. 1 , the Foo component can be instantiated in the controller to obtain a component instance foo1, and as Figure 4 As shown in step 440 in , the properties and events of the component instance foo1 can be directly configured in the controller. For example, in " <script>< / scipt>”控制器中，直接配置或者说传入组件实例foo1的属性width为500，即"width：500”；事件show可以通过参数对象中的监听器"on来传入，例如可以监听实例对外发出的事件show，以显示(show)预设内容(content)，例如可以写作"on:{show:(content)＝>{console.log('content',content)}”。

[0066] 此外，可以选择性地配置可复用组件Foo中的各属性或事件，例如，在上述示例中，属性width可以为必填属性，在创建时必须传入，而这里未传入可选参数modalContent。

[0067] 需要说明的是，配置组件实例的属性和事件的顺序可以是任意的，例如可以先执行上述步骤320、后执行步骤330，也可以先执行步骤330、后执行步骤320，或者二者可以同时执行。

[0068] 在步骤340，可以基于目标组件实例的属性和目标组件实例的事件，对可复用组件进行实例化，得到目标组件实例。

[0069] 在该步骤中，可以基于目标业务组件的控制器的语言规则，添加新对象并且通过上述配置的属性和事件完成组件实例化，以目标业务组件Bar和可复用组件Foo为例，可以在组件Bar的控制器中完成实例化，例如，可以通过方法new来实例化可复用组件Foo，具体地，可以通过"const foo1＝Fo oXue.new({width:500,on:{show:(content)＝>{console.log('content',conten t)},},})”，得到对组件Foo的组件实例foo1，其中，"{width:500,on:{show:(content)＝>{console.log('content',content)}”表示对实例的配置，已在上文中详细描述。

[0070] 通过图3所示的得到目标组件实例的方式，可以在创建实例的同时配置实例的属性和事件，可以尽量避免将实例化与参数绑定分开执行，而导致参数传递错误的问题。

[0071] 尽管上面描述了在目标业务组件的控制器中执行组件实例化的示例，但是本公开的实施例不限于此，在另一示例中，也可以在目标业务组件之外完成组件实例化，例如可以在外部JS文件或TS文件中预先编写组件实例化的代码内容，而在该步骤220中，可以直接获取对于该JS文件或TS文件的实例引用，通过这种方式，可以更好地进行跨组件间的实例传递，使得组件的实例化和渲染的过程不局限于当前的业务组件，提高组件实例的复用性，提高开发效率。

[0072] 返回参照图2，在步骤230，可以在视图中，通过引用实例引用，对目标组件实例进行渲染。

[0073] 在该步骤中，视图可以通过引用实例引用访问到目标组件实例，以对其进行布局渲染，从而实现业务组件的渲染和展示，由于在本公开的实施例中在控制器中进行了实例化，可以直接得到实例化引用，例如上述"foo1”，因此可以通过实例化引用指示渲染位置并进行渲染。例如，以图4中的步骤450为例，可以通过引用组件实例foo1对其进行渲染。

[0074] 作为示例，视图可以通过以下方式中的任意一种引用目标组件实例：通过可复用组件的名称引用目标组件实例；通过目标业务组件所属框架内的统一名称引用目标组件实例；直接引用目标组件实例。

[0075] 例如，在第一种方式中，元素名称可以为组件名"Foo”，固定ref指向"foo1”，具体地，可以通过"<Foo ref＝"foo1">< / Foo>”实现引用，其中，"Foo ref＝"foo1"”表示通过可复用组件的名称"Foo”引用实例foo1；在第二种方式中，元素名称可以固定为"X ref”指向"foo1”，具体地，可以通过"<Xref＝"foo1">< / X>”实现引用，其中，"X ref＝"foo1"”通过目标业务组件所属框架内的统一名称"X”引用实例foo1，这里，统一名称可以根据实际需要来设置，"X”仅为示例；在第三种方式中，可以直接使用实例化引用名称(例如首字母可以大写)作为元素名称，例如可以通过"<Foo1>< / Foo1>”直接引用实例foo1。

[0076] 上面参照图2描述了根据本公开的实施例的业务组件的渲染方法，其提供了一种前端在非视图中进行组件实例化的方案，组件实例化的过程可以在视图之外实现，视图可以直接引用实例化之后的组件实例，避免组件实例的反复引用和多次参数传递，便于进行业务组件的逻辑维护，提高业务实现的准确性和开发效率。

[0077] 此外，根据本公开的实施例，在目标业务组件的控制器中进行组件实例化的示例中，还可以在控制器中对组件实例的参数正确性进行检查。

[0078] 作为示例，根据本公开的实施例的渲染方法还可以包括：检查目标组件实例中的参数与可复用组件中的相应参数是否一致；和 / 或，检查目标组件实例中的参数是否符合控制器中约束的参数类型。

[0079] 具体来说，一方面，在控制器中配置组件实例的参数时，无论是在初始配置时，还是在修改配置时，均可以将配置好的参数与所引入的可复用附件的参数进行比较，从而判断传入的参数是否正确。

[0080] 另一方面，由于组件实例化在控制器中实现，因此，在创建时可以直接约束绑定属性和事件的类型，组件实例也直接拥有完整的类型声明。具体来说，可以基于控制器自身的约束规则来对组件实例的参数类型进行约束，从而可以通过检查参数类型来确保传入的参数的正确性。例如，以上述可复用组件Foo为例，属性width可以被约束为number类型，因此在控制器中实例化时，可以直接约束该属性的参数类型，提高代码的类型安全性，减少运行错误。

[0081] 在视图中实现实例化的方案中，由于实例化的位置在视图中，而属性和事件等参数配置在控制器中，这使得难以基于控制器本身的代码逻辑来检查参数的正确性，而在控制器中实现实例化可以更便于管理和检查参数，确保参数的正确性。

[0082] 此外，根据本公开的实施例，在目标业务组件的控制器中进行组件实例化的示例中，还可以在控制器中修改组件实例的状态。

[0083] 作为示例，根据本公开的实施例的渲染方法还可以包括：响应于在控制器中更新目标组件实例的状态，在目标业务组件的视图中，通过从控制器中引用更新后的目标组件实例，更新对组件实例的渲染。

[0084] 这里，更新目标组件实例的状态可以包括：通过直接调用目标组件实例的变量，在控制器中修改目标组件实例的组件属性值；和 / 或，通过修改目标组件实例的监听器，在控制器中新增或移除目标组件实例的监听事件。

[0085] 如图4中的步骤460所示，以上述组件实例foo1为例，在业务组件Bar的控制器中，可以直接通过组件实例foo1修改组件的属性和事件。例如，可以通过变量"prop”修改传入的属性，通过监听器"on”和"off”新增或移除监听事件。作为示例，如果在组件初始化或者调用变量"prop”传入可响应数据时，组件内可以依据响应数据实时更新，以使得视图可以响应于控制器中实例状态的更新而更新渲染的内容。

[0086] 作为示例，可以通过实例化引用foo1直接修改参数，例如可以通过"foo1.prop('width',600)”将属性width的属性值修改为600，可以修改可选参数"modalContent”的值为"自定义提示内容”，此外，还可以定时修改参数，例如可以在若干秒(例如5秒)后将参数"modalContent”的值为"新的自定义提示内容”。

[0087] 此外，例如还可以声明onClose函数，并且在执行函数时打印事件上报的event参数，其中，可以通过实例化引用foo1开启监听事件，例如在收到close事件时执行onClose函数；或者可以通过实例化引用foo1停止监听close事件，具体地，可以通过"foo1.on('close',onClose)”利用监听器"on”新增对事件"close”的监听，可以通过"foo1.off('close',onClose)”利用监听器"off”移除对事件"close”的监听。

[0088] 通过上述方式，由于在控制器中创建实例时自然得到变量引用，因此可以在控制器中直接修改组件实例的属性参数、事件和读取组件内部状态和方法，在前端视图中可以直接更新组件实例的渲染，由于视图仅需要实例引用，因此在控制器中更新参数后，视图中可以相应地更新相应组件实例的渲染，而无需在视图中二次引用，便于业务组件的维护和修改。

[0089] 此外，根据本公开的实施例，在目标业务组件的控制器中进行组件实例化的示例中，还可以在控制器中展示和查看组件实例的当前状态。

[0090] 作为示例，根据本公开的实施例的渲染方法还可以包括：通过从控制器中调用目标组件实例，展示目标组件实例的当前状态，其中，目标组件实例的当前状态包括目标组件实例的属性、事件和 / 或方法。

[0091] 以上述组件实例foo1为例，如图4中的步骤460所示，在业务组件Bar的控制器中，可以通过组件实例foo1直接调用组件类型变量和方法，查看实例的当前状态，例如，可以通过实例化引用foo1获取Foo组件内部的变量isShow的值，具体地，可以通过"constisShowCopy＝foo1.isShow”调用组件类型变量"isShow”，可以通过"foo1.showModal()”调用组件的内部方法"showModal”函数。

[0092] 通过上述方式，可以在控制器中直接调用组件实例，便于随时查看组件实例的当前状态。

[0093] 此外，根据本公开的实施例，在目标业务组件的控制器中进行组件实例化的示例中，还可以对实例化后的组件实例进行复用。下面给出实现组件实例复用的两个示例。

[0094] 作为一示例，根据本公开的实施例的渲染方法还可以包括：从目标业务组件的控制器中提取目标组件实例的代码逻辑，并且将代码逻辑封装为可复用实例逻辑。

[0095] 这里，可复用实例逻辑能够在其他业务组件的控制器中引入。

[0096] 通过这种方式，封装的可复用实例逻辑可以作为单独的模块来使用，例如在同一页面项目的其他业务组件中需要实现同样的实例时，可以通过导入的方式，将该可复用实例逻辑导入到其他业务组件的控制器中，从而提高了多业务组件的开发效率，例如，在不同业务组件中可以包括相同的控件，例如"确认”按钮，可以将该按钮作为可复用实例，导入不同的组件中。在代码层面，以上述组件实例foo1的代码为例，可以提取目标组件实例的代码逻辑"const foo1＝FooXue.new()”并且存储到单独的js或者ts文件中，以封装为可复用实例逻辑文件，可同时供给多组件或文件，实现精确跨组件传递，而无需针对每个业务组件都重新执行实例化。

[0097] 作为另一示例，根据本公开的实施例的渲染方法还可以包括：在目标业务组件的视图中，通过引用在另一业务组件的控制器中实例化的另一组件实例，对另一组件实例进行渲染。

[0098] 具体来说，在同一页面项目中，如果不同业务组件具有相同的组件实例并且这些实例所执行的动作是一致的，则可以跨组件之间进行实例引用，不同视图可以引用同一控制器中的组件实例，当该组件实例的状态更新时，可以同步更新这些视图，而无需逐一修改各业务组件，多业务组件的运营和维护。

[0099] 根据本公开的实施例的页面中业务组件的渲染方法，可以通过在非视图创建组件实例的方式，解决组件实例化需要在模块间反复引用的问题，明确业务逻辑，简化实例传递、减少传参错误等。

[0100] 在本公开的示例性实施例的第二方面，提供一种组件渲染装置，如图5所示，组件渲染装置500可以包括获取单元510、确定单元520和渲染单元530。

[0101] 获取单元510被配置为获取目标业务组件，其中，目标业务组件包括视图。

[0102] 确定单元520被配置为确定待引入目标业务组件中的目标组件实例的实例引用，其中，实例引用指向目标组件实例，目标组件实例通过在视图的外部对预设的可复用组件进行实例化得到。

[0103] 渲染单元530被配置为在视图中，通过引用实例引用，对目标组件实例进行渲染。

[0104] 作为示例，目标业务组件还包括控制器，其中，通过以下方式得到目标组件实例：在控制器中引入可复用组件；通过在控制器中创建参数，传入可复用组件的属性，以配置目标组件实例的属性；通过在控制器中创建监听器，传入可复用组件的事件，以配置目标组件实例的事件；基于目标组件实例的属性和目标组件实例的事件，对可复用组件进行实例化，得到目标组件实例。

[0105] 作为示例，渲染装置还包括检查单元540，检查单元540被配置为：检查目标组件实例中的参数与可复用组件中的相应参数是否一致；和 / 或，检查目标组件实例中的参数是否符合控制器中约束的参数类型。

[0106] 作为示例，渲染装置还包括更新单元550，更新单元550被配置为：响应于在控制器中更新目标组件实例的状态，在视图中，通过从控制器中引用更新后的目标组件实例，更新对目标组件实例的渲染，其中，更新目标组件实例的状态包括：通过直接调用目标组件实例的变量，在控制器中修改目标组件实例的组件属性值；和 / 或，通过修改目标组件实例的监听器，在控制器中新增或移除目标组件实例的监听事件。

[0107] 作为示例，渲染装置还包括展示单元560，展示单元560被配置为：通过从控制器中调用目标组件实例，展示目标组件实例的当前状态，其中，目标组件实例的当前状态包括目标组件实例的属性、事件和 / 或方法。

[0108] 作为示例，渲染装置还包括提取单元570，提取单元570被配置为：从控制器中提取目标组件实例的代码逻辑，并且将代码逻辑封装为可复用实例逻辑，其中，可复用实例逻辑能够在其他业务组件的控制器中引入。

[0109] 作为示例，渲染单元530还被配置为：在视图中，通过引用在另一业务组件的控制器中实例化的另一组件实例，对另一组件实例进行渲染。

[0110] 关于上述实施例中的装置，其中各个单元执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，页面中业务组件的渲染装置中的各个单元可以根据上面第一方面的方法实施例中的页面中业务组件的渲染方法执行所述方法中的相应步骤，此处将不做详细阐述说明。

[0111] 在本公开的示例性实施例的第三方面，提供一种计算设备，计算设备包括：处理器；用于存储计算机可执行指令的存储器，其中，计算机可执行指令在被处理器运行时，促使处理器执行根据本公开所述的页面中业务组件的渲染方法。

[0112] 图6是根据本公开的示例性实施例的计算设备的示例框图。如图6所示，计算设备600可以包括处理器610和存储器620，存储器620可以用于存储计算机可执行指令621和操作系统622。这里，计算机可执行指令在被处理器610运行时，促使处理器610执行如上述示例性实施例所述的页面中业务组件的渲染方法。计算机可执行指令621可以与操作系统622一起在处理器中运行。

[0113] 作为示例，计算设备600并非必须是单个的设备，还可以是任何能够单独或联合执行上述指令(或指令集)的装置或电路的集合体。计算设备600还可以是集成控制系统或系统管理器的一部分，或者可被配置为与本地或远程(例如，经由无线传输)以接口互联的服务器。

[0114] 在计算设备600中，处理器610可包括中央处理器(CPU)、图形处理器(GPU)、可编程逻辑装置、专用处理器系统、微控制器或微处理器。作为示例而非限制，处理器610还可包括模拟处理器、数字处理器、微处理器、多核处理器、处理器阵列、网络处理器等。

[0115] 处理器610可运行存储在存储器620中的指令或代码，其中，存储器620还可以存储数据。指令和数据还可经由网络接口装置而通过网络被发送和接收，其中，网络接口装置可采用任何已知的传输协议。

[0116] 存储器620可与处理器610集成为一体，例如，将RAM或闪存布置在集成电路微处理器等之内。此外，存储器620可包括独立的装置，诸如，外部盘驱动、存储阵列或任何数据库系统可使用的其他存储装置。存储器620和处理器610可在操作上进行耦合，或者可例如通过I / O端口、网络连接等互相通信，使得处理器610能够读取存储在存储器620中的文件。

[0117] 此外，计算设备600还可以包括视频显示器(诸如，液晶显示器)和用户交互接口(诸如，键盘、鼠标、触摸输入装置等)。计算设备600的所有组件可经由总线和 / 或网络而彼此连接。

[0118] 在示例性实施例中，还可提供一种计算机可读存储介质，当计算机可读存储介质中的指令由计算设备的处理器执行时，使得计算设备能够执行如上述示例性实施例所述的页面中业务组件的渲染方法。计算机可读存储介质例如可以是包括指令的存储器，可选地，计算机可读存储介质可以是：只读存储器(ROM)、随机存取存储器(RAM)、随机存取可编程只读存储器(PROM)、电可擦除可编程只读存储器(EEPROM)、动态随机存取存储器(DRAM)、静态随机存取存储器(SRAM)、闪存、非易失性存储器、CD-ROM、CD-R、CD+R、CD-RW、CD+RW、DVD-ROM、DVD-R、DVD+R、DVD-RW、DVD+RW、DVD-RAM、BD-ROM、BD-R、BD-R LTH、BD-RE、蓝光或光盘存储器、硬盘驱动器(HDD)、固态硬盘(SSD)、卡式存储器(诸如，多媒体卡、安全数字(SD)卡或极速数字(XD)卡)、磁带、软盘、磁光数据存储装置、光学数据存储装置、硬盘、固态盘以及任何其他装置，所述任何其他装置被配置为以非暂时性方式存储计算机程序以及任何相关联的数据、数据文件和数据结构并将所述计算机程序以及任何相关联的数据、数据文件和数据结构提供给处理器或计算机使得处理器或计算机能执行所述计算机程序。上述计算机可读存储介质中的计算机程序可在诸如客户端、主机、代理装置、服务器等计算机设备中部署的环境中运行，此外，在一个示例中，计算机程序以及任何相关联的数据、数据文件和数据结构分布在联网的计算机系统上，使得计算机程序以及任何相关联的数据、数据文件和数据结构通过一个或多个处理器或计算机以分布式方式存储、访问和执行。

[0119] 根据本公开的示例性实施例，还可提供一种计算机程序产品，该计算机程序产品包括计算机可执行指令，计算机可执行指令被至少一个处理器执行时实现根据本公开的示例性实施例的页面中业务组件的渲染方法。

[0120] 本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施方案。本公开旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由权利要求指出。

[0121] 此外，还需要说明的是，尽管上面参照具体附图描述了各步骤的若干示例，但是应理解的是，本公开的实施方式不限于示例中给出的组合，不同附图中出现的步骤可以相结合，并且可以改变各步骤的执行顺序，在此不作出穷举。

[0122] 应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。< / script>

Claims

1. A method for rendering a business component in a page, characterized in that: The rendering method comprises: Acquire a target business component, wherein the target business component includes a view; Determine an instance reference of a target component instance to be introduced into the target business component, wherein the instance reference points to the target component instance, and the target component instance is obtained by instantiating a preset reusable component outside the view; In the view, the target component instance is rendered by referencing the instance reference.

2. The rendering method according to claim 1, characterized in that: The target service component also includes a controller, wherein the target component instance is obtained in the following manner: Introducing the reusable component in the controller; By creating parameters in the controller, the properties of the reusable component are passed in to configure the properties of the target component instance; By creating a listener in the controller, passing the event of the reusable component to configure the event of the target component instance; Based on the properties of the target component instance and the events of the target component instance, the reusable component is instantiated to obtain the target component instance.

3. The rendering method according to claim 2, characterized in that: The rendering method further comprises: Checking whether the parameters in the target component instance are consistent with the corresponding parameters in the reusable component; and / or, Check whether the parameters in the target component instance conform to the parameter types constrained in the controller.

4. The rendering method according to claim 2, characterized in that: The rendering method further comprises: In response to updating the state of the target component instance in the controller, in the view, updating the rendering of the target component instance by referencing the updated target component instance from the controller, Wherein, updating the state of the target component instance includes: Modify the component property value of the target component instance in the controller by directly calling the variable of the target component instance; and / or, By modifying the listener of the target component instance, a listening event of the target component instance is added or removed in the controller.

5. The rendering method according to claim 2, characterized in that: The rendering method further comprises: By calling the target component instance from the controller, the current state of the target component instance is displayed, wherein the current state of the target component instance includes properties, events and / or methods of the target component instance.

6. The rendering method according to claim 2, characterized in that: The rendering method further comprises: The code logic of the target component instance is extracted from the controller, and the code logic is encapsulated into a reusable instance logic, wherein the reusable instance logic can be introduced into the controller of other business components.

7. The rendering method according to claim 2, characterized in that: The rendering method further comprises: In the view, another component instance instantiated in a controller of another business component is referenced to render the another component instance.

8. A rendering device for a business component in a page, characterized in that: The rendering device comprises: An acquisition unit, configured to acquire a target business component, wherein the target business component includes a view; A determining unit is configured to determine an instance reference of a target component instance to be introduced into the target business component, wherein the instance reference points to the target component instance, and the target component instance is obtained by instantiating a preset reusable component outside the view; The rendering unit is configured to render the target component instance in the view by referring to the instance reference.

9. A computing device, characterized in that The computing device comprises: processor; a memory for storing computer executable instructions, When the computer executable instructions are executed by the processor, the processor is prompted to execute the method for rendering business components in a page according to any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that: When the instructions in the computer-readable storage medium are executed by a processor of a computing device, the computing device is enabled to execute the method for rendering a business component in a page according to any one of claims 1 to 7.

11. A computer program product comprising computer executable instructions, characterized in that: When the computer executable instructions are executed by at least one processor, the method for rendering a business component in a page according to any one of claims 1 to 7 is implemented.

Images