angularjs的数组传参方式的简单实现

初学 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','$china',$china) {
    return $scope.name + ": " + $hello.name + $china.name;
}]);
 
 
var app2 = mqyJs.applicationCreate([{ name: '直接传入SCOPE' },$world) {
    return $scope.name + ": " + $hello.name + $world.name;
}]);
 
 
var app3 = mqyJs.applicationCreate([{ name: 'world也直接传入' },{ name: '地球' },$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: {},_args));
            }
        }) - 1];
    }
};
//框架结束
//插件开始
mqyJs.servicesRegister('$hello',{
    name: '中国'
});
     
var app = mqyJs.applicationCreate(['$scope',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());
});

angularjs的数组传参方式的简单实现

相关文章