AngularJS雙向綁定和依賴(lài)反轉(zhuǎn)實(shí)例詳解
更新時(shí)間：2017年04月15日 17:00:18 投稿：lqh
這篇文章主要介紹了AngularJS雙向綁定和依賴(lài)反轉(zhuǎn)實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下
AngularJS雙向綁定和依賴(lài)反轉(zhuǎn)
一、雙向綁定：
UI<-->數(shù)據(jù)
數(shù)據(jù)->UI （數(shù)據(jù)改變UI跟著變）
UI->數(shù)據(jù) （UI改變數(shù)據(jù)跟著變）
數(shù)據(jù)改變->UI改變?cè)恚?/strong>
監(jiān)聽(tīng)數(shù)據(jù)是否改變，如果改變更新UI數(shù)據(jù)。
UI改變->數(shù)據(jù)改變?cè)恚?/strong>
<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值改變數(shù)據(jù)改變
a = oTxt.value;
}
}
</script>
</body>
</html>
二、依賴(lài)注入：
函數(shù)可以自己決定需要什么數(shù)據(jù)或者多小個(gè)數(shù)據(jù)，而不是外面?zhèn)魇裁淳陀檬裁础?/p>
2.1、調(diào)用者決定給多小個(gè)參數(shù)
<script>
function show(a,b,c){
console.log(arguments.length);
}
show(1); //調(diào)用者只給1個(gè)參數(shù)，調(diào)用者決定參數(shù)的給予。
</script>
2.2、依賴(lài)注入（依賴(lài)反轉(zhuǎn)）：函數(shù)要求要多小參數(shù)，就給多小。 就像show(a,b,c)要求3個(gè)參數(shù)
<script>
function show(a,b,c){
console.log(arguments.length);
}
var scope = {a:12,b:15,c:99,qq:55,i:99}; //假設(shè)是函數(shù)需要的參數(shù)
//實(shí)現(xiàn)依賴(lài)反轉(zhuǎn)二個(gè)步驟
//1、知道show要什么參數(shù)
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、給它相應(yīng)值
var args=[];
for(var i=0;i<arr.length;i++){
args[i]=scope[arr[i]];
}
console.log(args);
show.apply(null,args);
</script>
感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！
您可能感興趣的文章:
- 詳解Vue.js之視圖和數(shù)據(jù)的雙向綁定(v-model)
- JS數(shù)據(jù)雙向綁定原理與用法實(shí)例分析
- Nuxt.js 數(shù)據(jù)雙向綁定的實(shí)現(xiàn)
- Vue.js單向綁定和雙向綁定實(shí)例分析
- Vue.js 踩坑記之雙向綁定
- js最簡(jiǎn)單的雙向綁定實(shí)例講解
- JS原生數(shù)據(jù)雙向綁定實(shí)現(xiàn)代碼
- jquery,js簡(jiǎn)單實(shí)現(xiàn)類(lèi)似Angular.js雙向綁定
- 使用Object.defineProperty實(shí)現(xiàn)簡(jiǎn)單的js雙向綁定
- 輕松實(shí)現(xiàn)javascript數(shù)據(jù)雙向綁定
- js實(shí)現(xiàn)視圖和數(shù)據(jù)雙向綁定的方法分析
相關(guān)文章
詳解使用KeyValueDiffers檢測(cè)Angular對(duì)象的變化
這篇文章主要為大家介紹了KeyValueDiffers檢測(cè)Angular對(duì)象的變化使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
這篇文章主要為大家詳細(xì)介紹了AngularJS 避繁就簡(jiǎn)的路由的相關(guān)資料，感興趣的小伙伴們可以參考一下2016-07-07
在我們創(chuàng)建一個(gè)angularJS應(yīng)用的時(shí)候，菜單往往往是不可或缺的元素之一。接下來(lái)通過(guò)本文給大家介紹AngularJS動(dòng)態(tài)菜單操作指令，感興趣的朋友一起學(xué)習(xí)吧2017-04-04
AngualrJs2官方方法是以@Input,@Output來(lái)實(shí)現(xiàn)組件間的相互傳值，而且組件之間必須父子關(guān)系，下面給大家提供一個(gè)簡(jiǎn)單的方法，實(shí)現(xiàn)組件間的傳值，不僅僅是父子組件，跨模塊的組件也可以實(shí)現(xiàn)傳值2017-05-05
Angular5中調(diào)用第三方庫(kù)及jQuery的添加的方法
這篇文章主要介紹了Angular5中調(diào)用第三方庫(kù)及jQuery的添加的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
詳解AngularJS如何實(shí)現(xiàn)跨域請(qǐng)求
跨域請(qǐng)求一直是網(wǎng)頁(yè)編程中的一個(gè)難題，在過(guò)去，絕大多數(shù)人都傾向于使用JSONP來(lái)解決這一問(wèn)題。不過(guò)現(xiàn)在，我們可以考慮一下W3C中一項(xiàng)新的特性——CORS（Cross-Origin Resource Sharing）了。2016-08-08
這篇文章主要介紹了AngularJS 模塊化，這里整理了詳細(xì)的資料及簡(jiǎn)單實(shí)例代碼，實(shí)現(xiàn)效果圖，有需要的小伙伴可以參考下2016-09-09
AngularJS創(chuàng)建一個(gè)上傳照片的指令實(shí)例代碼
這篇文章主要介紹了AngularJS創(chuàng)建一個(gè)上傳照片的指令實(shí)例代碼,需要的朋友可以參考下2018-02-02
這篇文章主要和大家一起探索模擬angular的雙向綁定，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
詳解Angular2中的編程對(duì)象Observable
大家都是在Reactive Extensions for Javascript誕生于幾年前，隨著angular2正式版的發(fā)布，它將會(huì)被更多開(kāi)發(fā)者所認(rèn)知。這篇文章我們來(lái)詳細(xì)介紹RxJs提供的Observable對(duì)象，有需要的朋友們可以參考借鑒。2016-09-09