Лучший способ найти глобальные переменные в Javascript

Question

Я унаследовал проект, в котором, похоже, есть много переменных, загрязняющих глобальную сферу, и я хотел бы найти все эти. Каков наилучший способ найти введенные пользователем глобальные переменные? Я хочу исключить свойства объекта window, которые находятся там по умолчанию, и просто отфильтровать до тех, которые были введены нашим кодом. Есть ли инструмент или плагин IDE, который позволит мне легко идентифицировать их? Благодаря

Answer 1

сравнить ключи в оконном объекта с ключами «пустого» окна-объекта:

(function(){ 
    var iframe = document.createElement('iframe'); 
    iframe.src = "about:blank"; 
    document.body.appendChild(iframe); 

    var windowVars = Object.keys(iframe.contentWindow); 
    var globalVars = Object.keys(window).filter(key => !windowVars.includes(key)); 

    console.log("global Vars:", globalVars); 
    document.body.removeChild(iframe); 
})(); 

Теперь вам нужно найти свой код, чтобы найти строку, в которой они объявлены.

Answer 2

Попробуйте это ...

for(var stuff in window) { 
    if(window.hasOwnProperty(stuff)) console.log(stuff); 
} 

Это будет список все функции и переменные на странице, может быть не очень полезно, но может дать вам больше информации.

Если вы открываете инструменты Chrome dev, вы можете попробовать. Создайте переменную var life = 42, и вы увидите ее после выполнения цикла выше.

Answer 3

Получение Пример окна объекта: https://jsfiddle.net/noevgh4u/

сравнение объектов, например: https://jsfiddle.net/noevgh4u/1/

Самый практичный способ, которым я мог думать о том, чтобы открыть пустую страницу в браузере вашего выбора, выписывать объект, основанный на этих свойствах окна.

document.body.append("var obj = {"); 
for(prop of Object.keys(window)) { 
document.body.append(prop +": null"); 
}; 
document.body.append("}"); 

В примере скопируйте этот объект из текста на странице.

Вставьте его в приложение, которое вы проверяете для глобальных переменных.

Создать новый объект с помощью

var newObj; 
for(prop of Object.keys(window)) { 
newObj[prop] = null; 
}; 

так, что в приложении, которое теперь Obj, содержащих пустые ключи окна и newObj, содержащие ваши приложения ключи.

Затем сравните два с помощью такого способа, как Deep comparison of objects/arrays

или что-то вроде:

function filterKeys(a, b) { 
var firstKeys = Object.keys(a); 
var secondKeys = Object.keys(b); 
var missingKeys = firstKeys.filter(val => !secondKeys.includes(val)); 
return missingKeys; 
} 
var createdVarsAndFuncs = filterKeys(obj, newobj); 

Я создал пример этого в jsFiddle https://jsfiddle.net/noevgh4u/1/