你的位置:首页 > Java教程

[Java教程]echarts与TmodJS的冲突


  前些日子写了一篇关于腾讯模板引擎TmodJS的文章《模板引擎artTemplate及模板预编译器TmodJS的使用入门》,算是对其原理与使用进行了初步的接触与研究。近期在一个项目中对TmodJS进行了尝试,未曾想无意中居然发现了TmodJS与百度图表神器Echarts之间存在一个看似不能共存的冲突。

  问题是这样的:项目的某个页面中同时显式地引入了Echarts的主文件“echarts.js”以及TmodJS的依赖文件“require.js”。当执行到TmodJS所需的require()方法时,脚本会报“Error: [REQUIRE_FATAL]Relative ID is not allowed in global require”的错误,进而导致模板无法被加载以及渲染。报错如图所示:

  

  从报错信息上看,问题存在于echarts以及require方法上。这个项目中的Echarts均采用模块化方式进行加载,而TmodJS也需要通过“require.js”来实现编译后模板的加载以及后续的DOM渲染。但前者内置的是百度自己实现的模块化加载器“esl”,因为此前对echarts的实现有着一些粗浅的了解,因此我认为问题很有可能和esl抛出的require方法与require.js抛出的同名方法不兼容相关。

  由于页面中先引入了esl,其在加载成功之后便在window对象中留下了全局方法require和define。而随后引入的require.js在加载时由于检测到了上述两个方法的存在,则认为自身已有实例存在而不会继续进行加载(若继续加载则会覆盖esl的两个同名方法)。require.js的相关代码如下:

  虽然两者抛出方法的名称一致,但它们所需参数的内容却并不相同。两者require方法所需的第一个参数均为array类型,但require.js需要的array中直接存放的就是模块相对路径的字串。而esl需要的参数更为复杂一些,其先要通过require.config方法,将相对路径的字串设置到一个object中的一个名为paths的object的指定key中,而后在使用其自己定义的require时,会将之前指定的key依次压入array中并将这个array作为第一个参数。两者在require方法所需参数上的差异,最终导致了上述脚本错误的出现。看似两个风马牛不相及的东西,居然因为模块化加载器之间的冲突产生了交集,确实让人小意外了一下。

  既然问题的原因已经确定,那么我们就可以尝试进行解决了。我的解决思路是,默认在页面中不显式引入require.js。在TmodJS需要使用require方法之前,并且先对当前浏览器环境的require进行判定。如果加载了esl,则将模块相对路径按照esl需要的方式配置、转化,进而通过esl加载。如果已存在其它amd加载器抛出的require方法或者干脆就不存在require方法,则动态地加载require.js。具体代码如下:

  // 代码简陋,还请各位路过的高手见谅。如有疏漏还请海涵、指正

  function NeedReq(arg){

    //  description: 智能判断页面是否加载了esl并由此决定是否加载require.js
    //  author: Liyanyang(gudaozr)
    //  version: 1.1

      var reqPath = [], reqRelativePath = [], reqCallback = null;  // 分别定义esl、require.js所用参数数组以及require.js动态加载成功后制定的回调函数
      var objIsEmpty = function(obj){  // 检测对象是否为空的函数,这里主要用于判断传进来的参数是否有效
          if(typeof obj != 'object'){
              return false;
          }
          for(var key in obj){
              return false;
          }
          return true;
      };

      if(!arguments.length){ // 参数有效性、完整性判断,不符合直接pass~
          return false;
      }else if(!arg.list || objIsEmpty(arg.list)){
          return false;
      }else if(typeof arg.callback != 'function'){
          return false;
      }else if(!arg.reqPath){
          return false;
      }

      var i = 0;
      for(var key in arg.list){ // 按照esl和require.js需求生成不同内容形式的参数数组
          reqPath[i] = key;
          reqRelativePath[i++] = arg.list[key];
      }

      reqCallback = arg.callback;

      if(window.require && window.require.loader == 'esl'){       // esl已经加载,不需要require.js
          require.config({
              paths:arg.list
          });
          require(reqPath,reqCallback);
      }else if(!window.require){      // esl和require.js均为加载,需要加载require.js
          var scrNode = document.createElement('script');
          scrNode.setAttribute('src',arg.reqPath);
          var scripts = document.getElementsByTagName('script');
          if(scripts.length){
              var scrParent = scripts[0].parentNode;
              if(scripts.length == 1){
                  scrParent.insertBefore(scrNode,scripts[0]);
              }else{
                  scrParent.insertBefore(scrNode,scripts[1]);
              }
              scrNode.onload = function(){
                  require(reqRelativePath,reqCallback);
              }
          }
      }else if(window.require && define.amd){     //  require.js或者其它amd加载器已经加载
          require(reqRelativePath,reqCallback);
      }

    return true;

}

  寥寥草草记录了下这个问题的发现以及解决,真心希望能够帮到遇到同类问题的朋友。如果文章中存在什么错误或者不周之处,还请各位高手批评、指正。期待与大家进行交流!