[解決済み] classie.jsでjsコードを理解する

質問内容

プラグインは classie.js と呼ばれ、このプラグイン classie.js と相互作用するいくつかのカスタムコードを書きました。

少し前に同じような質問がありました。 classie.jsの質問 そして、その人は本当に完璧にclassie.jsの中のコードがどのように機能しているかを答えてくれました。 それは素晴らしいことです、それで私はclassie.jsの中のコードがどのように機能するかを理解しました、今私の問題は、実際にclassie.jsと呼ばれるこのプラグインと相互作用する多くのコードが書かれていて、私は理解に苦しむことなのですが、だから私は何が私の問題であるかを詳しく説明しましょう :

classie.jsのコード:

( function( window ) {

'use strict';

var hasClass, addClass, removeClass;


if ( 'classList' in document.documentElement ) {

  // console.log(document.documentElement);

  hasClass = function( elem, c ) {
    // cons100%ole.log("elem is : " + elem + " c is " + c);
    return elem.classList.contains( c );
  };

  addClass = function( elem, c ) {
    console.log('elem Logged');
    console.log(elem);
    elem.classList.add( c );
  };

  removeClass = function( elem, c ) {
    console.log('removeClass function got used in if statement')
    elem.classList.remove
    ( c );
  };
}
 else {
       // I have deleted this part as its only a fallback for older browsers. :)
 }

function toggleClass( elem, c ) {
  var fn = hasClass( elem, c ) ? removeClass : addClass;
  fn( elem, c );
}

var classie = {
  // full names
  hasClass: hasClass,
  addClass: addClass,
  removeClass: removeClass,
  toggleClass: toggleClass,
  // short names
  has: hasClass,
  add: addClass,
  remove: removeClass,
  toggle: toggleClass
};

// transport
if ( typeof define === 'function' && define.amd ) {
  // AMD
  define( classie );
} else if ( typeof exports === 'object' ) {
  // CommonJS
  module.exports = classie;
} else {
  // browser global
  window.classie = classie;
}

})( window );

というコードは 相互作用 は、classie.js と共に使用します。

(function() {


                // disable/enable scroll (mousewheel and keys) from https://stackoverflow.com/a/4770179                 
                // left: 37, up: 38, right: 39, down: 40,
                // spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
                var keys = [32, 37, 38, 39, 40], wheelIter = 0;

                function preventDefault(e) {
                    e = e || window.event;
                    if (e.preventDefault)
                    e.preventDefault();
                    e.returnValue = false;  
                }

                function keydown(e) {
                    for (var i = keys.length; i--;) {
                        if (e.keyCode === keys[i]) {
                            preventDefault(e);
                            return;
                        }
                    }
                }

                function touchmove(e) {
                    preventDefault(e);
                }

                function wheel(e) {
                    // for IE 
                    //if( ie ) {
                        //preventDefault(e);
                    //}
                }

                function disable_scroll() {
                    window.onmousewheel = document.onmousewheel = wheel;
                    document.onkeydown = keydown;
                    document.body.ontouchmove = touchmove;
                }

                function enable_scroll() {
                    window.onmousewheel = document.onmousewheel = document.onkeydown = document.body.ontouchmove = null;  
                }

                var docElem = window.document.documentElement,
                    scrollVal,
                    isRevealed, 
                    noscroll, 
                    isAnimating,
                    container = document.getElementById( 'container' ),
                    trigger = container.querySelector( 'button.trigger' );

                function scrollY() {
                    return window.pageYOffset || docElem.scrollTop;
                }

                function scrollPage() {
                    scrollVal = scrollY();

                    // console.log(scrollVal);  

                    if( classie.has( container, 'notrans' ) ) {
                        classie.remove( container, 'notrans' );
                        return false;
                    }

                    if( isAnimating ) {
                        return false;
                    }

                    if( scrollVal <= 0 && isRevealed ) {
                        toggle(0);
                    }
                    else if( scrollVal > 0 && !isRevealed ){
                        toggle(1);
                    }
                }

                function toggle( reveal ) {
                    isAnimating = true;

                    if( reveal ) {
                        classie.add( container, 'modify' );
                    }
                    else {
                        noscroll = true;
                        disable_scroll();
                        classie.remove( container, 'modify' );
                    }

                    // simulating the end of the transition:
                    setTimeout( function() {
                        isRevealed = !isRevealed;
                        isAnimating = false;
                        if( reveal ) {
                            noscroll = false;
                            enable_scroll();
                        }
                    }, 600 );
                }

                // refreshing the page...
                var pageScroll = scrollY();
                noscroll = pageScroll === 0;

                disable_scroll();

                if( pageScroll ) {
                    isRevealed = true;
                    classie.add( container, 'notrans' );
                    classie.add( container, 'modify' );
                }

                window.addEventListener( 'scroll', scrollPage );
                // trigger.addEventListener( 'click', function() { toggle( 'reveal' ); } );
            })();

