动态加载功能模块js与css的方法、装置及存储介质制造方法及图纸

本发明专利技术公开了动态加载功能模块js与css的方法、装置及存储介质，属于前端软件开发技术领域，该方法基于H5+Javascript实现动态加载功能模块js与css文件，该方法的实现方式如下：首先创建一个目录A；于目录A下创建一个js文件，设其命名为m.js；于目录A下创建一个目录B，目录B用于存放所有模块代码，设定存放规则为模块目录与内部文件名称一致；于js文件中声明一个JSON对象m；JSON对象m中添加一个用于加载模块的属性，该属性的实现逻辑为：获取当前文件路径；删除所有模块代码引入；引入所需要的功能模块代码。本发明专利技术能够有条理的管理功能模块，一定程度上也提高了代码编写者思路的清晰度。度。度。

【技术实现步骤摘要】
动态加载功能模块js与css的方法、装置及存储介质


[0001]本专利技术涉及前端软件开发
，具体地说是动态加载功能模块js与css的方法、装置及存储介质。

技术介绍

[0002]在H5 web前端开发过程中，当需要引入编写的业务模块实现js与css文件时，现有的技术即通过html的<script>以及<link>标签引入。而当同一页面功能模块过多，或者业务过于繁杂时，依靠html单一的标签的引入则会变得混乱且不易于管理。

技术实现思路

