为什么 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 中的双向数据绑定是一种反模式? 的相关文章

  • 使用浏览器内的 JS 数值求解三角方程[关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 给定变量值s v and h 并给定一个库 例如数字 js http www numericjs com index php我怎样才能用数
  • Exceljs:迭代每行和每列的每个单元格

    我想在所有单元格中添加粗边框 这是一个有角度的项目 我正在使用打字稿 我可以为 1 个单元格做到这一点 worksheet getCell A1 border top style thick left style thick bottom
  • ScrollTop 在 Chrome/Safari 中不起作用

    我的网站上有一个循环内的表单 当有人提交表单时 查询字符串会添加到 URL 中 例如 updated 111 然后 我的 JQuery 脚本检查数字的 url 并在提交表单并重新加载页面后滚动到该 div 该脚本在 Firefox 中运行良
  • 如何使用jquery格式化数字

    我正在尝试删除 之后的数字 然后我想格式化数字 16810900 211233 喜欢这个 16 810 900 但我不知道该怎么做 这是我的 html 是这样的 div class main p class active 10200 00
  • 方向改变后的javascript最大视口高度Android和iOS

    目标 查找设备的最大视口高度 包括设备的空间address bar这样我们就可以动态调整 min body 的大小并将内容向上推 问题 移动浏览器处理方向状态的方式不同 方向变化时更新 DOM 属性的方式也不同 使用 JavaScript
  • Node.js Google-云存储上传目的地规范

    我有一个 Node js 服务器并且正在使用谷歌云上传一些图像文件的包Firebase 存储 上传本身工作正常 但 google cloud API 似乎只能将文件上传到 Firebase Storage 根文件夹 有没有办法指定远程位置来
  • 如何使用 Underscore 获取 JavaScript 数组中的重复项

    我有一个数组 我需要重复的项目并根据特定属性打印这些项目 我知道如何使用 underscore js 获取唯一项目 但我需要找到重复项而不是唯一值 var somevalue name john country spain name jan
  • angularjs 是否将 null 视为 $scope.null ?

    问题的示例 div hello div 这是在以下范围内评估的吗 scope bar null 或者是这样的 scope bar scope null 请注意 在最后一种情况下 scope null 将是未定义的 并且该示例似乎可以正常工作
  • 正确设置 Laravel 5 CSRF 令牌的标头

    好吧 已经搜索这个问题好几个小时了 只是找不到解决方案的开始 我正在使用 angularJS 前端和 laravel 后端 Restangular 是我的通讯服务 我的 POST 很好 因为我可以在数据中包含 token 并且它会起作用 但
  • 获取 pdf 第 1 页(共 2 页)的图像

    我正在使用 html2canvas 和 jsPDF 以及 Angular4 创建图像 我想将此图像放置在 2 页生成的 pdf 的第 1 页上 但似乎这条线 doc save test pdf 需要在函数内部htm2canvas 因为如果我
  • jQuery 中如何判断 JSON 对象是否为空

    我有以下 JSON meta limit 20 next null offset 0 previous null total count 0 objects 我对对象感兴趣 我想知道对象是否为空并显示警报 像这样的东西 success fu
  • toJSON() 和 JSON.Stringify() 之间的区别

    如果您需要读取或克隆模型的所有数据属性 请使用其 toJSON 方法 此方法返回属性的副本作为 对象 尽管有其名称 但不是 JSON 字符串 当 JSON stringify 为 使用 toJSON 方法传递一个对象 它将返回的字符串化 t
  • React JS“this”没有按预期工作

    我有下面的代码 save function var this this console log this refs itemText this setState isEditing false function console log In
  • 上传前如何检查图片的宽度和高度

    对于图片上传 我编写了以下 html 代码
  • Kendo UI 和 Angular - $scope 中没有小部件

    我使用 Kendo UI 版本 2014 2 716 和 AngularJS 版本 1 2 27 并使用指令创建了一个网格 div div div div
  • 如何使用javascript从特定标签获取HTML文档中的所有textNode?

    如何在不使用xpath或treewalker的情况下从单个数组中的一组特定标签中获取所有textNodes blockquote em h4 h6 p IE不允许您使用xpath和treewalker 请帮助我 如果脚本仅适用于 IE 那就
  • 谷歌浏览器如何启动桌面应用程序?

    我真的不知道术语 所以我将从一个例子开始 如果我点击磁力链接 Google Chrome 会询问我是否要启动 torrent 客户端 我单击 确定 chrome 启动该应用程序 该应用程序根据链接执行一些操作 现在有办法查看应用程序如何从
  • 如何在 Next.js 中正确使用 Mongoose 模型?

    我正在使用 TypeScript 和 MongoDB Mongoose 构建 Next js 应用程序 我在使用 Mongoose 模型时开始遇到错误 这导致它们在每次使用模型时都尝试覆盖模型 导致模型覆盖错误的代码 import mong
  • D3 时间解析返回 null

    根据此页面上的说明 https github com mbostock d3 wiki Time Formatting https github com mbostock d3 wiki Time Formatting我正在尝试解析 ISO
  • 调试客户端时使用 Chrome/Firefox

    我正在使用带有 getUserMedia 的相机 但出现了一些需要修复的错误 问题是 Visual Studio 只允许我使用 IE 调试 JavaScript 我的意思是命中断点 而 IE 不支持 getUserMedia 如果您想在 I

随机推荐

  • 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