詳解angularjs的數(shù)組傳參方式的簡(jiǎn)單實(shí)現(xiàn)
更新時(shí)間：2017年07月28日 08:25:39 作者：苗啟源
本篇文章主要介紹了angularjs的數(shù)組傳參方式的簡(jiǎn)單實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
初學(xué) angularjs時(shí)，對(duì) 數(shù)組傳參方式感到很好奇（[‘a(chǎn)', ‘b', function(a,b){}]），它到底怎么實(shí)現(xiàn)的呢？后來(lái)由于工作很忙，對(duì)這個(gè)問(wèn)題也就慢慢忘記了。
今天閑來(lái)無(wú)事，有想到了這個(gè)問(wèn)題。最簡(jiǎn)單的方法就是查看他的源代碼。無(wú)奈本人E文不好，不說(shuō)看他的設(shè)計(jì)邏輯，僅看英文注釋就夠我頭疼了。嘗試閉門(mén)造車，最終竟然把車造出來(lái)了。
既然自己造的車，就要帶上自己的名（取姓名拼音第一個(gè)字母），就叫他mqyJs把，下面是演示的調(diào)用方法：
var app2 = mqyJs.applicationCreate([{ name: '直接傳入SCOPE' }, '$hello', '$world', function($scope, $hello, $world) {
return $scope.name + ": " + $hello.name + $world.name;
}]);
核心部分如下：
//框架開(kāi)設(shè)
var mqyJs = {
//服務(wù)注冊(cè)
servicesList: {},
servicesRegister: function(name, value) {
this.servicesList[name] = value;
},
//應(yīng)用創(chuàng)建
applicationList: [],
applicationCreate: function(_opts, _args) {
if (!_args) {
_args = _opts;
_opts = {}
}
_opts.scope = _opts.scope || {
name: 'SCOPE沒(méi)有設(shè)置'
};
if (!(_args instanceof Array)) {
_args = ['$scope', _args];
}
if (typeof _args[_args.length - 1] != 'function') {
throw new Error('參數(shù)中沒(méi)有指定運(yùn)行函數(shù)');
}
_args.map((arg, index) => {
if (typeof arg == 'string') {
if (arg === '$scope') {
_args[index] = _opts.scope;
} else {
if (!!arg && !(arg in this.servicesList)) {
throw new Error('插件：' + arg + ' 還沒(méi)有注冊(cè)');
}
_args[index] = this.servicesList[arg];
}
}
});
return this.applicationList[this.applicationList.push({
run: function(callback) {
if (typeof callback != 'function') {
callback = function(_opts) { return _opts; }
}
return callback(_args[_args.length - 1].apply(null, _args));
}
}) - 1];
}
};
//框架結(jié)束
通過(guò) servicesRegister，可以注冊(cè) 服務(wù)，比如 angularjs 的 $http；
//插件開(kāi)始
mqyJs.servicesRegister('$hello', {
name: '你好'
});
mqyJs.servicesRegister('$world', {
name: '世界'
});
mqyJs.servicesRegister('$china', {
name: '中國(guó)'
});
//插件結(jié)束
最終，對(duì)所有注冊(cè)的應(yīng)用，自動(dòng)執(zhí)行
/**
* 初始化完成后系統(tǒng)自動(dòng)運(yùn)行
* 比如網(wǎng)頁(yè)中 放到 window.onload
*/
mqyJs.applicationList.map(function(app, index) {
console.log('自動(dòng)調(diào)用 -> APP #' + index + ' -> ' + app.run());
});
嘗試跑一下代碼，能自動(dòng)識(shí)別參數(shù)類型，完美執(zhí)行。
不傳入 $scope 時(shí)，程序會(huì)自動(dòng)創(chuàng)建一個(gè) $scope。
//演示代碼 開(kāi)始
var app = mqyJs.applicationCreate(['$scope', '$hello', '$china', function($scope, $hello, $china) {
return $scope.name + ": " + $hello.name + $china.name;
}]);
var app2 = mqyJs.applicationCreate([{ name: '直接傳入SCOPE' }, '$hello', '$world', function($scope, $hello, $world) {
return $scope.name + ": " + $hello.name + $world.name;
}]);
var app3 = mqyJs.applicationCreate([{ name: 'world也直接傳入' }, '$hello', { name: '地球' }, function($scope, $hello, $world) {
return $scope.name + ": " + $hello.name + $world.name;
}]);
var app4 = mqyJs.applicationCreate(function($scope) {
return $scope.name;
});
var opts = {
scope: {
name: '自定義SCOPE'
}
};
var app5 = mqyJs.applicationCreate(opts, function($scope) {
return $scope.name;
});
app4.run(function(result) {
console.log('手動(dòng)調(diào)用 -> RESULT -> ' + result);
});
//演示代碼 結(jié)束
為了方便測(cè)試，再把代碼重新寫(xiě)一遍，直接復(fù)制下面的代碼到 瀏覽器控制臺(tái)即可測(cè)試
//框架開(kāi)設(shè)
var mqyJs = {
//服務(wù)注冊(cè)
servicesList: {},
servicesRegister: function(name, value) {
this.servicesList[name] = value;
},
//應(yīng)用創(chuàng)建
applicationList: [],
applicationCreate: function(_opts, _args) {
if (!_args) {
_args = _opts;
_opts = {}
}
_opts.scope = _opts.scope || {
name: 'SCOPE沒(méi)有設(shè)置'
};
if (!(_args instanceof Array)) {
_args = ['$scope', _args];
}
if (typeof _args[_args.length - 1] != 'function') {
throw new Error('參數(shù)中沒(méi)有指定運(yùn)行函數(shù)');
}
_args.map((arg, index) => {
if (typeof arg == 'string') {
if (arg === '$scope') {
_args[index] = _opts.scope;
} else {
if (!!arg && !(arg in this.servicesList)) {
throw new Error('插件：' + arg + ' 還沒(méi)有注冊(cè)');
}
_args[index] = this.servicesList[arg];
}
}
});
return this.applicationList[this.applicationList.push({
run: function(callback) {
if (typeof callback != 'function') {
callback = function(_opts) { return _opts; }
}
return callback(_args[_args.length - 1].apply(null, _args));
}
}) - 1];
}
};
//框架結(jié)束
//插件開(kāi)始
mqyJs.servicesRegister('$hello', {
name: '你好'
});
mqyJs.servicesRegister('$world', {
name: '世界'
});
mqyJs.servicesRegister('$china', {
name: '中國(guó)'
});
var app = mqyJs.applicationCreate(['$scope', '$hello', '$china', function($scope, $hello, $china) {
return $scope.name + ": " + $hello.name + $china.name;
}]);
var app2 = mqyJs.applicationCreate([{ name: '直接傳入SCOPE' }, '$hello', '$world', function($scope, $hello, $world) {
return $scope.name + ": " + $hello.name + $world.name;
}]);
var app3 = mqyJs.applicationCreate([{ name: 'world也直接傳入' }, '$hello', { name: '地球' }, function($scope, $hello, $world) {
return $scope.name + ": " + $hello.name + $world.name;
}]);
var app4 = mqyJs.applicationCreate(function($scope) {
return $scope.name;
});
var opts = {
scope: {
name: '自定義SCOPE'
}
};
var app5 = mqyJs.applicationCreate(opts, function($scope) {
return $scope.name;
});
app4.run(function(result) {
console.log('手動(dòng)調(diào)用 -> RESULT -> ' + result);
});
//插件結(jié)束
mqyJs.applicationList.map(function(app, index) {
console.log('自動(dòng)調(diào)用 -> APP #' + index + ' -> ' + app.run());
});
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- AngularJS ng-repeat數(shù)組有重復(fù)值的解決方法
- AngularJS中比較兩個(gè)數(shù)組是否相同
- AngularJS下對(duì)數(shù)組的對(duì)比分析
- angularJS利用ng-repeat遍歷二維數(shù)組的實(shí)例代碼
- mongoDB 多重?cái)?shù)組查詢(AngularJS綁定顯示 nodejs)
- Angular ng-repeat 對(duì)象和數(shù)組遍歷實(shí)例
- angular ng-repeat數(shù)組中的數(shù)組實(shí)例
- Angular.js中數(shù)組操作的方法教程
- Angular.js前臺(tái)傳list數(shù)組由后臺(tái)spring MVC接收數(shù)組示例代碼
- AngularJS遍歷獲取數(shù)組元素的方法示例
相關(guān)文章
angularjs的單選框+ng-repeat的實(shí)現(xiàn)方法
今天小編就為大家分享一篇angularjs的單選框+ng-repeat的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
AngularJS實(shí)現(xiàn)頁(yè)面定時(shí)刷新
本篇文章主要介紹了AngularJS實(shí)現(xiàn)頁(yè)面定時(shí)刷新，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03
詳解如何在Angular優(yōu)雅編寫(xiě)HTTP請(qǐng)求
這篇文章主要介紹了詳解如何在Angular優(yōu)雅編寫(xiě)HTTP請(qǐng)求，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
這篇文章主要介紹了Angularjs添加排序查詢功能的實(shí)例代碼,需要的朋友可以參考下2017-10-10
AngularJS雙向數(shù)據(jù)綁定原理之$watch、$apply和$digest的應(yīng)用
這篇文章主要介紹了AngularJS雙向數(shù)據(jù)綁定原理之$watch、$apply和$digest的應(yīng)用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-01-01
詳解使用KeyValueDiffers檢測(cè)Angular對(duì)象的變化
這篇文章主要為大家介紹了KeyValueDiffers檢測(cè)Angular對(duì)象的變化使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
Angular實(shí)現(xiàn)二級(jí)導(dǎo)航欄
這篇文章主要為大家詳細(xì)介紹了Angular實(shí)現(xiàn)二級(jí)導(dǎo)航欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
Angular 2.0+ 的數(shù)據(jù)綁定的實(shí)現(xiàn)示例
本篇文章主要介紹了Angular 2.0+ 的數(shù)據(jù)綁定的實(shí)現(xiàn)實(shí)例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
這篇文章主要為大家詳細(xì)了angular forEach方法遍歷源碼，forEach()方法用于遍歷對(duì)象或數(shù)組，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
angular+ionic 的app上拉加載更新數(shù)據(jù)實(shí)現(xiàn)方法
這篇文章主要介紹了angular+ionic 的app上拉加載更新數(shù)據(jù)實(shí)現(xiàn)方法，需要的的朋友參考下2017-01-01