如何使用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 
      }()); 


});