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...];
});

会这样做......但我不知道该怎么做。

更新

根据评论，我是否认为这样可行：

$(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

你可以在需要分离关注点的立即调用函数表达式（IIFE）中包装部分代码

$(document).ready(function(){


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

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


});

Answer 2

如果它像列出两个函数一样简单，你可以完全按照你的想法行事：

$(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 );
});

作为@ 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中创建模块化，可导出函数的标准方法。

如何使用2个脚本标记分离jQuery函数

2 个答案: