Важные 5 вещей, когда вы кодируете JavaScript.

Важные 5 вещей, когда вы кодируете JavaScript.

В последнее время я много раз кодировал JS. Я думаю, что есть 5 вещей, чтобы написать чистый JS-код. На этот раз я обобщил их.

1. Не забывайте «var» перед ценным.

Это настолько очевидное правило. Если вы определяете ценность без этого, эта ценность является глобальной. К сожалению, вы можете вставить значение в value без «var». Иногда мы забываем этот важный код. В любом случае, пишите код много раз и старайтесь не забывать его писать.

2. Меньше аргументов.

Если в логике много аргументов, этот код грязный. Конечно, иногда нельзя не добавить аргументов к логике, но таких возможностей должно быть меньше. Например….

Class example{
  method A(){
   omission
   return c, d
  }
  method B(){
   omission
   return e, f
  }
  method C(c, d, e, f){
   c~
   d~
   e~
   f~
  }
 method A()
 method B() 
 method C(c, d)
 method C(e)
}

MethodA и B возвращают c, d, e, f. И метод Cuse с этими аргументами. Метод C имеет логику, которая имеет дело с этими аргументами. Но когда вызывается метод C, ему не всегда нужны все аргументы. В этом случае для метода C будет пустой тратой времени иметь 4 аргумента. Чтобы этого избежать, вызовите метод A в методе C и вставьте возврат в value и используйте его. Таким образом, вы можете уменьшить аргументы.

3. Отделите коды для управления DOM от логических кодов.

Это можно применить ко многим языкам. Логика и представление должны быть разделены. Когда возникает ошибка, вы можете легко найти, где она происходит. Итак, существуют ли индексы, подтверждающие, что ваш код может разделить логику и представление? Один из них: есть ли в вашем логическом коде элементы html или нет?

constructor($root) {
    this.$root = $root
    this.displaySlider()
    this.$slideWrap = this.$root.find(".slideWrap")
    this.$leftButton = this.$root.find(".left_button")
    this.$rightButton = this.$root.find(".right_button")
    this.$slides = this.$slideWrap.find(".color_slide")
    this.activeSlideIndex = this.$slideWrap.find('.color_slide.active').index()
    this.firstNum = 0
    this.nextNum = 1
    this.lastNum = 2
    this.hundleEvent()
}
hundleEvent(){
    var self = this
    this.$leftButton.on("click", function(){
      self.changeLeftSlide()
    })
}
selectLeftSlide(){
    if (this.activeSlideIndex > this.firstNum) {
      this.activeSlideIndex -= this.nextNum
      return this.activeSlideIndex
    }
    if (this.activeSlideIndex === this.firstNum) {
      this.activeSlideIndex += this.lastNum
      return this.activeSlideIndex
    }
}

Пример выше. Метод hundleEvent() управляет DOM, selectLeftSlide() отвечает за логику. В то время как selectLeftSlide() не имеет html-элементов, hundleEvent() имеет html-элементы ($leftButton). Логика и представление разделены.

4. Один метод — одна роль

Пример ниже.

class Slider {
  constructor($root) {
    this.$root = $root
    this.slides = ["https://fakeimg.pl/250x100/FF0000/", "https://fakeimg.pl/250x100/00FF00/", "https://fakeimg.pl/250x100/0000FF/"]
    this.displaySlider()
    this.$slideWrap = this.$root.find(".slideWrap")
    this.$leftButton = this.$root.find(".left_button")
    this.$rightButton = this.$root.find(".right_button")
    this.$slides = this.$slideWrap.find(".color_slide")
    this.activeSlideIndex = this.$slideWrap.find('.color_slide.active').index()
    this.firstNum = 0
    this.nextNum = 1
    this.lastNum = 2
    this.hundleEvent()
  }
createTemplate(){
    return $("<div class='slideWrap'></div>")
  }
createButtons(){
    return $("<button class ='left_button'>left</button><button class ='right_button'>right</button>")
  }
  createSlides(){
    var $template = this.createTemplate()
    var $slides = ""
    $.each(this.slides, function(index, slide){
      $slides += `<img src=${slide} class="color_slide">`
    })
    $template.append($slides)
    return $template
  }
  displaySlider() {
    var $template = this.createSlides()
    var $buttons = this.createButtons()
    this.$root.html($template)
    this.$root.find(".slideWrap").after($buttons)
    this.$root.find(".color_slide").eq(0).addClass("active")
  }
  hundleEvent(){
    var self = this
    this.$leftButton.on("click", function(){
      self.changeLeftSlide()
    })
    this.$rightButton.on("click", function(){
      self.changeRightSlide()
    })
  }
  selectRightSlide(){
    if (this.activeSlideIndex < this.lastNum) {
      this.activeSlideIndex += this.nextNum
      return this.activeSlideIndex
    }
    if (this.activeSlideIndex === this.lastNum) {
      this.activeSlideIndex -= this.lastNum
      return this.activeSlideIndex
    }
  }
  selectLeftSlide(){
    if (this.activeSlideIndex > this.firstNum) {
      this.activeSlideIndex -= this.nextNum
      return this.activeSlideIndex
    }
    if (this.activeSlideIndex === this.firstNum) {
      this.activeSlideIndex += this.lastNum
      return this.activeSlideIndex
    }
  }
  changeRightSlide() {
    var i = this.selectRightSlide()
    this.$slides.removeClass("active")
    this.$slides.eq(i).addClass("active")
  }
  changeLeftSlide() {
    var i = this.selectLeftSlide()
    this.$slides.removeClass("active")
    this.$slides.eq(i).addClass("active")
  }
}
new Slider($(".slider"))

У одного метода не должно быть много функций. В этом случае функции разбросаны. Все методы не делают больше, чем изображения имени метода.

5. Когда вы используете класс, один экземпляр равен корню, который является классом HTML.

<html>
  <head>
    <meta charset="utf-8">
    <title>slider</title>
    <link rel="stylesheet" type="text/css" href="slider.css">
  </head>
  <body>
    <div class = "slider">
    </div>
    <script src="jquery-3.3.1.min.js"></script>
    <script src="slider.js"></script>
  </body>
</html>

Этот html относится к JS выше. В данном случае root — это class="slider". Если вы делаете много ползунков, напишите class="slider". Этот «ползунок» является экземпляром.

Это базовые знания, но очень важные. Даже если изучаю более сложные вещи, я стараюсь их не забывать.