组件构建方法和装置、组件调用方法和装置制造方法及图纸

本发明专利技术涉及一种组件构建方法和装置、组件调用方法和装置。所述组件构建方法包括：获取功能需求；根据功能需求在模型层model与控制层controller扩展，使用用于构建用户界面的脚步库React的语法编写所述功能需求得到对应的源代码；将所述源代码编译成原生脚本；对所述原生脚本采用异步模块加载机制AMD规范包装成React组件。上述组件构建方法和装置、组件调用方法和装置，通过使用React的语法编写功能需要对应的源代码，并将源代码编译成原生脚本，将原生脚本通过AMD规范包装成React组件，被使用时，通过简单的调用即可使用React组件，扩大了使用范围，且组件可复用性高，不需要开发者专门学习React即可使用React组件，降低了开发者的学习门槛。

【技术实现步骤摘要】

本专利技术涉及计算机应用领域，特别是涉及一种组件构建方法和装置、组件调用方法和装置。
技术介绍
AngularJS是建立在轻量jQuery之上的一个结构化前端MVVM(Model View View Model)框架，用于构建单页面Web应用。AngularJS是大而全的框架，用来开发组件学习成本大，双向数据绑定在复杂的交互情况下性能陡然下降。React是由Fackbook推出的一个JavaScipt框架，React是一个用于构建组件化UI(User Interface，用户界面)的库，是一个前端界面开发工具。因React只负责view层，开发者在model、controller层需要花费很大的精力，并且JSX语法编写的代码需要通过打包工具webpack、babel编译成原生javascript语法，在开发项目中难以大范围推广使用。
技术实现思路
基于此，有必要针对传统构建组件方式难以大范围推广使用的问题，提供一种组件构建方法和装置，能扩大使用范围。此外，还有必要提供一种组件调用方法和装置，能扩大使用范围一种组件构建方法，包括：获取功能需求；根据功能需求在模型层model与控制层controller扩展，使用用于构建用户界面的脚步库React的语法编写所述功能需求得到对应的源代码；将所述源代码编译成原生脚本；对所述原生脚本采用异步模块加载机制AMD规范包装成用于构建用户界面的脚步库React组件。一种组件调用方法，包括：获取业务需求；根据所述业务需求调用对应的用于构建用户界面的脚步库React组件，所述用于构建用户界面的脚步库React组件为根据功能需求在模型层model与控制层controller扩展，使用用于构建用户界面的脚步库React的语法编写所述功能需求得到对应的源代码，并将所述源代码编译成原生脚本，以及对所述原生脚本采用异步模块加载机制AMD规范包装得到的用于构建用户界面的脚步库React组件；获取对所述用于构建用户界面的脚步库React组件配置的参数；将所述配置的参数传递给对应的用于构建用户界面的脚步库React组件，形成包含所述参数的用于构建用户界面的脚步库React组件；展示包含所述参数的所述用于构建用户界面的脚步库React组件。一种组件构建装置，包括：功能需求获取模块，用于获取功能需求；编写模块，用于根据功能需求在模型层model与控制层controller扩展，使用用于构建用户界面的脚步库React编写所述功能需求得到对应的源代码；生成模块，用于将所述源代码编译成原生脚本；封装模块，用于对所述原生脚本采用异步模块加载机制AMD规范包装成用于构建用户界面的脚步库React组件。一种组件调用装置，包括：业务需求获取模块，用于获取业务需求；调用模块，用于根据所述业务功能需求调用对应的用于构建用户界面的脚步库React组件，所述用于构建用户界面的脚步库React组件为根据功能需求在模型层model与控制层controller扩展，使用用于构建用户界面的脚步库React的语法编写所述功能需求得到对应的源代码，并将所述源代码编译成原生脚本，以及对所述原生脚本采用异步模块加载机制AMD规范包装得到的用于构建用户界面的脚步库React组件；参数配置模块，用于获取对所述用于构建用户界面的脚步库React组件配置的参数；传递模块，用于将所述配置的参数传递给对应的用于构建用户界面的脚步库React组件，形成包含所述参数的用于构建用户界面的脚步库React组件；展示模块，用于展示包含所述配置参数的所述用于构建用户界面的脚步库React组件。上述组件构建方法和装置，通过使用用于构建用户界面的脚步库React编写功能需要对应的源代码，并将源代码编译成原生脚本，将原生脚本通过AMD规范包装成React组件，被使用时，通过简单的调用即可使用React组件，扩大了使用范围，且组件可复用性高，能够被AMD、webpack模块管理器加载，功能丰富，扩展了原生html不具备的特性，且不需要开发者专门学习React即可使用React组件，降低了开发者的学习门槛，同时组件提供的丰富功能能满足开发组日常需求，提升了新产品售卖开发效率，缩短了产品上线周期。上述组件调用方法和装置，根据业务需求调用对应的React组件，并获取React组件配置的参数，将参数传递给React组件，形成包含该参数的React组件，并展示该React组件，调用方式简单，不需要开发者专门学习React即可使用React组件，降低了开发者的学习门槛，同时组件提供的丰富功能能满足开发组日常需求，提升了新产品售卖开发效率，缩短了产品上线周期。附图说明图1为一个实施例中电子设备的内部结构示意图；图2为一个实施例中组件构建方法的流程图；图3A为按钮组件的示意图；图3B为下拉组件的示意图；图3C为数值输入框组件的示意图；图3D为滑动条组件的示意图；图3E为气泡提示组件的示意图；图3F为表格组件的示意图；图4为根据功能需求在model层与controller层扩展，使用React的语法编写该功能需求得到对应的源代码的具体流程示意图；图5为一个实施例中组件调用方法的流程图；图6为调用组件形成页面的示意图；图7为一个实施例中组件调用方法应用于构建云产品售卖页的架构图；图8为一个实施例中组件构建装置的结构框图；图9为一个实施例中组件调用装置的结构框图。具体实施方式为了使本专利技术的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本专利技术进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本专利技术，并不用于限定本专利技术。可以理解，本专利技术所使用的术语“第一”、“第二”等可在本文中用于描述各种元件，但这些元件不受这些术语限制。这些术语仅用于将第一个元件与另一个元件区分。图1为一个实施例中电子设备的内部结构示意图。如图1所示，该电子设备包括通过系统总线连接的处理器、非易失性存储介质、内存储器、网络接口、显示屏和输入装置。其中，电子设备的非易失性存储介质存储有操作系统，还包括一种组件构建装置和组件调用装置，该组件构建装置用于实现一种组件构建装置方法，该组件调用装置用于实现一种组件调用装置方法。该处理器用于提供计算和控制能力，支撑整个电子设备的运行。电子设备中的内存储器为非易失性存储介质中的组件构建装置和组件调用装置的运行提供环境，该内存储器中可储存有计算机可读指令，该计算机可读指令被所述处理器执行时，可使得所述处理器执行一种组件构建方法和组件调用方法。网络接口用于与其他设备进行网络通信。电子设备的显示屏可以是液晶显示屏或者电子墨水显示屏等，输入装置可以是显示屏上覆盖的触摸层，也可以是电子设备外壳上设置的按键、轨迹球或触控板，也可以是外接的键盘、触控板或鼠标等。该电子设备可以是手机、个人计算机、平板电脑、个人数字助理、穿戴式设备或服务器等。本领域技术人员可以理解，图1中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的电子设备的限定，具体的电子设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。图2为一个实施例中组件构建方法的流程图。如图2所示，一种组件构建方法，包括：步骤202，获取功能需求。功能本文档来自技高网...

