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 ...
随机推荐
- Javascript中计算脚本运行的时间
console.time("timer名字") 其他脚本 console.timeEnd("timer名字"); 运行后结果为: timer名字: 运行时间
- HDU 1495 很可乐 （DFS）
题目链接:很可乐 解析:一个瓶子,容量为s.两个杯子,容量分别为n和m,问最少多少次倾倒才干将一瓶可乐均分为两份. 直接模拟每次的倾倒.然后递归求解. 能够加个预判的条件,要是s是奇数的时候,不管怎样 ...
- java核心技术36讲
https://time.geekbang.org/column/intro/82?utm_source=website&utm_medium=infoq&utm_campaign=8 ...
- 隐马尔可夫模型HMM与维特比Veterbi算法（二）
隐马尔可夫模型HMM与维特比Veterbi算法(二) 主要内容: 前向算法(Forward Algorithm) 穷举搜索( Exhaustive search for solution) 使用递归降 ...
- iOS单元測试：Specta + Expecta + OCMock + OHHTTPStubs + KIF
框架选择 參考这篇选型文章,http://zixun.github.io/blog/2015/04/11/iosdan-yuan-ce-shi-xi-lie-dan-yuan-ce-shi-kuang ...
- Android 之数据传递小结
Android开发中,在不同模块(如Activity)间经常会有各种各样的数据需要相互传递,常用的的有五种传递方式.它们各有利弊,有各自的应用场景.下面分别介绍一下: 1. Intent对象传递简单数 ...
- [算法][LeetCode]Spiral Matrix
题目要求 Given a matrix of m x n elements (m rows, n columns), return all elements of the matrix in spir ...
- tail 命令(转)
原文:http://www.cnblogs.com/peida/archive/2012/11/07/2758084.html ail 命令从指定点开始将文件写到标准输出.使用tail命令的-f选项可 ...
- 20个常用java代码段
下面是20个非常有用的Java程序片段,希望能对你有用. 1. 字符串有整型的相互转换 String a = String.valueOf(2); //integer to numeric strin ...
- navicat 使用
sql是操作数据库中数据的语句,在不同的数据库中会略有不同,如mysql,postgreSQL,oracle,sqlserver,sqlite等等,但是sql的基础select.insert.upda ...