- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
大家好,我下载了一些用 JS 编码的简单效果。该插件名为 classie.js,该人员编写了一些与此插件 classie.js 交互的自定义代码
前一段时间有人问过类似的问题classie.js Question这个人真的完美地回答了 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 的线程派生的:how to disable and enable scroll
现在以上所有内容只是为了让您清楚地理解,我的真正问题是,我不太了解 add 方法在与 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;
在启用滚动功能中有这个:
window.onmousewheel = document.onmousewheel = document.onkeydown = null;
现在我明白了
A = B;
其中你将 B 的值赋给 A ;
但是上面的 Syntex 更像是 A = B = C ;这完全超出了我的理解范围。
有人可以澄清一下吗
如果有人能详细解释一下,那就太好了。
谢谢。
亚历山大。
最佳答案
还没有足够的代表发表评论。add() 方法不是“ native ”js 函数。如果您查看 classie.js 代码,在它的末尾是一个对象“classie”,它定义了内部函数 addClass 的公共(public)快捷方式:
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/
关于javascript - 理解 classie.js 中的 js 代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28027332/
我有一个缩小的 angular-class.min.js 文件,没有注释。除了对各个版本进行比较之外,有没有一种方法可以轻松判断 Angular Classy 的版本。正在被使用?可以在控制台中运行的
大家好,我正在另一个网站上研究幻灯片和推送菜单的示例,并且正在努力理解源下载中包含的 classie.js 文件中的 if 语句。 if ( 'classList' in document.docum
我正在使用 Flask + Flask-Classy 和 jinja2 模板,并且我想为该 View 中的所有请求(例如索引、获取等)将一些数据注入(inject)到我的模板中,而不必在每个请求上手动
我正在使用Classie.JS创建一个 s lideover menu demonstrated on Codrops 。 我正在使用的部分代码如下。我想实现一个回调,以便该函数的最后两行仅在切换完成
我的文件夹根 app.py 看起来像这样 import application if __name__ == '__main__': application.app.run() 我有一个名为 appl
在我的 Rails 应用程序中,我的折叠导航栏在滚动时没有改变它的样式,并且在检查元素控制台中也发生了错误: TypeError: elem is null elem.classList.
大家好,我下载了一些用 JS 编码的简单效果。该插件名为 classie.js,该人员编写了一些与此插件 classie.js 交互的自定义代码 前一段时间有人问过类似的问题classie.js
我正在为我的新 iOS 应用程序使用 Classy (www.classy.as) 我正在尝试弄清楚如何使用以下方法向 UILabel 添加阴影仅样式表。文档似乎没有提到这一点。我知道如何使用 CAL
我不久前设置了一个 Azure 备份保管库,并将我的系统备份到其中。备份保管库的类型为“备份保管库(经典)” 现在有一种新型的 Azure 备份保管库,可以在其他选项中启用警报。我需要利用这些选项。
所以我有一个这样设置的 View : class toi(FlaskView): def index(self): ... return ren
我查看了之前的问题,但没有涉及到我的确切问题。我认为自己是 html/css 的初学者 - 中级水平。我正在使用 html 和 css 开发一个基本的响应式页面,它根据媒体查询中的最大屏幕宽度交换图像
我是一名优秀的程序员,十分优秀!