开发者学堂课程【大数据分析之企业级网站流量运营分析系统开发实战（第一阶段）：网站流量日志埋点收集--埋点代码编写--匿名函数自调用创建标签引入】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/693/detail/12175
网站流量日志埋点收集--埋点代码编写--匿名函数自调用创建标签引入
内容简介
一、js 自调用匿名函数
二、第二种代码编写方式的逻辑解读和如何实现
三、小结
一、js 自调用匿名函数
格式：（function(){}）()
首先这里定义了两个小括号，第一个小括号定义了函数function，但它没有名字，所以是匿名函数，后面是函数的参数列表，{}是函数体，实现函数逻辑的地方。那么第一个小括号表明定义了一个没有名字的匿名函数，第二个小括号表示立即对前面的匿名函数自己调用自己并且只调用一次。
有这么一个语法功能，可以自己调用自己并且只调用一次，这个js自调用匿名函数可以用于页面初始化，也即我们在页面上写上一段匿名自调用逻辑，当它执行至此时就可以进行页面初始化工作。而在我们初始化过程中，我们需要完成的就是把我们收集数据的 js 给引入到页面上。
二、第二种代码编写方式的逻辑解读和如何实现
首先把（function(){}）()复制，回到 HBulider 中
代码为：
<html>
<head>
<script type=“text/javascript”src=”js/jQuery.js”></script>
<script type=“text/javascript”>
(function(){}）()
</script>
</head>
<body>
<a id=“myid”href=www.baidu.comtarget=“_blank”></a>
</body>
</html>
这时候还是需要先写 script 标签<script >，还是 type=“text/javascript”，因为页面可以引入很多 js，这时先讨论定义的匿名函数(function(){}）()
我们的核心逻辑是我们打开的页面可以从上往下执行，执行至
<script type=“text/javascript”>
(function(
){}）()
它会自己调用自己，在这个过程中就会完成 js 引入至页面的工作。
我们在我们的页面上要想引入一个 js，除了自己手动写死，还可以通过 dom 对象去创建一个标签，把它添加至我们的页面上。所以通过匿名函数调用自己时可以动态的创建标签，创建 script 标签，然后把我们收集数据的 js 引入到页面上。
接下来学习上述逻辑如何实现:
<script type="text/javascript">
var_ mag =_ mag | | [];
maq.push([' setAccount', 'UA XXXXX-X']) ;
(function() {
var ma = document.createElement (‘ script') ; ma. type =
. text/javascript'; ma.async =true;
ma.src = ’ xxxxx/ma.js'
var s = document :.getElementsByTagName ('script') [0];
s. parentNode.insertBefore (ma, s) ;
})();
</script>
其中：{
var ma = document.createElement (‘ script') ; ma. type =
. text/javascript'; ma.async =true;
ma.src = ’ xxxxx/ma.js' ;
var s = document :.getElementsByTagName ('script') [0];
s. parentNode.insertBefore (ma, s) ;
}) 是函数体
这一段
(function() { ↓
var ma = document.createElement (‘ script') ; ma. type =
.’text/javascript'; ma.async =true;
ma.src = ’ xxxxx/ma.js' ;↓
var s = document :getElementsByTagName ('script') [0];
s. parentNode.insertBefore (ma, s) ;
})是匿名函数
()表示立即调用前面的匿名函数
代码解读：
首先通过 document 对象创建了新的标签，叫做 script 标签，标签名字叫做 ma，标签的 type 为 text/javascript,属性为 ma.async =true，这个属性是 html5新的属性，如果我们在页面写上一个 html 属性引入一个 js，若 js 不存在，就会造成解析的阻塞，那如何降低没有 js 而造成的阻塞问题？通过 html5新的属性;异步调用外部 js 文件,即当不存在时先通过，当完成引入之后才异步执行。
比如：
var ma = document.createElement (‘ script') ; ma. type =
.’text/javascript'; ma.async =true;
是异步加载的，ma.src = ’ xxxxx/ma.js'这就真正指向我们收集数据的路径
现在创建的标签：
var ma = document.createElement (‘ script') ; ma. type =
. text/javascript'; ma.async =true;
ma.src = ’ xxxxx/ma.js'
和我们的页面没有关系，那如何把标签放在页面上?
我们先学习下面这段代码：
Var s = document :getElementsByTagName ('script') [0];
s. parentNode.insertBefore (ma, s) ;
document :getElementsByTagName 表示根据标签名（script）获取元素，只要所有script标签中的第一个，起名”s”,再找到“s”标签的父标签，就是 head 标签，然后调用它的方法是 insertBefore，把我们刚才创建的 ma 标签放在 s 标签的前面
即：
三、小结
首先埋点代码是：
<script type=“text/javascript”>
(function(){
}）()
埋点的逻辑发生了改变，但是目标和之前一样，还是如何把 js 文件引入页面上去，只不过不是直接引入，而是匿名函数创建动态标签
用户打开页面后,会多一个标签
<script type=“text/javascript”async=“true”src=”xxx/
collect.js”></script>
这个标签就是我们动态创建的标签
总结如下图：
埋点代码的编写
本来埋点代码的逻辑就是真正进行数据收集的逻辑,但是为了后续维护方便把真正收集数据的js提取出变成了 js 文件,在这种情况下,埋点代码的变成了如何把这个 js 文件引入到页面上。
1.直接通过src属性引入
<script src=www. itcast.cn/collect.js">
2.js 匿名函数自调用
创建匿名函数自己调用自己并且调用一次通常用于页面初始化操作
(function() {
var ma = document . createElement('script'); ma.type =
'text/javascript' ;
ma.async = true;
ma.src = 'xxxxx/ma.js';
var s = document . getE lementsByTagName('script')[0];
s. parentNode . insertBefore(ma, s);
})（）;
