研究一個網站前端技術的時候,了解它的全局的對象是一個好的入口,
一般來說,常見的庫就會用外觀模式,最后暴露一個對象給用戶調用,
比如jQuery,requirejs,angular,react
均是用這種方式。

如果沒有用cmd/amd模塊化或類似webpack工具打包的話,會給全局對象window添加一個屬性,如angular:

如React

同時,為了避免全局污染,也要關注全局變量的個數(shù)和詳情。

How

可以通過ES5的新增api(Object.keys)看瀏覽器全局變量列表:Object.keys(window)

發(fā)現(xiàn)一般的網站都有兩百多個全局變量,人力去看且需要區(qū)分是否是用戶定義的比較困難,需要一個script去列出所有的非原生的全局屬性.

開始想的是能不能防篡改對象的相關檢測api(Object.isExtensible,Object.isSealed,Object.isFrozen)來判斷是否原生api?

但并不是所有的原生對象都是seaded. 所以此方法行不通。

那么能不能有一個純凈的、沒有加載第三方庫的全局對象?

對于瀏覽器環(huán)境,我們有iframe

可以添加一個iframe,然后對比當前的window,就可以得到詳細列表。

var iframe = document.createElement("iframe"); document.body.appendChild(iframe); Object.keys(iframe.contentWindow).length

列出非原來對象