require跨站点使用出现js路径不正确问题

来源:互联网 发布:数据埋点 编辑:程序博客网 时间:2024/06/03 23:42

require管理js方便简洁,通过模块依赖关系,页面上可以引入“更少”甚至只需要引入一个的js,使得页面清爽简洁,QAQ。

在这里就不再介绍require的使用了,直接讲述本次遇到的坑,下面直接上配置(开发环境:静态资源和动态资源分别位于不同的站点)。

----------------------START------------------------

入口js

-------------------------------------------------------

requirejs.config({

//版本号
   urlArgs: (function(){
      var v = $('#jsMian').data('version');
      return (v == 'undefined' ? null : v);
   })()
});


require(['base','productBase'],function(base,productBase){
//code
}

--------------------END------------------------------

base:公司前辈写的一个公用js,因为是压缩过的也就一直没详细看过,只知道是一些通用的模块。

productBase:笔者本次开发封装的一个通用模块

问题描述:在360、火狐和谷歌浏览器上运行完全正常,但是在IE上点击跳转(跳转是指通过相关按钮事件给当前url追加请求参数)后却出现productBase.js的加载路径错误问题。通过network查看发现productBase.js的路径变成了动态页面的站点,奇怪的事情发生当笔者刷新跳转后错误的页面后productBase.js的路径又是正确的QAQ~~当笔者天竺以为是偶然错误后又进行跳转委屈,你没有猜错又出现路径出错,再次刷新之后又好了。此时有一万只羊驼呼啸而过。回到正题,笔者放正心态开始填坑之路,笔者在经过一段盲目尝试之后突然发现base.js的路径不论是跳转还是刷新之后都是正确的,抓住这颗救命稻草开始发掘,查看了base.js中的相关配置。

----------------------START------------------------

base.js

-------------------------------------------------------

requirejs.config({
baseUrl: "../js",
paths: {
scrollLoading: "../libs/scrollLoading/jquery.scrollLoading",
layerX: "../libs/layer/layer"
}
})


--------------------END------------------------------

在base.js中注意到baseUrl: "../js",笔者就在想是不是这个baseUrl的原因,在没有修改baseUrl的情况下改变了入口js的配置,将其中的模块依赖顺序进行了调整(红色部分),然后就没有然后因为问题解决了- -!!,但是笔者依旧没有明白为什么baseUrl会影响到后续模块,更甚至擅自将站点都更换了。这个坑只有等上班后让前辈解惑了奋斗


----------------------START------------------------

入口js修改后

-------------------------------------------------------

requirejs.config({

//版本号
   urlArgs: (function(){
      var v = $('#jsMian').data('version');
      return (v == 'undefined' ? null : v);
   })()
});


require(['productBase','base'],function(productBase,base){
//code
}

--------------------END------------------------------



原创粉丝点击