这个问题,之前没怎么想过,因为现在大部分时间我们都在搞 react、vue + webpack 这种有模块化的,所以基本上用 es module 就可以。
一般最终形态都是 html 引入 script 标签,如果一些老项目需要一个 script 标签里的 js 引用另一个 js 文件,怎么办呢。
function addScript(url){
var script = document.createElement('script');
script.setAttribute('type','text/javascript');
script.setAttribute('src',url);
// 具体加载在哪,可替换这一条
document.getElementsByTagName('head')[0].appendChild(script);
}
// 加载在head末尾
document.getElementsByTagName('head')[0].appendChild(script);
document.head.appendChild(script);
// 加载在body末尾,需要确保已经有body标签了,如果这个代码是在head里,那可能还没有body
document.body.appendChild(script);
// 加在 head 标签上面,也就是 html 里的第一个元素
var html = document.documentElement;
html.insertBefore(script, html.firstChild);
// 加载在第一个script脚本前,确保网页中至少有一个 script 标签
var first = document.getElementsByTagName('script')[0];
first.parentNode.insertBefore(script, first);
// 把js文件插入到目前所在的js文件前
var first = document.getElementsByTagName('script');
var here = first[first.length-1];
here.parentNode.insertBefore(script, here);
// 把js文件插入到目前所在的js文件后
var first = document.getElementsByTagName('script');
var here = first[first.length-1];
here.parentNode.appendChild(script);
如果加载完,想要获取这个 js 文件中暴露的全局变量,则需要:
function addScript(url){
var script = document.createElement('script');
script.setAttribute('type','text/javascript');
script.setAttribute('src',url);
document.getElementsByTagName('head')[0].appendChild(script);
}
addScript('http://pv.sohu.com/cityjson')
window.onload = function () {
console.log(window.returnCitySN)
}