/**
* 构造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仍然不接受类数组对象。如果传入类数组对象,它们会抛出异常。