简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - 學習網頁開發，關於head區域一段腳本的疑惑
漂亮男人
漂亮男人 2017-05-24 11:36:19
0
4
587

自學前端不就，查看公司的主頁，在head區域有以下程式碼：

<head>
......
......
<script>
//疑惑1
var _hmt = _hmt || [];   
//疑惑2
(function() {     
        var hm = document.createElement("script");   
        hm.src = "https://hm.baidu.com/hm.js?788111edda8b56f4a6c2bdd403891d20";     //这个链接是百度的一些插件功能
        var s = document.getElementsByTagName("script")[0];   
        s.parentNode.insertBefore(hm, s); 
})();
</script>
</head>

疑惑1：​​短路運演算法用在這裡，後續是做什麼用的？一般都這麼做嗎？
疑惑2：程式碼的意思是在script前面動態加<script src='https://hm.baidu.com/hm.js?78...'>語句。可是為什麼要這麼做呢？我測試了一下，直接在head裡加上這段程式碼實現的功能也一樣啊。如果是多頁面，我每個頁面加這段程式碼字元數也比function裡面的字元數少啊。 。實在搞不懂？ ？
請達人解惑，感謝！

漂亮男人
漂亮男人

全部回覆(4)
大家讲道理
大家讲道理2017-05-24 11:38:19 4樓

實作過一個類似的統計庫，簡單分享下個人對這個機制的理解。 

<script>
// 这里如果已引入 _hmt 变量，则保留已有值
// 仅在未初始化成功的情况下将其初始化
// 避免后端模板拼接而成的页面中多处引入百度统计时，重复初始化变量的问题
var _hmt = _hmt || [];   
// 疑惑2
(function() {     
        var hm = document.createElement("script");   
        hm.src = "https://hm.baidu.com/hm.js?788111edda8b56f4a6c2bdd403891d20";
        var s = document.getElementsByTagName("script")[0];   
        s.parentNode.insertBefore(hm, s); 
})();
</script>

你的疑問在於，為什麼不直接加入 hm.src 中的链接到 script 标签脚本中，而是先初始化 _hmt 變數後才加入該腳本。這應當是和統計庫的功能實現有關的。簡介：

  1. _hmt 實質是一個訊息佇列的快取。插入此陣列的內容均為各類別點擊、滑動、觸控等使用者事件。推入這個訊息佇列中的事件會被統計庫上報到百度統計。

  2. 這個快取是支援在第一方業務程式碼中透過 JS API 來寫入的。例如使用百度統計的開發者，可以在自己的 JS 程式碼中編寫形如 _hmt.push(xxx) 的邏輯，並推送自訂的事件到訊息佇列中。

  3. 由於第三方腳本同樣能寫入該訊息佇列，這就要求該佇列的陣列變數不僅必須全域，還必須儘早初始化。而統計庫的上報等業務邏輯則可以延遲到頁面主要內容載入完成後再執行。

  4. 為了實現 3 中的要求，統計腳本的引入方式才設計為【先初始化一個數組，然後動態載入統計腳本】。這樣載入佇列數組時直接在頁面中內聯初始化非常高效，後面的統計腳本延遲加載，減少對頁面載入速度的影響。

點贊 +0
新增回覆
给我你的怀抱
给我你的怀抱2017-05-24 11:38:19 3樓

疑惑二：這個應該是百度統計。 。 。

點贊 +0
新增回覆
黄舟
黄舟2017-05-24 11:38:19 2樓

說明

1.是判斷是否已經定義了_hmt變數,或定義變數

2.動態載入。節點操作載入的優先權

測驗

1.第一行你可以自行研究

2.第二行你可以對比2種載入效果。

點贊 +0
新增回覆
Ty80
Ty802017-05-24 11:38:19 1樓

這是一段百度統計的程式碼，
至於為什麼
「我單獨創建了一個頁面，只加了這個JS代碼，彈出的頁面內容就諮詢窗口那些。」
因為跨域了
至於什麼是跨域
就是把別人家的東西拿到自己家用的方法

點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！