[源码篇] piwik-源码解析

以下文章大部分内容摘抄自：www.cnblogs.com/strick/p/95… ，你可以阅读原作者的文章，查看更多。也有小部分是自己的理解

整体分析

1. piwik.js 主要由以下几个部分组成

   // 使用下面的五个模块替换 piwik.js
   // <script type="text/javascript" src="piwik-all.js"></script>
   <script type="text/javascript" src="json.js"></script>
   <script type="text/javascript" src="private.js"></script>
   <script type="text/javascript" src="query.js"></script>
   <script type="text/javascript" src="content-overlay.js"></script>
   <script type="text/javascript" src="tracker.js"></script>
       <script type="text/javascript" src="piwik.js"></script>
   

   piwik-all.js
   │
   └───json.js
   │
   └───private.js
   │
   └───query.js
   │
   └───content-overlay.js
   │
   └───tracker.js
   │
   └───piwik.js
   

json.js

json.js是一个开源插件JSON3，为了兼容不支持JSON对象的浏览器而设计的，这里面的代码可以单独研究

private.js

private.js包含了一些用于全局的私有变量和私有函数，例如定义系统对象的别名、判断类型等

query.js

query.js中包含了很多操作HTML元素的方法，例如设置元素属性、查询某个CSS类的元素等，它类似于一个微型的jQuery库，不过有许多独特的功能。

content-overlay.js

content-overlay.js有两部分组成，一部分包含内容追踪以及URL拼接等功能，另一部分是用来处理嵌套的页面，这里面具体没有细看。

tracker.js

tracker.js中只有一个Tracker()函数，不过内容最多，有4700多行，主要的统计逻辑都在这里了。

piwik.js

piwik.js中内容不多，包含一些初始化和插件的钩子等功能，钩子具体怎么运作的还没细看。

讲解

虽然分成了6部分，但是各部分的内容还是蛮多的，并且内容之间是有联系的，因此短时间的话，很难搞清楚其中所有的门道。我就挑了一点我个人感觉最重要的先做分析

疑惑 🤔

1. new Image().src = 'abc.png' 是否会阻止 页面卸载 unload
2. var blob = new Blob([request], headers); ?
3. performanceAlias.timing.responseEnd ??
4. performanceAlias.timing.requestStart??