Question

我有一个open功能，一旦触发，只需在专用面板中播放视频。

此功能可以通过两种方式触发 - 一种是单击，另一种是页面加载（窗口加载），其中url包含有效的锚标记。

它们都工作正常，但窗口加载处理程序的一些代码是重复的，我不太确定如何保持这种干燥。

请看一下，并指出我如何更好地写这个。我在open函数中评论了这个函数。

$.videoWatch.prototype = {
  init: function() {
    this.$openLinks = this.$element.find(".open");
    this.$closeLinks = this.$element.find(".close");
    this.open();
    this.close();
  },
  _getContent: function(element) {
    var $parent = element.parent(),
        id = element.attr('href').substring(1),
        title = $parent.data('title'),
        desc = $parent.data('desc');

        return {
          title: title,
          desc: desc,
          id: id
        }
  },
  open: function() {

    var self = this;

    //open theatre with window load with #hash id
    window.onload = function() {
        var hash = location.hash;

        var $a = $('a[href="' + hash + '"]'),
            content = self._getContent($a),
            $li = $a.parents("li"),
            $theatreVideo = $(".playing"),
            $theatreTitle = $(".theatre-title"),
            $theatreText = $(".theatre-text");

        $(".theatre").attr('id', content.id);
        $theatreTitle.text(content.title);
        $theatreText.text(content.desc);

        if ($theatreText.text().length >= 90) {
          $(".theatre-text").css({
            'overflow': 'hidden',
            'max-height': '90px',
          });
          $moreButton.insertAfter($theatreText);
        }

        $a.parent().addClass("active");
        $(".theatre").insertAfter($li);
        $(".theatre").slideDown('fast', scrollToTheatre);
        oldIndex = $li.index();

    }

    //open theatre with click event
    self.$openLinks.on("click", function(e) {
      // e.preventDefault();
      if (curID == $(this).parent().attr("id")) {
        $("figure").removeClass("active");
        $("button.more").remove();
        $(".theatre").slideUp('fast');
        $('.playing').attr("src", "");
        removeHash();
        oldIndex = -1;
        curID = "";
        return false
      } else {
        curID = $(this).parent().attr("id");
      }

      var $a = $(this),
          content = self._getContent($a),
          $li = $a.parents("li"),
          $theatreVideo = $(".playing"),
          $theatreTitle = $(".theatre-title"),
          $theatreText = $(".theatre-text");


      $(".theatre").attr('id', content.id);
      $theatreTitle.text(content.title);
      $theatreText.text(content.desc);

      if ($theatreText.text().length >= 90) {
          $(".theatre-text").css({
            'overflow': 'hidden',
            'max-height': '90px',
          });
          $moreButton.insertAfter($theatreText);
      }

      if (!($li.index() == oldIndex)) {
        $("figure").removeClass("active");
        $(".theatre").hide(function(){
          $a.parent().addClass("active");
          $(".theatre").insertAfter($li);
          $(".theatre").slideDown('fast', scrollToTheatre);
          oldIndex = $li.index();
        });
      } else {
        $(".theatre").insertAfter($li); 
        scrollToTheatre();
        $("figure").removeClass("active");
        $a.parent().addClass("active");
      } 
    });
  },

  ...

Answer 1

首先有些变量不依赖于输入，你可以将它们拉到课堂上（我只会举例说明一个例子）：

init: function() {
  this.$theatreVideo = $(".playing");

所有依赖于输入的变量（如$ li）都可以移动到函数中：

  var $a = $(this),
      $dependsOnA = self.dependsOnA($a);
  self.actionDependsOnA($dependsOnA); // see below



function dependsOnA($a) {
    return {
      a: $a,
      li: $a.parents("li"),
      content: self._getContent($a)
    }
}

“重复”的代码也可以移动到一个函数：

function actionDependsOnA($dependsOnA)
    $(".theatre").attr('id', $dependsOnA.content.id);
    $theatreTitle.text($dependsOnA.content.title);
    $theatreText.text($dependsOnA.content.desc);
}

Answer 2

简化和重构的open方法：

open: function() {

    var self = this;
    var serviceObj = {
        theatreVideo : $(".playing"),
        theatre: $(".theatre"),
        theatreTitle : $(".theatre-title"),
        theatreText : $(".theatre-text"),
        setTheatreContent: function(content){
            this.theatre.attr('id', content.id);
            this.theatreTitle.text(content.title);
            this.theatreText.text(content.desc);

            if (this.theatreText.text().length >= 90) {
               this.theatreText.css({
                   'overflow': 'hidden',
                   'max-height': '90px',
               });
               $moreButton.insertAfter(this.theatreText);
            }
        },
      activateTeatre: function(a, li){
          a.parent().addClass("active");
          this.theatre.insertAfter(li);
          this.theatre.slideDown('fast', scrollToTheatre);
          oldIndex = li.index();
      }

    };

    //open theatre with window load with #hash id
    window.onload = function() {
        var hash = location.hash;
        var $a = $('a[href="' + hash + '"]'),
            content = self._getContent($a),
            $li = $a.parents("li");

       serviceObj.setTheatreContent(content);
       serviceObj.activateTeatre($a, $li);

    }

    //open theatre with click event
    self.$openLinks.on("click", function(e) {
      // e.preventDefault();
      if (curID == $(this).parent().attr("id")) {
        $("figure").removeClass("active");
        $("button.more").remove();
        $(".theatre").slideUp('fast');
        $('.playing').attr("src", "");
        removeHash();
        oldIndex = -1;
        curID = "";
        return false
      } else {
        curID = $(this).parent().attr("id");
      }

      var $a = $(this),
          content = self._getContent($a),
          $li = $a.parents("li");

      serviceObj.setTheatreContent(content);

      if (!($li.index() == oldIndex)) {
        $("figure").removeClass("active");
        $(".theatre").hide(function(){
          serviceObj.activateTeatre($a, $li);
        });
      } else {
        $(".theatre").insertAfter($li); 
        scrollToTheatre();
        $("figure").removeClass("active");
        $a.parent().addClass("active");
      } 
    });
  },

在javascript原型构造函数

2 个答案: