你的位置:首页 > 软件开发 > Java > echarts与TmodJS的冲突

echarts与TmodJS的冲突

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

  前些日子写了一篇关于腾讯模板引擎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与TmodJS的冲突

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

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

echarts与TmodJS的冲突

  虽然两者抛出方法的名称一致,但它们所需参数的内容却并不相同。两者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      if(!arguments.length){ // 参数有效性、完整性判断,不符合直接pass~      var i = 0;      reqCallback = arg.callback;      if(window.require && window.require.loader == 'esl'){       // esl已经加载,不需要require.js    return true;}

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


原标题:echarts与TmodJS的冲突

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。