javascript如何列出全局对象的非原生属性。
Why
研究一个网站前端技术的时候,了解它的全局的对象是一个好的入口,
一般来说,常见的库就会用外观模式,最后暴露一个对象给用户调用,
比如jQuery,requirejs,angular,react
均是用这种方式。
如果没有用cmd/amd模块化或类似webpack工具打包的话,会给全局对象window添加一个属性,如angular:
如React
同时,为了避免全局污染,也要关注全局变量的个数和详情。
How
可以通过ES5的新增api(Object.keys)看浏览器全局变量列表:Object.keys(window)
发现一般的网站都有两百多个全局变量,人力去看且需要区分是否是用户定义的比较困难,需要一个script
去列出所有的非原生的全局属性.
开始想的是能不能防篡改对象的相关检测api(Object.isExtensible,Object.isSealed,Object.isFrozen)来判断是否原生api?
但并不是所有的原生对象都是seaded. 所以此方法行不通。
那么能不能有一个纯净的、没有加载第三方库的全局对象?
对于浏览器环境,我们有iframe
可以添加一个iframe,然后对比当前的window,就可以得到详细列表。
var iframe = document.createElement("iframe");
document.body.appendChild(iframe);
Object.keys(iframe.contentWindow).length
列出非原来对象
(function(){
var iframe = document.createElement("iframe");
document.body.appendChild(iframe);
var originWindow=iframe.contentWindow,
currentWindow=window
var 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);
})();
cnblogs的全局对象:
Node怎么处理
由于node没有像Chrome Dev Tools Console一样的工具,可以直观简单的执行js代码片段,
对于Nodejs,可以在应用运行稳定(所有的全局,单例对象都初始化完成)后,再导出全局对象,
再在同一环境,不导入任何库导出全局对象,进行对比即可。
怎么知道一个原生函数有没有覆盖
由于Function.prototype.toString
API,对原生函数返回[native code]
setTimeout.toString()
"function setTimeout() { [native code] }"
但对于自定义的函数会返回源码:
jQuery.toString()
"function (e,t){return new x.fn.init(e,t,r)}"
angular就是利用这一特性实现依赖注入http://www.cnblogs.com/etoah/p/5460441.html
可以用此特性,来检测是否是原生的api(仅适用于浏览器运行环境,node环境有差异).
一个原生属性(Object,string...)怎么检测有没有被用户重置,除了用typeof
检测数据类型, 本人暂没有更好的方案,欢迎讨论。
javascript如何列出全局对象的非原生属性。的更多相关文章
- 读书笔记-JavaScript中的全局对象
对于任何JavaScript程序,当程序开始运行时,JavaScript解释器都会初始化一个全局对象以供程序使用.这个JavaScript自身提供的全局对象的功能包括: 1.全局对象拥有一些常用的属性 ...
- [JavaScript] js中全局标识正则表达式的lastIndex属性
在JavaScript中使用正则表达式时,遇到一个坑:第一次匹配是true,第二次匹配是false. 因为在带全局标识"g"的正则表达式对象中,才有“lastIndex” 属性,该 ...
- JavaScript 全局对象
全局属性和函数可用于所有内建的 JavaScript 对象. 顶层函数(全局函数) 函数 描述 decodeURI() 解码某个编码的 URI. decodeURIComponent() 解码一个编码 ...
- 浏览器端-W3School-JavaScript:JavaScript 全局对象
ylbtech-浏览器端-W3School-JavaScript:JavaScript 全局对象 1.返回顶部 1. JavaScript 全局对象 全局属性和函数可用于所有内建的 JavaScrip ...
- JavaScript中两种类型的全局对象/函数
这里所说的JavaScript指浏览器环境中的包括宿主环境在内的. 第一种是ECMAScript Global Object,第二种是宿主环境(Host)下的全局对象/函数. 一.核心JavaScri ...
- JavaScript中两种类型的全局对象/函数【转】
Snandy Stop, thinking is the essence of progress. JavaScript中两种类型的全局对象/函数 这里所说的JavaScript指浏览器环境中的包括宿 ...
- 简述JavaScript全局对象
全局对象是JavaScript中非常重要的一类对象,它作为程序顶层(程序最顶端,不包括在任何函数之内)的上下文存在,JavaScript中的全局属性.全局函数都是通过全局对象来提供给程序的,比如 全局 ...
- javascript权威指南(6) - 对象
JavaScript对象可以从一个称为原型的对象继承属性,这种"原型式继承"(prototypal inheritance)是JavaScript的核心特征.除了字符串.数字.tr ...
- JavaScript深入之变量对象
前言 在上篇<javascript深入之执行上下文栈>中讲到,当javascript代码执行一段可执行代码(executable code)时,会创建对应的执行上下文(execution ...
随机推荐
- DHTMLX 前端框架 建立你的一个应用程序教程(一)
介绍 从这里下载官网 示例 此教程包含是多方面的: 1.如何在页面上添加标准的dhtmlx组建 2.如何在页面上组织组件 3.如何添加过滤 4.如何从服务器端获取数据填充组建 5.如何保存用户修改的数 ...
- [转贴]C语言复习笔记-17种小算法-解决实际问题
判断日期为一年中的第几天(考虑闰年) /* * 计算该日在本年中是第几天,注意闰年问题 * 以3月5日为例,应该先把前两个月的加起来,然后再加上5天即本年的第几天 * 特殊情况,闰年且输入月份大于3时 ...
- SPRING IN ACTION 第4版笔记-第二章WIRING BEANS-007-以set方法注入<property>\p-namespace\util-space
一.注入简单属性 package soundsystem.properties; import org.springframework.beans.factory.annotation.Autowir ...
- HTML input标签的checked属性与Razor解析
在HTML中,input标签可以通过type属性设置为checkbox.同时,也就包含了一个checked属性.对于这个checked属性,有一个特别的地方就是,它可以不需要属性值就可以表示是否选择了 ...
- 備份Sqlite DB到XML文件:
转载请注明出处:http://blog.csdn.net/krislight 项目中遇到备份与还原App数据的需求,需要把DB数据备份到一个XML文件中,然后保存到SD卡上,还原的时候直接从XML文件 ...
- 转载:遍历Map的四种方法
http://www.cnblogs.com/kristain/articles/2033566.html 遍历Map的四种方法 public static void main(String[] ar ...
- MySQL源码之Thread cache
MySQL server为每一个connection建立一个thread为其服务,虽然thread create比着fork process代价高,单高并发的情况下,也不可忽略. 所以增加了Threa ...
- JavaScript日期时间操作
<script> var d=new Date();//当前时间 alert(d); var d1=new Date(1992,5,19);//定义一个时间,月份要加1; alert(d1 ...
- ☀【移动】Google Maps JavaScript API v3
Google Maps JavaScript API v3https://developers.google.com/maps/documentation/javascript/tutorial?hl ...
- Linux libtins 库安装教程
因为工作原因需要用到libtins网络库, 所以今天去装一下. 很尴尬,由于本人对linux理解比较浅, 所以在中途遇到了一些问题. 虽然只是简单的安装步骤,但是阻挡不了自己菜啊. 一. 下载lib ...