[0003]本专利技术的技术任务是针对以上不足之处，提供动态加载功能模块js与css的方法、装置及存储介质，能够有条理的管理功能模块，一定程度上也提高了代码编写者思路的清晰度。
[0004]本专利技术解决其技术问题所采用的技术方案是：动态加载功能模块js与css的方法，该方法基于H5+Javascript实现动态加载功能模块js与css文件，该方法的实现方式如下：首先创建一个目录A；于目录A下创建一个js文件，设其命名为m.js；于目录A下创建一个目录B，目录B用于存放所有模块代码，设定存放规则为模块目录与内部文件名称一致；于js文件中声明一个JSON对象m；JSON对象m中添加一个用于加载模块的属性，该属性需要的参数包括页面中所需的所有功能模块以及目前需要加载的功能模块；该属性的实现逻辑为：步骤S1：获取当前文件路径；步骤S2：删除所有模块代码引入；步骤S3：引入所需要的功能模块代码。
[0005]本方法为动态加载代码模块，通过简单控制几个变量，即可解决H5 web前端引入功能模块代码混乱，不易于管理的问题。尤其是对于同一页面不同业务所需功能分离度高的时候，此方法可有条理的管理功能模块，一定程度上页提高了代码编写者思路的清晰度。
[0006]进一步的，所述目录A下创建一个目录B，创建code模块代码实现如下：于目录B下创建code目录；于code目录下创建code.js以及code.css文件。
[0007]优选的，所述页面中所需的所有功能模块为字符数组，设该字符数组命名为moudles；目前需要加载的功能模块为字符数组，设该字符数组命名为needs；则所述步骤S1，具体实现逻辑如下：设该路径命名为path，通过DOM层的document.scripts获取到当前页面所引用的
所有js；循环遍历判断每一个script对象的src属性截取值：截取最后一个“/”与“.”中间的字符串，是否与当前script名称一致，若一致，则截取src第一个字符至最后一个“/”的字符串，该字符串即为当前文件路径；由于通过js名称进行判断，因此其余引用的js不可与当前文件名称重复。而此问题可视为极易规避的问题。
[0008]所述步骤S2，具体实现逻辑如下：遍历参数moudles，利用每一个moudles的值进行如下操作：通过DOM层的document.getElementById()方法，根据每一个moudles的值拼接“Script”以及“Css”作为Id获取引入js以及css的html元素，判断是否为空，不为空则利用html元素对象的remove()方法进行移除；所述步骤S3，具体实现逻辑如下：遍历参数needs，利用每一个needs的值进行如下操作：步骤3.1、引入css：通过DOM层的document.createElement()方法创建link元素对象，通过DOM层document.getElementsByTagName('head')[0].appendChild()代码将link元素放入页面中，即获取页面中所有“head”标签元素取，第一个元素将所创建的link元素作为孩子元素放入；以此便将css文件引入到当前页面；步骤3.2、引入js：通过DOM层的document.createElement()方法创建script元素对象，通过DOM层document.getElementsByTagName('head')[0].appendChild()代码将script元素放入页面中，即获取页面中所有“head”标签元素取，第一个元素将所创建的script元素作为孩子元素放入；以此便将js文件引入到当前页面。
[0009]优选的，对link元素对象设置属性如下：id 为每一个needs的值拼接
ꢀ“
Css”,rel为“stylesheet”,href 为步骤S1获取的路径path拼接
ꢀ“
moudles/”+ 每一个needs的值 + 每一个needs的值 +
ꢀ“
.css”；若此needs的值为 code，则href为：path +
ꢀ“
moudles/
”ꢀ
+
ꢀ“
code
”ꢀ
+
ꢀ“
.css”。
[0010]优选的，对script元素对象设置属性如下：id 为每一个needs的值拼接
ꢀ“
Script”,type为“text/javascript”,src为步骤S1获取的路径path拼接
ꢀ“
moudles/”+ 每一个needs的值 + 每一个needs的值 +
ꢀ“
.js”；若此needs的值为 code，则src为：path +
ꢀ“
moudles/
”ꢀ
+
ꢀ“
code
”ꢀ
+
ꢀ“
.js”。
[0011]优选的，设有code1和code2两个业务模块，当业务模块只用到code1时，调用manager.load([
’
code1
’
,
’
code2
’
],[
’
code1
’
])，过程如下：（1）、获取当前文件路径path；（2）、遍历参数moudles，将code1及code2相关的js与css文件移除；（3）、遍历参数needs，将code1相关的js与css文件引入。
[0012]进一步的，移除操作如下：（2.1）、遍历参数moudles，获取每一个moudles的值，取名为moudle；（2.2）、通过document.getElementsByld（moudle+
‘
Css
’
）获取元素；（2.3）、判断获取元素是否为空，不为空则调用remove()进行移除。
[0013]进一步的，引入操作如下：（3.1）、遍历参数needs，获取每一个needs的值，取名为need；（3.2）、通过document.createElement(
‘
link
’
)创建link元素，设置属性：id ：needs+“Css”rel：“stylesheet”href：path +
ꢀ“
moud本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.动态加载功能模块js与css的方法，其特征在于，该方法基于H5+Javascript实现动态加载功能模块js与css文件，该方法的实现方式如下：首先创建一个目录A；于目录A下创建一个js文件，设其命名为m.js；于目录A下创建一个目录B，目录B用于存放所有模块代码，设定存放规则为模块目录与内部文件名称一致；于js文件中声明一个JSON对象m；JSON对象m中添加一个用于加载模块的属性，该属性需要的参数包括页面中所需的所有功能模块以及目前需要加载的功能模块；该属性的实现逻辑为：步骤S1：获取当前文件路径；步骤S2：删除所有模块代码引入；步骤S3：引入所需要的功能模块代码。2.根据权利要求1所述的动态加载功能模块js与css的方法，其特征在于，所述目录A下创建一个目录B，创建code模块代码实现如下：于目录B下创建code目录；于code目录下创建code.js以及code.css文件。3.根据权利要求1或2所述的动态加载功能模块js与css的方法，其特征在于，所述页面中所需的所有功能模块为字符数组，设该字符数组命名为moudles；目前需要加载的功能模块为字符数组，设该字符数组命名为needs；则所述步骤S1，具体实现逻辑如下：设该路径命名为path，通过DOM层的document.scripts获取到当前页面所引用的所有js；循环遍历判断每一个script对象的src属性截取值：截取最后一个“/”与“.”中间的字符串，是否与当前script名称一致，若一致，则截取src第一个字符至最后一个“/”的字符串，该字符串即为当前文件路径；所述步骤S2，具体实现逻辑如下：遍历参数moudles，利用每一个moudles的值进行如下操作：通过DOM层的document.getElementById()方法，根据每一个moudles的值拼接“Script”以及“Css”作为Id获取引入js以及css的html元素，判断是否为空，不为空则利用html元素对象的remove()方法进行移除；所述步骤S3，具体实现逻辑如下：遍历参数needs，利用每一个needs的值进行如下操作：步骤3.1、引入css：通过DOM层的document.createElement()方法创建link元素对象，通过DOM层document.getElementsByTagName('head')[0].appendChild()代码将link元素放入页面中，即获取页面中所有“head”标签元素取，第一个元素将所创建的link元素作为孩子元素放入；以此便将css文件引入到当前页面；步骤3.2、引入js：通过DOM层的document.createElement()方法创建script元素对象，通过DOM层document.getElementsByTagName('head')[0].appendChild()代码将script元素放入页面中，即获取页面中所有“head”标签元素取，第一个元素将所创建的
script元素作为孩子元素放入；以此便将js文件引入到当前页面。4.根据权利要求3所述的动态加载功能模块js与css的方法，其特征在于，对link元素对象设置属性如下：id 为每一个needs的值拼接
ꢀ“
Css”,rel为“stylesheet”,href 为步骤S1获取的路径path拼接
ꢀ“
moudles/”+ 每一个needs的值 + 每一个needs的值 +
ꢀ“
.css”；若此needs的值为 code，则href为：path +
ꢀ“
moudles/
”ꢀ
+
ꢀ“
code
”ꢀ
+
ꢀ“
.cs...

【专利技术属性】
技术研发人员：韩光普，张玉新，刘燕，李朋林，
申请(专利权)人：浪潮软件股份有限公司，
类型：发明
国别省市：