CN111104110A - 全局样式共享方法、全局样式共享装置及电子装置 - Google Patents

Abstract

本公开是关于一种全局样式共享方法、全局样式共享装置、电子装置和计算机可读存储介质。其中全局样式共享方法，包括：读取应用的全局文件中的全局样式标签，其中所述全局样式标签至少包括对象及所述对象对应的第一样式规则；将所述第一样式规则挂载到所述对象上；读取页面或组件的子文件，所述子文件包括所述对象；加载所述页面或组件时，匹配所述第一样式规则至所述对象的样式；根据所述对象的样式，渲染所述页面或组件。通过在全局文件中对相同样式规则定义，在页面或组件中无需再次定义，从而降低了应用RPK包的体积，提高开发效率，也降低了设备运行成本，提高了设备性能。

Description

全局样式共享方法、全局样式共享装置及电子装置

技术领域

本公开涉及智能终端领域，尤其涉及全局样式共享方法、全局样式共享装置、电子装置和计算机可读存储介质。

背景技术

随着智能终端的发展，在智能终端中的应用种类也越来越多，在通过智能终端打开网页页面，或者使用快应用时，需要在框架(framework)中运行页面对应的DOM(DocumentObjectModel)，文档对象模型)树来渲染页面内容。DOM是W3C组织推荐的处理可扩展标志语言的标准编程接口，一个页面可以对应于一个DOM树，其是一种抽象语法树(AbstractSyntaxTree，简称AST)，是页面源代码的抽象语法结构的树状表现形式，DOM树具有多种节点。

开发者开发时，页面和组件均通过ux文件编写，ux文件由模板(template)、样式(style)和脚本(script)组成；在应用级别的app.ux文件，即全局文件，由于不需要页面结构和样式，所以只需要提供脚本即可。

当前网页页面或快应用样式规则设定于页面或组件的样式(style)标签内，组件的DOM结构只匹配当前组件内的样式规则，页面的DOM结构也只匹配页面内的样式规则，页面与组件的样式规则互不影响，保证了各个DOM结构的样式独立，其中内容也无法复用。

发明内容

为克服相关技术中存在的问题，本公开提供一种全局样式共享方法、全局样式共享装置、电子装置和计算机可读存储介质。

根据本公开实施例的第一方面，提供一种全局样式共享方法，方法包括：读取应用的全局文件中的全局样式标签，其中所述全局样式标签至少包括对象及所述对象对应的第一样式规则；将所述第一样式规则挂载到所述对象上；读取页面或组件的子文件，所述子文件包括所述对象；加载所述页面或组件时，匹配所述第一样式规则至所述对象的样式；根据所述对象的样式，渲染所述页面或组件。

在一实施例中，所述子文件还包括子样式标签，所述子样式标签包括所述对象对应的第二样式规则；所述基于所述第一样式规则，确定所述对象的样式还包括：基于所述第一样式规则和所述第二样式规则，确定所述对象的样式。

在一实施例中，所述基于所述第一样式规则和所述第二样式规则，确定所述对象的样式，包括：分别匹配所述第一样式规则和所述第二样式规则至所述对象的样式；如所述第二样式规则与所述第一样式规则部分或全部重叠，则所述部分或全部匹配所述第二样式规则至所述对象的样式。

在一实施例中，所述基于所述第一样式规则和所述第二样式规则，确定所述对象的样式，包括：分别匹配所述第一样式规则和所述第二样式规则至所述对象的样式；如所述第二样式规则与所述第一样式规则部分或全部重叠，则所述部分或全部匹配所述第一样式规则和所述第二样式规则中优先级高的至所述对象的样式。

在一实施例中，所述页面或组件的子文件具有DOM结构。

根据本公开实施例的第二方面，提供一种全局样式共享装置，装置包括：读取单元，用于读取应用的全局文件中的全局样式标签，其中所述全局样式标签至少包括对象及所述对象对应的第一样式规则；及，读取页面或组件的子文件，所述子文件包括所述对象；挂载单元，用于将所述第一样式规则挂载到所述对象上；加载单元，用于加载所述页面或组件时，匹配所述第一样式规则至所述对象的样式；渲染单元，用于根据所述对象的样式，渲染所述页面或组件。

在一实施例中，所述子文件还包括子样式标签，所述子样式标签包括所述对象对应的第二样式规则；加载单元还用于：基于所述第一样式规则和所述第二样式规则，确定所述对象的样式。

