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 ...
随机推荐
- Linux之nohup命令：实现退出终端后程序继续后台运行
转自:http://tech.ccidnet.com/art/302/20070618/1115599_1.html 简单而有用的nohup命令在UNIX/LINUX中,普通进程用&符号放到后 ...
- DataGrid前台数据绑定技巧
(1)DataGrid控件不换行,数据显示不完全后面加"..." <%# DataBinder.Eval(Container.DataItem,? DataBinder.Ev ...
- uni-app 如何引入全局方法或变量?
利用Vue.prototype挂载到Vue实例上即可
- 转义字符 HTML 字符实体 < >: &等
在 HTML 中,某些字符是预留的. 在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签. 如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用 ...
- idea 修改编辑区字体样式、大小
idea 修改编辑区字体样式.大小 CreateTime--2018年4月26日10:36:59 Author:Marydon 设置-->Editor-->Font-->修改Fo ...
- 【FAI】七日年化收益与万份收益的理解
七日年化收益:其实指的一年的收益(应该忽略”七日”),这里的七日指的是取最近七日年化的结果 万份收益:每万元每天的收益 可以使用下图来清晰识别: 例子: 10000元按照5%的七日年化收益计算的话: ...
- 类的专有方法(__getattr__和__setattr__、__delattr__)
# -*- coding: utf-8 -*- #python 27 #xiaodeng #http://www.360doc.com/content/15/0413/19/12067640_4629 ...
- 基于.net 的加载自定义配置-误操作
有时候 需要 将程序加载自定义的配置文件,除了自己写解析xml文件.内置的ConfigutionManager对象 是个不错的选项. 按照 app.config 的方式,做一个副本.然后从你的配置文件 ...
- iOS开发之复制字符串到剪贴板
概述 一般有邀请复制链接需求功能,把字符串复制到系统剪贴板,供用户粘贴使用链接. 详细 代码下载:http://www.demodashi.com/demo/10714.html 一.主要思路 1.在 ...
- Android API之android.provider.ContactsContract.Data
android.provider.ContactsContract.Data Constants for the data table, which contains data points tied ...