前些日子写了一篇关于腾讯模板引擎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;
}
寥寥草草记录了下这个问题的发现以及解决,真心希望能够帮到遇到同类问题的朋友。如果文章中存在什么错误或者不周之处,还请各位高手批评、指正。期待与大家进行交流!
原标题:echarts与TmodJS的冲突
关键词:JS