angularJS双向绑定和依赖反转
一、双向绑定：
UI<-->数据
数据->UI （数据改变UI跟着变）
UI->数据 （UI改变数据跟着变）
数据改变->UI改变原理：
监听数据是否改变，如果改变更新UI数据。
UI改变->数据改变原理：
<html>
<body>
<input type="text" name="name" value="" id="text1" ng_model="a">
<script>
window.onload = function(){
var a='';
var oTxt = document.getElementById('text1');
oTxt.oninput = function(){ //UI值改变数据改变
a = oTxt.value;
}
}
</script>
</body>
</html>
二、依赖注入：
函数可以自己决定需要什么数据或者多小个数据，而不是外面传什么就用什么。
2.1、调用者决定给多小个参数
<script>
function show(a,b,c){
console.log(arguments.length);
}
show(1); //调用者只给1个参数，调用者决定参数的给予。
</script>
2.2、依赖注入（依赖反转）：函数要求要多小参数，就给多小。 就像show(a,b,c)要求3个参数
<script>
function show(a,b,c){
console.log(arguments.length);
}
var scope = {a:12,b:15,c:99,qq:55,i:99}; //假设是函数需要的参数
//实现依赖反转二个步骤
//1、知道show要什么参数
var str = show.toString();
str=str.split('{')[0].match(/\(.*)\/)[0].replace(/\S+/g,'');
str=str.substring(1,str.length-1);
var arr=str.split(',');
//2、给它相应值
var args=[];
for(var i=0;i<arr.length;i++){
args[i]=scope[arr[i]];
}
console.log(args);
show.apply(null,args);
</script>
angularJS双向绑定和依赖反转的更多相关文章
- vue的双向绑定和依赖收集
在掘金上买了一个关于解读vue源码的小册,因为是付费的,所以还比较放心 在小册里看到了关于vue双向绑定和依赖收集的部分,总感觉有些怪怪的,然后就自己跟着敲了一遍. 敲完后,发现完全无法运行, 坑啊 ...
- Angularjs 双向绑定机制解析
文章转自:http://www.2cto.com/kf/201408/327594.html AngularJs 的元素与模型双向绑定依赖于循环检测它们之间的值,这种做法叫做脏检测,这几天研究了一下其 ...
- AngularJS双向绑定，手动实施观察
实现这样的一个需求:页面中某个地方显示某个文本框的值经过计算得到的结果,而且是文本框值每次变化显示的计算结果也跟着动态变化. 在controller中可以声明一个对象,它的一个字段用来存储初始值: $ ...
- 【.NET6+WPF】WPF使用prism框架+Unity IOC容器实现MVVM双向绑定和依赖注入
前言:在C/S架构上,WPF无疑已经是"桌面一霸"了.在.NET生态环境中,很多小伙伴还在使用Winform开发C/S架构的桌面应用.但是WPF也有很多年的历史了,并且基于MVVM ...
- AngularJs双向绑定详解
双向绑定的三个重要方法: $scope.$apply() $scope.$digest() $scope.$watch() 一.$scope.$watch() 我理解的$watch就是将对某个数据的监 ...
- AngularJs双向绑定
模型数据(Data) 模型是从AngularJS作用域对象的属性引申的.模型中的数据可能是Javascript对象.数组或基本类型,这都不重要,重要的是,他们都属于AngularJS作用域对象. An ...
- 【WPF】WPF开发用户控件、用户控件属性依赖DependencyProperty实现双向绑定、以及自定义实现Command双向绑定功能演示
前言: Wpf开发过程中,最经常使用的功能之一,就是用户控件(UserControl)了.用户控件可以用于开发用户自己的控件进行使用,甚至可以用于打造一套属于自己的UI框架.依赖属性(Dependen ...
- Angular系列----AngularJS入门教程05：双向绑定（转载）
在这一步你会增加一个让用户控制手机列表显示顺序的特性.动态排序可以这样实现,添加一个新的模型属性,把它和迭代器集成起来,然后让数据绑定完成剩下的事情. 请重置工作目录: git checkout -f ...
- [转载]AngularJS入门教程04：双向绑定
在这一步你会增加一个让用户控制手机列表显示顺序的特性.动态排序可以这样实现,添加一个新的模型属性,把它和迭代器集成起来,然后让数据绑定完成剩下的事情. 请重置工作目录: git checkout -f ...
随机推荐
- Android直播实现 Android端推流、播放
最近想实现一个Android直播,但是对于这方面的资料都比较零碎,一开始是打算用ffmpeg来实现编码推流,在搜集资料期间,找到了几个强大的开源库,直接避免了jni的代码,集成后只用少量的java代码 ...
- 浅谈Java两种并发类型——计算密集型与IO密集型
转载:https://blog.csdn.net/u013070853/article/details/49304099 核心是可以分别独立运行程序指令的计算单元.线程是操作系统能够进行运算调度的最小 ...
- cpu访址能力和内存
这里有两个概念:cpu访址能力和提供的内存.举例来说,有个灯泡,可以照亮100立方米的空间,只有照亮的空间才可以工作.假如现在的空间只有50立方米,只要增加空间,可工作的空间就增加了.如果当前已经是1 ...
- 劣质代码评析——《写给大家看的C语言书（第2版）》附录B之21点程序（六）
. #include <stdio.h> . #include <time.h> . #include <ctype.h> . #include <stdli ...
- IN 查询时出现ORA-01795:列表中的最大表达式数为1000解决方法
问题描写叙述: SQL进行IN查询时出现:java.sql.SQLException: ORA-01795: 列表中的最大表达式数为 1000 解决的方法: 问题原因是:SQL进行IN查询时.IN中的 ...
- 漫话Asp.net
经过一段时间的接触,对asp.net这一块进行了很多其它的了解,漫话一下. Asp.net与Web : asp.net属于动态网页技术,属于web应用程序开发. Web应用程序通常是B/S模式. 和B ...
- STL - 容器 - Map(二)
把Map用作关联式数组 MapAdvanceTest.cpp #include <map> #include <string> #include <iostream> ...
- Linux获得命令帮助(学习笔记五)
一.获得命令帮助 1.1.内部命令与外部命令 简单来说,在linux系统中有存储位置的命令为外部命令: 没有存储位置的为内部命令,可以理解为内部命令嵌入在linux的shell中,所以看不到. typ ...
- VMWare虚拟机“锁定文件失败“怎么办？
虚拟机突然蓝屏了,然后就启动不了了,提示"锁定文件失败,打不开磁盘或快照所依赖的磁盘"的解决方法: 如果使用VMWare虚拟机的时候突然系统崩溃蓝屏,有一定几率会导致无法启动,会提 ...
- Throwing cards away I uva1594
Throwing cards away I Given is an ordered deck of n cards numbered 1 to n with card 1 at the t ...