在一实施例中，加载单元还用于：分别匹配所述第一样式规则和所述第二样式规则至所述对象的样式；如所述第二样式规则与所述第一样式规则部分或全部重叠，则所述部分或全部匹配所述第二样式规则至所述对象的样式。

在一实施例中，加载单元还用于：分别匹配所述第一样式规则和所述第二样式规则至所述对象的样式；如所述第二样式规则与所述第一样式规则部分或全部重叠，则所述部分或全部匹配所述第一样式规则和所述第二样式规则中优先级高的至所述对象的样式。

在一实施例中，所述页面或组件的子文件具有DOM结构。

根据本公开实施例的第三方面，提供一种电子设备，包括：存储器，用于存储指令；以及处理器，用于调用存储器存储的指令执行第一方面的全局样式共享方法。

根据本公开实施例的第四方面，提供一种计算机可读存储介质，存储有指令，指令被处理器执行时，执行第一方面的全局样式共享方法。

本公开的实施例提供的技术方案可以包括以下有益效果：通过在全局文件中对相同样式规则定义，在页面或组件中无需再次定义，从而降低了应用RPK包的体积，提高开发效率，也降低了设备运行成本，提高了设备性能。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本发明的实施例，并与说明书一起用于解释本发明的原理。

图1是根据一示例性实施例示出的一种全局样式共享方法的流程示意图；

图2是根据一示例性实施例示出的一种全局样式共享装置的示意框图；

图3是根据一示例性实施例示出的一种装置的示意框图。

图4是根据一示例性实施例示出的一种电子装置的示意框图。

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本发明相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本发明的一些方面相一致的装置和方法的例子。

本实施例提供一种全局样式共享方法10，参见图1，全局样式共享方法10包括步骤S11-步骤S15，以下详细说明：

步骤S11，读取应用的全局文件中的全局样式标签，其中全局样式标签至少包括对象及对象对应的第一样式规则。

应用的开发人员，可以在应用级别的全局文件app.ux的全局样式(style)标签内，对一些多次会被用到的对象的样式规则进行统一的定义，在应用启动时，读取全局文件。

步骤S12，将第一样式规则挂载到对象上。

在读取全局文件后，根据全局样式标签中对象的第一样式规则，将第一样式规则挂载到对象的样式属性上，使得当页面或组件加载时能够注册到每一个页面和组件中，这样，每个页面或者组件都能够获得记载在全局文件中的这条样式规则。

步骤S13，读取页面或组件的子文件，子文件包括对象。

其中，页面或组件的子文件可以同样是ux文件，且在一些实施例中，页面或组件的子文件具有DOM(Document Object Model，文档对象模型)结构。

读取页面子文件或组件子文件，子文件可以定义页面或组件的结构等，应用的页面或组件如果需要对象，可在子文件中进行调用，而对象的样式如果与全局文件中定义的第一样式规则相同，则可以不在子文件中再次定义。

步骤S14，加载页面或组件时，基于第一样式规则，确定对象的样式。

由于在全局文件中对对象的样式进行了定义，因此，在加载页面或组件时，可以基于第一样式规则确定对象的样式，这样对象的样式进行了定义，同时又省去了在子文件中分别定义的内容。

在一实施例中，子文件还包括子样式标签，子样式标签包括对象对应的第二样式规则；步骤S14包括：基于第一样式规则和第二样式规则，确定对象的样式。本实施例中，在页面或组件的子文件中调用对象，并且还对对象的样式又进行了定义，这种情况下，确定对象的样式需要基于第一样式规则和第二样式规则两者。

在一些实施例中，可以分别匹配第一样式规则和第二样式规则至对象的样式；如第二样式规则与第一样式规则部分或全部重叠，则部分或全部匹配第二样式规则至对象的样式。一个对象可以有多个样式规则，如形状、颜色等，在第一样式规则与第二样式规则都对其中一项做出了定义是，以第二样式规则为准。第一样式规则是全局性的，换句话说，是共性的规则，而第二样式规则是在具体页面或组件中进行的定义，是个性化的，因此，当两者发生重叠时，重叠部分以第二样式规则为准确认对象的样式，如全部重叠，则完全以第二样式规则确定对象的样式。例如，第一样式规则定义了对象的形状为A1，颜色为B1，第二样式规则中又定义了该对象的颜色为B2，则该对象的样式最终确定为形状为A1，颜色为B2。该种方式能够在简化内容，减少RPK包的体积的同时，兼顾个性设定。

