CN111221515A - 一种修改web前端主题的方法 - Google Patents

一种修改web前端主题的方法 Download PDF

Info

Publication number
CN111221515A
CN111221515A CN202010044096.7A CN202010044096A CN111221515A CN 111221515 A CN111221515 A CN 111221515A CN 202010044096 A CN202010044096 A CN 202010044096A CN 111221515 A CN111221515 A CN 111221515A
Authority
CN
China
Prior art keywords
theme
rendering
elements
switching
steps
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202010044096.7A
Other languages
English (en)
Inventor
宋巍
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Nanjing Ding Zhen Information Technology Co Ltd
Original Assignee
Nanjing Ding Zhen Information Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Nanjing Ding Zhen Information Technology Co Ltd filed Critical Nanjing Ding Zhen Information Technology Co Ltd
Priority to CN202010044096.7A priority Critical patent/CN111221515A/zh
Publication of CN111221515A publication Critical patent/CN111221515A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/20—Software design
    • G06F8/24—Object-oriented

Abstract

本发明提供一种修改WEB前端主题的方法，所述方法步骤如下：步骤一：通过主题切换入口输入切换信号，通过演算函数进行演算；步骤二：通过演算函数的演算结果生成Class；步骤三：将生成的Class应用于指定DOM元素；步骤四：对页面Body进行输出；步骤五：通过DOM元素过去主题Class；步骤六：对元素进行渲染，完成主题切换。采用一个关联网站或者页面主题切换事件的标识，关联主题色演算函数，通过网站基准色和函数参数演算出一种主题色，并设定为入口Dom元素样式，通过子元素嵌套逻辑，依次渲染Dom的子孙元素，渲染完成，主题切换完成。思路清晰，方法简单，可执行性强。

Description

