[发明专利]一种前端Web项目的线上样式动态替换方法和系统

说明书

本发明涉及一种前端Web项目的线上样式动态替换方法和系统，方法包括：获取前端Web项目运行时的样式代码数据，从该代码数据中获取所有的link标签和style标签；从获取的link标签和style标签中依次选取标签，判断选取的标签是link标签还是style标签，然后分别调用对应的处理逻辑获取样式数据；根据样式替换需求，对样式数据进行字符串替换，得到新的字符串；创建新的style标签，并将新的字符串赋值给新的link标签中；将赋值后的新的style标签插入前端Web项目对应html文档的head标签中，使新的样式生效，并覆盖原来的样式。与现有技术相比，本发明具有代码改动风险低、适用于多场景的样式替换、兼容性好等优点。

技术领域

本发明涉及前端Web项目样式替换技术领域，尤其是涉及一种前端Web项目的线上样式动态替换方法和系统。

背景技术

在前端项目开发时，或者在已经上线的Web项目中，当需要改变产品的某些样式时，比如，产品的主色调是蓝色，某一天，我们想换个风格，将主色调改为黄色；再或者，产品的字体大小是12px，想要将12px变成14px等等的场景，站在一般的开发角度，就需要在项目代码中全局搜索做替换，会修改底层代码，可能存在一不小心就替换错了地方，也会加大代码审查的负担；对于同时并行的在开发的需求，也无法保证能够及时替换或者无法提供完整的规范做需求开发的支撑。

发明内容

本发明的目的就是为了克服上述现有技术存在更换Web项目产品样式时需要在项目代码中做全局搜索替换，代码错误风险大的缺陷而提供一种前端Web项目的线上样式动态替换方法和系统。

本发明的目的可以通过以下技术方案来实现：

一种前端Web项目的线上样式动态替换方法，包括以下步骤：

获取前端Web项目运行时的样式代码数据，从该代码数据中获取所有的link标签和style标签；

分别获取所述link标签和style标签的样式数据；

根据样式替换需求，对所述样式数据进行字符串替换，得到新的字符串；

创建新的style标签，并将所述新的字符串赋值给所述新的link标签中；

将赋值后的新的style标签插入所述前端Web项目对应html文档的head标签中，使新的样式生效，并覆盖原来的样式。

进一步地，获取所述link标签和style标签的样式数据具体包括：

从获取的link标签和style标签中依次选取标签，判断选取的标签是link标签还是style标签，然后分别调用对应的处理逻辑获取样式数据。

进一步地，所述处理逻辑包括：

对于link标签，通过获取link标签的href属性，然后基于该href属性使用ajax请求获取所述link标签的样式数据；

对于style标签，通过DOM的innerHTML API请求获取所述style标签的样式数据。

进一步地，通过DOM的document.createElement API操作，动态创建出所述新的style标签。

进一步地，通过JavaScript的document.getElementsByTagName('link')功能获取所有的link标签；通过JavaScript的document.getElementsByTagName('style')功能获取所有的style标签。

进一步地，所述方法还包括将所述线上样式动态替换方法的数据处理过程封装为sdk工具包。