/** * 构造URL参数信息 * nameValues:要构造的URL参数信息,由键值对构成,如name=value * includeEmpty:是否包括空值参数 * return:返回构造后URL参数信息 */ function buildUrlParams(nameValues, includeEmpty) { // 定义新的URL参数字典 var newParams = {}; // 构造要设置的URL参数信息 var nameValue = nameValues instanceof Array ? nameValues.join("&") : nameValues; // 拆分URL参数信息 var oldParams = nameValue.split("&"); // 遍历每个URL参数 for (var i = 0, length = oldParams.length; i < length; i++) { // 获取URL参数的键值对 var items = oldParams[i].split("="); // 判断URL参数的键值对是否有效 if (items.length) { // 获取参数名 var name = items[0]; // 判断参数名是否有效 if (name) { // 获取参数值 var value = null; if (items.length > 1) { value = items[1] } // 判断URL参数的键值对是否有效 if (includeEmpty || value) { // 获取已构造的参数值 var values = newParams[name]; if (!values) { // 没有构造过参数则添加新的参数信息 values = newParams[name] = []; } // 添加新的参数值 if (value) { // 如参数未URL编码则对其进行编码 //value = decodeURIComponent(value) == value ? encodeURIComponent(value) : value; values.push(value); } } } } } // 返回构造后URL参数信息 return newParams; } /** * 设置URL参数 * url:要设置参数的URL * nameValues:要设置的参数信息,由键值对构成,如name=value * return:返回设置参数后的URL */ function setUrlParams(url, nameValues) { // 构造要设置的URL参数信息 var newParams = buildUrlParams(nameValues, true); // 获取URL地址中参数开始索引 var index = url.indexOf("?"); // 判断URL地址中是否有参数 if (index >= 0) { // 构造原始的URL参数信息 var oldParams = buildUrlParams(url.substring(index + "?".length)); // 获取不带参数的URL地址 url = url.substring(0, index); // 遍历要设置的URL参数信息 for (var name in newParams) { // 将要设置的URL参数信息覆盖添加到原始参数信息中 oldParams[name] = newParams[name]; } // 重新设置URL参数信息 newParams = oldParams; } // 构造URL参数键值对 var params = []; for (var name in newParams) { var values = newParams[name]; if (values.length) { params.push(name + "=" + values.join(",")); } } // 判断是否有参数 if (params.length) { // 返回构造后的URL地址 return url + "?" + params.join("&"); } else { // 没有参数则返回不带参数的URL地址 return url; } }
标签: JavaScript
JavaScript开发指南
关于JavaScript中设置URL参数的说明
/** * 设置URL参数 * url:要设置参数的URL * name:参数名 * value:参数值 * return:返回设置参数后的URL */ function setUrlParam(url, name, value) { // 获取URL地址中参数开始索引 var index = url.indexOf("?"); // 判断URL地址中是否有参数 if (index >= 0) { // 获取不带参数的URL地址 var baseUrl = url.substring(0, index); // 获取URL地址中的参数信息 var paramUrl = url.substring(index); // 获取要设置的参数的索引 index = paramUrl.indexOf("?" + name + "="); // 判断要设置的参数是否是第一个参数 if (index == 0) { // 获取要设置的参数后面的参数开始的索引 index = paramUrl.indexOf("&"); // 判断后面是否有参数 if (index >= 0) { // 有参数则构造新的URL地址 return baseUrl + "?" + name + "=" + value + paramUrl.substring(index) } else { // 没参数则构造新的URL地址 return baseUrl + "?" + name + "=" + value; } } else { // 不是第一个参数则获取要设置参数的索引位置 index = paramUrl.indexOf("&" + name + "="); // 判断是否存在要设置的参数 if (index >= 0) { // 获取要设置参数的前面的参数 var temp1 = paramUrl.substring(0, index); // 获取要设置参数的后面的参数 var temp2 = paramUrl.substring(index + ("&" + name + "=").length); // 获取要设置的参数后面的参数开始的索引 index = temp2.indexOf("&"); // 判断后面是否有参数 if (index >= 0) { // 有参数则构造新的URL地址 return baseUrl + temp1 + "&" + name + "=" + value + temp2.substring(index); } else { // 没参数则构造新的URL地址 return baseUrl + temp1 + "&" + name + "=" + value; } } else { // 不存在参数则构造新的URL地址 return url + "&" + name + "=" + value; } } } else { // 原URL地址中没参数则直接构成新的URL地址 return url + "?" + name + "=" + value; } }
关于JavaScript中使用正则表达式去除Html样式属性的说明
var test = "<div style=\"height:100px;\">测试<div>"; test = test.replace(/style\=\"[^\"]*\"/g, ""); return test;
关于JavaScript中自定义事件绑定对象方法的说明
基于JavaScript弱类型的特点,我们可以通过重构对象方法来实现绑定事件的机制(当调用某个对象方法时总是触发调用我们自定义的方法):
/** * 定义事件绑定方法 * obj:要绑定事件的对象 * target:要绑定事件的对象方法名 * handler:要绑定的事件 * toTop:是否优先执行事件 */ function addEvent(obj, target, handler, toTop) { // 判断参数是否有效 if (obj && target && typeof (handler) == "function") { // 获取对象obj中名称为target的成员 var fun = obj[target]; // 重构对象obj的target成员 obj[target] = function () { // 判断要绑定的方法是否优先执行 if (toTop) { // 调用要绑定的方法 var result = handler.apply(obj, arguments); // 返回false则终止事件冒泡 if (result !== false) { // 判断对象obj的target成员是否为方法 if (typeof (fun) == "function") { // 调用对象obj的原始target方法 result = fun.apply(obj, arguments); } } return result; } else { // 定义返回结果 var result = undefined; // 判断对象obj的target成员是否为方法 if (typeof (fun) == "function") { // 调用对象obj的原始target方法 result = fun.apply(obj, arguments); } // 调用要绑定的方法,返回false则终止事件冒泡 if (handler.apply(obj, arguments) === false) { return false; } else { // 返回原始结果 return result; } } } } } // 为window对象的encodeURIComponent方法绑定事件 addEvent(window, "encodeURIComponent", function (url) { alert(url); }, true); // 调用方法触发事件 encodeURIComponent("index.html");
关于JavaScript中apply方法的说明
apply()方法在指定this值和参数(参数以数组或类数组对象的形式存在)的情况下调用某个函数。
一、语法定义:
fun.apply(thisArg[, argsArray]);
二、参数说明:
thisArg:在fun函数运行时指定的this值。需要注意的是,指定的this值并不一定是该函数执行时真正的this值,如果这个函数处于非严格模式下,则指定为null或undefined时会自动指向全局对象(浏览器中就是window对象),同时值为原始值(数字,字符串,布尔值)的this会指向该原始值的自动包装对象。
argsArray:一个数组或者类数组对象,其中的数组元素将作为单独的参数传给fun函数。如果该参数的值为null或undefined,则表示不需要传入任何参数。从ECMAScript 5开始可以使用类数组对象。浏览器兼容性请参阅本文底部内容。
三、方法描述:
在调用一个存在的函数时,你可以为其指定一个this对象。this指当前对象,也就是正在调用这个函数的对象。使用apply,你可以只写一次这个方法然后在另一个对象中继承它,而不用在新对象中重复写该方法。
apply与call非常相似,不同之处在于提供参数的方式。apply使用参数数组而不是一组参数列表。apply可以使用数组字面量(array literal),如
fun.apply(this, ['eat', 'bananas']);
或数组对象,如
fun.apply(this, new Array('eat', 'bananas'));
你也可以使用arguments对象作为argsArray参数。arguments是一个函数的局部变量。它可以被用作被调用对象的所有未指定的参数。这样,你在使用apply函数的时候就不需要知道被调用对象的所有参数。你可以使用arguments来把所有的参数传递给被调用对象。被调用对象接下来就负责处理这些参数。
从ECMAScript第5版开始,可以使用任何种类的类数组对象,就是说只要有一个length属性和[0…length)范围的整数属性。例如现在可以使用NodeList或一个自己定义的类似
{'length': 2, '0': 'eat', '1': 'bananas'}
形式的对象。
需要注意:Chrome 14以及Internet Explorer 9仍然不接受类数组对象。如果传入类数组对象,它们会抛出异常。