(web前端)js的灵活性

js中var值类型:

var a;
	console.log("typeof a:", typeof a);    //结果为undefined
	a = undefined;
	console.log("typeof a:", typeof a);	//结果为undefined

	a = 100;
	console.log("typeof a:", typeof a);	//结果为number
	console.log("a instanceof Number:", a instanceof Number);    //结果为false
	a = "2.1";
	console.log("typeof a:", typeof a);	//结果为string
	console.log("a instanceof String:", a instanceof String);				//结果为false
	a = true;
	console.log("typeof a:", typeof a);	//结果为boolean
	console.log("a instanceof Boolean:", a instanceof Boolean);		//结果为false
	a = document.getElementById("btnHobbyAll");
	console.log("typeof a:", typeof a);	//结果为object
	console.log("a instanceof Object:", a instanceof Object);			//结果为true
	a = null;
	console.log("typeof a:", typeof a);	//结果为object

	a = [1, 2, 3];
	console.log("typeof a:", typeof a);	//结果为object
	console.log("a instanceof Array:", a instanceof Array);				//结果为true

在js中可以定义类似结构体的值:

var obj = {
		num : 100,
		s : "abc",
		sex : true,
		"abc" : function () {
			return 1;
		},
	};

对其调用方法:

console.log("obj.num:", obj.num);
console.log('obj["num"]:', obj["num"]);

但上述两种对于定义的函数无法调用,对函数需要如下:

var res = obj["abc"]();
var res = obj.abc();

对结构体内未定义的成员进行调用,值为undefined
在js中,undefined在逻辑判断中类似于false,切在js的逻辑判断中,如||运算,前者真将会对该运算进行夹断,直接返回||前的值。

js中的等号:
普通==:普通值判断,不需要类型相同,如"1"==1=true
严格三等号:要求值、类型都相同

获取控件函数:

function getEle(str) {
	if (arguments.length != 1 || typeof str != 'string') {
			throw Error("参数个数或类型非法!");
		}
	
		var firstAlpha = str.substring(0, 1);
	
		var ele;
	
		if (firstAlpha == "#") {
			ele = document.getElementById(str.substring(1));
		} else if (firstAlpha == '@') {
			ele = document.getElementsByName(str.substring(1));
		} else if (firstAlpha == '*') {
			ele = document.getElementsByTagName("*");
		} else if (firstAlpha == '.') {
			ele = document.getElementsByClassName(str.substring(1));
		} else {
			ele = document.getElementsByTagName(str);
		}
		return ele;
}

上述是简单的逻辑判断,但并未用到js的灵活性优势。

结合上述结构体,对组件获取进行一些优化:

var funs = {
		"*" : function () {
			return document.getElementsByTagName("*");
		},
		"#" : function (arg) {
			return document.getElementById(arg.substring(1));
		},
		"." : function (arg) {
			return document.getElementsByClassName(arg.substring(1));
		},
		"@" : function (arg) {
			return document.getElementsByName(arg.substring(1));
		},
	};

	var f = funs[str.substring(0,1)];
	f = f || function (arg) {
		return document.getElementsByTagName(arg);
	}

	return f(str);

上述给函数传入第一个字符,根据第一个字符调用相应函数。分别为:1.根据标签名获取控件 2.根据id获取控件 3.根据调用类名获取控件 4.根据名字获取控件

接着直接将函数放到返回值内调用:

function getEle(str) {
	/*
	getEle("*")			获取所有元素
	getEle("#xxx")		获取以xxx为id值的元素
	getEle(".yyy")		获取包含class的值为yyy的元素
	getEle("tagName")	获取名为tagName的标签元素
	getEle("@zzz")		获取name值为zzz的元素
	*/
	return ({
		"*" : function () {
			return document.getElementsByTagName("*");
		},
		"#" : function (arg) {
			return document.getElementById(arg.substring(1));
		},
		"." : function (arg) {
			return document.getElementsByClassName(arg.substring(1));
		},
		"@" : function (arg) {
			return document.getElementsByName(arg.substring(1));
		},
	}[str.substring(0, 1)] || function (arg) {
		return document.getElementsByTagName(arg);
	})(str);
};

这一串首先隐藏性定义了一个值,包括了4个函数,该值会根据传入的str第一个字符进行判断,当调用失败返回undefined,会调用备用函数。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

魔幻音

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值