JavaScript 函数(方法)的封装技巧要领及其重要性

作为一枚程序猿，想必没有人不知道函数封装吧。在一个完整的项目开发中，我们会在JS代码中对一些常用(多个地方调用)的操作进行一个函数的封装，这样便于我们调试和重复调用，以致于能够在一定程度上减少代码的冗余，从而降低浏览器对JS代码的读取时间，增加我们项目程序的工作效率。因此，可以说，函数方法封装是一个程序猿的必备技能。那么，封装时应该注意什么呢？——我的答案是：灵活性。

这样，我们先来进行一个简单的测试：

1.在浏览器中console一句Hello World!，代码如下：

console.log('Hello World！');

2.在浏览器中console五句Hello World!，这时，又有多种方法：

// 方法一：
console.log('Hello World！');
console.log('Hello World！');
console.log('Hello World！');
console.log('Hello World！');
console.log('Hello World！');

// 方法二：
for(var i = 0;i<5;i++){
    console.log('Hello World！');
}

PS:从上述两种方法来看，都能达到相同的效果，但有没有觉得方法一的代码有点烦杂呢？好的，那我们继续接着往下走：

3.在1和2的基础之上，将五句Hello World！翻译为：你好，世界！这样一来，又会有很多方法涌出，如：直接修改console里面的内容，但是我想说的是，利用2中的方法二结合函数生成：

function myFn(){
   for(var i=0;i<5;i++){
        console.log(“你好，世界！”);
   }
}
myFn();
// 这种方法便有了一个函数方法的产生

PS:这样，函数就使得我们代码更加简洁(可能暂时还看不出)，OK，我们接着往下走：

4.在3的基础上，将‘你好，世界！’翻译为：Hello World！很明显，这时我们console的内容又变了，也就是说，console的内容不是一尘不变的，那么怎样才能使得3中的函数调用更加灵活呢？

function myFn(str){
   for(var i=0;i<5;i++){
        console.log(str);
   }
}
myFn(‘你好，世界！’);
// 这种方法又产生了一个新的东西——参数

5.OK，很好，是不是很简单呢？现在我们来一点难度：

在4的基础上简单地修改函数内部内容，在浏览器中console出50句‘世界我爱你’，很多人都会想到，将循环次数更改为50，然后再调用，也就是说循环次数也应该是一个参数：

function myFn(str,num){
   for(var i=0;i<num;i++){
        console.log(str);
   }
}
myFn('你好，世界！',50);
// 这样一来，便形成了一个简单的函数封装
// 倘若现在题目要求 在浏览器中console出1000句‘I LOVE YOU’
// myFn('I LOVE YOU',1000); 是不是So easy?

现在，我们来仔细分析一下这个小测试，题目给出的console内容以及console的次数都是可变的，那么我就可以进行一个函数的封装。

这样一来，无论你题目要求我们console什么，console几次，只需调用该函数，并传入指定内容及次数，也就是说除去函数封装内容，我们只需一行代码就能达到题目给的要求，是不是很简单呢？这便是函数封装的简洁性和灵活性，所以，猿友们，我们在项目开发中对代码进行封装时，一定要注意：灵活性！多思考多变的地方，让多变的地方用参数代替，另外，还要注意在项目运营中该段代码的可运用性，如何减低运营成本，这都是我们在封装时应当去思考的问题。