/**
 * 动态加载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文件。

  // Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive
  // 不能使用 eval
  // let command = `
  //       promise = new Promise((resolve, reject) => {
  //           import('${jsUrl}').then(remoteComponent => {
  //               resolve(remoteComponent);
  //           }).catch(error => {
  //               reject(error);
  //           });
  //       });
  //   `;
  // eval(command);


  // 打包的时候使用 ES6
  // 这里使用了一个特殊的语法，webpack的变态的语法 /* webpackIgnore: true */
  // webpack 在处理 import 的时候，会把参数对应的文件，进行打包，如果给定变量，那么webpack就不知道如何进行打包了。
  // /* webpackIgnore: true */ 使用 webpackIgnore 参数，表示webpack打包的时候，不打包参数对应的文件。
  // see: https://webpack.js.org/api/module-methods/#dynamic-expressions-in-import
  promise = new Promise((resolve, reject) => {
    import(/* webpackIgnore: true */ jsUrl).then(remoteComponent => {
      resolve(remoteComponent);
    }).catch(error => {
      reject(error);
    });
  });

  return promise;
};


/**
 * 动态加载js模块中的方法
 * @param {*} jsUrl js文件的路径
 * @param {*} functionName js方法中的名称
 * @return promise对象
 */
let dynamicLoadJsFunction = function(jsUrl, functionName){
  let promise0 = dynamicLoadJsModule(jsUrl);

  let promise1 = new Promise((resolve, reject) => {
    promise0.then(remoteComponent => {
      let targetFunction = remoteComponent[functionName];
      resolve(targetFunction);
    }, errorData => {
      reject.error(errorData);
    });
  });
  
  return promise1;
};


export default {
  dynamicLoadJsModule,
  dynamicLoadJsFunction,
};