angularjs でのダーティチェックを理解する-jsチュートリアル-php.cn

angular.js の概要

属性値が正しいかどうかを確認します。変更があった場合は、変数 Dirty を使用してそれを true として記録し、再度 ($digest) を走査し、

をご覧ください。！

ホームページ

ウェブフロントエンド

jsチュートリアル

angularjs でのダーティチェックを理解する

青灯夜游

Jan 20, 2021 pm 05:26 PM

angularjs

angularjs でのダーティチェックを理解する

関連する推奨事項: 「angularjs チュートリアル」

angularjs は双方向バインディングを実装します。これは、vue のdefineProperty とは異なります。その原理は、以下は、ダーティチェックメカニズムの概要です。

angular.js の概要

AngularJs は mvvm フレームワークであり、そのコンポーネントは vm コンポーネントであり、スコープはデータコレクションです。 vm コンポーネントの
AngularJs はディレクティブを通じて vm の動作を宣言します。これはウォッチャーとして実装され、スコープのプロパティの変更をリッスンし、最新のプロパティで UI を更新します
AngularJs の双方向バインディング: 例: 1 つは $ にバインドされます。scope 属性値は HTML 構造にバインドされます。$scope 属性値が変更されると、インターフェイスも変更されます。もう 1 つは、ユーザーが HTML 構造に対して操作を実行するときです。インターフェイス (クリック、入力、選択など) を実行すると、$scope 属性が自動的にトリガーされます。ダーティチェック
angular はデータの変更をまったくリッスンしませんが、適切なタイミング ($watch) で、$rootScope から始まるすべての $scope を走査し、

属性値が正しいかどうかを確認します。変更があった場合は、変数 Dirty を使用してそれを true として記録し、再度 ($digest) を走査し、

ダーティ変数はレコードとして使用されるため、ダーティチェック機構と呼ばれます。
要するに: スコープが作成されると、angular はテンプレートを解析し、バインディング値とイベント呼び出しを見つけて、それらを $watch;

# でバインドします。 ##

$scope.$watch(string|function, listener, objectEquality, prettyPrintExpression)
// string: 验证值或者function执行后return的string
// listener： 如果验证值不同，则执行该监听函数
// objectEquality：执行深检查

ログイン後にコピー

バインディングが完了すると、これらのプロパティの変更が自動的に検出され、$watch が実行され、対応する情報が angular 内の $$watchers にバインドされます。キュー (配列)、$digest がトリガーされると、angular は配列

を走査し、ダーティ変数を使用して $$watchers
# に記録された $scope 属性に変更があるかどうかを記録します。

##次の処理:

dirty が true かどうかを判定し、false の場合、$digest 再帰は実行されません。 (dirty のデフォルトは true)

$$watchers をトラバースし、対応する属性値の古い値と新しい値を取り出し、objectEquality に従って古い値と新しい値を比較します。

2 つの値が異なる場合は、実行を続行します。 2 つの値が同じ場合は、dirty を false に設定します。
すべてのウォッチャーをチェックした後、dirty がまだ true である場合は、dirty を true に設定し、古い値を新しい値に置き換えます。
Inこのようにして、次の再帰ラウンドでは、古い値がこのラウンドの新しい値となり、$digest を再度呼び出します (簡単に言えば、2 回の再帰走査を実行して、古い値と新しい値の変化を確認することです)
変更された値 $scope がインターフェイスに再レンダリングされます
$apply が $digest をトリガーします
angular の内部命令は、ng-click などの $apply をカプセル化するため、通常は apply を手動で呼び出す必要はありません

apply の手動呼び出しが必要になる場合があります。手動トリガー

function($timeout) {
  // 当我们通过on(&#39;click&#39;)的方式触发某些更新的时候，可以这样做
  $timeout(() => { // 内置语法糖 $http, $timeout已经包含了apply
    $scope.name = &#39;lily&#39;
  })
  // 也可以这样做
  $element.on(&#39;click&#39;, () => {
    $scope.name = &#39;david&#39;
    $scope.$apply()
  })
}

ログイン後にコピー

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>angularjs脏检查实现</title>
</head>
<style type="text/css">
  button {
    height: 60px;
    width: 100px;
  }

  p {
    margin-left: 20px;
  }
</style>

<body>
  <div>
    <button type="button" ng-click="increase">增加</button>
    <button type="button" ng-click="decrease">减少</button>
    数量：<span ng-bind="data">0</span>
  </div>
  <br>
