當前位置：首頁 > 编程语言 > java >内容正文

java

读WebTrends的Javascript源码笔记

發布時間：2023/12/10 java 27 豆豆

生活随笔收集整理的這篇文章主要介紹了读WebTrends的Javascript源码笔记小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

簡述：

這幾天在看WebTrends這個網頁跟蹤測試工具的Js源碼，雖然還沒有完全理解，但是在閱讀過程中，還是發現其中有很多非常有用的函數實現，值得以后js編碼過程中去借鑒

主要是5個類似工具的函數

1. 判斷某個對象是否是個函數

isFunction: function(param){return Object.prototype.toString.call(param) === "[object Function]"; };

2. 將帶有屬性名，屬性值得對象，轉變為一個map型的key-value Pair 數組對象

objectToKVPArray: function (object) {var tmp = [];for (var key in object) {if (object.hasOwnProperty(key) && object[key] != "" &&object[key] != undefined &&(typeof object[key] != "function")){tmp.push({'key': key,'value': object[key]});}}return tmp; };

3. 解析URL，將參數及其值，轉換為map型數據結構的key-value Pair

getQryParams: function(query){var keyValuePairs = query.split(/[&?]/g);var params = {};try {for(var i = 0, n = keyValuePairs.length; i < n; i++){var m = keyValuePairs[i].match(/^([^=]+)(?:=([\s\S]*))?/);if(m && m[1]){ var key = decodeURIComponent(m[1]);if (params[key]){params[key] = [params[key]];params[key].push(decodeURIComponent(m[2]));}else{params[key] = decodeURIComponent(m[2]);}}}} catch (e) {document.write(e.toString());};return params; };

4. 發送異步請求

loadJS: function (src, isasync, theCallback) {if (arguments.length < 2) isasync = true;s = window.document.createElement("script");s.type = "text/javascript";s.async = isasync;s.src = src;s2 = window.document.getElementsByTagName("script")[0];s2.parentNode.insertBefore(s, s2); };

5. apply的使用

applyIsFunction: function () {return this.isFunction.apply(this, arguments); };

下面是實現代碼及測試結果：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Useful Function in WebTrends.js</title><script type="text/javascript">var collection = {// 1.// check if a param is a functionisFunction: function(param){return Object.prototype.toString.call(param) === "[object Function]";},// 2 .// Useful when you want to convert key value pair objects // {foo:'boo', goo:'foo'} to arrays like so [{foo:'boo'}, {goo:'foo'}] // so you can use the array filter, foreach, indexOf methods...objectToKVPArray: function (object) {var tmp = [];for (var key in object) {if (object.hasOwnProperty(key) && object[key] != "" &&object[key] != undefined &&(typeof object[key] != "function")){tmp.push({'key': key,'value': object[key]});}}return tmp;},// 3 .// Get Query Params and their valuesgetQryParams: function(query){var keyValuePairs = query.split(/[&?]/g);var params = {};try {for(var i = 0, n = keyValuePairs.length; i < n; i++){var m = keyValuePairs[i].match(/^([^=]+)(?:=([\s\S]*))?/);if(m && m[1]){ var key = decodeURIComponent(m[1]);if (params[key]){params[key] = [params[key]];params[key].push(decodeURIComponent(m[2]));}else{params[key] = decodeURIComponent(m[2]);}}}} catch (e) {document.write(e.toString());};return params;},// 4 .// Do Asynchronized RequestloadJS: function (src, isasync, theCallback) {if (arguments.length < 2) isasync = true;s = window.document.createElement("script");s.type = "text/javascript";s.async = isasync;s.src = src;s2 = window.document.getElementsByTagName("script")[0];s2.parentNode.insertBefore(s, s2);},// 5. Test apply // Use ApplyapplyIsFunction: function () {return this.isFunction.apply(this, arguments);},};/*** Test As Follows*///1.Test if the param is Function Typefunction _TestIsFunction_func(){};document.write("1.Test isFunction: ");document.write(collection.isFunction(_TestIsFunction_func));document.write(" ");//2.Test if the map-object to key-value pairedocument.write("2. Test objectToKVPArray: ");var person = {name : 'Jeremy',age : '20',nationality : 'China'};var arr_2 = collection.objectToKVPArray(person);for (var i = 0; i < arr_2.length; i++) {document.write("key: " + arr_2[i]['key'] + ", value: " + arr_2[i]['value'] + " ");}document.write(" ");//3. Test query String Convert to map key-value structuredocument.write("3. Test query String Convert to map key-value structure: ");var queryStr_3 = "http://www.baidu.com/s?tn=baiduhome_pg&rsv_sug4=405&rsv_sug1=3&inputT=10028";var keyValuePair_3 = collection.getQryParams(queryStr_3);for(var key in keyValuePair_3)document.write("key: " + key + ", value: " + keyValuePair_3[key] + " ");document.write(" ");//4. Do Asynchronized Requestdocument.write("4. Test Do Asychronized Request: ");var src_4 = "http://localhost:8080/MyWebProject/Test?command=GetOnePersonJsonData";document.write("<input type='button' id='btn_4' value='send request'></input>");document.getElementById("btn_4").addEventListener("click", function(){collection.loadJS(src_4, true);}, true);document.write(" ");// 5 . use Applydocument.write("5. Test Apply , here I apply collection.isFunction ");function func_5(){};document.write(collection.applyIsFunction(func_5));document.write(" ");</script></head><body></body> </html>
下面是輸出頁面：

下面圈出來的，就是點擊send request之后每一次發送的請求，總共點了3次

總結

以上是生活随笔為你收集整理的读WebTrends的Javascript源码笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：前端学习（669）：流程控制
下一篇：前端学习（1424）：ajax低版本兼容