写出更易懂的代码(一)

今天周日，外面天气不好，舍友出去跟MM约会了，我一个人独自在家，逛逛园子。

 

发现一篇好文《javascript 杂谈之哪种写法你更喜欢？》，其中有一个代码，是模仿jQuery写法的：

虽然代码写得很不错，但是是不是仍对立面无数个yQuery看得很头晕？

好，为了更清晰看懂代码，我们将其核心抽出来，如下：

(function(){
	var yQuery = (function(){
		var yQuery = function(){
			return yQuery.fn.init();
		};
		yQuery.fn = yQuery.prototype = {
			init:function(){
				return this;
			}
		};
		return yQuery;
	})();
	window.yQuery = window.$ = yQuery();
})();

好，仍是一堆yQuery，估计这段浓缩后的代码会让你看得更加困惑。这段代码有两重闭包，其实里面有一些函数名没必要使用“yQuery”的，那我们替换一下看看？

(function(){
	var an_init_function = (function(){
		var yCore = function(){
			return yCore.fn.init();
		};
		yCore.fn = yCore.prototype = {
			init:function(){
				return this;
			}
		};
		return yCore;
	})();
	window.yQuery = window.$ = an_init_function();
})();

我将第一层闭包里的yQuery函数改名为“an_init_function”，第二层闭包里面的函数改名为yCore。以上代码替换后，是不是觉得稍微清晰了一点呢？

好了，那我们开始分析这段代码吧。

 

 

闭包

闭包有两种常见的写法，一种是通过返回值将api交付给外部：

var obj = (function(){
	return function(){
		alert('done!');
	};
})();

obj();

 

另一种是利用window或其他全局对象将api抛给外部：

(function(){
	var _test = function(){
		alert('done!');
	};
	
	window.test = _test;
})();

test();

 

 

yQuery的第一层闭包使用的是后面一种写法：

(function(){
	var an_init_function = ......
	window.yQuery = window.$ = an_init_function();
})();

我见很多JS代码都是使用后面一种写法，至于有什么特殊的好处我也不明白，但是我认为从阅读上来说后一种写法更易懂。

 

再看第二层闭包：

var an_init_function = (function(){
	var yCore = function(){
		return yCore.fn.init();
	};
	yCore.fn = yCore.prototype = {
		init:function(){
			return this;
		}
	};
	return yCore;
})();

当执行 an_init_function() 时，实际上是执行了 return yCore.fn.init() 这句代码。

init这个函数是干什么事情的呢？它只是将yCore返回而已。

你可能会憋不住了，说：这不是兜圈了吗？如果只是想得到一个对象，写成这样不是更简单吗：

(function(){
	var an_init_function = function(){
		return {};
	};
	window.yQuery = window.$ = an_init_function();
})();

这里我一开始也没看懂，作者也没有给出解释说明。

想了一会，觉得可能这样写是为了得到一个fn属性，并将其指向prototype：

yCore.fn = yCore.prototype

大家都知道jQuery中的 $.fn 是专门用于扩展函数的。

 

好了，现在读懂了核心代码，那剩余的代码应该没啥问题了，或者你可以参考这篇文章。

 

这片文章虽然名为“写出更易懂的代码”，但是貌似从一开篇就走题了，^o^，整篇都是在阅读代码而已。所以我给文章标题加了个（一），打算以后写成系列文章吧。

 

总的来说，我觉得javascript代码的写法有很多诡异的地方，因此我个人不建议为了节省几行代码而采用一些很怪异的写法，除非是这种写法有更高的运行效率。毕竟相对于动辄几十K的图片来说，多几十行JS代码几乎不会影响到网络带宽。