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 ...
随机推荐
- Jquery 获取table当前行内容
$("a[name='checkOriginal']").click(function () { var parent = $(this).parent().parent().fi ...
- PHP OAuth 2.0 Server
PHP OAuth 2.0 Server PHP OAuth 2.0 Server ⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️ ...
- [CSS3]Clearfix
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="index ...
- Android的View和ViewGroup分析
1. 概念 Android中的View与我们曾经理解的"视图"不同.在Android中,View比视图具有更广的含义,它包括了用户交互和显示,更像Windows操作系统中的wind ...
- 从Date类型字段获得当日周几的DAYNAME函数
例: select dayname(date) from pos.daywork
- 两条Find指令
# 列出所有包括a@b.c内容的xml文件 find / -type f -name "*.xml" | xargs grep "a@b.c" # 列出/opt ...
- Element学习
生成 HTML 文档初始结构 HTML 文档的初始结构,就是包括 doctype.html.head.body 以及 meta 等内容.你只需要输入一个 “!” 就可以生成一个 HTML5 的标准文档 ...
- top level element is not completed
今天在使用IDEA配置springmvc文件时,出现类似在Android studio 中样式文件报top level element is not completed错,郁闷极了,找了好久 才找到解 ...
- 通过Js对电话和姓名身份证等进行部分隐藏处理
在进行web前端页面开发中,有时需要从后台获取用户数据来显示在前台页面,但是考虑到用户信息安全的问题,就需要对这些信息进行处理,使其不完全显示出来,例如姓名,两个字的显示姓,名字用*代替,电话前三位和 ...
- sed备忘
sed 是一种在线编辑器,它一次处理一行内容.处理时,把当前处理的行存储在临时缓冲区中,称为“模式空间”(pattern space),接着用sed命令处理缓冲区中的内容,处理完成后,把缓冲区的内容送 ...