[英]understanding js code in 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交互的代碼中add方法的用法,因此毫無意義對我和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(); ?? 不能直接評估? 例如。 使用functionName();
我的第二個大問題(了解classie.js的JS語法):
作為補充問題,您可以選擇不回答,但是與classie.js交互的代碼的某些部分具有很多令人困惑的語法,請讓我指出。
在disable_scroll函數中是這樣的:
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
};
這些快捷方式將使您可以通過調用classie.publicFunctionName(args)或window.classie.publicFunctionName(args)來調用內部函數(否則無法從全局范圍訪問內部函數),其中“ publicFunctionName”是定義的快捷方式,這正是第二段代碼執行以下操作:
...
classie.remove( container, 'modify' );
...
classie.add( container, 'modify' );
addClass()方法所做的全部工作就是將一個類添加到被調用的html元素中。
我相信這被稱為“公開模塊”設計模式,但並非100%肯定。
希望至少能有所幫助。 如果您想學習一些js設計模式,我強烈建議您在這里閱讀Addy Osmani的非常好(免費)的書: http : //addyosmani.com/resources/essentialjsdesignpatterns/book/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.