控制反转与双向绑定

Java_oldboy 发布于2019-08-21 10:26 / 2741人阅读

摘要：引子在前端开发中，常常有这样的的代码，先是在中定义了页面结构在有交互时，用通过其来取到节点，然后将数据写进去，如。小结双向绑定本质上是一种的思想，通过让页面元素声明自己依赖的逻辑不依赖具体达到了解耦合的目的。

引子

在前端开发中，常常有这样的naive的代码，先是在HTML中定义了页面结构：

在有交互时，用js通过其class来取到节点，然后将数据写进去，如$(".order-total").html(300)。

大约在三年前，这种做法在业界还颇为流行，几乎所有的书里，网上教义，都在鼓吹这种分离JS和HTML的行为，认为这么做就是天经地义。

但是当代码量多了之后，当页面交互复杂了之后，我们的代码常常就成了：

if (exist($(".selector"))) {
   // do something
}

整个文件中，充斥着这样或那样的if，因为没人能确定这个节点是否存在。还充斥着另一种东西：

/* note: 这不是标准的jquery代码 */
var quantity = $(this).parent().parent().find(".quantity-value");

这种连扔垃圾桶都不配的代码真是写的时候爽，后面维护者遭殃的典型范例，你必须不断地切换js/html来审视其强依赖的结构。

那么问题来了，为什么会写出这样的代码呢？

因为这种代码是最符合直觉的书写方式，一个初级程序员未经任何训练，就能写出这样的代码。它的名字叫：命令式编程。

存在的问题

命令式编程存在的问题就是，写的人在写的时候知道是怎么回事，试图掌控一切，后果是:
- 不知道代码中的一系例选择器对应着什么节点
- 可维护性差，你不敢轻易改动类名或删除节点，也不清楚节点的内容究竟对应着什么数据
- 代码量多

控制反转

上面说道，命令式编程试图控制一切，而解决的办法就是，交出控制权，将控制权反转，即：

不要来找我，我会去找你。

原来的工作流：

用户输入/点击/Ajax请求

数据变化 => order = 100

取节点，将内容设到页面 => $(".order-div").html(order) #JS主动来找DOM#

如果页面已经不需要这个信息了,将.order-div从html中删掉，重复上面的流程，执行到第三步时，JS将抛出异常，因为节点找不到。

控制反转的工作流：

元素监听数据变化

，即#我会去找你#

用户输入/点击/Ajax请求

数据变化 => order = 100

元素的innerHTML将被自动设上100

如果页面已经不需要这个信息了,将.order-div从html中删掉，重复上面的流程，对程序没有任何影响，因为是节点自己去取数据，而不是JS主动去取节点，而这种方式就做：声明式编程。

小结

双向绑定本质上是一种IoC的思想，通过让：

页面元素声明自己依赖的model

JS逻辑不依赖具体dom

达到了解耦合的目的。

GPU云服务器云服务器双向绑定双向数据绑定 js双向绑定 js双向数据绑定

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85522.html

VUE.js第三课模板语法

摘要：模板语法使用了基于的模版语法，允许开发者声明式地将绑定至底层实例的数据。的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进的系统。指令用于在表达式的值改变时，将某些行为应用到上。 Vue.js 模板语法 Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数...

lx1036 2019-06-27 16:34 评论0 收藏0
深入剖析 Laravel 服务容器

摘要：划下重点，服务容器是用于管理类的依赖和执行依赖注入的工具。类的实例化及其依赖的注入，完全由服务容器自动的去完成。本文首发于深入剖析 Laravel 服务容器，转载请注明出处。喜欢的朋友不要吝啬你们的赞同，谢谢。之前在深度挖掘 Laravel 生命周期一文中，我们有去探究 Laravel 究竟是如何接收 HTTP 请求，又是如何生成响应并最终呈现给用户的工作原理。本章将带领大...

abson 2019-07-01 10:00 评论0 收藏0
Laravel深入学习2 - 控制反转容器

摘要：控制反转容器控制反转使依赖注入变得更加便捷。有瑕疵控制反转容器是实现的控制翻转容器的一种替代方案。容器的独立使用即使没有使用框架，我们仍然可以在项目中使用安装组件来使用的控制反转容器。在没有给定任何信息的情况下，容器是无法实例化相关依赖的。声明：本文并非博主原创，而是来自对《Laravel 4 From Apprentice to Artisan》阅读的翻译和理解，当然也不是原汁原味...

worldligang 2019-06-27 15:49 评论0 收藏0
Vue入门--基础语法

摘要：在模板中放入太多的逻辑会让模板过重且难以维护。它会根据控件类型自动选取正确的方法来更新元素。指令需要使用的语法，指的是原数据数组，指的是迭代的数组元素。注：本教程所使用的vue版本为 2.5.16 MVC与MVVM MVC（Model-View-Controller）： M指的是从后台获取到的数据， V指的是显示动态数据的html页面， C是指响应用户操作、经过业务逻辑处理后去更新...

haoguo 2019-08-26 12:00 评论0 收藏0
手把手教你学Vue-1(vue指令)

摘要：方法用来新增对象的属性模版指令不是字符串模版渲染，所以需要用来渲染菜鸟教程属性中的值应使用指令缩写方式。最近因为要重构APP项目，在对比了react和Vue，加上前期已经有了react开发的经验，还是想尝试一下VUE，更小更便捷的开发方式。 1.vue 初始化安装官网提供的NPM方法 $ npm install vue # 全局安装 vue-cli $ npm install ...

LucasTwilight 2019-08-22 15:47 评论0 收藏0