在另一些实施例中，可以分别匹配第一样式规则和第二样式规则至对象的样式；如第二样式规则与第一样式规则部分或全部重叠，则部分或全部匹配第一样式规则和第二样式规则中优先级高的至对象的样式。和前述实施例相同，区别在于在第一样式规则和第二样式规则中设置优先级，可以通过设置分值确定，当第二样式规则和第一样式规则发生重叠时，根据优先级的分值，采用优先级更高的样式规则作为对象的样式中重叠部分的规则。该种方式也能够在简化内容，减少RPK包的体积的同时，兼顾个性设定，并且能够在对象具有多处调用时方便进行设置。

步骤S15，根据对象的样式，渲染页面或组件。

在确认对象的样式之后，根据对象的样式相应的渲染页面或组件。

上述任一实施例通过在全局文件中对相同样式规则定义，从而降低了应用RPK包的体积，提高开发效率，也降低了设备运行成本，提高了设备性能，并且在需要对象个性化设置时，也可以方便的进行定义。

以实际的代码为例，示例性的阐述上述实施例的方案。

在以往技术中，通过多个ux文件，分别定义页面(Page)1、组件(Part)1和页面2，分别如下：

可见，在页面1、组件1和页面2中，对“.common-class”的样式分别作了重复的定义。

而在本公开的方案中，可以将相同的内容进行抽取，定义在app.ux文件的样式标签中：

而，相应的页面1、组件1和页面2可简化成：

可见，页面1、组件1和页面2的内容得以简化。

可以通过hap-toolkit编译样式规则对象，在快应用启动构建应用启动app.js时，将样式规则对象挂载到app实例的style属性上。当页面加载时再注册到每一个页面和组件中。这样，每个页面或者组件都能够获得.common-class这条样式规则，在做样式计算的时候，先从公共样式规则中匹配，再从对应页面或者组件的规则中匹配，后面匹配到的样式会覆盖之前匹配的样式，达到层叠样式的效果。

上述仅是以页面1、组件1和页面2为例进行说明，而在实际应用中，页面样式往往十分复杂的情况下，抽取公共的全局样式可以大大减少RPK的大小，减少RPK加载的时间。

基于同一个发明构思，图2示出了一种全局样式共享装置100，如图2所示，全局样式共享装置100包括：读取单元110，用于读取应用的全局文件中的全局样式标签，其中所述全局样式标签至少包括对象及所述对象对应的第一样式规则；及，读取页面或组件的子文件，所述子文件包括所述对象；挂载单元120，用于将所述第一样式规则挂载到所述对象上；加载单元130，用于加载所述页面或组件时，匹配所述第一样式规则至所述对象的样式；渲染单元140，用于根据所述对象的样式，渲染所述页面或组件。

在一实施例中，所述子文件还包括子样式标签，所述子样式标签包括所述对象对应的第二样式规则；加载单元130还用于：基于所述第一样式规则和所述第二样式规则，确定所述对象的样式。

在一实施例中，加载单元130还用于：分别匹配所述第一样式规则和所述第二样式规则至所述对象的样式；如所述第二样式规则与所述第一样式规则部分或全部重叠，则所述部分或全部匹配所述第二样式规则至所述对象的样式。

在一实施例中，加载单元130还用于：分别匹配所述第一样式规则和所述第二样式规则至所述对象的样式；如所述第二样式规则与所述第一样式规则部分或全部重叠，则所述部分或全部匹配所述第一样式规则和所述第二样式规则中优先级高的至所述对象的样式。

在一实施例中，所述页面或组件的子文件具有DOM结构。

根据本公开实施例的第三方面，提供一种电子设备，包括：存储器，用于存储指令；以及处理器，用于调用存储器存储的指令执行第一方面的全局样式共享方法。

关于上述实施例中的全局样式共享100，其中各个单元执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。

图3是根据一示例性实施例示出的前述任一实施例装置的示意框图。例如，装置300可以是移动电话，计算机，数字广播终端，消息收发设备，游戏控制台，平板设备，医疗设备，健身设备，个人数字助理等。

参照图3，装置300可以包括以下一个或多个组件：处理组件302，存储器304，电力组件306，多媒体组件308，音频组件310，输入/输出(I/O)的接口312，传感器组件314，以及通信组件316。

