AliTracert的Web端统计服务的源码分析

工作原理
代码的组织方式是用的两个下面的方程式的运作开始的:

function(){}([])

首先运行代码:

function (module, exports, webpack_require) {
console.log(‘module0’)
“use strict”; var _require = webpack_require(3), preSeed = _require.preSeed, util = webpack_require(8), seedDomList = document.querySelectorAll("[data-aspm]");
if (seedDomList && seedDomList.length >= 1) {
console.log(‘seedDomList’)
var domList = Array.prototype.filter.call(seedDomList, function (ele) { return “body” === ele.tagName.toLowerCase() });
if (domList && domList[0]) {
console.log(‘domList’)
var eventType = util.getEventType();
domList[0].addEventListener(eventType, function (e) {
console.log(e.target)
try { preSeed(e.target) } catch (err) { console.warn(err) }
})
}
}
}
function (module, exports, webpack_require) {
“use strict”; var preSeed = webpack_require(4),
_require = webpack_require(2),
trackerElements = _require.trackerElements,
trackerAttributes = _require.trackerAttributes;
module.exports = { preSeed: preSeed, trackerElements: trackerElements, trackerAttributes: trackerAttributes }
}
function (module, exports, webpack_require) {
“use strict”; var trackElement = webpack_require(6),
trackOnclick = webpack_require(7),
trackDataAutoSeed = webpack_require(5),
_require = webpack_require(2),
trackerElements = _require.trackerElements;
module.exports = function (e) {
var target = e, body = document.querySelector(“body”);
if (target) {
var needTrack = trackerElements.some(function (tag) {
return tag === target.tagName.toUpperCase()
});
return needTrack ? void trackElement(target, body) :
void Array.prototype.some.call(target.attributes, function (attr) {
return “data-auto-seed” === attr.name.toLowerCase() ? (trackDataAutoSeed(target, body, attr.value), !0) :
“onclick” === attr.name.toLowerCase() ? (trackOnclick(target, body), !0) : void 0
})}}}
function (module, exports, webpack_require) {
“use strict”; var _require = webpack_require(1),
hasSpmAttr = _require.hasSpmAttr,
isFdComponent = _require.isFdComponent,
handleElement = _require.handleElement,
handleSelect = _require.handleSelect;
module.exports = function (target, body) {
if (target && body) {
var hasSpm = hasSpmAttr(target),
tagName = target.tagName;
if (!hasSpm) {
var _isFdComponent = isFdComponent(target),
isComponent = _isFdComponent.isComponent,
rootComponent = _isFdComponent.rootComponent;
if (!isComponent) return void handleElement(body, target);
var rootHasSpm = hasSpmAttr(rootComponent),
index = 0;
return Array.prototype.forEach.call(rootComponent.querySelectorAll(tagName), function (ele, i) { target === ele && (index = i) }),
rootHasSpm || rootComponent.setAttribute(“data-aspm”, rootComponent.id),
“select” ==