JavaScript クライアント アプリケーションのプログラミングに関するいくつかの提案_基本

最近、ますます多くの Web アプリケーションがより複雑になり、焦点がサーバーからクライアントに徐々に移行していることに気づいたかもしれません。 これは通常の傾向ですか?わからない。賛成派と反対派の間の議論は、復活派とクリスマスのどちらが優れているかを議論するようなもので、どちらの派が完全に正しいかを言うのは難しい。したがって、この記事ではどちらが正しいかについては議論しませんが、よく知られているオブジェクト指向プログラミングを使用すると、クライアント プログラミングにおけるいくつかの問題をうまく解決できる可能性があることを説明してみます。

あまり標準化されていないコードの例

アプリケーションの応答性とユーザー エクスペリエンスを考慮するために、ますます複雑なコードを作成し、理解や保守が困難になります。 構造やルールをまったく使用せずに構築されたクライアント側の 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 を使用せず、モデルとビデオ、またはその 2 つの間の何かを組み合わせたものと同等であり、区別するのが困難です。これが、ほとんどの 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* フレームワークを使用すればコーディングの問題をすべて解決できると考えるのは間違いです。リファクタリング プロセス中、フレームワークの主要コンポーネントを使用しない 2 番目のステップを経た後、コードは大幅に改善されることに注意してください。

MV* フレームワークは優れていますが、焦点はアプリケーションを開発する「方法」にあり、「何を」を決定するかはアプリケーション開発者に任されていることに注意してください。特にプロジェクトのドメインが複雑な場合、各フレームワークを補完するものはドメイン駆動設計アプローチになります。これは、「何を」、つまり要件を実際の製品に変換するプロセスという側面に重点を置きます。しかし、それは私たちが議論する別のトピックです。