处理组件302通常控制装置300的整体操作，诸如与显示，电话呼叫，数据通信，相机操作和记录操作相关联的操作。处理组件302可以包括一个或多个处理器320来执行指令，以完成上述的方法的全部或部分步骤。此外，处理组件302可以包括一个或多个模块，便于处理组件302和其他组件之间的交互。例如，处理组件302可以包括多媒体模块，以方便多媒体组件308和处理组件302之间的交互。

存储器304被配置为存储各种类型的数据以支持在装置300的操作。这些数据的示例包括用于在装置300上操作的任何应用程序或方法的指令，联系人数据，电话簿数据，消息，图片，视频等。存储器304可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(SRAM)，电可擦除可编程只读存储器(EEPROM)，可擦除可编程只读存储器(EPROM)，可编程只读存储器(PROM)，只读存储器(ROM)，磁存储器，快闪存储器，磁盘或光盘。

电力组件306为装置300的各种组件提供电力。电力组件306可以包括电源管理系统，一个或多个电源，及其他与为装置300生成、管理和分配电力相关联的组件。

多媒体组件308包括在所述装置300和用户之间的提供一个输出接口的屏幕。在一些实施例中，屏幕可以包括液晶显示器(LCD)和触摸面板(TP)。如果屏幕包括触摸面板，屏幕可以被实现为触摸屏，以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。所述触摸传感器可以不仅感测触摸或滑动动作的边界，而且还检测与所述触摸或滑动操作相关的持续时间和压力。在一些实施例中，多媒体组件308包括一个前置摄像头和/或后置摄像头。当设备300处于操作模式，如拍摄模式或视频模式时，前置摄像头和/或后置摄像头可以接收外部的多媒体数据。每个前置摄像头和后置摄像头可以是一个固定的光学透镜系统或具有焦距和光学变焦能力。

音频组件310被配置为输出和/或输入音频信号。例如，音频组件310包括一个麦克风(MIC)，当装置300处于操作模式，如呼叫模式、记录模式和语音识别模式时，麦克风被配置为接收外部音频信号。所接收的音频信号可以被进一步存储在存储器304或经由通信组件316发送。在一些实施例中，音频组件310还包括一个扬声器，用于输出音频信号。

I/O接口312为处理组件302和外围接口模块之间提供接口，上述外围接口模块可以是键盘，点击轮，按钮等。这些按钮可包括但不限于：主页按钮、音量按钮、启动按钮和锁定按钮。

传感器组件314包括一个或多个传感器，用于为装置300提供各个方面的状态评估。例如，传感器组件314可以检测到装置300的打开/关闭状态，组件的相对定位，例如所述组件为装置300的显示器和小键盘，传感器组件314还可以检测装置300或装置300一个组件的位置改变，用户与装置300接触的存在或不存在，装置300方位或加速/减速和装置300的温度变化。传感器组件314可以包括接近传感器，被配置用来在没有任何的物理接触时检测附近物体的存在。传感器组件314还可以包括光传感器，如CMOS或CCD图像传感器，用于在成像应用中使用。在一些实施例中，该传感器组件314还可以包括加速度传感器，陀螺仪传感器，磁传感器，压力传感器或温度传感器。

通信组件316被配置为便于装置300和其他设备之间有线或无线方式的通信。装置300可以接入基于通信标准的无线网络，如WiFi，2G或3G，或它们的组合。在一个示例性实施例中，通信组件316经由广播信道接收来自外部广播管理系统的广播信号或广播相关信息。在一个示例性实施例中，所述通信组件316还包括近场通信(NFC)模块，以促进短程通信。例如，在NFC模块可基于射频识别(RFID)技术，红外数据协会(IrDA)技术，超宽带(UWB)技术，蓝牙(BT)技术和其他技术来实现。

在示例性实施例中，装置300可以被一个或多个应用专用集成电路(ASIC)、数字信号处理器(DSP)、数字信号处理设备(DSPD)、可编程逻辑器件(PLD)、现场可编程门阵列(FPGA)、控制器、微控制器、微处理器或其他电子元件实现，用于执行上述方法。

在示例性实施例中，还提供了一种包括指令的计算机可读存储介质，例如包括指令的存储器304，上述指令可由装置300的处理器320执行以完成上述方法。例如，所述计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。

