JavaScriptでデータモデルを操作する

こんにちは、Habralumi。



私の経験とプロジェクトから少しずつ、javascriptでモデルを操作するための小さなライブラリが生まれました。 Model.jsと呼ばれます 。



このライブラリについて簡単に説明します。この投稿では、複雑なjavascriptアプリケーションを作成するときに、フレームワークなしで特定の方法でこの問題を既に解決している人からのフィードバックを要求します。 ニーズに合った適切なツールを探している人たちの意見も興味深いものです。どのツールが必要で、 Model.jsはどの程度適していますか？

なんで？

フレームワークを使用せずに、データ層での作業を簡素化するため。 ライブラリの現在の最初のバージョン-重さ約12Kのv0.1は、主にデータの検証とイベント管理、特にデータが変更されたときのイベントを支援するように設計されています。

何がそんなに特別なの？

砂糖 目に優しい普通の糖衣糖。



記述されているモデルはどこにも単純ではありません。

var Note = new Model('Note', function () { this.attr('id!', 'number'); this.attr('title', 'string', 'nonempty'); this.attr('text', 'string'); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、通常のオブジェクトとしてエンティティを作成します。

 var note = new Note({ id: 123, title: "Hello World" });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

公開エンティティのプロパティ

属性値のゲッター。 この例では、これは次のとおりです。

 note.data.id note.data.title note.data.text
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

セッター 値の変更に加えて、 変更イベントも発生します。

 note.data.id = note.data.title = note.data.text = note.data = {…}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Getter note.get(attrName[, attrName, …])



、要求された属性の値を持つオブジェクトを返します。



note.get()



、すべてのデータのコピーを返します。



note.data()



はnote.data()



と同じです。



セッターnote.set(attrName, value)



およびnote.set({…})



は、変更イベントを「 note.set({…})



」しません。



note.hasChanged



は、エンティティデータが最後に保存されてから変更されたかどうかを示します。



note.isNew



は、エンティティデータが少なくとも1回保存されるかどうかを示します。



note.isPersisted



は、最近の変更が保存されているかどうかをnote.isPersisted



ます。



note.bind(eventName, handler)



「ハング」させます。 ところで、別のエンティティだけでなく、クラス（ Note.bind



）のすべてのエンティティで、任意のイベントのハンドラーをNote.bind



ます。



note.isValid



は、現在のモデルデータが有効かどうかを示します。



実際、 note.errors



はデータエラーを返します（存在する場合）。



note.revert()



は、保存されていない変更をロールバックし、 revert



イベントを発生させます。



以上です。



保管方法などはどこですか？ -私は答えます：ライブラリの使用は、開発者がアプリケーションのロジックで必要とされるこれらのメソッドを独立して実装する必要があることを意味します。



保存には注意点が1つあります。データが正常に保存された場合、 persist



メソッドをnote._persist()



するprivateメソッドnote._persist()



を使用してエンティティに通知する必要があります。



例の説明は良いです。 アプリケーションがブラウザ環境で実行され、 note.save()



メソッドがajaxを使用してデータを保存するとします。

 Note.prototype.save = function () { var note = this; return $.ajax({ type: 'PUT', url: '/notes/'+note.data.id, data: note.data(), dataType: 'json' }).done(function (json) { note._persist(); }); } note.bind('persist', function () { $('h1', 'div#note'+this.data.id).html(this.data.title); }); note.data = { id: 123, title: "abc", text: "" } if (note.hasChanged && note.isValid) { //  Django-style note.save(); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

データ検証

モデルを作成する場合、その各属性は必ず記述されます。

 this.attr('title', 'string', 'nonempty')
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

最初に属性名を指定し、次にそのバリデーターを指定します。 バリデーターが来たら、宣言された順序で属性値をチェックします。



一般に、バリデータは値を取得し、これらの値が無効な場合にエラーを返す通常の関数です。

 function validateMinLength(value, minLength) { if (value.length < minLength) return 'tooshort'; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

バリデーターを数回使用する必要がある場合は、名前で接続するためにバリデーターを登録するのが合理的です。

 Model.registerValidator('array', function (value) { if (Object.prototype.toString.call(v) === '[object Array]') return 'wrongtype'; }); Model.registerValidator('minLength', validateMinLength);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Model.jsには、 number



、 string



、 boolean



、 nonnull



、 nonnull



およびin



いくつかの基本的な（既に登録されている）バリデーターin



ます。 これらは、この例のように、名前で属性に接続できます。



属性を記述するときにパラメーターをバリデーターに渡すには、次の例のように配列の形式で記述する必要があります。

 this.attr('title', 'string', 'nonempty', [ 'minLength', 6 ]);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

バリデーターは、登録せずに通常の祖父の方法で接続できます。

 this.attr('title', 'string', 'nonempty', [ 'minLength', 6 ], function (title) { if (title[0] !== title[0].toUpperCase()) return 'downcase'; });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これはすべて、 note.isValid



がtrue



またはfalse



と言って、 note.errors



がエラーがあるオブジェクトを返すことができるようにするために必要です。

 note.data = { id: 'abc', title: '', text: 3 }; //    note.isValid // false note.errors // { id: 'wrongtype', title: 'empty', text: 'wrongtype' }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

イベント

initialize



、 change



、 persist



、 revert



4つのイベントがあります。 上記のように、特定のエンティティ（ note.bind



）にハンドラーをハングアップさせるか、クラス（ Note.bind



）にハンドラーをハングアップさせて、ハンドラーがすべてのエンティティに共通になるようにすることができます。



エンティティを作成するときに、 initialize



1回「起動」されます： var note = new Note({…})



。 したがって、 initialize



ハンドラーを切断するのは、クラスでのみ意味があります。



属性値が変更されるたびにchange



します。 ただし、変更をプルしないセッターがいます（これについては上記で説明しました）。



perist



-エンティティが、変更が正常に保存されたという信号を受信したとき。



note.revert()



アプリケーションロジックが、まだ保存されていない変更をロールバックするように命令したnote.revert()



メソッドを使用）。

 var ALLOWED_LANGUAGES = ['en', 'ua', 'ru']; var Note = new Model('Note', function () { this.attr('id!', 'number'); this.attr('title', 'string', 'nonempty'); this.attr('lang', 'string', 'nonempty', [ 'in', ALLOWED_LANGUAGES]); this.attr('text', 'string'); }); Note.bind('initialize', function () { if (!this.data.lang) { this.set('lang', 'en'); // change   —   ! } }); note.bind('change', function (changes) { if (changes.title) $('h1', 'div#note'+this.data.id).html(changes.title); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

結論として

Model.jsは純粋な最新技術であり、中間ですが、自信を持って動作する結果です。 ライブラリに興味がある場合、使用したい場合は、質問にお答えします。 動作方法の詳細については、 githubのドキュメントとテストをご覧ください。



それまでの間、赤ちゃんが良い旅をしたいと願っています。「大人」の図書館になるためには、まだ多くの仕事をしなければならないからです。