プレーンなバニラ JavaScript を書くことほど簡単なことはありません。それが私のアドバイスです。
また、必要に応じて、DOM 操作と ajax 用のマイクロ ライブラリをいくつか追加します。
モデルを観察したいが、データ バインディングが重くなる可能性があり、マジックには代償が伴います。pub-sub ライブラリを使用して、モデル データが変更されたことをモジュールに伝えてみませんか? シンプルで小型で安全です。
私が知っているフレームワークsoma.jsを使った例をいくつか紹介します。非常に軽量で、ルーターがありません (私は通常、director.js を使用することをお勧めします)。依存性注入、イベントベースのオブザーバー システム、および継承などの基本的な OOP を提供します。高度に結合されたコードを回避することに非常に重点を置いているため、モジュールは保守可能で再利用可能です。バニラ JavaScript は、依存性注入の可能性のあるキーです。
面白いことに、誰かが私がそのフレームワークの .NET のバックグラウンドを持っていると思っていました。
ajax の部分については、jquery を取り除いて ajax のものだけにする (小さいので) か、reqwestのようなものを使用します。
ここでは、何ができるかについて簡単に説明します。
継承
// create "super class"
var Person = function(name) {
this.name = name;
};
Person.prototype.say = function() {
console.log("I'm a Person, my name is:", this.name);
}
// create "child class" that will inherit from its parent
var Man = function(name) {
Person.call(this, name); // call super constructor
}
Man.prototype.say = function() {
// Person.prototype.say.call(this); // call super say method
console.log("I'm a Man, my name is:", this.name);
}
// apply inheritance
soma.inherit(Person, Man.prototype);
// create Person
var person = new Person("Doe");
person.say();
// create Man
var john = new Man("John Doe");
john.say();
やってみて
いくつかのショートカットを使用した別の例を次に示します。
// create "super class"
var Person = function(name) {
this.name = name;
};
Person.prototype.say = function() {
console.log("I'm a Person, my name is:", this.name);
}
// create an "extend" shortcut
Person.extend = function (obj) {
return soma.inherit(Person, obj);
};
// create "child class" and apply inheritance using an "extend" shortcut
var Man = Person.extend({
constructor: function(name) {
Person.call(this, name); // call super constructor
},
say: function() {
// Person.prototype.say.call(this); // call super say method
console.log("I'm a Man, my name is:", this.name);
}
});
// create Person
var person = new Person("Doe");
person.say();
// create Man
var john = new Man("John Doe");
john.say();
やってみて
モジュール
フレームワークを使用すると、バニラ JavaScript を使用できるため、非常に再利用可能です。
モデル、モジュール、またはその他のものは次のようになります (バニラ JavaScript):
(function(clock) {
'use strict';
var TimerModel = function() {
};
TimerModel.prototype.update = function() {
// update something
};
TimerModel.prototype.add = function(callback) {
// add something
};
TimerModel.prototype.remove = function(callback) {
// remove something
};
TimerModel.prototype.dispose = function() {
// destroy model
};
clock.TimerModel = TimerModel;
})(window.clock = window.clock || {});
依存性注入
フレームワークは依存性注入を提供します。これにより、名前付き変数を使用して他のモジュールでインスタンスを取得できます。
注入ルールは次のようになります。
injector.mapClass("myModel", Model);
モデルを別の場所に取得するには、「名前付き変数」を使用するだけで、インジェクターがすべてを処理します (ネストされた依存関係を解決するのにも非常に適しています)。
var Module = function(myModel) {
// myModel has been injected
}
例を試す
詳しくは
コミュニケーション（pub-sub、オブザーバーパターン）
イベントベースのツール (高度なデカップリングのために DOM ノードと交換可能) を通信に使用できます: ディスパッチャ。注射でも得られます：
var Module = function(myModel, dispatcher) {
// myModel and dispatcher have been injected
}
イベントをディスパッチします。
this.dispatcher.dispatch('do-something');
イベントを聞く:
dispatcher.addEventListener('do-something', function(event) {
// react to an event
});
テンプレート
soma-templateと呼ばれる非常に強力なプラグインをテンプレート エンジン (実際の非破壊的な DOM 操作) として使用できます。
または、選択した他のテンプレート エンジン。
アプリケーションを構築する
これは、スケーラブルで保守可能なアプリケーションを構築するための記事です:
http://flippinawesome.org/2013/07/15/soma-js-your-way-out-of-chaotic-javascript/
それだけではありません。フレームワークは、コードを再利用可能にするメディエーターとコマンドも提供します。サイトをチェックしてください。たくさんのデモがあります。
このすべてがお役に立てば幸いです。
私はモバイルで高速に動作する非常に必要最小限のアプリケーションを作成することに慣れています。そのため、必要なものについて正確な質問をしてください。
ロム