读WebTrends的Javascript源码笔记

最新推荐文章于 2024-08-09 17:18:25 发布

anialy

最新推荐文章于 2024-08-09 17:18:25 发布

阅读量3k

点赞数

分类专栏： JavaScript WebTrends

本文链接：https://blog.csdn.net/anialy/article/details/8330873

版权

JavaScript 同时被 2 个专栏收录

30 篇文章 0 订阅

订阅专栏

WebTrends

2 篇文章 0 订阅

订阅专栏

简述：

这几天在看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 function
                isFunction: 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 values
				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 .
				// Do Asynchronized Request
				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. Test apply 
				// Use Apply
				applyIsFunction: function () {
					return this.isFunction.apply(this, arguments);
	        	},
            };
			
			
			/**
			 * Test As Follows
			 */
			//1.Test if the param is Function Type
			function _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 paire
			document.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 structure
			document.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 Request
			document.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 Apply
			document.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>

下面是输出页面：