一种修改WEB前端主题的方法
技术领域
本发明涉及WEB前端技术领域，尤其涉及一种修改WEB前端主题的方法。
背景技术
WEB前端伴随着Vue和React等等一些框架的出现，开发方式发生了日新月异的变化。组件方面从早期的微软Asp.Net的服务器渲染组件、JAVA体系的JSP模板控件，到基于Jquery的众多框架(EasyUI、JqueryUI)组件，ExtJS，Dojo等等。虽然这些前端组件(或者叫做框架)层出不穷，但其基本思想是一致的，都是对浏览器端的Dom进行操作或者操作的优化。在前端工程化开发大规模推广的情况下，现在的新框架和之前的以jquery为主的前端开发模式已经不是一个级别的了。一个信息系统软件开发团队人员的组成，尤其能看出这点，前端工程师越来越多，而且对前端的依赖越来越大。一个网站或者一个前端项目的主题切换功能实现，似乎对前端开发又造成了很大的困扰。
现有WEB前端主题切换主要方式为通过CSS、LESS等文件通过对项目中用到的所有Dom元素以及组件分别定义几种主题样式，通过加载不同主题对应的CSS，后加载的CSS覆盖默认显示样式，即可进行主题切换。现有主题切换方案一般有两种，一种是CSS换肤：生成多套主题CSS，在页面加载时根据主题选择加载指定CSS；另一种是LESS换肤：采用动态LESS机制，通过js动态编译LESS变量修改CSS。但是上述手段存在以下问题：一是组件样式编辑工作量很大，例如：页面中每一个元素的CSS样式都要设定主题颜色、字体颜色、边框颜色样式等等。二是网站扩展性开发成本高，新加的组件、页面等都需要根据不同主题设定几套CSS或者LESS样式。三是调试、测试成本代价高。四是网站升级，维护成本高。因此，由于以上的技术缺陷，导致企业在前端网站上面的人力、物力等成本投资居高不下。
发明内容
针对现有技术的不足，本发明的目的是提供一种修改WEB前端主题的方法，采用CSS的滤镜属性的颜色演算函数实现便捷、快速、低成本的主题切换功能，具体来说采用一个关联网站或者页面主题切换事件的标识，关联主题色演算函数，通过网站基准色和函数参数演算出一种主题色，并设定为入口Dom元素样式，通过子元素嵌套逻辑，依次渲染Dom的子孙元素，渲染完成，主题切换完成，思路清晰，方法简单，可执行性强。
本发明提供一种修改WEB前端主题的方法，所述方法步骤如下：
步骤一：通过主题切换入口输入切换信号，通过演算函数进行演算；
步骤二：通过演算函数的演算结果生成Class；
步骤三：将生成的Class应用于指定DOM元素；
步骤四：对页面Body进行输出；
步骤五：通过DOM元素过去主题Class；
步骤六：对元素进行渲染，完成主题切换。
进一步改进在于：所述步骤四中的页面Body包含整体页面内容的DOM元素。
进一步改进在于：所述步骤一中演算函数包括以下步骤：步骤1：定义带参函数；步骤2：通过对参数和获取的基础色进行演算；步骤3：通过演算结果输出主题。
进一步改进在于：所述步骤六中对元素的渲染分为五步，分别为一次渲染子元素样式、循环渲染孙元素样式、循环渲染孙元素的子元素样式、依次渲染和渲染完全部元素，上述五部依次进行。
进一步改进在于：所述步骤一中的演算函数的数量至少为两组。
采用的是React框架，项目启动时加载配置文件，配置文件中设定了主题切换的方式。根据页面主题切换触发事件，主题切换事件触发后，加载对应主题并重新加载页面，用以获取所需的主题样式。
本发明的有益效果是：通过在指定的DOM节点上，设定多种主题色演算函数，即可将网站主题切换成多种颜色；不需要每个节点、每个元素、每个组件的去设定CSS，非常方便，并且简单高效。修改主题色，而不修改样式文件，非常灵活。主题色演算函数通用性，一函数多用，可以在任何前端实现多种主题色。满足不同客户对产品有不同的主题色要求。成本几乎可以忽略不计。可适用于互联网行业、物联网行业以及企事业单位。
采用一个关联网站或者页面主题切换事件的标识，关联主题色演算函数，通过网站基准色和函数参数演算出一种主题色，并设定为入口Dom元素样式，通过子元素嵌套逻辑，依次渲染Dom的子孙元素，渲染完成，主题切换完成。思路清晰，方法简单，可执行性强。主题色演算函数可扩展，兼容性强，可以支持各种操作系统，使用场景丰富，主题色演算函数由可以使用已有的Filter的属性值，也可以自定义，扩展性强。演算函数对操作系统无要求，兼容性强。可适用于网站、购物平台、企事业办公软件、SAP等，使用场景丰富。函数通用性强，只需要获取基础色并根据输入参数即可演算出新的主题，一套函数可以通用多个平台。
主题切换渲染速度快，简单、便捷。在目标网站的入口中找到First Pa rent Dom节点，并做好标识(这里标识为：’root’)；根据主题切换事件获取对应的主题Class，并根据标记(root)找到Dom节点，将主题class赋值到Dom元素上；页面中root元素下的所有子元素、孙元素会根据root元素主题样式改变，而产生的循环渲染，直到所有元素的主题都被渲染完成，这个过程肉眼并不可见；一键式切换主题，操作简便易行。
附图说明
图1是本发明的方法流程图。
图2是本发明的主题色演算函数示意图。
具体实施方式
为了加深对本发明的理解，下面将结合实施例对本发明做进一步详述，本实施例仅用于解释本发明，并不构成对本发明保护范围的限定。
如图1、2所示，本实施例提供了一种修改WEB前端主题的方法，所述方法步骤如下：
步骤一：通过主题切换入口输入切换信号，通过演算函数进行演算；
步骤二：通过演算函数的演算结果生成Class；
步骤三：将生成的Class应用于指定DOM元素；
步骤四：对页面Body进行输出；
步骤五：通过DOM元素过去主题Class；
步骤六：对元素进行渲染，完成主题切换。
所述步骤四中的页面Body包含整体页面内容的DOM元素。所述步骤一中演算函数包括以下步骤：步骤1：定义带参函数；步骤2：通过对参数和获取的基础色进行演算；步骤3：通过演算结果输出主题。所述步骤六中对元素的渲染分为五步，分别为一次渲染子元素样式、循环渲染孙元素样式、循环渲染孙元素的子元素样式、依次渲染和渲染完全部元素，上述五部依次进行。所述步骤一中的演算函数的数量至少为两组。
采用的是React框架，项目启动时加载配置文件，配置文件中设定了主题切换的方式。根据页面主题切换触发事件，主题切换事件触发后，加载对应主题并重新加载页面，用以获取所需的主题样式。
通过在指定的DOM节点上，设定多种主题色演算函数，即可将网站主题切换成多种颜色；不需要每个节点、每个元素、每个组件的去设定CSS，非常方便，并且简单高效。修改主题色，而不修改样式文件，非常灵活。主题色演算函数通用性，一函数多用，可以在任何前端实现多种主题色。满足不同客户对产品有不同的主题色要求。成本几乎可以忽略不计。可适用于互联网行业、物联网行业以及企事业单位。
采用一个关联网站或者页面主题切换事件的标识，关联主题色演算函数，通过网站基准色和函数参数演算出一种主题色，并设定为入口Dom元素样式，通过子元素嵌套逻辑，依次渲染Dom的子孙元素，渲染完成，主题切换完成。思路清晰，方法简单，可执行性强。主题色演算函数可扩展，兼容性强，可以支持各种操作系统，使用场景丰富，主题色演算函数由可以使用已有的Filter的属性值，也可以自定义，扩展性强。演算函数对操作系统无要求，兼容性强。可适用于网站、购物平台、企事业办公软件、SAP等，使用场景丰富。函数通用性强，只需要获取基础色并根据输入参数即可演算出新的主题，一套函数可以通用多个平台。
主题切换渲染速度快，简单、便捷。在目标网站的入口中找到First Pa rent Dom节点，并做好标识(这里标识为：’root’)；根据主题切换事件获取对应的主题Class，并根据标记(root)找到Dom节点，将主题class赋值到Dom元素上；页面中root元素下的所有子元素、孙元素会根据root元素主题样式改变，而产生的循环渲染，直到所有元素的主题都被渲染完成，这个过程肉眼并不可见；一键式切换主题，操作简便易行。

