首先 - 我是javascript的新手，所以请不要过度估计我的能力 - 但是，在学习的过程中，我已经通过一些例子将自己抛到了深处; ＆＃39;直到现在，这种情况一直很好。＆＃39; 例外的是，尝试实现一些代码来改进滚动。
我遇到过Chistopher Pappas＆＃39;码： https://github.com/damassi/smooth-scroll-example/blob/master/src/scripts/views/ScrollView.coffee [其中，他似乎知道他在说什么]但它是在咖啡脚本中 - 所以我想我会尝试转置它：失败。那么我想我会看看它编译到的内容：https://smoothscroll.firebaseapp.com/ [以及我的问题的关键]并且与绑定和构造函数代码非常混淆[我会原谅/忽略出现的内容成为一个图书馆 - 也许require.js ?? - 包装代码并在没有代码的情况下无法工作，我相信......真的不知道它是什么，或它在做什么。）
无论如何，任何人都可以告诉我如何去除我相信的多余的咖啡遗产＆＃39;从＆＃39; ScrollView＆＃39;引用的代码构造函数[__bind / __hasProp等]以及它首先实现的是什么[我的信心现在已经被拍摄，特别是__extends函数？
实际代码有效，但正如您所看到的 - 与Chris＆＃39;相比例如 - 看起来很多代码都不需要。
(function e(t, n, r) { function s(o, u) { if (!n[o]) { if (!t[o]) { var a = typeof require == "function" && require; if (!u && a) return a(o, !0); if (i) return i(o, !0); throw new Error("Cannot find module '" + o + "'") } var f = n[o] = { exports: {} }; t[o][0].call(f.exports, function (e) { var n = t[o][1][e]; return s(n ? n : e) }, f, f.exports, e, t, n, r) } return n[o].exports } var i = typeof require == "function" && require; for (var o = 0; o < r.length; o++) s(r[o]); return s })(
{
1: [
function(module) {
$(document).ready(function() {
return new ScrollView();
});
/**
* ScrollView illustrates the ability to intercept scroll events, pipe them through
* an easing equasion, and then apply them to a container. Useful in situations where
* you would like to normalize scrolling across an unknown number of devices / platforms
* and apply the result to a parallax container or typical webpage
*
* @author Christopher Pappas <chris@wintr.us>
* @date 5.2.14
*/
var ScrollView,
__bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; },
__hasProp = {}.hasOwnProperty,
__extends = function(child, parent) {
for (var key in parent) {
if (__hasProp.call(parent, key)) child[key] = parent[key];
}
function ctor() {
this.constructor = child;
}
ctor.prototype = parent.prototype;
child.prototype = new ctor();
child.__super__ = parent.prototype;
return child;
};
ScrollView = (function(_super) {
__extends(ScrollView, _super);
function ScrollView() {
this.animationLoop = __bind(this.animationLoop, this);
this.onScroll = __bind(this.onScroll, this);
return ScrollView.__super__.constructor.apply(this, arguments);
}
//The easing which should be applied to inner container
ScrollView.prototype.FRICTION = .3;
//Number of individual items which are created within the container
ScrollView.prototype.NUMBER_OF_ITEMS = 60;
//Class name of the parent container
ScrollView.prototype.className = 'container';
//The next, computed position which is constantly being updated
//inside of the render loop
ScrollView.prototype.nextPosition = 0;
//The current scroll position, which is applied via the keyframe
ScrollView.prototype.currentPosition = 0;
//The container in which to ease the scroll
ScrollView.prototype.$scrollContainer = null;
ScrollView.prototype.initialize = function() {
return this.render();
};
/*
# Render the view by creating some dummy content which is then appended
# to the dom for the scroll engine to calculate against.
*/
ScrollView.prototype.render = function() {
var $html = this.$el.html("<div class=item><h1>Item 0</h1></div><div class=item><h1>Item 1</h1></div><div class=item><h1>Item 2</h1></div><div class=item><h1>Item 3</h1></div><div class=item><h1>Item 4</h1></div><div class=item><h1>Item 5</h1></div><div class=item><h1>Item 6</h1></div><div class=item><h1>Item 7</h1></div><div class=item><h1>Item 8</h1></div><div class=item><h1>Item 9</h1></div><div class=item><h1>Item 10</h1></div><div class=item><h1>Item 11</h1></div><div class=item><h1>Item 12</h1></div><div class=item><h1>Item 13</h1></div><div class=item><h1>Item 14</h1></div><div class=item><h1>Item 15</h1></div><div class=item><h1>Item 16</h1></div><div class=item><h1>Item 17</h1></div><div class=item><h1>Item 18</h1></div><div class=item><h1>Item 19</h1></div><div class=item><h1>Item 20</h1></div><div class=item><h1>Item 21</h1></div><div class=item><h1>Item 22</h1></div><div class=item><h1>Item 23</h1></div><div class=item><h1>Item 24</h1></div><div class=item><h1>Item 25</h1></div><div class=item><h1>Item 26</h1></div><div class=item><h1>Item 27</h1></div><div class=item><h1>Item 28</h1></div><div class=item><h1>Item 29</h1></div><div class=item><h1>Item 30</h1></div><div class=item><h1>Item 31</h1></div><div class=item><h1>Item 32</h1></div><div class=item><h1>Item 33</h1></div><div class=item><h1>Item 34</h1></div><div class=item><h1>Item 35</h1></div><div class=item><h1>Item 36</h1></div><div class=item><h1>Item 37</h1></div><div class=item><h1>Item 38</h1></div><div class=item><h1>Item 39</h1></div><div class=item><h1>Item 40</h1></div><div class=item><h1>Item 41</h1></div><div class=item><h1>Item 42</h1></div><div class=item><h1>Item 43</h1></div><div class=item><h1>Item 44</h1></div><div class=item><h1>Item 45</h1></div><div class=item><h1>Item 46</h1></div><div class=item><h1>Item 47</h1></div><div class=item><h1>Item 48</h1></div><div class=item><h1>Item 49</h1></div><div class=item><h1>Item 50</h1></div><div class=item><h1>Item 51</h1></div><div class=item><h1>Item 52</h1></div><div class=item><h1>Item 53</h1></div><div class=item><h1>Item 54</h1></div><div class=item><h1>Item 55</h1></div><div class=item><h1>Item 56</h1></div><div class=item><h1>Item 57</h1></div><div class=item><h1>Item 58</h1></div><div class=item><h1>Item 59</h1></div>");
$html.appendTo('body');
/*
# Set the height of the main container so inner scroll
# container, which is set to position:fixed, can still
# be tied to an actual scrollbar
*/
var elementZ = this.$el.find('.scroll-container');
this.$scrollContainer = elementZ;
var height = this.$scrollContainer.height();
//height = 19296;
$('.container').height(height);
//this.$el.height(height);
this.addEventListeners();
return this.animationLoop();
};
/* Bind Listener to 'onScroll' scroll event [v] */
ScrollView.prototype.addEventListeners = function() {
return $(window).on('scroll', this.onScroll);
};
/*
# Handler for scroll events received when the scroll bar changes its
# current position
*/
ScrollView.prototype.onScroll = function(event) {
var value = $(window).scrollTop();
return this.nextPosition = value;
};
/*
# The animation loop constantly inspects the current position of the scrollbar
# and pipes it through an easing equasion. This normalizes the scroll across
# all scroll devices and allows for smooth scroll abilities within a normal
# or parallax environment
*/
ScrollView.prototype.animationLoop = function() {
this.currentPosition += ~~(this.nextPosition - this.currentPosition) * this.FRICTION;
/*I believe TweenMax in from GreenSock Plugin*/
TweenMax.set(this.$scrollContainer, {
y: -this.currentPosition
});
return requestAnimationFrame(this.animationLoop);
};
return ScrollView;
})(Backbone.View);
module.exports = ScrollView;
}
]
,
2: []
}, {}, [1]);
感谢您提供的任何帮助/建议，Livy
响应DelightedD0D： http://js2.coffee/代码
var ScrollView, template,
bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
hasProp = {}.hasOwnProperty;
template = require('./scroll-template.hbs');
ScrollView = (function(superClass) {
extend(ScrollView, superClass);
function ScrollView() {
this.animationLoop = bind(this.animationLoop, this);
this.onScroll = bind(this.onScroll, this);
return ScrollView.__super__.constructor.apply(this, arguments);
}
注意：为避免混淆，我删除了模板＆＃39;并注入HTML本身，但正如你所看到的 - 它基本相同。
构造函数和超类[继承？]真的让我很困惑，更不用说顶级函数＆＃34;（函数e（t，n，r）{function s（o，u）...等等＃34 ;但是我最好留在主题上。谢谢
更新：首先：我相信第一个功能，以及文件的布局方式 - 是由于＆＃34; Browserify＆＃34; 即:(函数e（t，n，r）{function s（o，u）{if（！n [o]）{if（！... 据我所知，＆＃34; Browserify＆＃34;基本上将所有依赖项/包等捆绑到一个文件中 - 所以从理论上讲，我不应该删除＆＃34; Browserify＆＃34;代码，只要我之前引用依赖脚本和ScrollView操作并让它仍然起作用 - 并且从上面的“浏览器化”开始。代码，它似乎是唯一的模块吗？ （我知道整体代码依赖于jQuery / TweenMax，也许还有其他代码？）
其次：我并不是100％确信这是一个预期的jQuery插件（诚然，我只是在短暂的时间内阅读过这样的内容），但正如我无法找到任何此类证据（函数（$）{... $ .fn.scrollView等， - 我相信它不是。我确实认为DelightedD0D是正确的，说咖啡生成的脚本是必需的，但是因为能够从谁回来/什么 - 我仍然无能为力？