为什么 AngularJS 中的双向数据绑定是一种反模式?

2024-01-08

AngularJS 提供两种方式的数据绑定。

我构建了几个 AngularJS 应用程序,发现双向数据绑定是一个强大的功能,它提高了我的工作效率。

然而,最近我越来越多地看到声称双向数据绑定是一种反模式的帖子和文章。

例子:

  • https://medium.com/este-js-framework/whats-wrong-with-angular-js-97b0a787f903#.py84tbylf https://medium.com/este-js-framework/whats-wrong-with-angular-js-97b0a787f903#.py84tbylf
  • https://www.dotnetrocks.com/?show=1147 https://www.dotnetrocks.com/?show=1147
  • https://www.youtube.com/watch?v=DslsyqnyjQE https://www.youtube.com/watch?v=DslsyqnyjQE
  • Angular2双向数据绑定 https://stackoverflow.com/questions/30468290/angular2-two-way-data-binding

大多数资源都支持“单向数据流”,就像 React/Flux 所提倡的那样。

还有 Angular2宣布 http://victorsavkin.com/post/110170125256/change-detection-in-angular-2一段时间以来,将不会有双向绑定......但最新的文档显示它实际上提供了通过 ngModel 进行双向数据绑定 https://angular.io/docs/ts/latest/guide/forms.html再次(在属性和事件绑定之上实现)

然而,我还没有完全理解与 AngularJS 中双向数据绑定相关的问题。

其他客户端技术(即 swing、eclipse-rcp、winforms、wpf ...)也提供双向数据绑定,而且我从未偶然发现它是反模式的说法...

是否有一个规范的示例可以轻松说明 AngularJS 中双向数据绑定可能导致的问题?

视频 https://www.youtube.com/watch?v=DslsyqnyjQE我上面链接似乎暗示$scope.watch是问题......但是这个例子可以在没有$scope.watch通过绑定到公开的函数$scope.
如果您避免使用$scope(即使用controller as),双向数据绑定还存在哪些问题?


事实上,双向数据绑定的主要问题是性能。

当 AngularJS 发布时 (1),此功能是该框架被开发人员大量使用的最重要原因。

无需一行代码,您就可以通过从模型端或视图端更改元素的值来使元素完全动态化,该值在模型设置的任何地方都会更改。

在这个功能中,最重要的工具是观察,它代表了双向数据绑定的所有问题。

随着应用程序的发展,观察者和观察元素的数量不断增加。
而且,一段时间后,该应用程序可能会成为观察者的一大汤。
这将导致您的应用程序始终监视元素并保持反面元素的最新状态,这会消耗浏览器的大量资源。

这就是为什么我的建议是:尽可能避免观察者。
它们在控制器中几乎从来都不是真正必要的。

也可以看看 :

  • 在 AngularJS 中避免监视的有效策略 https://www.accelebrate.com/blog/effective-strategies-avoiding-watches-angularjs/
  • AngularJS 不好的部分 http://larseidnes.com/2014/11/05/angularjs-the-bad-parts/
  • 大型 AngularJS 应用程序中的性能 https://www.airpair.com/angularjs/posts/angularjs-performance-large-applications

希望您能更清楚。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

