在完成高階收費產品——新版大戰略的時候，在最後收官階段產品提出需對新版大戰略部分功能進行埋點，意在收集使用者行為資訊。但是由於原先公司埋點外掛程式並不提供批量埋點的功能，而業務所需埋的點範圍較廣，且所需觸發元素各式各樣，如有的直接靜態頁面，有的為非同步載入頁面。所以若進行單點埋的話，工作量比較大，且容易影響原有的功能。故該方案直接被pass掉了。稍微分析了一下這些所需要處理的元素，發現其實也並不複雜。索性直接在原有的埋點基礎上寫了乙個批量埋點的小外掛程式，意在不影響原有功能的基礎上，減少工作量。
主要實現思路如下:
鑑於各個頁面所需埋的點的元素載入方式不同，有些是直接在頁面上寫好的元素，有些是後期通過非同步載入方式渲染上去的。所以針對以上兩種情況，分別採用了兩種不同的方式。1、直接在頁面上寫好的元素。對於這種元素，直接採用了與dom繫結的方式，簡單粗暴實用。2、後期載入的元素。頁面中有較大部分元素都屬這類。這類元素需通過追加事件繫結加以完成。事件追加方面。為不影響元素原先事件情況下完成追加，目前做法是對元素追加的同類事件都加上命名空間，在每次追加相關埋點事件時，都清空自身該事件命名空間下已重複的事件，從而確保每個元素觸發時機的唯一性。
// @charset "utf-8";
/** * 批量埋點外掛程式
* @create : 2016-03-16 10:02
* @author : 應杲臻* @relyon : 需要依賴jquery
* @usage :
* 在不影響原有功能的基礎上進行批量埋點，減少工作量。
* 目前提供兩種用法：
* 1、直接與dom繫結方式，如
； * 直接在dom上新增ta-tag標記即可。如果需要指定事件觸發埋點，則將ta-tag更改為wsddz_wsdsg_19930607;event即可.其中event預設為click事件
* 2、呼叫mta，使用mta.mutilog方法。如mta.mutilog(
* ,
* )
*/ +(function
($) ;
function
i***sistdom
(o)
mta.prototype = , , tmpargs));
})});
},registerevt : function
(args)
if (el == page_tag)
// 對同類事件加以命名空間
$(el).off(args.e + '.ta.log').one(args.e + '.ta.log', function
() );
},log : function
(ttid, el)
if ($.trim(tid).length === 0)
// 這裡是具體統計**（略）...
},getbdom : function
() ;
});}
};return mta = mta;
}(jquery));
在事件處理上，為保證頁面上同個元素同種事件觸發的唯一性，在追加事件時，需對原先事件進行解綁。但是如果不對任何處理進行解綁的話，會把對元素原先業務上的事件也一同進行了解綁。這樣就會影響具體的業務。想到了之前在研究bootstrap原始碼的時候，裡邊用到了事件命名，在之前我的一篇部落格文章中也做過一點總結。試了一下，果然是我要的滑板鞋~
題外話
最近專案比較多，有段時間沒寫部落格了，也比較無奈，pm催的急，賠了好多週末進去無償加班(┬＿┬)。身體也明顯感覺變差許多，經常頭昏眼花，前天又感冒了，人生多磨難啊~等把這些專案結了，要去找個茶餐廳包個包廂，去和小夥伴無憂無慮打一天的雙扣。
JavaScript學習之路《七》
object 建立和使用 object 所有類的基礎類 例項化物件 var obj new object var obj 設定屬性 方法 obj.name zhangsan obj.age 20 obj.say function 訪問物件的屬性或方法 obj.name obj.say delete操...
Javascript 學習筆記
如果在生成的html裡面有事件需要傳遞帶特殊字元的引數，處理如下 singletext 輸入 1.singletext value.escapehtml 為 將html編碼 2.singletext value.escapehtml inspect 為 3.在 jsdebugtext innerht...
JavaScript學習記事
1.函式可以巢狀，這樣有助於寄生函式利用宿主函式的內部變數。2.沒有塊級作用域。在函式內部任何位置生命的變數，都在整個函式內部有效。舉例如下 var s1 global function f1 object.defineproperty o,x 建立物件o的屬性x，可寫屬性為false，即不可寫 o...