>  기사  >  웹 프론트엔드  >  Anglejs에 대한 데이터 바인딩

Anglejs에 대한 데이터 바인딩

不言
不言원래의
2018-07-09 15:52:301626검색

이 기사에서는 특정 참조 값이 있는 Anglejs의 데이터 바인딩을 주로 소개합니다. 이제는 모든 사람들과 공유합니다. 🎜#Angularjs1.X에는 데이터 동기화 및 표시를 위한 세 가지 데이터 바인딩 방법이 있습니다. angularjs 1.3 이전에는 angularjstwo-way-bindngone-way-bindng라는 두 가지 방식으로만 존재했습니다. , 일회성 바인딩이라는 바인딩 메커니즘이 도입되었습니다.

현재 angularjs에는 다음 세 가지 데이터 바인딩 방법이 있습니다.

  • 양방향 바인딩angularjs 1.3  之前,angularjs 只存在两种方式: two-way-bindingone-way-bindng , 而后则引入了称为one-time-binding 的绑定机制。

    目前angularjs 中存在以下三种数据绑定方式:

    • two-way-binding

    • one-way-binding

    • one-time-binding

    two-way-binding

    angularjs 中的 Two-way-binding 的作用是将 ModelView 关联起来,任何一侧的数据变更都会更新另一侧的数据。

    常见场景是页面中的输入区域。双向绑定可以很容易的将输入控件的值关联到数据模型中。

    <input type="text" id="text"  ng-model="name"/>

    通过 ng-model 我们可以很容易的将输入框(view)的值和 name (Model) 关联起来。在双向数据流的作用下,无论是我们修改输入框的值还是修改 name,另外一侧都将及时更新到新数据。

    ng-modelangularjs 内置的一个指令用来实现双向绑定。ng-model 在不同生命周期中,有不同的逻辑处理。

    1. compilation phase:

      1. ng-model 指令和 input 指令会被合并处理给 input 标签 注册 keydown事件(DOM Event);

      2. interpolation 则注册一个 $watch 用来订阅 change 事件(angularjs Event)。

    2. Runtime Phase

      1. 用户输入触发 keydown

      2. input  指令捕获 keydown 事件,调用 $apply 来请求更新动作。

      3. angularjs 更新值到 Model

      4. 进入 $digest 上下文

      5. $watch 表达式检测到  Model   发生了 change,通知interpolation ,请求 更新 DOM

      6. angularjs 托管结束,退出托管,交还控制权到 JavaScript 执行上下文。

      7. 最后浏览器重新渲染文本。

    One-way-binding

    不同于 Two-way-binding的双向流动, one-way-binding 的数据流向是单向,即只会从 model 流向 view ,而不会从 view 流向 model。 因此, one-way-binding 用来展示数据,而不是获取输入。

    angularjs 中, one-way-binding 则有两种语法: ng-bind{{expression}}

    <span ng-bind="name"> </span>
    <span>{{name}}</span>

    对于 one-way-binding来说,内部机制和 two-way-binding 有部分相同的机制。

    1. compilation phase:

      1. interpolation 注册一个 $watch 用来订阅 change 事件(angularjs Event)。

    2. runtime phase:

      1. angularjs 进入 $digest

      2. expression$watch 检测到数据发生变更,通知interpolation ,请求 更新 DOM

      3. angularjs 托管结束,退出托管,交还控制权到 JavaScript 执行上下文。

      4. 最后浏览器重新渲染文本。

    one-time-binding

    1.3 之后,angularjs 实现了一个叫 one-time-binding 的机制。本质上它的机制和其他两种方式没太多差异,但在数据更新时候表现的不太一样。

    one-time-binding 同样会注册 $watch

  • 단방향 바인딩
  • 일회성 바인딩#🎜🎜#

양방향 바인딩

