关于JavaScript中重置URL参数的说明

/**
* 构造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中设置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中自定义事件绑定对象方法的说明

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

更多信息请参阅:Function.prototype.apply() – JavaScript | MDN

关于JavaScript中call方法的说明

call()方法在使用一个指定的this值和若干个指定的参数值的前提下调用某个函数或方法。

一、语法定义:

fun.call(thisArg[, arg1[, arg2[, ...]]]);

二、参数说明:
thisArg:在fun函数运行时指定的this值。需要注意的是,指定的this值并不一定是该函数执行时真正的this值,如果这个函数处于非严格模式下,则指定为null和undefined的this值会自动指向全局对象(浏览器中就是window对象),同时值为原始值(数字,字符串,布尔值)的this会指向该原始值的自动包装对象。

arg1, arg2, …:指定的参数列表。

三、方法描述:
当调用一个函数时,可以赋值一个不同的this对象。this引用当前对象,即call方法的第一个参数。通过call方法,你可以在一个对象上借用另一个对象上的方法,比如

Object.prototype.toString.call([]);

就是一个Array对象借用了Object对象上的方法。

更多信息请参阅:Function.prototype.call() – JavaScript | MDN

关于JavaScript中获取浏览器窗口大小的说明

在JavaScript交互时,我们常常需要获取当前浏览器窗口的大小,从而进行定位元素等操作。不过获取各个版本浏览器窗口大小的方法都略有差异,当然我们可以使用jQuery等兼容多种浏览器的JavaScript框架来获取,但是有时我们又不希望引入第三方的JavaScript库,所以我们只能通过使用原生的JavaScript方法来获取。
以下代码定义了如何通过原生的JavaScript方法来获取浏览器窗口的大小:

// 定义获取窗口大小的方法
(function (window, undefined) {
    // 定义获取窗口高度
    if (typeof (window.getWindowHeight) != "function") {
        window.getWindowHeight = function () {
            var height = false;
            if (window.innerHeight) {
                height = window.innerHeight;
            } else if (document.body && document.body.clientHeight) {
                height = document.body.clientHeight;
            }
            if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {
                height = document.documentElement.clientHeight;
            }
            return height;
        };
    }
    // 定义获取窗口宽度
    if (typeof (window.getWindowWidth) != "function") {
        window.getWindowWidth = function () {
            var width = false;
            if (window.innerWidth) {
                width = window.innerWidth;
            } else if (document.body && document.body.clientWidth) {
                width = document.body.clientWidth;
            }
            if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {
                width = document.documentElement.clientWidth;
            }
            return width;
        };
    }
})(window);

关于JavaScript中获取和设置Url参数的说明

在Web编程时,一般我们都只是在服务端获取请求的Url参数,但是在前端交互过程中我们也有可能希望通过JavaScript获取Url中的参数。
我们可以通过以下JavaScript方式获取和设置Url中的参数信息:

一、定义Url参数操作方法:

// 定义获取和设置Url参数的方法
(function (window, undefined) {
    // 定义获取Url参数方法
    if (typeof (window.getUrlParam) != "function") {
        /**
        * url:要获取参数的Url
        * key:要获取参数的键
        * return:返回获取到的参数值
        */
        window.getUrlParam = function (url, key) {
            // 定义默认值
            var value = "";
            // 定位到Url参数部分
            var index = url.indexOf("?");
            if (index >= 0) {
                // 获取Url中参数集合
                var params = url.substr(index + 1);
                params = params.split("&");
                // 遍历查询对应键值的参数
                for (var param in params) {
                    param = params[param];
                    index = param.indexOf("=");
                    // 获取对应键值的参数值
                    if (index >= 0 && key == param.substring(0, index)) {
                        value = param.substr(index + 1);
                    }
                }
            }
            // 返回获取到的参数值
            return value;
        };
    }
    // 定义设置Url参数方法
    if (typeof (window.setUrlParam) != "function") {
        /**
        * url:要设置参数的Url
        * key:要设置参数的键
        * value:要设置参数值
        * return:返回设置了参数的新Url
        */
        window.setUrlParam = function (url, key, value) {
            // 定位到Url参数部分
            var index = url.indexOf("?");
            if (index >= 0) {
                // 获取Url中参数集合
                var baseUrl = url.substring(0, index);
                var hasKey = false;
                var newParams = new Array();
                var oldParams = url.substr(index + 1);
                oldParams = oldParams.split("&");
                // 遍历Url中所有的参数
                for (var oldParam in oldParams) {
                    oldParam = oldParams[oldParam];
                    index = oldParam.indexOf("=");
                    if (index >= 0 && key == oldParam.substring(0, index)) {
                        // 将需要设置的参数重新赋值
                        newParams.push(key + "=" + value);
                        hasKey = true;
                    } else {
                        // 记录不需要设置的参数信息
                        newParams.push(oldParam);
                    }
                }
                // 没有找到参数的话添加新的参数
                if (!hasKey) {
                    newParams.push(key + "=" + value);
                }
                // 重构设置了参数的Url
                newParams = newParams.join("&");
                url = baseUrl + "?" + newParams;
            } else {
                // 重构设置了参数的Url
                url += "?" + key + "=" + value;
            }
            // 返回设置了参数的新Url
            return url;
        };
    }
})(window);

