Javascript 我将所有内容都保存在一个外部.js文件中。但并非所有功能都在每页上使用。这会影响速度吗？

我的应用程序的JavaScript/jQuery包含在一个外部

scripts.js

文件中。通常看起来是这样的：

$('document').on('ready', function() {
    giraffe();
    elephant();
    zebra();
});

function giraffe() {
    // code
}

function elephant() {
    // code
}

function zebra() {
    // code
}

var $zebra = $('#zebra');
console.log( $zebra.val() );

giraffe（）

仅用于

/animal/giraffe

elephant（）

仅用于

/animal/elephant

zebra（）

仅用于

/animal/zebra

上提供的视图

但是所有3个都应该在可用的视图上运行

/animal/all

。这是一个基本的示例，但这就是将它们全部放在一个

.js

文件中的原因，除了将HTTP请求保持在最小值之外

我的问题是，这会影响JavaScript呈现吗？尽管在

/animal/zebra

上没有使用

giraffe（）

，但它仍然被调用。如果js/jQuery找不到任何事情做，它会忽略这个函数吗？我相信整个剧本都读过了，这可能需要时间。那么，最好的处理方法是什么

一个解决方案 为了避免冲突，我在js文件的顶部创建了条件，以便只运行活动页面所需的函数：

$('document').on('ready', function() {
    var body = $('body');

    if( body.hasClass('giraffe') ) {
        giraffe();
    }

    if( body.hasClass('elephant') ) {
        elephant();
    }

    if( body.hasClass('zebra') ) {
        zebra();
    }
});

---

这比我希望的要详细一点，但它成功地保持了这些功能模块化/无冲突。我欢迎对此解决方案的改进。

Javascript将忽略任何未“调用”的函数。例如，如果除了/elephant或/all页面之外，您没有在任何页面上调用大象（），那么它将永远不会被使用，也不会给您任何错误

---

但是，您可能不希望在页面上显示函数，因为它不用于更快的页面加载。考虑，为某些页面分离JS文件，或者通过从PHP等后端服务器加载某些JS脚本来确定需要哪些功能。

这里实际上有两个问题，一个是是否加载所有的函数，另一个是是否运行它们。关于是否全部运行它们（以及一些只运行所需函数的解决方案）的问题在其他答案中得到了很好的解决

那么，你应该把它们都装进去吗？您需要权衡下载更大文件所需的时间，而不是进行额外的http请求。3个页面之间只共享三组功能（一个页面使用所有功能），当您希望用户定期更改页面时，我会使用一个文件

一旦您的项目变得非常大，您将希望使用类似的方法来管理脚本并异步加载它们。异步加载js脚本将提高页面的速度（以及页面的感知速度），如果出现问题（尤其是由第三方托管的脚本），您的页面将无法获得帮助。当然，您可以在没有库的情况下执行此操作：

使用HTML5：

<script async src="http://google.com/script.js"></script>

使用纯JS异步加载的方法有一百万种，一种是：

<script>
  var resource = document.createElement('script'); 
  resource.src = "//google.com/script.js";
  var script = document.getElementsByTagName('script')[0];
  script.parentNode.insertBefore(resource, script);
</script>

var resource=document.createElement（'script'）；
resource.src=“//google.com/script.js”；
var script=document.getElementsByTagName（'script'）[0]；
script.parentNode.insertBefore（资源，脚本）；

只运行所需的代码肯定会更好。没那么难；唯一的次要复杂性是处理您的

/animals/all

案例。如果要将所有代码保存在一个文件中，可以通过以下方式执行：

var animals = {
    giraffe: function() {
        console.log( "I'm a giraffe" );
    },
    elephant: function() {
        console.log( "I'm an elephant" );
    },
    zebra: function() {
        console.log( "I'm a zebra" );
    }
};

$(function() {
    var animal = location.pathname.split('/').pop();
    if( animal == 'all' ) {
        for( var animal in animals ) {
            animals[animal]();
        }
    }
    else if( animal in animals ) {
        animals[animal]();
    }
    else {
        console.log( "I'm a mystery animal" );
    }
});

实际上，您可以通过在堆栈溢出上访问如下URL，然后将代码粘贴到JavaScript控制台中来测试此代码：

更新：好的，你在评论中解释说实际情况有点复杂。我将把这段代码留在这里，以防它对任何人都有用，但对于您的情况，您可能更接近您所需要的代码

WRT的问题是，当你在一个与之无关的页面上时，你的动物功能会做什么，当然这取决于它是如何编码的。它可能什么也不做，也可能有错误，对吗

因为我们讨论的是jQuery代码，这里有几个例子。假设您的代码正在按ID查找元素，然后假设该元素存在：

var zebraElement = $('#zebra')[0];
console.log( zebraElement.value );

在存在

#zebra

元素的页面上，此代码将记录其

值

属性。（为了便于讨论，我假设它是一个有值的元素，例如输入元素。）

但如果

#zebra

不存在，则

zebra元素

是

未定义的

，尝试访问其

值

将失败并进入调试器

OTOH，如果你这样编码：

$('document').on('ready', function() {
    giraffe();
    elephant();
    zebra();
});

function giraffe() {
    // code
}

function elephant() {
    // code
}

function zebra() {
    // code
}

var $zebra = $('#zebra');
console.log( $zebra.val() );

如果

#zebra

丢失，它不会失败，它将成功打印

未定义的

，而不会导致错误

类似地，如果您的代码使用

$（）。each（）

，则当缺少元素时，它通常会正常运行，因为它不会执行回调函数：

$('.animal').each( function( i, e ) {
    console.log( $(e).val() );
});

如果没有包含

class=“animal”

的元素，则永远不会到达

console.log（）

调用。所以没有错误，它只是没有任何作用

根据您正在做的事情，这是一种完全合理的方式，只需确保您的代码不做任何事情就可以处理丢失的DOM元素

也请务必阅读更多的见解

还有一个更新…在您提到的注释中，在

body

元素上键入了类名。一种很好的方法类似于上面的代码示例。您不需要为每个动物设置条件，只需要一个循环和一个条件：

var animals = {
    giraffe: function() {
        console.log( "I'm a giraffe" );
    },
    elephant: function() {
        console.log( "I'm an elephant" );
    },
    zebra: function() {
        console.log( "I'm a zebra" );
    }
};

$(function() {
    var $body = $('body');
    for( var animal in animals ) {
        if( $body.hasClass(animal) ) {
            animals[animal]();
        }
    }
});

---

因此，例如，如果您有

，它将调用

动物.giraffe（）

和

动物.zebra（）

函数。

视情况而定。剧本有多大？一旦它被加载到内存中，它就不重要了