读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("<font color='red'>1.Test isFunction:</font> <br/>");document.write(collection.isFunction(_TestIsFunction_func));document.write("<br/><br/>");//2.Test if the map-object to key-value pairedocument.write("<font color='red'>2. Test objectToKVPArray:</font><br/>");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'] + "<br/>");}document.write("<br/>");//3. Test query String Convert to map key-value structuredocument.write("<font color='red'>3. Test query String Convert to map key-value structure:</font><br/>");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] + "<br/>");document.write("<br/>");//4. Do Asynchronized Requestdocument.write("<font color='red'>4. Test Do Asychronized Request:</font><br/>");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("<br/><br/>");// 5 . use Applydocument.write("<font color='red'>5. Test Apply , here I apply collection.isFunction</font><br/>");function func_5(){};document.write(collection.applyIsFunction(func_5));document.write("<br/></br>");</script></head><body></body>
</html>

下面是输出页面：

下面圈出来的，就是点击send request之后每一次发送的请求，总共点了3次

读WebTrends的Javascript源码笔记相关推荐

JavaScript源码笔记（第七天）—爱创课堂专业前端培训
一.DOM介绍 DOM:Document Object Model 文档对象模型,用来表示和操作html或xml文档内容的基础API: 当网页被加载时,浏览器会创建对应的文档对象模型,而DOM模型被构 ...
7个月，4000+人，500+源码笔记，诚邀你参加源码共读~
大家好,我是若川.按照从易到难的顺序,前面几期(比如:validate-npm-package-name.axios工具函数)很多都只需要花2-3小时就能看完,并写好笔记. 但收获确实很大.开阔视野. ...
数据结构源码笔记（C语言）：索引文件建立和查找
//实现索引文件建立和查找算法#include<stdio.h> #include<malloc.h> #include<string.h> #include< ...
数据结构源码笔记（C语言）：置换-选择算法
//实现置换-选择算法#include<stdio.h> #include<malloc.h> #include<string.h> #include<std ...
4月，诚邀你参加源码共读，学会看源码，打开新世界！开阔视野
大家好,我是若川.很多关注我的新朋友可能不知道我组织了源码共读活动~ 也有很多人不知道我是谁.有人以为我是80后.有人以为我是全职自媒体等等.若川的 2021 年度总结,弹指之间这篇文章写了我是16 ...
kafka源码_终于看到有人把Kafka讲清楚了，阿里面试官推荐你看这份源码笔记
这几年,大数据发展迅猛,其中 Kakfa 凭借高可靠.高吞吐.高可用.可伸缩几大特性,成为数据管道技术的首选. 越来越多人开始使用 Kafka,对学习源码的需求也愈发强烈,原因主要有这么几个方面: 了 ...
跨年巨作 13万字腾讯高工手写JDK源码笔记带你飙向实战
灵魂一问,我们为什么要学习JDK源码? 当然不是为了装,毕竟谁没事找事虐自己 ... 1.面试跑不掉.现在只要面试Java相关的岗位,肯定或多或少会会涉及JDK源码相关的问题. 2.弄懂原理才不慌.我 ...
首发，看了这份美团架构师的spring源码笔记后，才发现原来学习的思路都错了
前言 Spring让我们可以更快,更轻松,更安全地进行Java编程.Spring对速度,简单性和生产率的关注使其成为世界上最受欢迎的Java框架. 像阿里巴巴,亚马逊,微软等在内的所有科技巨头对Spr ...
redis源码笔记 - 刘浩de技术博客 - 博客园
redis源码笔记 - 刘浩de技术博客 - 博客园 redis源码笔记 - 刘浩de技术博客 - 博客园 redis源码笔记记录发现的一个hiredis的bug 摘要: hiredis是redis ...
UE4官方滚球项目源码笔记
UE4官方滚球项目源码笔记我的项目名称:test_0511,读者请根据自己的项目名称自行查找(YourProgramNameBall.h/YourProgramNameBall.cpp) 笔者是UE ...

读WebTrends的Javascript源码笔记

1. 判断某个对象是否是个函数

2. 将带有属性名，属性值得对象，转变为一个map型的key-value Pair 数组对象

3. 解析URL，将参数及其值，转换为map型数据结构的key-value Pair

4. 发送异步请求

5. apply的使用

读WebTrends的Javascript源码笔记相关推荐

最新文章

热门文章

读WebTrends的Javascript源码笔记

1. 判断某个对象是否是个函数

2. 将带有属性名，属性值得对象，转变为一个map型的key-value Pair 数组对象

3. 解析URL， 将参数及其值，转换为map型数据结构的key-value Pair

4. 发送异步请求

5. apply的使用

读WebTrends的Javascript源码笔记相关推荐

最新文章

热门文章

3. 解析URL，将参数及其值，转换为map型数据结构的key-value Pair