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构建页面的DOM节点结构的实现代码
Dec 09 Javascript
js如何取消事件冒泡
Sep 23 Javascript
详解JavaScript中的forEach()方法的使用
Jun 08 Javascript
在页面中输出当前客户端时间javascript实例代码
Mar 02 Javascript
JavaScript中instanceof运算符的使用示例
Jun 08 Javascript
jQuery获取radio选中项的值实例
Jun 18 Javascript
vue2.0.js的多级联动选择器实现方法
Feb 09 Javascript
JS实现仿微信支付弹窗功能
Jun 25 Javascript
详解npm 配置项registry修改为淘宝镜像
Sep 07 Javascript
使用react context 实现vue插槽slot功能
Jul 18 Javascript
vue setInterval 定时器失效的解决方式
Jul 30 Javascript
JS实现放大镜效果
Sep 21 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
PHP把JPEG图片转换成Progressive JPEG的方法
2014/06/30 PHP
简单谈谈php浮点数精确运算
2016/03/10 PHP
PHP PDO数据库操作预处理与注意事项
2019/03/16 PHP
PHP判断是否微信访问的方法示例
2019/03/27 PHP
Javascript 面向对象 命名空间
2010/05/13 Javascript
javascript Array.prototype.slice使用说明
2010/10/11 Javascript
最简单的js图片切换效果实现代码
2011/09/24 Javascript
一个不错的js html页面倒计时可精确到秒
2014/10/22 Javascript
javascript实现博客园页面右下角返回顶部按钮
2015/02/22 Javascript
JQuery中基础过滤选择器用法实例分析
2015/05/18 Javascript
JavaScript实现简单的星星评分效果
2017/05/18 Javascript
vue使用axios跨域请求数据问题详解
2017/10/18 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
2018/03/09 jQuery
animate.css在vue项目中的使用教程
2018/08/05 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
2018/10/23 Javascript
vue中promise的使用及异步请求数据的方法
2018/11/08 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
2019/04/15 Javascript
LayUi使用switch开关,动态的去控制它是否被启用的方法
2019/09/21 Javascript
Jquery滑动门/tab切换实现方法完整示例
2020/06/05 jQuery
跟老齐学Python之传说中的函数编写条规
2014/10/11 Python
TensorFlow实现创建分类器
2018/02/06 Python
Python实现连接MySql数据库及增删改查操作详解
2019/04/16 Python
在Django admin中编辑ManyToManyField的实现方法
2019/08/09 Python
kafka-python 获取topic lag值方式
2019/12/23 Python
CSS3中的注音对齐属性ruby-align用法指南
2016/07/01 HTML / CSS
美国著名珠宝品牌之一:Jared The Galleria Of Jewelry
2016/10/01 全球购物
New Balance法国官方网站:购买鞋子和服装
2019/09/01 全球购物
JoJo Maman Bébé爱尔兰官网:英国最受欢迎的精品母婴品牌
2020/12/20 全球购物
企业职业病防治方案
2014/05/29 职场文书
个人批评与自我批评范文
2014/10/17 职场文书
党员群众路线教育实践活动学习笔记
2014/11/05 职场文书
市级三好学生评语
2014/12/29 职场文书
小学开学典礼新闻稿
2015/07/17 职场文书
数据结构课程设计心得体会
2016/01/15 职场文书
关于Python中*args和**kwargs的深入理解
2021/08/07 Python
Win11 S Mode版本泄露 正式上线后叫做Windows 11 SE
2021/11/21 数码科技