使匿名自动执行功能可重用

Question

我有以下功能：

(function(e, t) {
  var n = function() {
      //code, code, code
};
      //code, code, code
e.fn.unslider = function(t) {
      //code, code, code
};
})(jQuery, false)

要调用我正在使用的此功能：

var unslider = $('.slider__1').unslider();

$('.slider__1 .arrows').click(function() {
  var fn = this.className.split(' ')[1];
  unslider.data('unslider')[fn]();
});

我需要让这个函数重新启动窗口大小调整。我知道，这种函数不能被调用，只执行一次。 要重用这个函数，我应该在相同的范围内声明它并从事件处理程序中调用它，如下所示：

$(function() {
    function myFunction(evt) {
        console.log(evt);
    }

    $(window).on('load resize', myFunction);
});

但它不起作用。

我甚至尝试使用以下结构：

(function() {
  var fn = function(jQuery, yourbool) {
    // code, code, code
  };

  fn(jQuery, false);

  $(window).on('load resize', function () {
    fn(jQuery, false);
  });

});

也不起作用。

我做错了什么？你能告诉我如何重新启动这个功能以重新启动窗口大小调整吗？

(function(e, t) {
  var n = function() {
    function r(t, r) {
      if (t == "dot") {
        r = '<ol class="dots">';
        e.each(n.li, function(e) {
          r += '<li class="' + (e == n.i ? t + " active" : t) + '">' + ++e + "</li>"
        });
        r += "</ol>"
      } else {
        r = '<div class="';
        r = r + t + 's">' + r + t + ' prev">' + n.o.prev + "</div>" + r + t + ' next">' + n.o.next + "</div></div>"
      }
      n.el.addClass("has-" + t + "s").append(r).find("." + t).click(function() {
        var t = e(this);
        t.hasClass("dot") ? n.stop().to(t.index()) : t.hasClass("prev") ? n.prev() : n.next()
      })
    }
    var n = this;
    n.o = {
      speed: 500,
      delay: 3e3,
      init: 0,
      pause: !t,
      loop: !t,
      keys: t,
      dots: t,
      arrows: t,
      prev: "&larr;",
      next: "&rarr;",
      fluid: t,
      starting: t,
      complete: t,
      items: ">ul",
      item: ">li",
      easing: "swing",
      autoplay: true
    };
    n.init = function(t, i) {
      n.o = e.extend(n.o, i);
      n.el = t;
      n.ul = t.find(n.o.items);
      n.max = [t.outerWidth() | 0, t.outerHeight() | 0];
      n.li = n.ul.find(n.o.item).each(function(t) {
        var r = e(this),
          i = r.outerWidth(),
          s = r.outerHeight();
        if (i > n.max[0]) n.max[0] = i;
        if (s > n.max[1]) n.max[1] = s
      });
      var i = n.o,
        s = n.ul,
        o = n.li,
        u = o.length;
      n.i = 0;
      t.css({
        width: n.max[0],
        height: o.first().outerHeight(),
        overflow: "hidden"
      });
      s.css({
        position: "relative",
        left: 0,
        width: u * 100 + "%"
      });
      o.css({
        "float": "left",
        width: n.max[0] + "px"
      });
      i.autoplay && setTimeout(function() {
        if (i.delay | 0) {
          n.play();
          if (i.pause) {
            t.on("mouseover mouseout", function(e) {
              n.stop();
              e.type == "mouseout" && n.play()
            })
          }
        }
      }, i.init | 0);
      if (i.keys) {
        e(document).keydown(function(e) {
          var t = e.which;
          if (t == 37) n.prev();
          else if (t == 39) n.next();
          else if (t == 27) n.stop()
        })
      }
      i.dots && r("dot");
      i.arrows && r("arrow");
      if (i.fluid) {
        e(window).resize(function() {
          n.r && clearTimeout(n.r);
          n.r = setTimeout(function() {
            var e = {
                height: o.eq(n.i).outerHeight()
              },
              r = t.outerWidth();
            s.css(e);
            e["width"] = Math.min(Math.round(r / t.parent().width() * 100), 100) + "%";
            t.css(e)
          }, 50)
        }).resize()
      }
      if (e.event.special["swipe"] || e.Event("swipe")) {
        t.on("swipeleft swiperight swipeLeft swipeRight", function(e) {
          e.type.toLowerCase() == "swipeleft" ? n.next() : n.prev()
        })
      }
      return n
    };
    n.to = function(r, i) {
      if (n.t) {
        n.stop();
        n.play()
      }
      var s = n.o,
        o = n.el,
        u = n.ul,
        a = n.li,
        l = n.i,
        c = a.eq(r);
      e.isFunction(s.starting) && !i && s.starting(o, a.eq(l));
      if ((!c.length || r < 0) && s.loop == t) return;
      if (!c.length) r = 0;
      if (r < 0) r = a.length - 1;
      c = a.eq(r);
      var h = i ? 5 : s.speed | 0,
        p = s.easing,
        d = {
          height: c.outerHeight()
        };
      if (!u.queue("fx").length) {
        o.find(".dot").eq(r).addClass("active").siblings().removeClass("active");
        o.animate(d, h, p) && u.animate(e.extend({
          left: "-" + r + "00%"
        }, d), h, p, function(t) {
          n.i = r;
          e.isFunction(s.complete) && !i && s.complete(o, c)
        })
      }
    };
    n.play = function() {
      n.t = setInterval(function() {
        n.to(n.i + 1)
      }, n.o.delay | 0)
    };
    n.stop = function() {
      n.t = clearInterval(n.t);
      return n
    };
    n.next = function() {
      return n.stop().to(n.i + 1)
    };
    n.prev = function() {
      return n.stop().to(n.i - 1)
    };
  };
  e.fn.unslider = function(t) {
    var r = this.length;
    return this.each(function(i) {
      var s = e(this),
        u = "unslider" + (r > 1 ? "-" + ++i : ""),
        a = (new n).init(s, t);
      s.data(u, a).data("key", u)
    })
  };
  n.version = "1.0.0"
})(jQuery, false)

