IFE2018-封装函数，Date对象

最新推荐文章于 2021-11-07 11:33:18 发布

原创最新推荐文章于 2021-11-07 11:33:18 发布 · 349 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#封装函数 #代理

IFE2018 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了函数封装的目的和好处，并通过实例展示了如何使用JavaScript进行年月日三级联动选择器的开发。此外，还讨论了如何简化函数实现以及利用事件代理简化DOM事件绑定。

函数：函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
其实就是为了减少代码的冗余，增加代码的可读性与易维护性，将实现同一功能的代码封装起来，在需要实现这一功能时调用即可。举个例子的话，就好比P图时自己调整色相与明暗度等与直接使用滤镜效果。
在做年月日三级联动时由于select下的option选项过多，直接写入显得繁琐，且每月的天数是不固定的，所以可用javascript来完成。而添加option选项的操作都是相同的，只是添加的数量与地方不同，所以可将父元素与添加的起始值做为参数来封装一个添加option元素的方法。
在封装函数时应尽可能的使一个函数只实现一个功能，比如，每月中天数的判断，是否为闰年也为影响天数，而是否为闰年又可单独写一个函数，在天数的判断中只需对月份进行判断，需要判断闰年时只调用判断闰年的方法即可。
封装函数的好处之一是使代码更简洁，所以在封函数应尽可能地对代码进行优化，例如在封装判断闰年的函数时：

function isLeapYear(year) {
    if( year % 400 === 0 || (year % 4 === 0 && year % 100 !== 0)){
        return true;
    }else {
        return false;
    }
}

可简写为：

function isLeapYear(year) {
    return year % 400 === 0 || (year % 4 === 0 && year % 100 !== 0);
}

每更改一项select，下方的文字内容就需要进行更新，而对每一个select都分别绑定事件，则显得繁琐，可通过代理来实现这一操作。
代理其实是通过事件冒泡机制，对上层元素绑定事件，通过target来获取真实触发的元素。