</body>
<script>
  window.onload = function () {
    /**
     * 声明构造函数
     */
    function Scope() {
      this.$$watchList = []; // angular内部会声明一个数组(包含监听的对象)，在digest执行时去遍历
    }

    /**
     * 属性赋值给$scope
     * 类似angular解析controller的模板，把模板中的属性解析出来，属性赋值给$scope
     */
    Scope.prototype.getNewValue = function () {
      return $scope[this.name];
    }

    /**
     * 实现监听
     */
    Scope.prototype.$watch = function (name, listener) {
      let watch = {
        name: name,
        getNewValue: this.getNewValue,
        listener: listener || function () { }
      };
      // 当作用域创建时，angular会去解析模板，$watch用来绑定监听值和监听函数
      this.$$watchList.push(watch);
    }

    /**
    * 检查dirty，循环更新scope上的最新值
    */
    Scope.prototype.$digest = function () {
      console.log(&#39;$digest&#39;);
      let dirty = true; // 默认dirty变量为true
      let checkTimes = 0;
      while (dirty) {
        dirty = this.$valScope();
        checkTimes++;
        if (checkTimes > 10 && dirty) {
          throw new Error("循环过多");
        }
      }
    }

    /**
     * 验证值是否有变化
     */
    Scope.prototype.$valScope = function () {
      let dirty;
      let list = this.$$watchList;
      for (let i = 0; i < list.length; i++) {
        let watch = list[i];
        let newValue = watch.getNewValue();
        let oldValue = watch.last || undefined;
        if (newValue !== oldValue) {
          watch.listener(newValue, oldValue);
          dirty = true; // 如果新旧值不同，则继续遍历
        } else {
          dirty = false;
        }
        watch.last = newValue;
      }
      return dirty;
    }

    /**
     * 刷新scope
     */
    Scope.prototype.$apply = function (params) {
      let list = document.querySelectorAll(&#39;[ng-bind]&#39;);
      console.log(&#39;list&#39;, list)
      for (let i = 0, l = list.length; i < l; i++) {
        let bindData = list[i].getAttribute(&#39;ng-bind&#39;);
        console.log(&#39;bindData&#39;, bindData)
        console.log(&#39;list[i]&#39;, list[i])
        list[i].innerHTML = $scope[bindData];
      }
    }

    let $scope = new Scope(); // 实例化，声明$scope对象集合
    $scope.data = 0;
    $scope.increase = function () {
      this.data++;
    };
    $scope.decrease = function () {
      this.data--;
    };

    $scope.$watch(&#39;data&#39;, function(newValue, oldValue) { // 监听
        console.log("new: " + newValue + "=========" + "old: " + oldValue);
    });


    // 手动为button按钮添加onclick事件，并为通过闭包为其绑定了全局scope对象，绑定apply方法
    // 类似angular内部实现
    function startBind() {
      let list = document.querySelectorAll(&#39;[ng-click]&#39;);
      for (let i = 0, l = list.length; i < l; i++) {
        list[i].onclick = (function (index) {
          return function () {
            let func = this.getAttribute(&#39;ng-click&#39;);
            $scope[func]($scope);
            $scope.$digest();
            $scope.$apply()
          }
        })(i)
      }
    }

    // 初始化
    startBind();
  }

</script>

</html>

ログイン後にコピー

プログラミングビデオ

をご覧ください。！

以上がangularjs でのダーティチェックを理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7322

Java チュートリアル

1625

CakePHP チュートリアル

1350

Laravel チュートリアル

1262

PHP チュートリアル

1209

Related knowledge

入門から習得まで、2022 年の最新 5 つの angularjs チュートリアル Jun 15, 2017 pm 05:50 PM

Javascript は、コードの構成、コードのプログラミングパラダイム、およびオブジェクト指向理論の点で非常にユニークな言語です。しかし、JavaScript が 20 年間主流であったとはいえ、jQuery、Angularjs、さらには React などの人気のあるフレームワークを理解したい場合は、「Black Horse Cloud Classroom JavaScript Advanced Framework」を見てください。デザインビデオチュートリアル」。

PHP と AngularJS を使用して応答性の高い Web サイトを構築し、高品質のユーザーエクスペリエンスを提供します Jun 27, 2023 pm 07:37 PM

今日の情報化時代において、ウェブサイトは人々が情報を入手し、コミュニケーションを図るための重要なツールとなっています。レスポンシブな Web サイトはさまざまなデバイスに適応し、ユーザーに高品質のエクスペリエンスを提供できます。これは、現代の Web サイト開発のホットスポットとなっています。この記事では、PHP と AngularJS を使用して応答性の高い Web サイトを構築し、高品質のユーザーエクスペリエンスを提供する方法を紹介します。 PHP の概要 PHP は、Web 開発に最適なオープンソースのサーバー側プログラミング言語です。 PHP には、学びやすさ、クロスプラットフォーム、豊富なツールライブラリ、開発効率など、多くの利点があります。

PHP と AngularJS を使用して Web アプリケーションを構築する May 27, 2023 pm 08:10 PM

インターネットの継続的な発展に伴い、Web アプリケーションは企業情報構築の重要な部分となり、最新化作業に必要な手段となりました。 Web アプリケーションの開発、保守、拡張を容易にするために、開発者は開発ニーズに合った技術フレームワークとプログラミング言語を選択する必要があります。 PHP と AngularJS は非常に人気のある 2 つの Web 開発テクノロジであり、それぞれサーバー側とクライアント側のソリューションであり、これらを組み合わせて使用すると、Web アプリケーションの開発効率とユーザーエクスペリエンスを大幅に向上させることができます。 PHPPHPの利点

PHP と AngularJS を使用してオンラインファイル管理プラットフォームを開発し、ファイル管理を容易にする Jun 27, 2023 pm 01:34 PM

インターネットの普及に伴い、ネットワークを使用してファイルを転送したり共有したりする人が増えています。ただし、さまざまな理由により、FTP などの従来の方法をファイル管理に使用しても、現代のユーザーのニーズを満たすことができません。したがって、使いやすく、効率的で安全なオンラインファイル管理プラットフォームを確立することがトレンドになっています。この記事で紹介するオンラインファイル管理プラットフォームは、PHP と AngularJS をベースにしており、ファイルのアップロード、ダウンロード、編集、削除などの操作を簡単に実行でき、ファイル共有、検索、検索などの一連の強力な機能を提供します。

PHP プログラミングで AngularJS を使用するにはどうすればよいですか? Jun 12, 2023 am 09:40 AM

Web アプリケーションの人気に伴い、フロントエンドフレームワーク AngularJS の人気も高まっています。 AngularJS は、Google が開発した JavaScript フレームワークで、動的な Web アプリケーション機能を備えた Web アプリケーションの構築に役立ちます。一方、バックエンドプログラミングの場合、PHP は非常に人気のあるプログラミング言語です。サーバーサイドプログラミングに PHP を使用している場合、PHP と AngularJS を使用すると、Web サイトにさらに動的な効果がもたらされます。

Flask と AngularJS を使用してシングルページ Web アプリケーションを構築する Jun 17, 2023 am 08:49 AM

Web テクノロジーの急速な発展に伴い、シングルページ Web アプリケーション (SinglePage Application、SPA) は、Web アプリケーションモデルとしてますます人気が高まっています。従来の複数ページの Web アプリケーションと比較して、SPA の最大の利点は、ユーザーエクスペリエンスがよりスムーズであり、サーバーのコンピューティング負荷も大幅に軽減されることです。この記事では、FlaskとAngularJSを使って簡単なSPAを構築する方法を紹介します。 Flask は軽量の Py です

AngularJS の基本の紹介 Apr 21, 2018 am 10:37 AM

この記事の内容は AngularJS の基本的な入門に関するもので、必要な友人に共有します。

フロントエンド開発に PHP と AngularJS を使用する方法 May 11, 2023 pm 05:18 PM

インターネットの普及と発展に伴い、フロントエンド開発の重要性がますます高まっています。フロントエンド開発者として、私たちはさまざまな開発ツールとテクノロジーを理解し、習得する必要があります。その中でも、PHP と AngularJS は非常に便利で人気のあるツールです。この記事では、これら 2 つのツールをフロントエンド開発に使用する方法を説明します。 1. PHP の概要 PHP は、人気のあるオープンソースのサーバー側スクリプト言語であり、Web 開発に適しており、Web サーバーやさまざまなオペレーティングシステム上で実行できます。 PHP の利点は、シンプルさ、スピード、利便性です。

See all articles

angularjs でのダーティチェックを理解する

angular.js の概要

属性値が正しいかどうかを確認します。変更があった場合は、変数 Dirty を使用してそれを true として記録し、再度 ($digest) を走査し、

をご覧ください。！

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック

angularjs でのダーティ チェックを理解する

angular.js の概要

属性値が正しいかどうかを確認します。変更があった場合は、変数 Dirty を使用してそれを true として記録し、再度 ($digest) を走査し、

をご覧ください。 ！

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック

angularjs でのダーティチェックを理解する

をご覧ください。！