classie.jsとやりとりするコードの多くは、実はstackoverflowのスレッドから直接派生しています。 スクロールを無効にする方法と有効にする方法

今、上記のすべては、あなたの明確な理解のために、私の質問は、本当に、私はよく理解していないことです。 追加メソッド classie.jsのAPIとやりとりするコードで、このメソッドについてMDNドキュメントにはほとんど書かれていないのです。.

編集 :: 混乱している部分:

function toggle( reveal ) {
                    isAnimating = true;

                    if( reveal ) {
                        classie.add( container, 'modify' );
                    }
                    else {
                        noscroll = true;
                        disable_scroll();
                        classie.remove( container, 'modify' );
                    }

                    // simulating the end of the transition:
                    setTimeout( function() {
                        isRevealed = !isRevealed;
                        isAnimating = false;
                        if( reveal ) {
                            noscroll = false;
                            enable_scroll();
                        }
                    }, 600 );
                }

もし、classie.jsの関数が使われるなら、次のように使われなければならないと推測しているのですが、正しいでしょうか？

classie.functionname(); ?と直接評価することはできません。

私の第二の大問題（classie.jsのJS構文の理解）:

また、補足の質問として、答えないこともできますが、classie.jsとやりとりするコードの一部には、わかりにくい構文がたくさんあるので、それを指摘させてください。

disable_scroll 関数の中に、次のようなものがあります。

  window.onmousewheel = document.onmousewheel = wheel;
  document.onkeydown = keydown;

そして、enable scroll 関数には、次のようなものがあります。

window.onmousewheel = document.onmousewheel = document.onkeydown = null;

なるほど

A = B ;

ここで、A に B の値を代入する ur 。

しかし、上記の構文は、A = B = Cのようなものであり、それは完全に私の頭の上にあります。

どなたか教えてください。

もし誰かが詳しく説明してくれるなら、それは素晴らしいことでしょう。

ありがとうございました。

アレクサンダー

解決方法は？

まだコメントできるほどの担当者がいません。 add() メソッドは 'ネイティブ' の js 関数ではありません。classie.jsのコードを見ると、最後の方に'classie'というオブジェクトがあり、内部関数addClassへの公開ショートカットを定義しています。

var classie = {
  // full names
  hasClass: hasClass,
  addClass: addClass,
  removeClass: removeClass,
  toggleClass: toggleClass,
  // short names
  has: hasClass,
  add: addClass,
  remove: removeClass,
  toggle: toggleClass
};

これらのショートカットにより、classie.publicFunctionName(args) または window.classie.publicFunctionName(args) ("publicFunctionName" は定義されたショートカット) を呼び出すことで内部関数（グローバルスコープから他にアクセスできないもの）を呼び出し、まさに2番目のコードの塊で行うことができます ..:

...
classie.remove( container, 'modify' );
...    
classie.add( container, 'modify' );

addClass()メソッドが行うのは、呼び出されたhtml要素にクラスを追加することだけです。

これは「明解なモジュール」デザインパターンと呼ばれるものだと思いますが、100％確実ではありません。

少しでもお役に立てれば幸いです。 もしあなたがjsのデザインパターンについて少し学びたいなら、Addy Osmaniのとても良い（そして無料の）本をここで読むことを心からお勧めします。 http://addyosmani.com/resources/essentialjsdesignpatterns/book/