#🎜🎜#angularjs양방향 바인딩은 모델과 보기는 연결되어 있으며 양쪽의 데이터 변경 사항은 반대쪽의 데이터를 업데이트합니다. #🎜🎜##🎜🎜#일반적인 시나리오는 페이지의 입력 영역입니다. 양방향 바인딩을 사용하면 입력 컨트롤의 값을 #🎜🎜#data model#🎜🎜#에 쉽게 연결할 수 있습니다. #🎜🎜#
<span>{{::name}}</span>
#🎜🎜#ng-model을 통해 입력 상자(view)와 name의 값을 쉽게 결합할 수 있습니다( 모델)이 연결되어 있습니다. 양방향 데이터 흐름 작업에 따라 입력 상자의 값을 수정하든 이름을 수정하든 상대방은 시간에 맞춰 새로운 데이터로 업데이트됩니다. #🎜🎜##🎜🎜#ng-model은 양방향 바인딩을 구현하기 위해 angularjs에 내장된 지시문입니다. ng-model은 다양한 수명 주기마다 서로 다른 논리적 처리를 수행합니다. #🎜🎜#
  1. #🎜🎜#컴파일 단계:#🎜🎜#
    1. #🎜🎜#ng-model 지시문과 input 지시문이 input에 병합됩니다. 태그 등록 keydown 이벤트(DOM 이벤트) #🎜🎜#
    2. #🎜🎜#보간$watch code>를 등록합니다. <code>change 이벤트(angularjs 이벤트)를 구독하는 데 사용됩니다. #🎜🎜#
  2. #🎜🎜#런타임 단계#🎜🎜#
    1. #🎜🎜#사용자 입력 트리거keydown#🎜🎜#
    2. #🎜🎜#입력 명령 캡처keydown 이벤트가 발생하면 $apply를 호출하여 업데이트 작업을 요청하세요. #🎜🎜#
    3. #🎜🎜#angularjs 값을 Model#🎜🎜#
    4. #🎜🎜#으로 업데이트합니다. $digest 컨텍스트#🎜🎜#
    5. #🎜🎜#$watch 표현식 감지 모델 발생change 입력 , 보간을 알리고 DOM 업데이트를 요청합니다. #🎜🎜#
    6. #🎜🎜#angularjs 호스팅 종료, 호스팅 종료 및 제어권을 JavaScript 실행 컨텍스트로 반환합니다. #🎜🎜#
    7. #🎜🎜#마지막으로 브라우저가 텍스트를 다시 렌더링합니다. #🎜🎜#

단방향 바인딩

#🎜🎜#양방향 바인딩의 양방향 흐름과 다릅니다. code>, 단방향 바인딩의 데이터 흐름 방향은 단방향입니다. 즉, 모델에서 로만 흐릅니다. , 그러나 view에서 model로 흘러가는 것은 아닙니다. 따라서 단방향 바인딩은 입력을 얻는 것이 아니라 데이터를 표시하는 데 사용됩니다. #🎜🎜##🎜🎜#angularjs에서 one-way-bound에는 ng-bind{{라는 두 가지 구문이 있습니다. 표현식}}. #🎜🎜#rrreee#🎜🎜#단방향 바인딩의 경우 내부 메커니즘은 양방향 바인딩과 부분적으로 동일합니다. #🎜🎜#
  1. #🎜🎜#컴파일 단계:#🎜🎜#
    1. #🎜🎜#보간 change 이벤트를 구독하려면 $watch를 등록하세요( anglejs 이벤트). #🎜🎜#
  2. #🎜🎜#런타임 단계:#🎜🎜#
    1. #🎜🎜#angularjs$digest를 입력합니다. #🎜🎜#
    2. #🎜🎜#expression$watch는 데이터 변경을 감지하고 보간을 알리고 요청합니다. DOM을 업데이트하세요. #🎜🎜#
    3. #🎜🎜#angularjs 호스팅 종료, 호스팅 종료 및 제어권을 JavaScript 실행 컨텍스트로 반환합니다. #🎜🎜#
    4. #🎜🎜#마지막으로 브라우저가 텍스트를 다시 렌더링합니다. #🎜🎜#

일회성 바인딩

#🎜🎜#1.3 그 다음에는 angularjs 일회성 바인딩이라는 메커니즘이 구현됩니다. 본질적으로 해당 메커니즘은 다른 두 가지 방법과 크게 다르지 않지만 데이터가 업데이트될 때 다르게 동작합니다. #🎜🎜##🎜🎜#one-time-bound는 데이터 변경 사항을 모니터링하기 위해 $watch도 등록하지만 처음으로 데이터를 감지합니다#🎜🎜 #无Undefine#🎜🎜# 필요한 경우 모니터링을 취소하세요. #🎜🎜#
<span>{{::name}}</span>

对于上面的代码,假设 nameundefined -> angularjs -> angular ,最终渲染的结果是 angularjs ,而不是 angular 。 这就是 one-time-binding 的特殊之处,当 nameundefined 变化为 angularjs之后,被认定为 name 的状态已经是 stable ,因此将取消 $watch , 即不再监听数据变化。

那么,假设 name'' -> angularjs-> angular, 则渲染结果是 '' ,即空字符串(第一次的值)。因为 one-time-binding 在计算 stable 时候使用的 严格相等,即 newVal === undefined, 如果是,则继续保留 $watch 等待下一次的比较;否则,状态变更为 stable,取消 $watch, 数据转化为最终态。

结束

在我看来,angularjs  核心在于 angularjs context$digest

angularjs context 保证 angularjs 可以捕获到各种事件,用户输入、鼠标事件、键盘事件、甚至 $settimeout$http 等异步行为的状态流转。

$digest 则保证 angularjs 可以确认是否要更新数据。

文中难免存在一些错误,欢迎大家斧正。

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

jQuery/Vue的鼠标移入移出效果

addEventListener中的EventListener的接口对象

위 내용은 Anglejs에 대한 데이터 바인딩의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.