【技术保护点】
一种组件构建方法，包括：获取功能需求；根据功能需求在模型层model与控制层controller扩展，使用用于构建用户界面的脚步库React编写所述功能需求得到对应的源代码；将所述源代码编译成原生脚本；对所述原生脚本采用异步模块加载机制AMD规范包装成用于构建用户界面的脚步库React组件。

【技术特征摘要】
1.一种组件构建方法，包括：获取功能需求；根据功能需求在模型层model与控制层controller扩展，使用用于构建用户界面的脚步库React编写所述功能需求得到对应的源代码；将所述源代码编译成原生脚本；对所述原生脚本采用异步模块加载机制AMD规范包装成用于构建用户界面的脚步库React组件。2.根据权利要求1所述的方法，其特征在于，所述根据功能需求在模型层model与控制层controller扩展，使用用于构建用户界面的脚步库React编写所述功能需求得到对应的源代码，包括：根据功能需求在模型层model与控制层controller扩展，使用用于构建用户界面的脚步库React编写定义所述功能需求对应的组件的初始化参数；定义外部修改所述组件参数时所触发的函数；定义所述组件的值改变时的处理函数；定义所述失去焦点时处理函数；定义声明组件的函数。3.根据权利要求1所述的方法，其特征在于，所述将所述源代码编译成原生脚本，包括：采用脚本编译器工具编辑所述源代码生成原生脚本。4.根据权利要求1所述的方法，其特征在于，所述用于构建用户界面的脚步库React组件包括按钮组件、下拉组件、数值输入框组件、滑动条组件、气泡提示组件和表格组件。5.一种组件调用方法，包括：获取业务需求；根据所述业务需求调用对应的用于构建用户界面的脚步库React组件，所述用于构建用户界面的脚步库React组件为根据功能需求在模型层model与控制层controller扩展，使用用于构建用户界面的脚步库React编写所述功能需求得到对应的源代码，并将所述源代码编译成原生脚本，以及对所述原生脚本采用异步模块加载机制AMD规范包装得到的用于构建用户界面的脚步库React组件；获取对所述用于构建用户界面的脚步库React组件配置的参数；将所述配置的参数传递给对应的用于构建用户界面的脚步库React组件，形成包含所述参数的用于构建用户界面的脚步库React组件；展示包含所述参数的所述用于构建用户界面的脚步库React组件。6.一种组件构建装...

【专利技术属性】
技术研发人员：伍林，
申请(专利权)人：腾讯科技深圳有限公司，
类型：发明
国别省市：广东;44