首页 > 如何通过模块化的方式让Javascript代码避免重复执行?

如何通过模块化的方式让Javascript代码避免重复执行?

具体场景如下:
页面中需要加载1.js和2.js,其中有一段相同的js代码(判断语句+for循环)。因为有的页面需要单独加载一个js文件,有的页面需要同时加载两个页面,所以两个js中都有这段代码。
如何避免这段代码当两个js都被加载的时候被重复执行?


你可以使用module模式对代码进行重用和模块化。
假设在文件1.js定义module如下:

var Module = (function(duplication) {
    var _private = '';//private variable here

    var duplication = {};
    duplication.foo = function() {
        if(...) {
            for(...) {
                //define your duplication here
            }
        }
    };

    return duplication;//return the public variable
} (Module || {}));

在你的文件2.js中就可以这样使用:

var Module = (function(duplication) {
    return duplication;
} (Module || {}));

Module.foo();//use the method defined in 1.js

这样就把一个module分割到了多个文件中,将代码重复部分定义为 public ,彼此可以交叉访问和使用,因为我采用的是松耦合,也可以对函数进行重构,如下:

var Module = (function(duplication) {
    duplication.foo = function() {
       //refactor method foo here    
    }
    return duplication;
} (Module || {}));

而私有部分则定义为 private ,一般不建议访问彼此的私有对象。


从关联的另一个问题过来,谈谈我的看法

首先这个问题有个背景不明确,我就if一下

if 你的1.js和2.js都不大(两三百行吧),相同的那段也比较小(十几行)且逻辑简单

那么这种情况我认为重复代码是可以忍受的,那么就需要通过一些简单的trick来防止重复执行,而不是模块化(太重了,大炮打蚊子)

window.foo_is_runned || (function() {
    window.foo_is_runned = true;
    //your logic
})();

window上乱加属性不是好事,如果有自己的命名空间,还是用自己的命名空间

else,如果你的1.js和2.js有点大,或者相同那段代码不短,或者逻辑略复杂

这个时候,重复相同的代码就是一件非常不妙的事情。我建议还是只写一份逻辑,比如抽出一个common.js来,比如总的代码量不小,重用度需要提升干脆就可以引入requireJS/seaJS来改造一下。

前者可能是这样搞

//common.js
function foo_once() {
    if(foo_once.is_runned) return;
    foo_once.is_runned = true;
    //your logic
}

//1.js, 2.js
foo_once();

requireJS可能是这样搞

//foo.js
define(function() {
    var runned = false;
    return function() {
        if(runned) return;
        runned = true;
        //your logic
    }
});

//1.js, 2.js
require(['foo'], function(foo) {
    foo();
});

当然,好多runned之类的变量有时候看着不太爽,可以用underscore里面的_.once 会好看一点


总结:防止重复执行不外乎用个小本子记一下到底有没有执行过,这事儿和模块化没啥关系

【热门文章】
【热门文章】