js はシンプルな MVVM フレームワークのサンプル共有を実装します-jsチュートリアル-php.cn

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

小云云

リリース： 2018-01-16 13:12:56

オリジナル

1754 人が閲覧しました

この記事では主に、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 のローカル更新をサポートしていないことです。