JavaScript开发指南
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对象上的方法。
在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);
在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
在编写网页时，样式文件的引入常常需要使用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开发时，有时除了需要在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);
}
}
});