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项目中如何进行函数的封装。