angularjs的數組傳參方式的簡單實現

時間 2019-11-10

原文原文鏈接

初學 angularjs時，對數組傳參方式感到很好奇（[‘a’, ‘b’, function(a,b){}]），它到底怎麼實現的呢？後來因爲工做很忙，對這個問題也就慢慢忘記了。angularjs

今天閒來無事，有想到了這個問題。最簡單的方法就是查看他的源代碼。無奈本人E文很差，不說看他的設計邏輯，僅看英文註釋就夠我頭疼了。嘗試閉門造車，最終居然把車造出來了。數組

既然本身造的車，就要帶上本身的名（取姓名拼音第一個字母），就叫他mqyJs把，下面是演示的調用方法：瀏覽器

var app2 = mqyJs.applicationCreate([{ name: '直接傳入SCOPE' }, '$hello', '$world', function($scope, $hello, $world) {
    return $scope.name + ": " + $hello.name + $world.name;
}]);

核心部分以下：app

//框架開設
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);
});
//演示代碼 結束

爲了方便測試，再把代碼從新寫一遍，直接複製下面的代碼到瀏覽器控制檯便可測試this

//框架開設
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());
});