Claims (5)

1.一种修改WEB前端主题的方法，其特征在于：所述方法步骤如下：
步骤一：通过主题切换入口输入切换信号，通过演算函数进行演算；
步骤二：通过演算函数的演算结果生成Class；
步骤三：将生成的Class应用于指定DOM元素；
步骤四：对页面Body进行输出；
步骤五：通过DOM元素过去主题Class；
步骤六：对元素进行渲染，完成主题切换。
2.如权利要求1所述的一种修改WEB前端主题的方法，其特征在于：所述步骤四中的页面Body包含整体页面内容的DOM元素。
3.如权利要求1所述的一种修改WEB前端主题的方法，其特征在于：所述步骤一中演算函数包括以下步骤：步骤1：定义带参函数；步骤2：通过对参数和获取的基础色进行演算；步骤3：通过演算结果输出主题。
4.如权利要求1所述的一种修改WEB前端主题的方法，其特征在于：所述步骤六中对元素的渲染分为五步，分别为一次渲染子元素样式、循环渲染孙元素样式、循环渲染孙元素的子元素样式、依次渲染和渲染完全部元素，上述五部依次进行。
5.如权利要求1所述的一种修改WEB前端主题的方法，其特征在于：所述步骤一中的演算函数的数量至少为两组。
CN202010044096.7A 2020-01-15 2020-01-15 一种修改web前端主题的方法 Pending CN111221515A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202010044096.7A CN111221515A (zh) 2020-01-15 2020-01-15 一种修改web前端主题的方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202010044096.7A CN111221515A (zh) 2020-01-15 2020-01-15 一种修改web前端主题的方法

Publications (1)

Publication Number Publication Date
CN111221515A true CN111221515A (zh) 2020-06-02

Family

ID=70811015

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202010044096.7A Pending CN111221515A (zh) 2020-01-15 2020-01-15 一种修改web前端主题的方法

Country Status (1)

Country Link
CN (1) CN111221515A (zh)

Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN1573749A (zh) * 2003-06-13 2005-02-02 微软公司 使用外部计划主题的Web网页绘制机制
CN110471738A (zh) * 2019-08-22 2019-11-19 北京字节跳动网络技术有限公司 应用程序的主题切换方法、装置、电子设备及存储介质

Patent Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN1573749A (zh) * 2003-06-13 2005-02-02 微软公司 使用外部计划主题的Web网页绘制机制
CN110471738A (zh) * 2019-08-22 2019-11-19 北京字节跳动网络技术有限公司 应用程序的主题切换方法、装置、电子设备及存储介质

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
无: "主题色切换功能实现", 《HTTPS://BLOG.CSDN.NET/WANGPING146/ARTICLE/DETAILS/86133775》 *

Similar Documents

Publication Publication Date Title
CN106569824B (zh) 页面数据编译的方法和装置、页面渲染的方法和装置
US9256583B2 (en) Conversion of a presentation to Darwin Information Typing Architecture (DITA)
US6782505B1 (en) Method and system for generating structured data from semi-structured data sources
DE69428265T2 (de) Verfahren und system zur erzeugung, spezifizierung und generierung von parametrischen schriftarten
CN108920147B (zh) 一种Web页面构建方法、装置、计算设备和存储介质
CN112379917A (zh) 浏览器兼容性提升方法、装置、设备及存储介质
CN111443901A (zh) 一种基于Java反射的业务扩展方法及装置
CN113987405A (zh) 一种基于ast的数学表达式计算算法
CN111221515A (zh) 一种修改web前端主题的方法
US8656371B2 (en) System and method of report representation
Schuster et al. Conformance checking for trace fragments using infix and postfix alignments
US20040237043A1 (en) Source file generation apparatus
CN113946324A (zh) 一种展示高通量测序数据结果的交互式可视化报告系统
Powers PHP object-oriented solutions
JPH07210397A (ja) プログラム変換方法およびそれを用いたプログラム実行方法
Özdikililer Data Binding in Front End for Web Applications
Freeman Understanding Angular Projects and Tools
Castro et al. A structured review of game coding through modeling
Rotim Adaptive AUTOSAR Diagnostic Log and Trace processing platform
Revill JQuery 2.0 Development Cookbook
JPH09198236A (ja) 命令順序決定方法および装置
CN115576551A (zh) 一种web前端主题模式的切换方法、设备及介质
Freeman et al. Creating an Angular App, Part 1
Mosconi et al. Alligator, a Web-based Distributed Visual Programming Environment.
CN116701808A (zh) 第一页面的渲染方法和装置、处理器及电子设备

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication
RJ01 Rejection of invention patent application after publication

Application publication date: 20200602