图4是根据一示例性实施例示出的一种电子装置400的框图。例如，装置400可以被提供为一服务器。参照图4，装置400包括处理组件422，其进一步包括一个或多个处理器，以及由存储器432所代表的存储器资源，用于存储可由处理组件422的执行的指令，例如应用程序。存储器432中存储的应用程序可以包括一个或一个以上的每一个对应于一组指令的模块。此外，处理组件422被配置为执行指令，以执行上述方法。

装置400还可以包括一个电源组件426被配置为执行装置300的电源管理，一个有线或无线网络接口450被配置为将装置400连接到网络，和一个输入输出(I/O)接口458。装置400可以操作基于存储在存储器432的操作系统，例如Windows ServerTM，Mac OS XTM，UnixTM,LinuxTM，FreeBSDTM或类似。

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

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

Claims (12)

1.一种全局样式共享方法，其特征在于，所述方法包括：

读取应用的全局文件中的全局样式标签，其中所述全局样式标签至少包括对象及所述对象对应的第一样式规则；

将所述第一样式规则挂载到所述对象上；

读取页面或组件的子文件，所述子文件包括所述对象；

加载所述页面或组件时，基于所述第一样式规则，确定所述对象的样式；

根据所述对象的样式，渲染所述页面或组件。

2.根据权利要求1所述的全局样式共享方法，其特征在于，所述子文件还包括子样式标签，所述子样式标签包括所述对象对应的第二样式规则；

所述基于所述第一样式规则，确定所述对象的样式还包括：基于所述第一样式规则和所述第二样式规则，确定所述对象的样式。

3.根据权利要求2所述的全局样式共享方法，其特征在于，所述基于所述第一样式规则和所述第二样式规则，确定所述对象的样式，包括：

分别匹配所述第一样式规则和所述第二样式规则至所述对象的样式；

如所述第二样式规则与所述第一样式规则部分或全部重叠，则所述部分或全部匹配所述第二样式规则至所述对象的样式。

4.根据权利要求2所述的全局样式共享方法，其特征在于，所述基于所述第一样式规则和所述第二样式规则，确定所述对象的样式，包括：

分别匹配所述第一样式规则和所述第二样式规则至所述对象的样式；

如所述第二样式规则与所述第一样式规则部分或全部重叠，则所述部分或全部匹配所述第一样式规则和所述第二样式规则中优先级高的至所述对象的样式。

5.根据权利要求1所述的全局样式共享方法，其特征在于，所述页面或组件的子文件具有DOM结构。

6.一种全局样式共享装置，其特征在于，所述装置包括：

读取单元，用于读取应用的全局文件中的全局样式标签，其中所述全局样式标签至少包括对象及所述对象对应的第一样式规则；及，读取页面或组件的子文件，所述子文件包括所述对象；

挂载单元，用于将所述第一样式规则挂载到所述对象上；

加载单元，用于加载所述页面或组件时，匹配所述第一样式规则至所述对象的样式；

渲染单元，用于根据所述对象的样式，渲染所述页面或组件。

7.根据权利要求6所述的全局样式共享装置，其特征在于，所述子文件还包括子样式标签，所述子样式标签包括所述对象对应的第二样式规则；

加载单元还用于：基于所述第一样式规则和所述第二样式规则，确定所述对象的样式。

8.根据权利要求7所述的全局样式共享装置，其特征在于，加载单元还用于：

分别匹配所述第一样式规则和所述第二样式规则至所述对象的样式；

如所述第二样式规则与所述第一样式规则部分或全部重叠，则所述部分或全部匹配所述第二样式规则至所述对象的样式。

9.根据权利要求7所述的全局样式共享装置，其特征在于，加载单元还用于：

分别匹配所述第一样式规则和所述第二样式规则至所述对象的样式；

如所述第二样式规则与所述第一样式规则部分或全部重叠，则所述部分或全部匹配所述第一样式规则和所述第二样式规则中优先级高的至所述对象的样式。

10.根据权利要求6所述的全局样式共享装置，其特征在于，所述页面或组件的子文件具有DOM结构。

11.一种电子装置，其特征在于，包括：

存储器，用于存储指令；以及

处理器，用于调用所述存储器存储的指令执行如权利要求1至5中任一项所述的全局样式共享方法。

12.一种计算机可读存储介质，其特征在于，存储有指令，所述指令被处理器执行时，执行如权利要求1至5中任一项所述的全局样式共享方法。

Images