In diesem Artikel wird hauptsächlich die einfache Implementierung der Array-Parameter-Übergabemethode von AngularJS vorgestellt. Der Herausgeber findet sie recht gut, daher werde ich sie jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Editor und werfen wir einen Blick darauf
Als ich AngularJS zum ersten Mal lernte, war ich sehr neugierig auf die Methode zur Übergabe von Array-Parametern (['a', 'b', function(a,b){}]) . Was ist das? Später, weil ich mit der Arbeit sehr beschäftigt war, vergaß ich dieses Thema allmählich.
Ich hatte heute nichts zu tun, also habe ich über dieses Problem nachgedacht. Der einfachste Weg ist, seinen Quellcode anzuzeigen. Leider ist mein E-Writing nicht gut, ganz zu schweigen von der Designlogik, allein das Lesen der englischen Kommentare bereitet mir Kopfschmerzen. Ich versuche hinter verschlossenen Türen ein Auto zu bauen und schließlich ein Auto zu bauen.
Da Sie Ihr eigenes Auto gebaut haben, müssen Sie ihm Ihren eigenen Namen geben (nehmen Sie den ersten Buchstaben des Pinyin Ihres Namens) und ihn mqyJs nennen. Das Folgende ist die Aufrufmethode zur Demonstration:
var app2 = mqyJs.applicationCreate([{ name: '直接传入SCOPE' }, '$hello', '$world', function($scope, $hello, $world) {
return $scope.name + ": " + $hello.name + $world.name;
}]);Nach dem Login kopieren
Der Kernteil lautet wie folgt:
//框架开设
var mqyJs = {
//服务注册
servicesList: {},
servicesRegister: function(name, value) {
this.servicesList[name] = value;
},
//应用创建
applicationList: [],
applicationCreate: function(_opts, _args) {
if (!_args) {
_args = _opts;
_opts = {}
}
_opts.scope = _opts.scope || {
name: 'SCOPE没有设置'
};
if (!(_args instanceof Array)) {
_args = ['$scope', _args];
}
if (typeof _args[_args.length - 1] != 'function') {
throw new Error('参数中没有指定运行函数');
}
_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 + ' 还没有注册');
}
_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];
}
};
//框架结束Nach dem Login kopieren
Über ServicesRegister können Sie Dienste registrieren, z $http von anglejs;
//插件开始
mqyJs.servicesRegister('$hello', {
name: '你好'
});
mqyJs.servicesRegister('$world', {
name: '世界'
});
mqyJs.servicesRegister('$china', {
name: '中国'
});
//插件结束Nach dem Login kopieren
Schließlich wird
/**
* 初始化完成后系统自动运行
* 比如网页中 放到 window.onload
*/
mqyJs.applicationList.map(function(app, index) {
console.log('自动调用 -> APP #' + index + ' -> ' + app.run());
});Nach dem Login kopieren
automatisch für alle registrierten Anwendungen ausgeführt. Versuchen Sie, den Code auszuführen, und die Parameter werden automatisch erkannt und perfekt ausgeführt.
Wenn $scope nicht übergeben wird, erstellt das Programm automatisch einen $scope.
//演示代码 开始
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('手动调用 -> RESULT -> ' + result);
});
//演示代码 结束Nach dem Login kopieren
Um das Testen zu erleichtern, schreiben Sie den Code erneut und kopieren Sie den folgenden Code zum Testen direkt in die Browserkonsole
//框架开设
var mqyJs = {
//服务注册
servicesList: {},
servicesRegister: function(name, value) {
this.servicesList[name] = value;
},
//应用创建
applicationList: [],
applicationCreate: function(_opts, _args) {
if (!_args) {
_args = _opts;
_opts = {}
}
_opts.scope = _opts.scope || {
name: 'SCOPE没有设置'
};
if (!(_args instanceof Array)) {
_args = ['$scope', _args];
}
if (typeof _args[_args.length - 1] != 'function') {
throw new Error('参数中没有指定运行函数');
}
_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 + ' 还没有注册');
}
_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];
}
};
//框架结束
//插件开始
mqyJs.servicesRegister('$hello', {
name: '你好'
});
mqyJs.servicesRegister('$world', {
name: '世界'
});
mqyJs.servicesRegister('$china', {
name: '中国'
});
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('手动调用 -> RESULT -> ' + result);
});
//插件结束
mqyJs.applicationList.map(function(app, index) {
console.log('自动调用 -> APP #' + index + ' -> ' + app.run());
});Nach dem Login kopieren
Das obige ist der detaillierte Inhalt vonAnalysieren der Parameterübergabemethode des AngularJS-Arrays. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
