AngularJS双向绑定和依赖反转实例详解


Posted in Javascript onApril 15, 2017

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>

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
Ucren Virtual Desktop V2.0
Nov 07 Javascript
用jQuery技术实现Tab页界面之二
Sep 21 Javascript
javascript 当前日期转化为中文的实现代码
May 13 Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
Apr 13 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
May 30 Javascript
JS实现touch 点击滑动轮播实例代码
Jan 19 Javascript
关于react-router的几种配置方式详解
Jul 24 Javascript
node+koa实现数据mock接口的方法
Sep 20 Javascript
基于ionic实现下拉刷新功能
May 10 Javascript
vue+element-ui+axios实现图片上传
Aug 20 Javascript
基于JS实现父组件的请求服务过程解析
Oct 14 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 Vue.js
JavaScript简单计算人的年龄示例
Apr 15 #Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
Apr 14 #Javascript
微信小程序动态的加载数据实例代码
Apr 14 #Javascript
JAVA中截取字符串substring用法详解
Apr 14 #Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 #jQuery
JavaScript实现的选择排序算法实例分析
Apr 14 #Javascript
简单实现JS上传图片预览功能
Apr 14 #Javascript
You might like
php 购物车实例(申精)
2009/05/11 PHP
php批量删除超链接的实现方法
2015/10/19 PHP
详解PHP发送邮件知识点
2018/05/06 PHP
TFDN图片播放器 不错自动播放
2006/10/03 Javascript
js实现兼容IE6与IE7的DIV高度
2010/05/13 Javascript
js中的值类型和引用类型小结 文字说明与实例
2010/12/12 Javascript
JavaScript 选中文字并响应获取的实现代码
2011/08/28 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
2016/01/23 Javascript
JavaScript的模块化开发框架Sea.js上手指南
2016/05/12 Javascript
深入浅析JS Function()构造函数
2016/08/22 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
2016/11/24 Javascript
nodejs超出最大的调用栈错误问题
2017/12/27 NodeJs
javaScript强制保留两位小数的输入数校验和小数保留问题
2018/05/09 Javascript
详解AngularJS 过滤器的使用
2018/06/02 Javascript
在vue中v-bind使用三目运算符绑定class的实例
2018/09/29 Javascript
JavaScript显式数据类型转换详解
2019/03/18 Javascript
jquery更改元素属性attr()方法操作示例
2020/05/22 jQuery
从表单校验看JavaScript策略模式的使用详解
2020/10/17 Javascript
[05:31]DOTA2英雄梦之声_第04期_光之守卫
2014/06/23 DOTA
python机器学习实战之树回归详解
2017/12/20 Python
在python中使用requests 模拟浏览器发送请求数据的方法
2018/12/26 Python
Python中extend和append的区别讲解
2019/01/24 Python
OpenCV图像颜色反转算法详解
2019/05/13 Python
利用python numpy+matplotlib绘制股票k线图的方法
2019/06/26 Python
python实现的批量分析xml标签中各个类别个数功能示例
2019/12/30 Python
Python实现密钥密码(加解密)实例详解
2020/04/26 Python
python Socket网络编程实现C/S模式和P2P
2020/06/22 Python
Python如何实现线程间通信
2020/07/30 Python
加拿大廉价机票预订网站:CheapOair.ca
2018/03/04 全球购物
SQL Server的固定数据库角色都有哪些?对应的服务器权限有哪些?
2013/05/18 面试题
高中生毕业自我鉴定
2013/10/10 职场文书
数学教研活动总结
2014/07/02 职场文书
航海技术专业毕业生推荐信
2014/07/09 职场文书
颐和园的导游词
2015/01/30 职场文书
Python中 range | np.arange | np.linspace三者的区别
2022/03/22 Python
详解Alibaba Java诊断工具Arthas查看Dubbo动态代理类
2022/04/08 Java/Android