Javascript 理解classie.js中的js代码

嘿，伙计们，我下载了一些用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中的任何函数，它必须按如下方式使用：

classie.functionname（）？？不能直接评估？？例如，functionname（）

我的第二个大问题（理解classie.JS的JS语法）：

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交互的代码的某些部分有很多令人困惑的语法，让我指出

在“禁用滚动”功能中，有以下内容：

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

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

在“启用滚动”功能中，有以下内容：

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

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

现在我明白了

A=B

式中，ur指定A为B的值

但是上面的Syntex更像，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
};

这些shorcuts将允许您通过调用classie.publicFunctionName（args）或window.classie.publicFunctionName（args）来调用内部函数（不能从全局范围访问），其中“publicFunctionName”是定义的shorcut，这正是第二段代码的作用：

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

addClass（）方法所做的就是将一个类添加到调用它的html元素中

我相信这就是所谓的“显示模块”设计模式，但不是100%确定

希望这至少有一点帮助。

---

如果你想了解一些js设计模式，我强烈建议你在这里阅读Addy Osmani的一本非常好（免费）的书：

add method？你是说addEventListener吗？@BrianGlaz不，它是那个小图书馆的一部分。OP它只是从DOM节点添加和删除类。我在发布的代码中没有看到任何名为

add

的方法，所以我不知道OP在说什么，是的，确切地说：）在这么小的库中，我不知道为什么重要，但是的，它们只是快捷方式。是的，所有调用都需要采用

classie.something（）

@AlexanderSolonik

A=B=C

的形式，意思是将

C

分配给

A

和

B

——在JavaScript中，分配（

A=B

）有一个值，即

B

。因此

A=B=C

就像

A=（B=C）

；

B=C

的值是

C

，因此它将该值分配给

A

。谢谢，我已经第二次被推荐使用该书，我已将其保存为书签：）我添加了另一个问题“我的第二个大问题”，你能编辑你的答案吗。谢谢。@AlexanderSolonik

A=B=C=value将相同的值分配给3个变量A、B和C。这只是为了简洁。更长的方法是简单地写：
A=value；B=数值；C=值