为什么 AngularJS 中的双向数据绑定是一种反模式? 的相关文章

  • Google 饼图未显示所有数据行

    我正在尝试绘制人口与国家名称的关系图 我发现 Google 可视化库仅渲染前几个 实际上数字似乎是随机的 具体取决于我使用的数据 有时添加 其他 条目 但它没有t 实际上具有其余条目的值 Example 1 With all countri
  • 如何获取 RxJSSubject 或 Observable 的当前值?

    我有 Angular 2 服务 import Storage from storage import Injectable from angular2 core import Subject from rxjs Subject Inject
  • 在 asp.net vb 中通过第一个下拉列表值填充第二个下拉列表

    我在使用 asp net vb 时遇到了一些问题 我想做的是有2个下拉框 第一个下拉菜单将有 1 2 3 例如 第二个下拉菜单将有 A 乙 C 默认情况下 但是 如果选择 1 我希望第二个下拉菜单自动选择 c 我不知道 JavaScript
  • ngModel.$parsers 忽略 ng-model 值末尾的空格

    我有这样的指令 directive noWhitespace parse function parse return restrict A require ngModel link function scope element attrs
  • 是否可以覆盖 javaScript 原始数据类型?

    问题是不言自明的 我知道可以扩展原始数据类型 例如string但有可能覆盖它吗 这是在采访中被问到的一个问题 不 你不能覆盖任何东西 Ecma脚本定义原始类型 http es5 github com x4 3 2 Undefined Nul
  • 在 Angular2 项目中集成 Treant-js

    我正在尝试在 Angular2 项目中使用 treant js 但我正在努力解决如何正确集成它的问题 我有一个工作正常的 JavaScript HTML 示例 我正在尝试在 Angular2 中工作 我创建了一个组件 从 npm 添加了 t
  • 具有行组的 JQuery 斑马条纹表

    我通常将斑马条纹表行设置为奇数 偶数 如下所示 效果很好 table tbody tr visible even this addClass even table tbody tr visible odd this addClass odd
  • 使用 Javascript / Jquery 的本地存储(不使用 HTML5)

    我想在 javascript 或 jquery 中复制本地存储概念 类似于 HTML5 但不幸的是我不知道如何开始 任何人都可以建议如何使用 javascript 或 jquery 实现本地存储 不使用 HTML5 这是一个有点愚蠢的差事
  • 使用 jQuery 仅从字符串末尾修剪空格

    我知道 jQuery trim 函数 但我需要的是一种仅从字符串末尾修剪空格的方法 而不是开头 So str this is a string 会成为 str this is a string 有什么建议么 Thanks 您可以使用正则表达
  • 在 vue.js 模板中包含外部脚本

    我是 Vue js 和 web pack 的新手 所以我决定使用 vue cli webpack 来构建初始应用程序 我试图包含一个外部脚本 例如组件 不需要的模板中 但是 Vue 警告这是不允许的 我的 index html 文件与最初生
  • 空 URL 哈希导致页面在 js 事件上跳转

    我有一个带有下一个和上一个按钮的照片库 如果我的某个 javascript 方法由于某种原因被破坏 那么当单击其中一个按钮时 它会向 url 添加一个哈希值 即 www google com 我知道可以给散列一个 div id 来跳转到页面
  • 使用 onBlur 事件上的值更新 React 输入文本字段

    我有以下输入字段 在模糊时 该函数调用服务来更新服务器的输入值 完成后 它会更新输入字段 我怎样才能让它发挥作用 我可以理解为什么它不允许我更改字段 但我能做些什么才能使其工作 我无法使用defaultValue因为我会将这些字段更改为其他
  • 将 JavaScript 引擎嵌入到 .NET 中 [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 只是想知道是否有人尝试过将任何 js 引擎嵌入并实际集成到 net 环境中 我可以找到并实际使用 经过L
  • 使用 JavaScript 的计时器

    我想使用java脚本实现计时器 我想随着间隔的变化而减少计时器 Example假设我的计时器从 500 开始 我想要根据级别减少计时器 例如1 一级定时器应减1 且递减速度应较慢 2 2级定时器应递减2 递减速度应为中等3 3级定时器应减3
  • 元素中优先考虑 ngclick 而非 nghref

    tl dr 如何强制 Angular 只执行 ngclick 指令 a 元素而不清空 删除href 我的网站在某些元素上有一些自定义行为 模式打开 位置栏更新等 但对于 SEO 索引我also需要它成为一个 a 元素与href包含有效链接的
  • 理论上防止 WebSocket 中第一个收到的消息丢失

    服务器端代码发送消息立即地连接打开后 它向客户端发送初始配置 问候语 以下代码是在客户端 var sock new WebSocket url sock addEventListener error processError sock ad
  • 在声明组件选择器时添加指令 - Angular 7

    我正在学习 Angular 并通过单击按钮动态创建组件 我正在尝试使用 Angular Material 的拖放功能来拖动这些创建的组件以对它们进行排序 我的基本组件 html 中有以下代码 div style margin 20px di
  • 有没有办法防止输入 type=“number” 获得多个点值?

    我只想得到十进制值 如 1 5 0 56 等 但它允许多个点 有什么办法可以预防吗 您可以使用pattern属性
  • 使用 React React-router 登录后重定向到主页,并且 usenavigate 不起作用?

    我希望用户在成功登录后重定向到主页 我将用户登录的 api 请求的数据存储在一个名为 currentUser 的变量中 因此如果 currentUser 为 true 它应该重定向到主页 这就是我处理登录请求的方式 export const
  • FullCalendar 检查选择日是否有活动?

    我正在使用 Full Calendar js 插件 到目前为止一切顺利 但我想检查开始和结束之间的选择是否有事件 我只需要返回 true 或 false 基本上 如果日期选择中已经存在事件 我想阻止用户创建事件 var calendar c

随机推荐

  • jpa 存储库 websocket @MessageMapping

    我发现 spring 不会为将要执行 MessageMapping 注释的操作的 websocket 请求创建事务 即使我将操作注释为 Transactional 也不会发生任何事情 我还尝试了使用 RequestMapping 注释的操作
  • 厌倦了将 node_modules 复制到 wwwroot 文件夹

    我有一个 ASP NET 5 项目 其中包含大量 Node js 模块 它们安装在node modules folder 在开发环境 environment development 中 我开始将所有模块复制到wwwroot lib手动 当这
  • 删除 bufferscroll 插件后如何在 Sublime Text 中保存折叠/折叠的代码

    有没有办法在 Sublime Text 3 中保存 同步折叠代码从一个会话到另一个会话 现在缓冲区滚动 https packagecontrol io packages BufferScroll插件已被删除 你可以使用Auto Fold C
  • Python:在包卸载时执行操作

    在我的一个 python 项目中 我在用户目录中创建了一个 config 文件夹 但是 当通过 pip 卸载包时 config 文件夹保持不变 没有任何机密数据 因此这不是安全问题 但我想删除它以方便用户 我的问题是 有什么方法可以正确地做
  • BLE 通告数据大小限制

    在我的 Android 应用程序上 当我尝试启动 ble 广告时 我尝试添加一些额外的数据 正如我所读到的 广告数据必须 我就是这样做的 var testData abcdefghij var data AdvertiseData Buil
  • 显示单个项目的回收者视图

    我遇到一个奇怪的错误 其中 recyclerview 仅显示单个项目 以下是我的 recyclerview 适配器的代码 public class ChatAdapter extends RecyclerView Adapter
  • msys 路径转换(或 msys 的 cygpath?)

    我需要将 DEF c filepath myLib def 命令行选项从 bash 脚本传递到 MS 编译器 链接器 该路径是由 bash 脚本作为构建过程的一部分生成的 基本上 我的脚本的参数通过是 DEF c filepath myLi
  • 创建可能的字符串组合列表[重复]

    这个问题在这里已经有答案了 可能的重复 生成字符串所有可能排列的列表 https stackoverflow com questions 361 generate list of all possible permutations of a
  • 是否有一个通用的 lisp 宏用于从列表中弹出第 n 个元素?

    我对 Common Lisp 场景非常陌生 我似乎无法找到一种快速方法来从列表中获取第 n 个元素并同时将其从所述列表中删除 我已经做到了 但它并不漂亮 我真正想要的是类似 pop 的东西 但采用了第二个参数 setf x a b c d
  • Google Sheets API v4 Spreadsheets.Values.Append 返回错误 500 和 503

    Google 表格 API v4This API https developers google com sheets api reference rest v4 spreadsheets values append一直在给予错误 500
  • Java 泛型编译器错误:类型不兼容

    当用 Java 做一些不太花哨的事情时 我遇到了一个泛型错误 我无法理解为什么它不起作用 代码是 package test import java util public class TestClass public static clas
  • 如何在opengl中启用垂直同步?

    如何启用垂直同步 是不是很简单 比如glEnable GL VSYNC 尽管 glEnable 接受的选项中没有 GL VSYNC 或类似的东西 或者在opengl中没有标准的方法来做到这一点 在Windows上有OpenGL扩展方法wgl
  • 使用 Invoke 和 SynchronizationContext.Post 对象有什么区别?

    当我收到与线程上下文相关的异常时 我使用委托函数并调用该委托函数 有必要使用来自其他线程的控制 但我刚刚了解到我可以使用SynchronizationContext Post 函数 我可以在这个方法中调用我的委托 我不确定哪一个更好 这些方
  • 使用 graphql 在 Spring Boot 中进行身份验证

    我正在使用 GraphQL 开发一个 Spring Boot 项目 我正在使用 graphql java tools 和 graphql spring boot starter 我设法使用 spring security 配置安全性和会话管
  • Docker:卷中的文件未在目标中更新

    我是 Docker 新手 我使用以下 Dockerfile 创建了一个映像 FROM node 8 12 0 LABEL version 1 0 WORKDIR usr src app COPY package json RUN npm i
  • 如何使用html将一个页面的值传递到另一个页面

    您好 我有一个用 javascript 创建的定价表 我需要知道的是如何使用 javascript 通过单击按钮将第 1 行或第 2 行中的值传递到 aspx 页面中 这是我的代码
  • 使用 MVC SimpleMembership 分配角色

    我正在通过 Nuget 在 MVC3 中尝试 SimpleMembership 并已下载示例来使用 问题是我无法弄清楚如何将角色分配给特定用户 在标准 MVC 成员资格中 您可以使用类似以下内容的内容 Roles AddUserToRole
  • 对 VkDescriptorPoolCreateInfo.pPoolSizes 的这种理解是否正确?

    在Vulkan中 我知道描述符池用于分配某些布局的描述符集以在着色器中使用 但是在VkDescriptorPoolCreateInfo传递给vkCreateDescriptorPool 有一个字段pPoolSizes它需要一堆包含描述符类型
  • laravel中如何获取应用程序名称?

    我已使用设置应用程序名称 php artisan app name xyz 如何以编程方式访问 laravel 中的应用程序名称 从 laravel 版本 5 3 开始 有一个调用应用程序名称的函数 config app name 您可以更
  • 为什么 AngularJS 中的双向数据绑定是一种反模式?

    AngularJS 提供两种方式的数据绑定 我构建了几个 AngularJS 应用程序 发现双向数据绑定是一个强大的功能 它提高了我的工作效率 然而 最近我越来越多地看到声称双向数据绑定是一种反模式的帖子和文章 例子 https mediu