前言:在平常我们实现代码的过程中可能有一块功能能单独成为一个模块包含几个方法或是几个参数。为了有更好的代码组织结构和让程序耦合度更低我们可以尝试的把他组织成一个模块。

关于IIFE:在把功能模块化之前,我们先来了解一个概念IIFE(立即调用函数表达式),看一下下面这两段程序。

console.time()
var s = 0;
for (var i = 0; i < 1000000; i++) {
    s += i;
};
console.log(s);
console.timeEnd();

console.time();
(function x() {
    var s = 0;
    for (var i = 0; i < 1000000; i++) {
        s += i;
    };
    console.log(s);
})();
console.timeEnd();

测试结果:

default: 17.2ms;
default: 3.9ms;

运行两个程序,可以很明显的发现第二种比第一种的速度快很多,因为第二种IIFE调用,避免了全局变量,毕竟全局变量的查找是比较耗时的,并且降低了程序的耦合度。

进入正题,假设我们要实现一个人的功能(自我介绍,穿。。。)现在我们来编写这模块。

var person = (function() {
    var name = '',
        age = 0;
    //初始化
    function init(username, userage) {
        name = username;
        age = userage;
    }
    //自我介绍
    function selfintro() {
        console.log('我是' + name + '今年' + age);
    }
    //吃
    function eat(food) {
        console.log('我是' + name + '我在吃' + food);
    }
    //方法集成为一个对象
    var personAPI = {
        init : init,
        selfintro : selfintro,
        eat : eat
    };
    //暴露对外接口
    return personAPI;
})();
//调用,先对这个人进行初始化,在调用行为函数
person.init('cws', 18);
person.selfintro();
person.eat('西瓜');

测试结果:

 我是cws今年18
 我是cws我在吃西瓜

这样是不是把我们的人的模块独立出来了,让程序更加的清晰,降低了耦合度。
这只是比较简单的一个功能,我把一个原生的大图滚动用模块化封装了一下,具体可参考:原生实现大图滚动模块化demo


cwsjoker
433 声望45 粉丝

摸爬滚打,我是程序的搬运工。