溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
初學 angularjs時，對 數組傳參方式感到很好奇（[‘a', ‘b', function(a,b){}]），它到底怎么實現的呢？后來由于工作很忙，對這個問題也就慢慢忘記了。
今天閑來無事，有想到了這個問題。最簡單的方法就是查看他的源代碼。無奈本人E文不好，不說看他的設計邏輯，僅看英文注釋就夠我頭疼了。嘗試閉門造車，最終竟然把車造出來了。
既然自己造的車，就要帶上自己的名（取姓名拼音第一個字母），就叫他mqyJs把，下面是演示的調用方法：
var app2 = mqyJs.applicationCreate([{ name: '直接傳入SCOPE' }, '$hello', '$world', function($scope, $hello, $world) {
return $scope.name + ": " + $hello.name + $world.name;
}]);
核心部分如下：
//框架開設
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];
}
};
//框架結束
通過 servicesRegister，可以注冊 服務，比如 angularjs 的 $http；
//插件開始
mqyJs.servicesRegister('$hello', {
name: '你好'
});
mqyJs.servicesRegister('$world', {
name: '世界'
});
mqyJs.servicesRegister('$china', {
name: '中國'
});
//插件結束
最終，對所有注冊的應用，自動執行
/**
* 初始化完成后系統自動運行
* 比如網頁中 放到 window.onload
*/
mqyJs.applicationList.map(function(app, index) {
console.log('自動調用 -> APP #' + index + ' -> ' + app.run());
});
嘗試跑一下代碼，能自動識別參數類型，完美執行。
不傳入 $scope 時，程序會自動創建一個 $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);
});
//演示代碼 結束
為了方便測試，再把代碼重新寫一遍，直接復制下面的代碼到 瀏覽器控制臺即可測試
//框架開設
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());
});
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
