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

Question

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

巴扎黑 · Answer

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

首先这个问题有个背景不明确，我就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 会好看一点

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

天蓬老师 · Answer

你可以使用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 ,一般不建议访问彼此的私有对象。