var unslider_autoplay = {
  autoplay: false
};
var unslider = $('.slider__1').unslider(unslider_autoplay);

$('.slider__1 .arrows').click(function() {
  var fn = this.className.split(' ')[1];
  unslider.data('unslider')[fn]();
});

.step__arrows {
  position: absolute;
  width: 300px;
  padding: 19px 0px;
  margin-top: 128px;
  z-index: 1;
}

.arrows.prev {
  width: 71px;
  height: 67px;
  float: left;
  background-image: url(http://rockerbox.com/assets/img/general/left-arrow.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.arrows.next {
  width: 72px;
  height: 67px;
  float: right;
  background-image: url(http://rockerbox.com/assets/img/general/right-arrow.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.slider__1:hover .arrows {
  background-color: rgba(255, 255, 255, .1);
  -webkit-border-radius: 0px 4px 4px 0px;
  -moz-border-radius: 0px 4px 4px 0px;
  border-radius: 0px 4px 4px 0px;
}

.arrows.prev:hover {
  background-color: rgba(255, 255, 255, .2);
  cursor: pointer;
  -webkit-border-radius: 0px 4px 4px 0px;
  -moz-border-radius: 0px 4px 4px 0px;
  border-radius: 0px 4px 4px 0px;
}

.arrows.next:hover {
  background-color: rgba(255, 255, 255, .2);
  cursor: pointer;
  -webkit-border-radius: 4px 0px 0px 4px;
  -moz-border-radius: 4px 0px 0px 4px;
  border-radius: 4px 0px 0px 4px;
}

.step__info {
  position: absolute;
  bottom: 0;
}

.step__span {
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  -webkit-border-radius: 28px;
  -moz-border-radius: 28px;
  border-radius: 28px;
  display: inline-block;
  background: #ff4e50;
  margin-left: 21px;
  font-weight: normal;
  text-decoration: none;
  text-align: center;
  padding: 4px 14px 3px 14px;
}

.step__h2 {
  color: #fff;
  font-size: 24px;
  padding: 15px 19px 9px 19px;
  margin: 0;
  font-weight: bold;
}

.step__p {
  color: #ccc;
  margin: 0;
  padding: 0px 24px 15px 19px;
  font-size: 14px;
  font-family: Roboto;
  font-weight: 300;
  line-height: 1.3em;
}

.step__span.sub {
  background: #3cb0fd;
}

.slider__1 ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.slider__1 ul li {
  margin: 0;
  padding: 0;
}

.slider__1 {
  float: left;
  position: relative;
  width: 300px;
  height: 400px;
  background-image: url(https://cms-sites-media.s3.amazonaws.com/cms-koch-ford-athabasca-production/media/cms_page_media/20/new-2015-ford-taurus.jpg);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.step__1 {
  width: 300px;
  height: 400px;
  position: relative;
}

.substep__1 {
  float: right;
  width: 300px;
  height: 400px;
  position: relative;
}


.substep__2 {
  float: right;
  width: 300px;
  height: 400px;
  position: relative;
}
  .substep__3 {
  float: right;
  width: 300px;
  height: 400px;
  position: relative;
}

@media screen and (max-width: 400px) {
  .slider__1,
  .step__1,
  .step__2,
  .step__3,
  .substep__1,
  .substep__2,
  .substep__3,
  .step__arrows {
    width: 236px;
  }
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider__1">
  <div class="step__arrows">
    <span class="arrows prev"></span>
    <span class="arrows next"></span>
  </div>
  <ul>
    <li class="step__1">
      <div class="step__info">
        <span class="step__span" href="#">Slide 1</span>
        <h2 class="step__h2">Lorem ipsum dolor sit amet</h2>
        <p class="step__p">Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
      </div>
    </li>
    <li class="substep__1">
      <div class="step__info">
        <span class="step__span sub" href="#">Register</span>
        <h2 class="step__h2">Donec quam felis</h2>
        <p class="step__p"> Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
      </div>
    </li>
    <li class="substep__2">
      <div class="step__info">
        <span class="step__span sub" href="#">Search</span>
        <h2 class="step__h2">Maecenas tempus, tellus</h2>
        <p class="step__p">Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.</p>
      </div>
    </li>
    <li class="substep__3">
      <div class="step__info">
        <span class="step__span sub" href="#">Find</span>
        <h2 class="step__h2">Aenean vulputate</h2>
        <p class="step__p">Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.</p>
      </div>
    </li>
  </ul>
</div>

Pen on CodePen.io

Answer 1

listen resize事件应该作为

运行

$( window ).resize(myFunction);

它正在运作

$(function() {
    function myFunction(evt) {
        console.log(evt);
    }

    $( window ).resize(myFunction);
});