如何使用2個腳本標籤分離jQuery函數

Question

我不是100％熟悉JS或jQuery，並且有關於如何分離函數的問題。

我現在有這個功能：

$(window).scroll(function(){ 

    var wScroll = $(this).scrollTop(); 

    console.log(wScroll) 

    var windowWidth = ($(window).width()/8); 
    var windowHeight = ($(window).height()/16); 

    $('.fore-card').css({ 
    'transform': 'translate(' + windowWidth*0 + 'px, ' + windowHeight*(-6) + 'px)', 
    }); 
    $('.mid-card').css({ 
    'transform': 'translate(' + windowWidth*(-1) + 'px, ' + windowHeight + 'px)', 
    }); 
    $('.back-card').css({ 
    'transform': 'translate(' + windowWidth*(2) + 'px, ' + windowHeight*(-12) + 'px)', 
    }); 

}); 

正如你可以看到我有滾動的監聽器。我也有一些與頁面滾動無關的功能。現在它確實有效，但是滾動導致我的對象產生一些混亂，因此我需要將它們分開。

我最初以爲是這樣的：

$(document).ready(function(){ 
     func1(); 
     func2(); 
     [...etc...]; 
}); 

會做......但我不知道如何去這件事。

UPDATE

基於關閉的意見，我是假設這會工作：

$(function(){ 

    var windowWidth = ($(window).width()/8); 
    var windowHeight = ($(window).height()/16); 

    $('.fore-card').css({ 
    'transform': 'translate(' + windowWidth*0 + 'px, ' + windowHeight*(-6) + 'px)', 
    }); 
    $('.mid-card').css({ 
    'transform': 'translate(' + windowWidth*(-1) + 'px, ' + windowHeight + 'px)', 
    }); 
    $('.back-card').css({ 
    'transform': 'translate(' + windowWidth*(2) + 'px, ' + windowHeight*(-12) + 'px)', 
    }); 

    $(window).scroll(function(){ 

    var wScroll = $(this).scrollTop(); 

    console.log(wScroll) 

    }); 

}); 

Answer 1

如果它是如此簡單列出兩個功能，你可以按照你的想法來做：

$(document).ready(function(){ 

    $(window).scroll(function(){ 
     //your scroll function 
    }); 

    //anything else 
    // you can put functions, modules, object literals, etc. 

    var module = { 
     func1 : function(){ 

     }, 
     func2 : function(){ 

     } 
    }; 

    $("#someDiv").on("click", module.func1); 
}); 

As @ A.B。請注意，您可以使用IIEF來避免污染全局命名空間。如果您的應用程序變得更大，您可以爲其使用名稱空間，例如應用：

var application = {}; 
application.main = (function($) { 
    //module internals 
    var count = 1, 
    _someInternalFunc = function(){ 

    }; 

    //return public variables 
    return{ 
     count: count, 
     func1: function(){ 

     }, 
     func2: function(){ 

     } 
    }; 
}(jQuery)); 

而且你可以將你的模塊（例如application.main）到自己的文件，包括他們的依賴裝載機，使他們在正確的順序加載。學習函數，名稱空間，模塊模式和依賴加載器。另外，研究新的ES6模塊格式，因爲它將成爲在JavaScript中創建模塊化，可導出功能的標準方法。

Answer 2

你可以用在立即調用的函數表達式的部分代碼（IIFE）需要分離的問題

$(document).ready(function(){ 


      (function() { 
      //somecode here 
      }()); 

      (function() { 
      //some other code here 
      }()); 


});