How JavaScript lists the non-native properties of global objects.

Why

When researching a website's front-end technology, it is a good idea to understand its global object.
In general, the common library will use the appearance pattern, finally exposes an object to the user to call,
Like Jquery,requirejs,angular,react.
Are all in this way.

If it is not packaged with CMD/AMD modularity or a similar webpack tool, a property is added to the Global object window, such as angular:

such as react

At the same time, in order to avoid global pollution, we should also pay attention to the number and details of global variables.

How

You can see the list of browser global variables through ES5 's new API (Object.keys):Object.keys(window)

found that the general site has more than 200 global variables, human to see and need to distinguish whether user-defined is more difficult, need a script to list all non-native global properties.

Start thinking about the ability to tamper with the object's associated detection API (Object.isextensible,object.issealed,object.isfrozen) to determine whether the native API?

But not all native objects are seaded. So this method won't work.

Can there be a pure global object that does not load third-party libraries?

For the browser environment, we have an IFRAME

You can add an iframe and then compare the current window to get a detailed list.

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

List non-original objects

(function(){var iframe=Document.CreateElement ("IFRAME");Document.Body.AppendChild (IFRAME);var Originwindow=Iframe.Contentwindow, Currentwindow=Windowvar origin=Object.Keys (Originwindow), current=Object.Keys (Currentwindow), extendattr={};Current.ForEach ((Key)=>{if (Originwindow[key]===Undefined{Extendattr[key]=currentwindow[key]};})Console.Log' Origin window:${Origin.Length}, Current window:${Current.Length},extentattr:${object. keys (extendattr).  length} ') console. Log ( "extendattr:" ,extendattr) document. Body. removechild (iframe) ;}) ()                

Global objects for Cnblogs:

How node Handles

Because node does not have the same tools as the Chrome Dev tools console, it can intuitively and simply execute JS code snippets,

For Nodejs, you can export the global object after the application runs stably (all global, singleton objects are initialized).

Then in the same environment, do not import any libraries to export global objects, to compare.

How to know if a native function has no coverage

Because Function.prototype.toString of the API, the native function is returned[native code]

setTimeout.toString()"function setTimeout() { [native code] }"

But for a custom function, the source code is returned:

jQuery.toString()"function (e,t){return new x.fn.init(e,t,r)}"

Angular is the use of this feature to implement dependency injection http://www.cnblogs.com/etoah/p/5460441.html

You can use this attribute to detect whether it is a native API (only applicable to the browser runtime environment, and the node environment is different).

A native attribute (object,string ...) How to detect whether the user reset, in addition to the typeof detection data type, I do not have a better solution, welcome to discuss.

[Forwarded from http://www.cnblogs.com/etoah/ ]

How JavaScript lists the non-native properties of global objects.