JavaScript 클라이언트 애플리케이션 프로그래밍을 위한 몇 가지 제안_기본

최근 점점 더 많은 웹 애플리케이션이 더욱 복잡해지고 초점이 서버에서 클라이언트로 천천히 이동하고 있다는 사실을 눈치채셨을 것입니다. 이게 정상적인 추세인가요? 나는 모른다. 이들과 반대 사이의 논쟁은 부활주의자(Resurrectionist)와 크리스마스(Christmas) 중 어느 쪽이 더 나은지 논쟁하는 것과 같습니다. 어느 쪽이 완전히 옳다고 말하기는 어렵습니다. 따라서 이 글에서는 어느 쪽이 옳은지에 대해 논의하지는 않겠지만, 잘 알려진 객체지향 프로그래밍을 사용하면 클라이언트 프로그래밍의 일부 문제를 성공적으로 해결할 수 있다는 점을 설명하려고 노력할 것입니다.

덜 표준화된 코드의 예

애플리케이션의 반응성과 사용자 경험을 고려하기 위해 우리는 이해하고 유지하기 어려워지는 점점 더 복잡한 코드를 만듭니다. 아무런 구조나 규칙 없이 구축된 클라이언트측 JavaScript 애플리케이션 코드가 다음과 같다고 쉽게 상상할 수 있습니다.

$(function(){
  $('#form').submit(function(e) {
    e.preventDefault();
 
    $.ajax({
      url: '/animals',
      type: 'POST',
      dataType: 'json',
      data: { text: $('#new-animal').find('textarea').val() },
      success: function(data) {
        $('#animals').append('<li>' + data.text + '</li>');
        $('#new-animal').find('textarea').val('');
      }
     });
   });
});

이러한 유형의 코드를 유지 관리하는 것은 어려울 것입니다. 이 짧은 코드 조각은 여러 장소와 관련되어 있기 때문에 많은 이벤트(사이트, 사용자, 네트워크 이벤트)를 제어하고, 사용자 작업 이벤트를 처리하고, 서버에서 반환된 응답을 구문 분석하고 HTML 코드를 생성합니다. 누군가 이렇게 말할 수도 있습니다. "예, 당신 말이 맞습니다. 하지만 이것이 클라이언트 측 단일 페이지 애플리케이션이 아니면 어떻게 될까요? 이것은 기껏해야 jQuery 라이브러리를 과도하게 사용하는 예입니다." - 모두가 그렇듯이 그다지 설득력 있는 요점은 아닙니다. 유지 관리가 쉽고 잘 설계된 코드가 매우 중요하다는 것을 알고 있습니다. 특히, 많은 도구나 프레임워크는 코드를 더 쉽게 테스트, 유지 관리, 재사용 및 확장할 수 있도록 코드를 계속 사용 가능하게 유지하려고 노력합니다.

MVC란 무엇인가요?

말하자면. MVC 기반 JavaScript 프레임워크의 이점을 누릴 수 있지만 이러한 프레임워크의 대부분은 MVC를 사용하지 않으며 모델과 비디오의 조합 또는 구별하기 어려운 둘 사이의 조합과 동일합니다. 이것이 대부분의 Javascript 프레임워크가 MV*를 기반으로 하는 이유입니다.

방법을 변경하면 프로젝트의 클라이언트에게 조직과 아키텍처가 제공될 수 있으므로 장기간에 걸쳐 코드를 더 쉽게 유지 관리할 수 있으며 기존 코드를 리팩토링하는 것도 상대적으로 쉬워집니다. 작동 방식을 알고 다음 질문에 대한 답을 기억하는 것이 중요합니다.

• 내 지원서에는 어떤 유형의 데이터가 있나요? -모델
• 사용자에게 표시되는 내용은 무엇인가요? -보기
• 사용자와 소통하는 프로그램은 누구인가요? -컨트롤러

MVC 프레임워크를 사용하여 코드 리팩터링

MVC를 사용하여 코드를 리팩터링하면 어떤 이점이 있나요?

• DOM 및 Ajax에 대한 의존성을 제거합니다
• 코드 구조가 더 좋고 테스트하기도 더 쉽습니다.
• $(document).ready()에서 중복되는 코드를 제거하고, 링크를 생성하기 위해 Model을 사용하는 부분만 남겨둡니다.

몇 가지 간단한 단계를 사용하여 일반적인 코드 블록을 리팩터링해 보겠습니다
1단계: 뷰 생성 및 Ajax 요청 이동

DOM과 Ajax에 대한 의존성을 제거하기 시작합니다. 프로토타입 빌더와 패턴을 사용하여 'Animals' 객체를 생성하고 'add' 메소드를 추가하는 동시에 'NewAnimalView' 뷰를 생성합니다. 'addAnimal', 'appendAnimal', 'clearInput' 메소드.

코드는 다음과 같습니다.

var Animals = function() {
};
 
