当先锋百科网

首页 1 2 3 4 5 6 7

JavaScript封装是网页常用的一种技巧。封装指的是将程序内的某些特定功能单独处理,使得外部程序只需调用该功能,而不需关注功能的内部实现。下面通过举例教程,详细介绍如何封装JavaScript函数。

首先,我们先来看一个简单的例子,该例子实现了一个求和功能:

function sum(num1, num2) {
return num1 + num2;
}
var result = sum(2,4);
console.log(result);

如上所示,该函数能够求出传入两个参数的和,并在控制台输出结果。该函数虽然简单,但如果项目中需要反复使用该功能,我们可以将其封装起来,方便调用。

首先,我们将函数定义放到另一个函数内,然后将该内部函数封装在一个函数对象中:

var operation = {
sum: function (num1, num2) {
return num1 + num2;
}
};
var result = operation.sum(2,4);
console.log(result);

如上所示,我们将sum函数封装在一个名为operation的对象中,紧接着,在调用时,只需要调用operation的sum方法,并传入两个参数,即可得到结果。

下面我们再来一个例子,该例子用来获取当前时间:

function currentTime() {
var time = new Date();
var hours = time.getHours();
var minutes = time.getMinutes();
var seconds = time.getSeconds();
hours = updateTime(hours);
minutes = updateTime(minutes);
seconds = updateTime(seconds);
var currentTimeString = hours + ':' + minutes + ':' + seconds;
return currentTimeString;
}
function updateTime(i) {
if (i< 10) {
i = '0' + i;
}
return i;
}
console.log(currentTime());

如上所示,该函数能够获取当前时间,并将时间以字符串形式返回。同样,该函数也可以进行封装,使得调用更加方便。

我们仍然将函数封装在一个对象内:

var timeFunctions = {
currentTime: function() {
var time = new Date();
var hours = time.getHours();
var minutes = time.getMinutes();
var seconds = time.getSeconds();
hours = updateTime(hours);
minutes = updateTime(minutes);
seconds = updateTime(seconds);
var currentTimeString = hours + ':' + minutes + ':' + seconds;
return currentTimeString;
}
};
function updateTime(i) {
if (i< 10) {
i = '0' + i;
}
return i;
}
console.log(timeFunctions.currentTime());

如上所示,我们将获取当前时间的函数以及更新时间的函数封装在了名为timeFunctions的对象中,并通过调用timeFunctions对象的currentTime方法,实现获取当前时间。可见封装能够大幅提高代码的复用率,使得代码更具可维护性,缩短开发时间,提高开发效率。

以上就是JavaScript函数封装的简单教程。通过该教程,我们可以更好地理解封装的概念,以及在JavaScript项目中如何进行函数的封装。