我需要在我的网站上引用第三方编写的 JavaScript。遗憾的是，编写此脚本的开发人员决定将所有函数全局定义，就像这样：
function AwesomeStringHelper() {
// ...
}
function MyGreatFunction() {
// ...
}
<script>标签引用这个脚本时，这两种方法都将被添加到window对象中。
由于我不想污染全局作用域，是否有一种方法可以改变外部脚本的作用域？理想情况下，我希望能够类似于ExternalLibrary.MyGreatFunction()这样引用这些方法。我无法修改第三方脚本，因为它是在外部托管的，并且经常更改。首先，尝试教育第三方开发人员如何正确编写他们的模块。
如果这不起作用，请执行以下操作：
var ExternalLibrary = ExternalLibrary || window;
在你的代码顶部添加<script>标签。
之后，你可以在整个代码中使用ExternalLibrary.MyGreatFunction()来引用第三方库中的函数（即使它们仍然可见于全局的window作用域）。当第三方开发人员修复了他们的作用域问题后，你只需要进行一行更改即可保持兼容性（或者根本不需要更改，如果他们恰好使用与你相同的ExternalLibrary名称）。
或者，使用两个简单的代码片段包裹<script>标签，记住window对象的键，然后将新出现的键移动到一个新对象中（同时从window中删除它们）：
预加载：
var ExternalLibrary = { _current: Object.keys(window) };
后加载：
Object.keys(window).forEach(function(key) {
if (ExternalLibrary._current.indexOf(key) < 0) {
ExternalLibrary[key] = window[key];
delete window[key];
}
});
delete ExternalLibrary._current;
在严格模式变得普遍之前，我曾经使用过类似的方法来检查全局变量泄露。
window对象（如window.myGlobal = someValue），并且您能够手动下载源代码，那么您应该能够在函数中“包装”整个脚本，在其中重载window对象。
function wrapModule(code) {
// create a "fake" window object that inherits from the global object
var fakeWindow = Object.create(window);
// create a function wrapping the code
// note that "window" is a parameter name in this function, shadowing
// the global object
var func = Function("window", code);
// call function
func.call(fakeWindow, fakeWindow);
// return fake window object
return fakeWindow;
}
// run code
const fakeWindow = wrapModule(`
var x = 0; // local variable (will not be exported)
y = 1; // global variable (will still be leaked)
window.z = 2; // assignment to window
this.w = 3; // assignment to this
`);
// check what variables are exposed
console.log('window.x', typeof x); // window.x undefined
console.log('window.y', typeof y); // window.y number
console.log('window.z', typeof z); // window.z undefined
console.log('window.w', typeof w); // window.w undefined
// check what variables are exposed in fakeWindow
console.log('fakeWindow.x', typeof fakeWindow.x); // fakeWindow.x undefined
console.log('fakeWindow.y', typeof fakeWindow.y); // fakeWindow.y number
console.log('fakeWindow.z', typeof fakeWindow.z); // fakeWindow.z number
console.log('fakeWindow.w', typeof fakeWindow.w); // fakeWindow.w numberconst ThirdPartyLib = {AwesomeStringHelper, MyGreatFunction};
delete window.AwesomeStringHelper;
delete window.MyGreatFunction;
ThirdPartyLib.AwesomeStringHelper(haveFun);
var myLib = function() {
//entire script
return {
functionA : functionA,
functionB : functionB,
//rest of functions
}
}
或者像这样（立即调用函数）
(function(global) {
//entire script
myLib.functionA = functionA;
myLib.functionB = functionB;
//rest of fn
global.myLib = myLib;
})(window);
你可以使用gulp自动化这个过程，但我不确定是否有适合的插件。
<script> 标签引入外部库之后添加的代码吗？ - user663031不确定jQuery是否可选或您是否关心它，但我不知道如何编写本机JS AJAX调用，请见谅：
$(document).ready(function(){
$.ajax({
url: 'www.example.com/awesome_script.js', // get the contents of the external script
type: 'GET',
crossDomain: true,
dataType: 'html',
success: function(data){
// build our script tag and wrap the contents inside of a function call
var script = "<script>"
script+= "var callMe = function(call_func, var1, var2, var3){";
script+= data;
script+= "return typeof call_func === 'function' ? call_func(var1, var2, var3) : 'You trying to dynamically call a variable? idk how to do that.';";
script+= "};";
script+= "<\/script>";
// assuming this is legal then just append the custom script tag to the <body> :-)
$('body').append($(script)[0]);
// profit?
callMe('AwesomeStringHelper', 'some_var'); // this function accepts one parameter
callMe('MyGreatFunction'); // this function accepts no parameters
}
});
});
var script 的方式。 - MonkeyZeus