js はシンプルな MVVM フレームワークのサンプル共有を実装します

この記事では主に、js で実装された単純な MVVM フレームワークの例を紹介します。これは非常に参考になるので、皆さんのお役に立てれば幸いです。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

私は庭の記事を黙って読んで卑猥に好きでした。今日は私がjsを使用して実装した簡単なmvvmフレームワークを共有したいと思います。

最初は自動バインディングイベントだけをやっていたのですが、その後、vue、ノックアウト、argularの実装方法を学び、自分のWPF作成の経験と合わせて、今日は属性バインディングを少し整理していくつか改善しました。関数を作成し、Code Cloud にコードを送信します: https://gitee.com/zlj_fy/Simple-MVVM

まず、使い方を簡単に紹介します:

<form class="form-horizontal" role="form" data-context="TestController">
  <p class="form-group">
   <legend>Form title</legend>
  </p>
  <p class="form-group">
   <p class="col-sm-6 col-sm-offset-2">
    <input type="text" class="form-control" bind-val="age,format=format" style="margin:5px 0" />
    <input type="text" class="form-control" bind-val="desc" style="margin:5px 0" />
    <input type="range" min="10" max="300" bind-val="age" step="10" class="form-control" style="margin:5px 0" />
    <input type="button" class="btn btn-primary" value="更新" style="margin:5px 0" on-click="update" />
   </p>
  </p>
 </form>
 <script>
  var TestController = {
   data: {
    name: 'xiaoming',
    age: 3,
    desc: function() {
　　　　　　　　　　　　return this.name + ' likes looking little movie. he should take care of his body' 
    }
   },
   format: function(val) {
    return val + '岁'
   },
   update: function() {
    this.name = 'this is a test'
    this.age = 18
   }
  }
  $('body').controller()
 </script>

まず、json オブジェクトまたは関数であるコントローラーを定義します。最上位要素に data-context="[コントローラ名]" を定義して、コントローラをノードの下のすべての要素にバインドします。要素の子孫にネストされたコントローラーがある場合、それが配置されている要素の下にある子要素のスコープは、子コントローラーを指します。

1. モニター属性と複合属性

内部の属性が関数として定義されている場合、それらは複合属性とみなされます (desc など)。再割り当てすると、エラーが表示されます。

HTML 要素にバインドされた形式: "{属性名, fomat=[コントローラー メソッド]}"、属性名は (a.b) などのネストされた属性をサポートします。属性名は式をサポートしません。これはあまり役に立ちません。必要に応じて、代わりに複雑な属性を使用できます。現在の欠点は、ビジネスが複雑な場合、属性名の右側に多数の複雑な属性が生成される可能性があることです。 HTML 上に表示する属性の変換方法である format だけがあります。

2. 命令

バインディング命令の構文は、bind-{instruction} の形式になっています。実際には、最初の 4 つだけが実装されていることがわかります。 jqeury メソッドをカプセル化します。テンプレートは jquery-tmpl プラグインを使用して実装されます。さらに多くの命令が必要な場合は、初期ロード メソッド (現在のオブザーバー パラメーターを受け取る) と更新を実装するだけで済みます。メソッド (パラメーターの説明: 対応する jquery 要素、最新の値、現在のコントローラー インスタンス); 既存の命令を拡張する場合、デフォルトで元の命令が上書きされます。以下のように:

$.controller.addDirective("val", {
  init: function (observer) {
   if (observer.$ele.is('input,select')) {
    //监听onchange事件
    observer.$ele.on('input propertychange', function () {
     var newVal = $(this).val()
     observer.writeValue(newVal)
    })
   }
  },
  update: function ($ele, newVal, controller) {
   $ele.val && $ele.val(newVal)
  }
 })

3. Event

バインディング イベント構文: on-{event}="{controller Method}, type=on/one"、コントローラー メソッドの右側はオプションのパラメーターであり、現在はバインディングのみです。 type は /one で、デフォルトは on です。コントローラー メソッドは 2 つのパラメーターを受け取ります。1 つはイベントに対応する要素に設定できる初期パラメーターで、もう 1 つはイベント イベント パラメーターです。メソッド

はこれを直接使用し、対応するデータ ノードの下の属性に直接アクセスできます。

5. フック

は、すべての属性を監視した後、dom 要素をコンパイルした後に初期化できます。

コントローラーはデフォルトで拡張継承メソッドを実装します。このメソッドは別のコントローラーを継承でき、init メソッドで使用する必要があります。現在、プロトタイプ継承を使用して自分で実装することもできます。

<button type="button" class="btn btn-primary" data-page="1" on-click="refesh">查询</button>

6. 拡張

プロジェクトを実行するとき、誰もが必ず共通のコンポーネントのセットを持っていると思います。そのため、デフォルトでは、対応するコンポーネントがすべてのコントローラーのサンプルの下にマウントされており、対応させることができます。メソッドは直接呼び出されます: this.http.post();

ただし、スコープの問題が常に発生するわけではないように、コールバック メソッドのスコープを可能な限りコントローラーに向けるようにするという提案があります。開発中に発生します。

init: function () {
    this.extend(PageController)
   },
   created: function () {
    //TODO
   },

7. 原則とコード分析 (続きます…)

js コード全体は 300 行強なので、実装は比較的単純です。考慮されていない点も多くあります。実装したい機能もいくつかありますが、まだ実装されていないのは、現在、配列の変更検出と関連する DOM のローカル更新をサポートしていないことです。

関連する推奨事項:

MVC、MVP、MVVM とはそれぞれ何かを紹介します

MVVM アーキテクチャとデータ バインディングとは何ですか?

Vue.jsとMVVMに関するメモ

以上がjs はシンプルな MVVM フレームワークのサンプル共有を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。