【创新实训 - 个人报告】01 - Vue中动态添加全局JS脚本

开始之前

在我们的创新实训中，针对于古文字图像切片的前端编辑器需要做大量图形处理的工作，对于一个需要复杂绘图计算的web应用程序，将全部代码都放在.vue文件里显然是不现实的，需要一个三千行以上的代码包来处理这一复杂的架构。

javascript可以利用"prototype"来实现类似面向对象编程，也是我们在项目中采用的方式，例如：

function Dot2D(){
  this.initialize.apply(this, arguments);
}
Dot2D.prototype.initialize = function(){
  //构造函数
}

需要加载多个这样的类。

两种实现方式

1、比较标准的方法是，利用export导出对象，并在其他js中通过import引入：

module.export = {
  Dot2D
}

export{
  Dot2D
}

这种方式具有一定局限性，例如：

在项目中要求将xml转换成javascript数据对象时，需要通过字符串创建对象。如果使用import，很难写一个通用的转换函数覆盖到全部类，也无法考虑到后续需要添加的插件功能。

有同学要说了，那使用eval不就行了吗？

感兴趣的话可以参照这篇文章：

JavaScript 为什么不推荐使用 eval？
https://www.zhihu.com/question/20591877/answer/57705130

2、通过 document.createElement(‘script’) 加载到全局：

EngineLoader.loadScript = function(path, name){
  return new Promise((resolve) => {
    let url = path + name;
    let script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    script.async = false;
    script.onerror = (err) => {
      console.log(err);
    };
    script._url = url;
    script.onload = () =>{
      resolve();
    };
    document.body.appendChild(script);
  });
};

这种方式需要将代码放到webpack的static文件夹下。

使用webpack创建应用时，assets里面的资源会被webpack打包进代码，而static目录下的文件并不会被webpack处理，它们会直接复制到最终目录（dist/static）下。一般在static里放一些类库的文件，而这里正好满足我们把代码作为类库这一需求。

document.body.appendChild(script) 会全局加载javascript，你可以从window下找到所有代码库中的类。

回到上面的问题，将xml转换成javascript数据对象时，我们只需要进行如下操作，例如：

<Dot2d x=10 y=10/>

解析时，这样提取Dot2D，避免了使用eval：

Dot2D.prototype.getObject = function(){
  return new Dot2D();
}

return window["Dot2D"].getObject();

并且，在后续需要添加的插件功能中，这种加载方式能够让插件重载整个引擎内容，关于这部分我会在下一期中谈到。