PhoneGap中文网

 找回密码
 立即注册
查看: 18644|回复: 0
打印 上一主题 下一主题

angularjs的数组传参如何实现的?

[复制链接]

87

主题

87

帖子

327

积分

中级会员

Rank: 3Rank: 3

积分
327
跳转到指定楼层
楼主
发表于 2017-8-13 11:17:00 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
本帖最后由 w8484855@qq.com 于 2017-8-13 11:19 编辑

本文和大家分享的主要是angularjs的数组传参方式相关内容,一起来看看吧,希望对大家学习angularjs有所帮助。
今天闲来无事,有想到了这个问题。最简单的方法就是查看他的源代码。无奈本人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());
});
来源:苗启源的部落格
it营
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐 上一条 /1 下一条

ionic4视频教程

Archiver|手机版|小黑屋| PhoneGap中文网 ( 京ICP备13027796号-1 )  

GMT+8, 2024-12-22 16:10 , Processed in 0.077306 second(s), 44 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表