将咖啡脚本转换为Javascript的未知代码

首先——我是javascript新手，所以请不要高估我的能力——不过，在学习的过程中，我用了几个例子让自己陷入了困境到目前为止，这种方法一直运作良好。” 例外情况是，试图实现一些代码来改进滚动

我发现了Chistopher Pappas的密码： （其中，他似乎知道自己在说什么）但这是用咖啡剧本写的——所以我想我会尝试转置它：失败。然后我想我应该看看它编译成了什么：[以及我问题的症结所在]并且已经被绑定和构造函数代码弄糊涂了[我会原谅/忽略一个似乎是围绕代码的库-可能需要.js？？？，没有它就无法工作，我相信…真的不知道它是什么，或者它在做什么]

不管怎样，有人能告诉我如何删除我认为从“ScrollView”构造函数中引用的多余的“coffee legacy”代码[\uuuu bind/\uuuuuu hasProp等]，以及它首先真正实现了什么[我的信心已经丧失，特别是在使用\uu extends函数时

实际的代码是有效的，但正如您所看到的——与Chris的示例相比——似乎不需要这些代码中的大部分

    (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]);

注意：为了避免混淆，我删除了“模板”并注入了HTML本身，但正如您所看到的，它基本上是相同的

构造函数和超类[继承？]真的让我困惑，更不用说顶级函数了”（函数e（t，n，r）{函数s（o，u）…等等），但我最好还是继续讨论这个话题。谢谢

更新：首先：我相信第一个功能以及文件的布局方式是由于“浏览化” i、 e：（函数e（t，n，r）{函数s（o，u）{if（！n[o]）{if（！。。。 据我所知，“Browserify”基本上是将所有依赖项/包等捆绑到一个文件中——所以理论上，我不应该删除“Browserify”吗代码，只要我在和ScrollView操作之前引用依赖脚本，并且它仍然可以运行——从上面的“Browserify”代码来看，它似乎是唯一的模块？（我知道整个代码取决于jQuery/TweenMax，可能还有其他模块？）

---

第二：我不是100%相信这是一个预期的jQuery插件（承认，我只是在这方面读了一会儿），但我找不到任何证据，例如（函数（$）{…$.fn.scrollView等，-我相信不是。我确实相信Delighted0d说需要“咖啡”生成的脚本是正确的，但是为了能够从谁/什么人那里调用-我仍然不知道？

你尝试过类似的转换器吗？是的，我尝试过，谢谢Delighted0d-它“几乎”完全相同-但我将编辑我对sh的回答正如您将看到的，“超类”等。转换后的代码都不是“多余的遗留代码”。这是一个插件，每个部分都有自己的作用。你的问题似乎很广泛，不太可能在这里得到有用的回答，因此该网站并不适合这种类型的讨论。我建议搜索你不懂的关键词。例如，你也应该研究[编写jQuery插件]（）哇！我想你上面的帖子基本上就是答案——我不知道用插件扩展jQuery[我想这就是现在发生的事情]-可怕的是，这似乎远远超出了我的理解范围。我最初试图剖析Chris的代码，看看他是如何改进滚动的，而不是创建插件，因此我希望能够改进我自己的一些滚动问题。非常高兴地感谢大家，尽管这不是我想要的兔子洞；）

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);
  }