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 相关文章推荐
js获取单选按钮的数据
Nov 27 Javascript
理解Javascript_05_原型继承原理
Oct 13 Javascript
jQuery弹性滑动导航菜单实现思路及代码
May 02 Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
Aug 13 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
Nov 19 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
Mar 20 Javascript
jQuery中:visible选择器用法实例
Dec 30 Javascript
基于javascript实现右下角浮动广告效果
Jan 08 Javascript
JS常用加密编码与算法实例总结
Dec 22 Javascript
微信小程序实战之运维小项目
Jan 17 Javascript
JavaScript实现多重继承的方法分析
Jan 09 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
Jul 31 Javascript
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
我的论坛源代码(九)
2006/10/09 PHP
Linux下PHP加速器APC的安装与配置笔记
2014/10/24 PHP
使用PHP生成PDF方法详解
2015/01/23 PHP
常用的php图片处理类(水印、等比缩放、固定高宽)分享
2015/06/19 PHP
php版微信公众平台开发之验证步骤实例详解
2016/09/23 PHP
PHP接收App端发送文件流的方法
2016/09/23 PHP
PHP+redis实现微博的推模型案例分析
2019/07/10 PHP
function, new function, new Function之间的区别
2007/03/08 Javascript
基于jQuery试卷自动排版系统
2010/07/18 Javascript
javascript跨域刷新实现代码
2011/01/01 Javascript
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
2011/10/23 Javascript
使用nodejs、Python写的一个简易HTTP静态文件服务器
2014/07/18 NodeJs
jquery单行文字向上滚动效果的实现代码
2014/09/05 Javascript
浏览器缩放检测的js代码
2014/09/28 Javascript
JS模式之单例模式基本用法
2015/06/30 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
2016/10/27 Javascript
Bootstrap路径导航与分页学习使用
2017/02/08 Javascript
详解Vue-Cli 异步加载数据的一些注意点
2017/08/12 Javascript
Angular学习教程之RouterLink花式跳转
2018/05/03 Javascript
socket在egg中的使用实例代码详解
2019/05/30 Javascript
深入探究Python中变量的拷贝和作用域问题
2015/05/05 Python
python数组复制拷贝的实现方法
2015/06/09 Python
对比Python中__getattr__和 __getattribute__获取属性的用法
2016/06/21 Python
Python实现的基数排序算法原理与用法实例分析
2017/11/23 Python
python打包exe开机自动启动的实例(windows)
2019/06/28 Python
远程部署工具Fabric详解(支持Python3)
2019/07/04 Python
centos7之Python3.74安装教程
2019/08/15 Python
Python的互斥锁与信号量详解
2019/09/12 Python
关于numpy.where()函数 返回值的解释
2019/12/06 Python
CSS3实现点击放大的动画实例代码
2017/02/27 HTML / CSS
详解Html5 Canvas画线有毛边解决方法
2018/03/01 HTML / CSS
摩飞电器俄罗斯官方网站:Morphy Richards俄罗斯
2020/07/30 全球购物
教师节促销活动方案
2014/02/14 职场文书
校园环保标语
2014/06/13 职场文书
纪检干部个人对照检查材料
2014/09/23 职场文书
深入理解java.lang.String类的不可变性
2021/06/27 Java/Android