スケーラブルなjavascriptアーキテクチャでDOMのやり取りを行う場所

もっとメンテナンス可能なjavascriptアーキテクチャを持つ方法については、ちょっと混乱しています。私は軌道に乗っていないかもしれませんが、私のコードのほぼ50％がDOMに関連しているので、ベースライブラリ（jQuery）を使用しています。スケーラブルなjavascriptアーキテクチャでDOMのやり取りを行う場所

[1] Nicholas Zakasのスケーラブルなアプリケーションアーキテクチャ設計：http://developer.yahoo.com/yui/theater/video.php?v=zakas-architectureと[2] Addy Osmani Patterns for Large-Scale JavaScript Application Architecture http://addyosmani.com/largescalejavascript/を確認しました。

私は1ページのアプリケーションスタイルを持ち、多くのコンテンツがajax経由で取得され、DOM要素が動的に追加されています。私の主な質問は、jQuery（または他の基本ライブラリ）を使用してDOMを操作する場合、コードを小さな再利用可能なブロックに分割する方法です。

たとえば、タスクリストモジュールを選択しましょう。私は、モジュールは次のようになりうることを理解する：

var TaskList = function() { 
    addTask = function() { 
    ... 
    }; 

    removeTask = function() { 
    ... 
    }; 

    return { 
    addTask: addTask, 
    removeTask: removeTask 
    } 
}();

など、保存、ロード、またはタスクを削除し、DOM要素に新しいタスクを追加するAJAX呼び出し、DOM要素のイベント登録が書き込まれます

私はモジュールとしてjQueryを依存することにコミットしても問題はありませんが、より良い方法があれば上記の2つのリソースからそれを逃したと思います。

私はスパゲッティの疲れているので、私はちょうど成長JavaScriptを維持するための、よりエレガントな方法を持っていると思います

;）お時間を

ありがとう！

出典

2011-12-19 Dominic St-Pierre

あなたは1ページアプリケーションを開発しようとしているので、現在のステップで表示される多くのビジュアルモジュールを持つことになり、それらは他のアプリケーションに置き換えられます。

MVCパターン（Model-Controller-View）に従うことができます。各視覚要素は、DOM操作用の独自のコードと別のクラスに格納されたビジネスロジックを持つ別個のエンティティです。

一つの方法は、次のようになります。

<html> 
    <head> 
    .... 
    </head> 
    <body> 
    <div id="content"> 
    <!--The main container view that can handle the replacement of smaller views --> 
     <div id="toolbar"_container"> 
     <!-- container for menu bar or tool bar that can also has its contained 
      sub-views replaced --> 
     </div> 
     <div id="main_content_container"> 
     .... 
     </div> 
     <div id="properties_panel"> 
     ..... 
     </div> 
    </div>  
    </body> 
</html>

本体容器もできるという利点を有している（、誰もがそれ自身のDOM操作コードを持つ別のビューコントローラを収容して、すべての小さなコンテナを保持することができますオンデマンドで動的にロードされるため、初期化のロード時間が短縮されます）。

すべてのビューが

など、「アクション」を実行し、データベース、ソケット、ファイルとI/Oの世話をする第3のモジュール（別売）とどれを通信するカップルのモジュールを持つことができます

それは助けてくれることを願っています！

出典

2011-12-19 20:19:50

。 – Dessus

これは、私がHTML構造に関して既にどのように設定されているかです。アプリはすでに制作中です。私は、あなたが1つのコントローラと1つのビューを言うことができ、ビュー上にDOMコードを持つことができれば、2つの "javascriptクラス"を作成すると言っていることから、javascript atmにもっと興味がありますか？ –

Backbone.jsを使用するか、CQRS（および関連パターン）を探索して、カスタム、複雑、デカップリングされたソリューションを見つけることができます。それはすべてあなたのアプリの複雑さ（そして潜在的な将来の成長）に依存します。

some of this postsをチェックアウトすることもできます。具体的な例では、あなたの質問を対象に良いものがいくつかあります;）

出典

2011-12-20 15:16:03 sbgoran

これはしかしDOM以上に適用されます

独立したビジネスロジックを維持し、表示ロジック。ブラウザとNodeの両方にある多くのAPIは、イベントの発生やリスン、または他のタイプの非同期作業が完了するのを待って設計されています。経験則として、多くの匿名コールバック関数を記述している場合、コードはテストするのが簡単ではないかもしれません。この問題を解決するための非同期コード

最も一般的な方法で

// hard to test 
$('button').on('click',() => { 
    $.getJSON('/path/to/data') 
     .then(data => { 
      $('#my-list').html('results: ' + data.join(', ')); 
     }); 
}); 

// testable; we can directly run fetchThings to see if it 
// makes an AJAX request without having to trigger DOM 
// events, and we can run showThings directly to see that it 
// displays data in the DOM without doing an AJAX request 
$('button').on('click',() => fetchThings(showThings)); 

function fetchThings(callback) { 
    $.getJSON('/path/to/data').then(callback); 
} 

function showThings(data) { 
    $('#my-list').html('results: ' + data.join(', ')); 
}

使用コールバックや約束は、非同期的に実行関数のパラメータとしてコールバック関数を渡すことです。単体テストでは、渡したコールバックでアサーションを実行できます。このようMVVMも、それはUIの相互作用に明確な方法であなたのコードを整理でき有効knockoutjsとしてライブラリを採用

// hard to test; we don't know how long the AJAX request will run function fetchData() { $.ajax({ url: '/path/to/data' }); } // testable; we can pass a callback and run assertions inside it function fetchDataWithCallback(callback) { $.ajax({ url: '/path/to/data', success: callback, }); } // also testable; we can run assertions when the returned Promise resolves function fetchDataWithPromise() { return $.ajax({ url: '/path/to/data' }); }

Here is the details

出典

2017-08-09 14:16:53 ahmet

スケーラブルなjavascriptアーキテクチャでDOMのやり取りを行う場所

答えて

関連する問題