二、调用实例:

getUrlParam("index.php?a=1", "a"); // 结果:1
setUrlParam("index.php?a=1", "a", 2); // 结果:index.php?a=2

关于JavaScript中动态加载link标签的说明

在编写网页时,样式文件的引入常常需要使用link标签,该标签除了可以在head标签内直接添加外,还可以在网页运行过程中通过JavaScript动态加载:

// 定义样式文件加载完成回调方法
var callback = function () {
    alert("样式文件加载完成");
};
// 定义要加载的样式文件地址
var url = "style.css";
// 创建link标签
var link = document.createElement("link");
// 设置link标签属性
link.rel = "stylesheet";
link.type = "text/css";
link.media = "screen";
link.href = url;
// 将link标签添加到head标签内
document.getElementsByTagName("head")[0].appendChild(link);
// 触发自定义的样式文件加载完成回调方法
if (typeof (callback) == "function") {
    callback.apply(link);
}

关于JavaScript中动态加载script标签的说明

在使用JavaScript开发时,有时除了需要在head标签内直接引入script标签外,还会需要根据代码逻辑的执行状态去动态引入script脚本,并且我们也可能希望在脚本文件加载完成后触发我们需要运行的function。
我们可以通过以下两种方法实现:

一、使用标准DOM方法:

// 定义脚本加载完成回调方法
var callback = function () {
    alert("脚本加载完成");
};
// 定义要加载的脚本地址
var url = "script.js";
// 定义判断脚本是否加载完成的标识
var done = false;
// 创建script标签
var script = document.createElement("script");
// 设置script标签属性
script.type = "text/javascript";
script.language = "javascript";
script.src = url;
// 绑定脚本加载完成事件
script.onload = script.onreadystatechange = function () {
    // 判断脚本是否加载完成并且事件未触发过
    if (!done && (!script.readyState || script.readyState == "loaded" || script.readyState == "complete")) {
        // 标识脚本事件已触发过一次
        done = true;
        // 移除脚本加载完成事件
        script.onload = script.onreadystatechange = null;
        // 触发自定义的脚本加载完成回调方法
        if (typeof (callback) == "function") {
            callback.apply(script);
        }
    }
};
// 将script标签添加到head标签内
document.getElementsByTagName("head")[0].appendChild(script);

二、使用jQuery框架方法:

// 定义脚本加载完成回调方法
var callback = function () {
    alert("脚本加载完成");
};
// 定义要加载的脚本地址
var url = "script.js";
// 使用jQuery的ajax方法加载script脚本
jQuery.ajax({
    url: url,
    type: "GET",
    dataType: "script",
    success: function () {
        // 触发自定义的脚本加载完成回调方法
        if (typeof (callback) == "function") {
            callback.apply(this, arguments);
        }
    }
});