簡単にMVCモードを使ってJavaScriptプログラムの開発を行います.

フロント開発がますます重視されるにつれて、クライアントコードの比重が日増しに増えている今日、Javascript開発にMVCモードをどうやって適用するかについて、この問題はずっと取り上げられているようです.
MVCモードの基本理念は、一つのアプリをmodelにパッケージすることによって、viewとcontrolの3つの部分が結合を低減し、開発を簡略化する目的である.このように言ってもむなしいです.実際に例を見てもいいです. cat fish bird document.getElementById('selAnimal').onchange = function() { var thisAnimalDoes; switch ( this.value ) { case 'cat': thisAnimalDoes = "cat meows"; break; case 'fish': thisAnimalDoes = "fish swims"; break; case 'bird': thisAnimalDoes = "bird flies"; break; default: thisAnimalDoes = "wuff?"; } document.getElementById('whatDoesThisAnimalDo').innerHTML = thisAnimalDoes; } このプログラムはあなたがプルダウンメニュー「selAnimal」から選択した動物が何をするかをホームページに反映します.以上は設計モードと編成思想を適用して書かれたコードではありません.ここでMVCモードを適用すると、コードはどうなりますか? cat fish bird // whatDoesAnimalDo controller var whatDoesAnimalDo = { // start: function() { this.view.start(); }, // set: function(animalName) { this.model.setAnimal(animalName); }, }; // whatDoesAnimalDo model whatDoesAnimalDo.model = { // animal animalDictionary: { cat: "meows", fish: "swims", bird: "flies" }, // animal， application currentAnimal: null, // setAnimal: function(animalName) { this.currentAnimal = this.animalDictionary[animalName] ? animalName : null; this.onchange(); }, // onchange: function() { whatDoesAnimalDo.view.update(); }, // getAnimalAction: function() { return this.currentAnimal ? this.currentAnimal + " " + this.animalDictionary[this.currentAnimal] : "wuff?"; } }; // whatDoesAnimalDo whatDoesAnimalDo.view = { // onchange start: function() { document.getElementById('selAnimal').onchange = this.onchange; }, // onchange: function() { whatDoesAnimalDo.set(document.getElementById('selAnimal').value); }, // ， model ， update: function() { document.getElementById('whatDoesThisAnimalDo').innerHTML = whatDoesAnimalDo.model.getAnimalAction(); } }; whatDoesAnimalDo.start(); 突然コードが大げさになりました.――私はまだ観察者モードを実現していません.あまりにも良くないです.
 
このようにMVCモードの最大の非難を持ってきました.簡単なシステムにMVCモードを適用すると、構造の複雑さが増し、効率が低下します.
だから、私は少数のjavascriptコントロールを除いて、例えばclick-anywhere-to-edit datagrid/tree control、またはFckEditor/tinyMCEのようなカスタムpluginをサポートするリッチテキストエディタがMVCを適用するにはとても適しています.これは先端開発と後段開発の性質の違いによるものです.ASP.netまたはJSPプロジェクトにMVCモードを適用すると、SDKは多かれ少なかれ自動的にいくつかのviewとcontrollerのコードを生成します.しかし、javascriptは、javascriptは使いやすいSDKさえないです.成熟したframe ebookがたくさんありますが、最終的には開発量を大幅に増加させます.
開発量に比べて、より頭が痛いのは効率の問題です.三層間の相互通信はいずれも追加のオーバーヘッドである.これらの通信によるオーバーヘッドは、サーバ側ではほとんど無視できる.しかし、javascriptのような比較的低い効率の言語については、いくつかの呼び出しやイベントのリスニングが明らかに性能の低下を感じることができます.また、javascripの闭包特性のために、不注意でメモリが漏れてしまいました.これは本物のすり身です.だから、javascriptの开発に対しては、适度な开発は応用よりも学术的な知识が重要かもしれません.もちろん、Dflying ggには「再構築はどこにもない」という言葉があります.自分のコードがますます乱れていると感じたら、維持はますます難しくなります.MVCで再構築するべきかどうかを考えるべきです.
 
もう一つ言いたいのですが、フロントエンド全体の開発はMVCを使わなくてもいいですか?ノノノ～実は先端全体の開発は大きなMVCアーキテクチャです.
Model:HTML/XHTMLの情報View:Style sheet Controller:EMAScriptsなどのスクリプトはウェブ標準の最終目的ではないですか?
だから、フロントエンドコード全体の構造を把握して、Javascriptの開発において、設計モデルを過剰に適用するよりもずっと重要です.
しかし、いくつかの優れたMVCフレームワークもあります.これに対してシアトルのハッカーとデザイナーGordon L.Hemptonは比較してみました.ここで私達は引っ張ってきて見ます.
1.Backbone.js――長所:強いコミュニティ、強い勢い;短所:抽象が弱く、多くの機能が早急に増加する必要があります.2.SproutCore――長所:バインディングに対するサポート、信頼できるコミュニティ、大量の特性;短所:過度の規範化で、不要な特性との結合が困難である.3.Sammy.js――長所:学習しやすく、既存のサービス端末アプリケーションと統合しやすい;短所:簡単すぎて、大きなアプリケーションには適用できません.4.Spine.js――メリット:ライト級で、文書が完璧です.欠点:その核心概念「spine」は非同期のユーザーインターフェースであり、これは理想的な状況を意味している.ユーザーインターフェースは永遠に渋滞が発生しない.5.Cappuccino――長所:大型熟考後の枠組み、良好なコミュニティ、素晴らしい継承モデル;短所:iOS開発者によって作成され、JavaScriptを使ってObjective-Cをシミュレートします.6.Knockout.js――長所:バインディングに対するサポート、完備した文書と教程;短所:結合文法が下手で、統一的なビューコンポーネントの階層関係が欠けています.7.Javascript MVC――長所:信頼できるコミュニティ;短所:文字列ベースの継承モデルが悪く、コントローラとビューの関係が過密でバインディングが足りません.8.GMT(Google Web Toolkit)――利点:全面的な枠組み、良好なコミュニティ、信頼できるJavaベースのコンポーネント継承モデル.短所:時間の試練に耐えられないかもしれません.また、Javaのクライアント上の抽象は少し不器用です.9.Google Closeure――良いコンポーネントベースのUIグループシステムです.短所:UIバインディングサポートが不足しています.10.Ember.js――利点:豊富なテンプレートシステムで、複合ビューとUIバインディングを持っています.短所:比較的新しいので、文書が十分ではありません.11.Anglar.js――利点:テンプレートの範囲とコントローラの設計をよく考え、注入システムに依存し、豊富なUIバインディング文法をサポートする.短所:コードのモジュール性が強くなく、ビューのモジュール化も足りません.12.Batman.js――長所:コードがはっきりしていて、結合、持久化の方法が簡単です.短所:コントローラの一例を使用しました.