（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，会调用备用函数。