js根据字符串调用函数(三种实现方式)

三种方式封装

1.eval(str)-----eval方法效率低,而且不安全

eval(str) 函数可计算某个字符串,并执行其中的的 JavaScript 代码。注意,eval方法的参数只能是字符串,如果传递的不是字符串的话,会直接返回传值,而非调用。由于eval方法效率低,而且不安全,不建议使用。

function test(str){
    alert(str);
}
var a='test';
var b='345';
eval(a+'('+123+')');
eval(a+'(b)');

  1. 函数在js里面可以被保存在对象中,因此通过对象的属性访问,调用字符串方法。
    –(我就是根据这个封装的)

1.全局函数声明和全局变量会变成全局对象的属性。全局对象在进入执行上下文前创建的一个唯一的对象。在浏览器运行环境里,全局对象就是window对象
2.属性访问可以使用 点标记法 或者括号标记法。其中使用点访问需要标识符,二括号访问使用的是标识符对应的字符串

function test(str){
    alert(str);
}
 
var param='哈哈';
window['test'](param);//直接执行
window['test'].call(this,'param');

  1. 和2一样,不过全部集成在一个对象中,每次访问的时候,都调用这个对象的对象的方法

封装函数

依赖 underscore.js
代码

	//模拟js 通过字符串执行函数
	_.mixin({
		/**基于字符串获取 函数名称和参数对象 //不准持有无效的引号
		 * 示例  test(1,5,6,7);
		 * @params str  字符串函数
		 * 
		 */
		getFunctionObj: function(str) {

			var functionObj = {
				functionName: "",
				functionParams: []
			}
			if(_.isString(str)) {
				if(str.indexOf("(") != -1 && str.indexOf(")") != -1) {
					var arr = str.split("(");
					functionObj.functionName = arr[0];
					arr = arr[1].split(")");
					if(!_.isEmpty(arr[0])) {
						functionObj.functionParams = arr[0].split(",");
					}
				} else { //兼容未命名() 的函数
					functionObj.functionName = str;
				}
			}
			return functionObj;
		},
		/* 基于字符串获取当前window的对象函数对象
		 * @params str  字符串函数
		 * @parmas  falg   默认false,
		 * true 立即调用这个函数,false 返回函数对象及其函数参数
		 */
		getFunction: function(str, falg) {
			if(_.isString(str)) {
				var functionObj = _.getFunctionObj(str);
				var strFunction = functionObj.functionName;
				if(!_.isEmpty(strFunction)) {
					var arr = strFunction.split(".");
					strFunction = window[arr[0]];
					for(var i = 1, len = arr.length; i < len; i++) {
						if(!strFunction && !_.isFunction(strFunction) && !_.isObject(strFunction)) {
							return null;
						}
						strFunction = strFunction[arr[i]];
					}
					if(_.isFunction(strFunction)) {
						if(falg) {
							strFunction.apply(strFunction, functionObj.functionParams); //测试是否是方法可以测试出来
						}
						functionObj.fun = strFunction;
						return functionObj;
					}
				}
				return null;
			}
			return str;
		}
	});

调用方式

true 为 立即执行, false为 获取函数对象,自己手动执行
手动执行
	 var obj =  _.getFunction("test",false); //fasle可以不填
	 _.exeFunction(obj);

1.支持默认全局函数调用

//测试全局函数
			function test() {
				alert("test");
			}
	_.getFunction("test",true);

2.支持对象函数调用

			//测试对象函数
			var obj = {
				test: function() {
					alert("obj.test");
				}
			}
			_.getFunction("obj.test",true);

3.支持jquery插件函数调用

			//测试jquery插件函数
			;(function($) {
				$.extend({
					lay: {
						alert: function() {
							alert("$");
						}
					}
				})
			})(jQuery, undefined);
			_.getFunction("$.lay.alert",true);

4.支持基础全局函数含简单参数使用

			//测试基础函数参数
			function test2(a, b, c) {
				console.log("arr" + a + b + c);
				alert("test2" + a + b + c);
			}
				_.getFunction("test2(1,2,3);",true);

不支持

//局部变量函数
		  var  test12 = function(){
		  	alert(test12);
		  }
		  _.getFunction("test12();",true);
			//测试复杂函数参数
			var a = $(document);
			_.getFunction("test2("+a+",2,3);",true);
			//

单元测试

	//写好单元测试 
			//测试全局函数
			function test() {
				alert("test");
			}
			 _.getFunction("test",true);
			 	//测试手动执行
			 var obj =  _.getFunction("test",false); //fasle可以不填
			 _.exeFunction(obj);
		
			//测试对象函数
			var obj = {
				test: function() {
					alert("obj.test");
				}
			}
			_.getFunction("obj.test",true);
			//测试jquery插件函数
			;(function($) {
				$.extend({
					lay: {
						alert: function() {
							alert("$");
						}
					}
				})
			})(jQuery, undefined);
			_.getFunction("$.lay.alert",true);
			//测试基础函数参数
			function test2(a, b, c) {
				console.log("arr" + a + b + c);
				alert("test2" + a + b + c);
			}
				_.getFunction("test2(1,2,3);",true);
		  //以下不支持的
		  //局部变量函数
		  var  test12 = function(){
		  	alert(test12);
		  }
		  _.getFunction("test12();",true);
			//测试复杂函数参数
			var a = $(document);
			_.getFunction("test2("+a+",2,3);",true);
			//
								

		
			//test.apply(null);				

参考博客

https://blog.csdn.net/xingmeiok/article/details/82901068

  • 3
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值