Animals.prototype.add = function (options) {
   $.ajax({
     url: '/animals',
     type: 'POST',
     dataType: 'json',
     data: { text: options.text },
     success: options.success
   });
};
 
 var NewAnimalView = function (options) {
  this.animals = options.animals;
  var add = $.proxy(this.addAnimal, this);
  $('# form').submit(add);
 };
 
 NewAnimalView.prototype.addAnimal = function(e) {
   e.preventDefault();
   var self = this;
 
   this.animals.add({
     text: $('#new-animal textarea').val(),
     success: function(data) {
       self.appendAnimal (data.text);
       self.clearInput();     
     }
   });
 };
 
NewAnimalView.prototype.appendAnimal = function(text) {
  $('#animals ul').append('<li>' + data.text + '</li>');
};
NewAnimalView.prototype.clearInput = function() {
  $('#new-animal textarea').val('');
};
 
 $(document).ready(function() {
   var animals = new Animals();
   new NewAnimalView({ animals: animals });
 });

2단계: 이벤트를 사용하여 종속성을 제거합니다.

이 예에서는 MVC 프레임워크를 사용하는 것이 핵심입니다. 우리는 사용자 정의 이벤트를 결합하고 트리거할 수 있는 이벤트 메커니즘을 사용할 것입니다. 따라서 새로운 "AnimalsView" 및 "NewAnimalView"를 생성하고 동물 표시에 대해 서로 다른 책임을 부여합니다. 이벤트를 사용하여 책임을 분리하는 것은 매우 간단합니다. 다음과 같이 메서드와 이벤트 간에 책임을 전달하는 경우:

var events = _.clone(Backbone.Events);
var Animals = function() {
};
 
Animals.prototype.add = function(text) {
   $.ajax({
     url: '/animals',
     type: 'POST',
     dataType: 'json',
     data: { text: text },
     success: function(data) {
      events.trigger('animal:add', data.text);
     }
   });
};
 
var NewAnimalView = function(options) {
  this.animals = options.animals;
  events.on('animal:add', this.clearAnimal, this);
  var add = $.proxy(this.addAnimal, this);
  $('# form').submit(add);
 };
 
NewAnimalView.prototype.addAnimal = function(e) {
   e.preventDefault();
   this.animals.add($('#new-animal textarea').val());
 };
 
NewAnimalView.prototype.clearInput = function() {
  $('#new-animal textarea').val('');
};
 
var AnimalsView = function() {
  events.on('animal:add', this.appendAnimal, this);
};
 
AnimalsView.prototype.appendAnimal = function(text) {
  $('#animals ul').append('<li>' + data.text + '</li>');
};
 
$(document).ready(function() {
   var animals = new Animals();
   new NewAnimalView({ animals: animals });
   new AnimalsView();
});

3단계: 데이터 구조를 핵심 프레임워크에 전달

마지막으로 가장 중요한 단계인 모델, 뷰, 컬렉션을 사용합니다.

var Animal = Backbone.Model.extend({
  url: '/animals'
});
 
var Animals = Backbone.Collection.extend({
  model: Animal
});
 
var AnimalsView = Backbone.View.extend({
  initialize: function() {
    this.collection.on('add', this.appendAnimal, this);
  },
 
  appendAnimal: function(animal) {
    this.$('ul').append('<li>' + animal.escape('text') + '</li>');
  }
});
 
 
var NewAnimalView = Backbone.View.extend({
  events: {
    'submit form': 'addAnimal'
  },
 
  initialize: function() {
    this.collection.on('add', this.clearInput, this);
  },
 
  addAnimal: function(e) {
    e.preventDefault();
    this.collection.create({ text: this.$('textarea').val() });
  },
 
  clearInput: function() {
    this.$('textarea').val('');
  }
});
 
$(document).ready(function() {
  var animals = new Animals();
  new NewAnimalView({ el: $('#new-animal'), collection: animals });
  new AnimalsView({ el: $('#animals'), collection: animals });
});

요약

우리는 무엇을 달성했나요? 우리는 높은 수준의 추상화 작업을 수행합니다. 코드 유지 관리, 리팩토링, 확장이 더 쉬워집니다. 코드 결과를 크게 최적화했습니다. 정말 흥미롭지 않나요? 기이. 그러나 최고의 프레임워크를 사용하더라도 개발된 코드는 여전히 부서지기 쉽고 유지 관리가 어렵습니다. 그러므로 더 나은 MV* 프레임워크를 사용하면 모든 코딩 문제를 해결할 수 있다고 생각하는 것은 실수입니다. 리팩토링 과정에서 프레임워크의 주요 구성요소를 사용하지 않는 두 번째 단계를 거치면 코드가 훨씬 더 좋아질 것이라는 점을 기억하세요.

MV* 프레임워크는 훌륭하지만 모든 초점은 애플리케이션을 개발하는 '방법'에 맞춰져 있으며 '무엇'을 결정하는 것은 애플리케이션 개발자의 몫입니다. 특히 프로젝트 도메인이 복잡한 경우 각 프레임워크를 보완하는 것은 도메인 중심 설계 접근 방식이 될 것이며, 이는 요구 사항을 실제 제품으로 변환하는 프로세스인 "무엇"이라는 측면에 더 중점을 둘 것입니다. 하지만 그것은 우리가 논의할 또 다른 주제입니다.