AngularJS雙向綁定和依賴反轉(zhuǎn)實例詳解

發(fā)布時間：2020-08-22 06:54:00 來源：腳本之家閱讀：274 作者：lqh 欄目：web開發(fā)

AngularJS雙向綁定和依賴反轉(zhuǎn)

一、雙向綁定：

UI<-->數(shù)據(jù)

數(shù)據(jù)->UI （數(shù)據(jù)改變UI跟著變）

UI->數(shù)據(jù) （UI改變數(shù)據(jù)跟著變）

數(shù)據(jù)改變->UI改變原理：

監(jiān)聽數(shù)據(jù)是否改變，如果改變更新UI數(shù)據(jù)。

UI改變->數(shù)據(jù)改變原理：

<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>

二、依賴注入：

函數(shù)可以自己決定需要什么數(shù)據(jù)或者多小個數(shù)據(jù)，而不是外面?zhèn)魇裁淳陀檬裁础?/p>

2.1、調(diào)用者決定給多小個參數(shù)

<script>

function show(a,b,c){

console.log(arguments.length);

}

show(1); //調(diào)用者只給1個參數(shù)，調(diào)用者決定參數(shù)的給予。

</script>

2.2、依賴注入（依賴反轉(zhuǎn)）：函數(shù)要求要多小參數(shù)，就給多小。就像show(a,b,c)要求3個參數(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ù)

//實現(xiàn)依賴反轉(zhuǎn)二個步驟
//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>

感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！

向AI問一下細節(jié)

AngularJS雙向綁定和依賴反轉(zhuǎn)實例詳解

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