Question

我将所有.js文件合二为一。因此，一个页面将使用不到10％的函数。

例如，page1.php只需要.func1，但现在我有功能2,3,4 ......

$(document).on("click", ".func1", function() { /* ... */ });
$(document).on("click", ".func2", function() { /* ... */ });
$(document).on("click", ".func3", function() { /* ... */ });
$(document).on("click", ".func4", function() { /* ... */ });
$(document).click(function(){ /* ... */ });
... fun20, func30.

可以吗？我只需要func1但其他所有听众也都在工作。我需要或应该做的任何事情？

Answer 1

您的代码没有任何问题，但绝对可以变得更好。

有一些方法可以做到这一点：

<强> 1。使用像webpack这样的代码捆绑器

使用webpack特别适合它的新功能Code Splitting，让您动态导入不同的模块。

<强> 2。使用模块化设计模式，如Revealing Module Pattern

有一些事情要做到这一点，这很容易。我在下面给你一些示例代码：

// Self Invoke function
var Module1 = (function(){

    // Configurations
    var config = {
        body : '.body',
        header : '.header',
        ...
    }

    // Functions
    function bodyHandler(){
        ...
    }

    function headerHandler(){
        ...
    }

    // Bind Events
    $(document).on('click', config.body ,  bodyHandler);
    $(document).on('click', config.header ,  headerHandler);

})()

您可以将JavaScript代码分成不同的模块，并在不同的页面中使用它们。

此外，您可以从外部动态配置每个模块（例如在html页面中），如下所示：

(function(){

    var Page = {
        // Init the Module with your own configuration
        init(conf){
            this.config = conf;
            this.bindEvents()
        },

        // Bind Events
        bindEvents(){
            $(document).on('click', this.config.body ,  this.bodyHandler);
            $(document).on('click', this.config.header ,  this.headerHandler);
        },

        bodyHandler(){
            ...
        },

        headerHandler(){
            ...
        },
        
    }

    // You can Init the module whereever you want
    Page.init({
        body : '.body',
        header : '.header',
        // Other options ...
    })
        
})()

Answer 2

我目前在JavaScript方面有类似的过程。我写的所有函数都放在一个大文件中。然后，我有一个单独的函数，在DOM准备就绪时将事件绑定到特定元素上。

通过这样做a）我知道所有事件绑定发生的位置和b）只有特定于页面内容的事件才被实际绑定

例如......

(function() {

    function fnFunctionA() { ... }
    function fnFunctionB() { ... }
    function fnFunctionC() { ... }

    $('.containerA').on('click', '.subElementA', fnFunctionA);
    $('.containerB').on('click', '.subElementB', fnFunctionB);
    $('.containerC').on('click', '.subElementC', fnFunctionC);

}());

只有当containerA实际存在于页面上时才会绑定函数A，依此类推

一个脚本中的所有函数

2 个答案: