js での MVVM フレームワークの実装 (詳細なチュートリアル)

以下に、js で実装された単純な MVVM フレームワークの例を紹介します。これは参考になるものであり、皆さんの役に立つことを願っています。

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

最初は自動バインディングイベントだけやってましたが、その後vue、Knockout、argularの実装方法を学び、自分のWPF作成経験と合わせて属性バインディングを加えて今日は少し整理して改良しました。いくつかの関数を使用し、コードをコード クラウドに送信しました: 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: &#39;xiaoming&#39;,
    age: 3,
    desc: function() {
　　　　　　　　　　　　return this.name + &#39; likes looking little movie. he should take care of his body&#39; 
    }
   },
   format: function(val) {
    return val + &#39;岁&#39;
   },
   update: function() {
    this.name = &#39;this is a test&#39;
    this.age = 18
   }
  }
  $(&#39;body&#39;).controller()
 </script>

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

1. 属性と複合属性の監視

内部の属性が関数として定義されている場合、それらは複合属性とみなされ、読み取り専用となります。プロンプトエラーが再割り当てされます。

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

2. 命令

バインディング命令の構文は、現在、val、attr、text、html、および template のみが実装されていることがわかります。 4 つは単純に jqeury メソッドをカプセル化するもので、テンプレートは jquery-tmpl プラグインを使用して実装されます。さらに多くの命令が必要な場合は、init 初期ロード メソッド (現在のオブザーバー パラメーターを受け取る) を実装するだけです。 update メソッド (パラメーターの説明: 対応する 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. イベント

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

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

5. フック

init は、すべての属性を監視した後、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 のローカル更新をサポートしていないことです。

上記は私があなたのためにまとめたものです。

関連記事:

axios を使用して vue2 の http リクエストの問題を解決する方法の詳細 (詳細なチュートリアル)

axios を使用して vue で渡される post request パラメータの問題を処理する (詳細なチュートリアル)

渡された Vue は、post の null パラメーターの問題を解決するための axios コンポーネントの追加を実装します (詳細なチュートリアル)

axios を介して post リクエストを送信すると、springMVC がパラメーターを受信できないことがわかりました (詳細なチュートリアル)

vue 関数での xe-utils の使用ライブラリ (詳細なチュートリアル)

jQuery+koa2 の簡単な Ajax リクエストの実装例

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