連結機能

Question

マウスホイールを使用してセクションをアニメーション化するためのアイデア - キーボードとスワイプの入力と終了。各セクションには異なるアニメーションがあります。 すべてがグローバル変数内のwrappです。ここではこれまでのところ大きなサンプル

var siteGlobal = (function(){ 

      init(); 

      var init = function(){ 
       bindEvents(); 
      } 

      // then i got my function to bind events 
      var bindEvents = function(){ 
       $(document).on('mousewheel', mouseNav()); 
       $(document).on('keyup', mouseNav()); 
      } 

      // then i got my function here for capture the event 
      var mouseNav = function(){ 
       // the code here for capturing direction or keyboard 
       // and then check next section 
      } 

      var nextSection = function(){ 
       // Here we check if there is prev() or next() section 
       // if there is do the change on the section 
      } 

      var switchSection = function(nextsection){ 
       // Get the current section and remove active class 
       // get the next section - add active class 
       // get the name of the function with data-name attribute 
       // trow the animation 
       var funcEnter = window['section'+ Name + 'Enter']; 
      } 


      // Let's pretend section is call Intro 
      var sectionIntroEnter = function(){ 
       // animation code here 
      } 

      var sectionIntroExit = function(){ 
      // animation code here 
      } 
    }(); 

はfuncEnter（）と何を呼び出すまではとても良いですが起こる 私はまだ私は私は、実際にはJavaScriptプログラマではないよ、これらの関数を呼び出すこと立ち往生...と残念に男私はこのように "コーディング"のこの方法を続けていきたいと思っています。誰かが手掛かりを持っていますか？ありがとう

Answer 1

あなたの連結は正しいですが、これを行うグローバル関数を作成しなかった方が良いでしょう。代わりに、それらをあなたのオブジェクトの中に置き、そこを通って関数にアクセスしてください。

var sectionFuncs = { 
 
    A: { 
 
    enter: function() { 
 
     console.log('Entering A'); 
 
    }, 
 
    exit: function() { 
 
     console.log('Exiting A'); 
 
    } 
 
    }, 
 
    B: { 
 
    enter: function() { 
 
     console.log('Entering B'); 
 
    }, 
 
    exit: function() { 
 
     console.log('Exiting B'); 
 
    } 
 
    } 
 
}; 
 

 
function onClick() { 
 
    var section = this.getAttribute('data-section'); 
 
    var functions = sectionFuncs[section]; 
 
    functions.enter(); 
 
    console.log('In between...'); 
 
    functions.exit(); 
 
} 
 
var buttons = document.querySelectorAll('button'); 
 
for (var i = 0; i < buttons.length; i++) { 
 
    buttons[i].addEventListener('click', onClick); 
 
}

<button data-section="A">A</button> 
 
<button data-section="B">B</button>

Answer 2

あなたは名をキー、これらの機能を保持しているオブジェクト、かもしれない：多くの変数名を使用しないでください

​​