修改 动态加载Js和Css文件方案

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pc-component-v3",
-  "version": "1.0.20",
+  "version": "1.0.22",
   "description": "",
   "main": "dist/pc-component-v3.js",
   "scripts": {

packages/common/CssUtil.js

@@ -0,0 +1,43 @@
+/**
+ * 动态加载css文件
+ * @param { String } jsUrl js文件的路径
+ * @param { String } linkId css文件的唯一id
+ */
+let dynamicLoadCss = function (cssUrl, linkId) {
+  // 判断 linkId 是否存在，如果已经存在，就不再加载
+  if(linkId != null && linkId.length > 0){
+    let links = $('link[id="' + linkId + '"]');
+    if(links.length > 0){
+      console.log('css文件%s(id=%s)已经加载，不重复加载', cssUrl, linkId);
+      return;
+    }
+  }
+
+  if (cssUrl != null && cssUrl.length > 0) {
+    let head = document.getElementsByTagName('head')[0];
+    let link = document.createElement('link');
+    link.type = 'text/css';
+    link.rel = 'stylesheet';
+    link.href = cssUrl;
+    link.id = linkId;
+    head.appendChild(link);
+  }
+};
+
+/**
+ * 动态卸载css文件
+ * @param { String } linkId css文件的唯一id
+ */
+let dynamicUnloadCss = function(linkId){
+  if(linkId != null && linkId.length > 0){
+    let links = $('link[id="' + linkId + '"]');
+    if(links.length > 0){
+      console.log('卸载css文件(id=%s)', linkId);
+      links.remove();
+    }
+  }
+};
+
+export default {
+  dynamicLoadCss, dynamicUnloadCss,
+};

packages/common/JsUtil.js

@@ -0,0 +1,28 @@
+/**
+ * 动态加载js模块
+ * @param {*} jsUrl js文件的路径
+ * @return promise对象
+ */
+let dynamicLoadJsModule = function(jsUrl){
+  let promise = null;
+    
+  // 注意：在webpack中直接使用import(url).then()会错误的解析url。
+  // 如果url是静态的值，举例'xxx.js', webpack打包的时候，会去src对应的目录下面找js文件。
+  // 如果url是变量，举例const url = '', webpack打包的时候，原理不清晰...，测试结果时浏览器不会发出http请求加载后端的js文件。
+  let command = `
+        promise = new Promise((resolve, reject) => {
+            import('${jsUrl}').then(remoteComponent => {
+                resolve(remoteComponent);
+            }).catch(error => {
+                reject(error);
+            });
+        });
+    `;
+  eval(command);
+  return promise;
+};
+
+
+export default {
+  dynamicLoadJsModule,
+};

packages/index.js

@@ -48,6 +48,8 @@ import IFrameUtil from './common/IFrameUtil.js';
 import UserStorageResource from './common/UserStorageResource.js';
 import DownloadService from './common/DownloadService.js';
 import ProcessReportResource from './process/src/api/ProcessReportResource.js';
+import CssUtil from './common/CssUtil.js';
+import JsUtil from './common/JsUtil.js';
 
 import ModalFix from './modal/src/ModalFix.js';
 import PrintUtil from './print/src/PrintUtil.js';
@@ -166,4 +168,6 @@ export default {
   UserStorageResource,
   DownloadService,
   ProcessReportResource,
+  CssUtil,
+  JsUtil,
 };