[资料] 前端要给力之：代码可以有多烂？
!KissyUI是淘宝Kissy这个前端项目的一个群，龙藏同学在看完我在公司内网的“读烂代码系列”之后就在群里问呵：烂代码是怎么定义的？是呵，到底什么才算烂代码呢？这让我想到一件事，是另一个网友在gtalk上问我的一个问题：他需要a,b,c三个条件全真时为假，全假时也为假，请问如何判断。
接下来KissyUI群里的同学给出了很多答案：
view plaincopy to clipboardprint?
// 1. 圆心
if( a&&b&&c || !a&&!b&&!c){
return false
}
// 2. 龙藏
(a ^ b) & c
// 3. 愚公(我给gtalk上的提问者)的答案
(a xor b) or (a xor c)
// 4. 提问者自己的想法
(a + b + c) % 3
// 5. 云谦对答案4的改进版本
(!!a+!!b+!!c)%n
// 6. 拔赤
a ? (b?c:b) : (b?!b:!c)
// 7. 吴英杰
(a != b || b != c)
或
(!a != !b || !b != !c)
// 8. 姬光
var v = a&&b&&c;
if(!v){
return false;
}else if(v){
return false;
}else{
return true;
}
// 1. 圆心
if( a&&b&&c || !a&&!b&&!c){
return false
}
// 2. 龙藏
(a ^ b) & c
// 3. 愚公(我给gtalk上的提问者)的答案
(a xor b) or (a xor c)
// 4. 提问者自己的想法
(a + b + c) % 3
// 5. 云谦对答案4的改进版本
(!!a+!!b+!!c)%n
// 6. 拔赤
a ? (b?c:b) : (b?!b:!c)
// 7. 吴英杰
(a != b || b != c)
或
(!a != !b || !b != !c)
// 8. 姬光
var v = a&&b&&c;
if(!v){
return false;
}else if(v){
return false;
}else{
return true;
}
en... 确实，我没有完全验证上面的全面答案的有效性。因为如同龙藏后来强调的：“貌似我们是要讨论什么是烂代码？”的确，我们怎么才能把代码写烂呢？上面出现了种种奇异代码，包括原来提问者的那个取巧的：
view plaincopy to clipboardprint?
// 4. 提问者自己的想法
(a + b + c) % 3
// 4. 提问者自己的想法
(a + b + c) % 3
因为这个问题出现在js里面，存在弱类型的问题，即a、b、c可能是整数，或字符串等等，因此(a+b+c)%3这个路子就行不通了，所以才有了
view plaincopy to clipboardprint?
// 5. 云谦对答案4的改进版本
(!!a+!!b+!!c)%n
// 5. 云谦对答案4的改进版本
(!!a+!!b+!!c)%n
2、问题的泛化与求解：普通级别
如果把上面的问题改变一下：
- 如果不是a、b、c三个条件，而是两个以上条件呢？
- 如果强调a、b、c本身不一定是布尔值呢？
那么这个问题的基本抽象就是：
view plaincopy to clipboardprint?
// v0，对任意多个运算元求xor
function e_xor() { ... }
对于这个e_xor()来说，最直接的代码写法是：
// v1，扫描所有参数，发现不同的即返回true，全部相同则返回false。
function e_xor() {
var args=arguments, argn=args.length;
args = !args;
for (var i=1; i<argn; i++) {
if (args != !args) return true;
}
return false;
}
// v0，对任意多个运算元求xor
function e_xor() { ... }
对于这个e_xor()来说，最直接的代码写法是：
// v1，扫描所有参数，发现不同的即返回true，全部相同则返回false。
function e_xor() {
var args=arguments, argn=args.length;
args = !args;
for (var i=1; i<argn; i++) {
if (args != !args) return true;
}
return false;
}
接下来，我们考虑一个问题，既然arguments就是一个数组，那么可否使用数组方式呢？事实上，据说在某些js环境中，直接存取arguments的效率是较差的。因此，上面的v1版本可以有一个改版：
view plaincopy to clipboardprint?
// v1.1，对v1的改版
function e_xor() {
var args=[].slice.call(arguments,0), argn=args.length;
...
}
// v1.1，对v1的改版
function e_xor() {
var args=[].slice.call(arguments,0), argn=args.length;
...
}
这段小小的代码涉及到splice/slice的使用问题。因为操作的是arguments，因此splice可能导致函数入口的“奇异”变化，在不同的引擎中的表现效果并不一致，而slice则又可能导致多出一倍的数据复制。在这里仍然选用slice()的原因是：这里毕竟只是函数参数，不会是“极大量的”数组，因此无需过度考虑存储问题。
3、问题的泛化与求解：专业级别
接下来，我们既然在args中得到的是一个数组，那么再用for循环就实在不那么摩登了。正确的、流行风格的、不被前端鄙视做法是：
view plaincopy to clipboardprint?
// v2，使用js1.6+的数组方法的实现
function e_xor(a) {
return ([].slice.call(arguments,1)).some(function(b) { if (!b != !a) return true });
}
// v2，使用js1.6+的数组方法的实现
function e_xor(a) {
return ([].slice.call(arguments,1)).some(function(b) { if (!b != !a) return true });
}
为了向一些不太了解js1.6+新特性的同学解释v2这个版本，下面的代码分解了上述这个实现：
view plaincopy to clipboardprint?
// v2.1，对v2的详细分解
function e_xor(a) {
var args = [].slice.call(arguments,1);
var callback = function(b) {
if (!b != !a) return true
}
return args.some(callback);
}
// v2.1，对v2的详细分解
function e_xor(a) {
var args = [].slice.call(arguments,1);
var callback = function(b) {
if (!b != !a) return true
}
return args.some(callback);
}
some()这个方法会将数组args中的每一个元素作为参数b传给callback函数。some()有一项特性正是与我们的原始需求一致的：
- 当callback()返回true的时候，some()会中断args的列举然后返回true值；否则，
- 当列举完全部元素且callback()未返回true的情况下，some()返回false值。
现在再读v2版本的e_xor()，是不是就清晰了？
当然，仅仅出于减少!a运算的必要，v2版本也可以有如下的一个改版：
view plaincopy to clipboardprint?
// v2.2，对v2的优化以减少!a运算次数
function e_xor(a) {
return (a=!a, [].slice.call(arguments,1)).some(function(b) { if (!b != a) return true });
}
// v2.2，对v2的优化以减少!a运算次数
function e_xor(a) {
return (a=!a, [].slice.call(arguments,1)).some(function(b) { if (!b != a) return true });
}
在这行代码里，使用了连续运算：
view plaincopy to clipboardprint?
(a=!a, [].slice.call(arguments,1))
(a=!a, [].slice.call(arguments,1))
而连续运算返回最后一个子表达式的值，即slice()后的数组。这样的写法，主要是要将代码控制在“一个表达式”。
4、问题的泛化与求解：Guy入门级别
好了，现在我们开始v3版本的写法了。为什么呢？因为v2版本仍然不够酷，v2版本使用的是Array.some()，这个在js1.6中扩展的特既不是那么的“函数式”，还有些面向对象的痕迹。作为一个函数式语言的死忠，我认为，类似于“列举一个数组”这样的问题的最正常解法是：递归。
为什么呢？因为erlang这样的纯函数式语言就不会搞出个Array.some()的思路来——当然也是有这样的方法的，只是从“更纯正”的角度上讲，我们得自己写一个。呵呵。这种“纯正的递归”在js里面又怎么搞呢？大概的原型会是这样子：
view plaincopy to clipboardprint?
// v3，采用纯函数式的、递归方案的框架
function e_xor(a, b) {... }
// v3，采用纯函数式的、递归方案的框架
function e_xor(a, b) {... }
在这个框架里，我们设e_xor()有无数个参数，但每次我们只处理a,b两个，如果a,b相等，则我们将其中之任一，与后续的n-2个参数递归比较。为了实现“递归处理后续n-2个参数”，我们需要借用函数式语言中的一个重要概念：连续/延续(continuous)。这个东东月影曾经出专题来讲过，在这里：
http://bbs.51js.com/viewthread.php?tid=85325
简单地说，延续就是对函数参数进行连续的回调。这个东东呢，在较新的函数式语言范式中都是支持的。为了本文中的这个例子，我单独地写个版本来分析之。我称之为tail()方法，意思是指定函数参数的尾部，它被设计为函数Function上的一个原型方法。
view plaincopy to clipboardprint?
Function.prototype.tail = function() {
return this.apply(this, [].slice.call(arguments,0).concat([].slice.call(this.arguments, this.length)));
}
Function.prototype.tail = function() {
return this.apply(this, [].slice.call(arguments,0).concat([].slice.call(this.arguments, this.length)));
}
注意这个tail()方法的有趣之处：它用到了this.length。在javascript中的函数有两个length值，一个是foo.length，它表明foo函数在声明时的形式参数的个数；另一个是arguments.length，它表明在函数调用时，传入的实际参数的个数。也就是说，对于函数foo()来说：
view plaincopy to clipboardprint?
function foo(a, b) {
alert();
}
foo(x);
foo(x,y,z);
function foo(a, b) {
alert();
}
foo(x);
foo(x,y,z);
第一次调用将显示，第二次则会显示。无论如何，声明时的参数a,b总是两个，所以foo.length == arguments.callee.length == 2。
回到tail()方法。它的意思是说：
view plaincopy to clipboardprint?
Function.prototype.tail = function() {
return this.apply( // 重新调用函数自身
this, // 以函数foo自身作为this Object
[].slice.call(arguments,0) // 取调用tail时的全部参数，转换为数组
.concat( // 数组连接
[].slice.call(this.arguments, // 取本次函数foo调用时的参数，由于tail()总在foo()中调用，因此实际是取最近一次foo()的实际参数
this.length)// 按照foo()声明时的形式参数个数，截取foo()函数参数的尾部
)
);
}
Function.prototype.tail = function() {
return this.apply( // 重新调用函数自身
this, // 以函数foo自身作为this Object
[].slice.call(arguments,0) // 取调用tail时的全部参数，转换为数组
.concat( // 数组连接
[].slice.call(this.arguments, // 取本次函数foo调用时的参数，由于tail()总在foo()中调用，因此实际是取最近一次foo()的实际参数
this.length)// 按照foo()声明时的形式参数个数，截取foo()函数参数的尾部
)
);
}
那么tail()在本例中如何使用呢？
view plaincopy to clipboardprint?
// v3.1，使用tail()的版本
function e_xor(a, b) {
if (arguments.length == arguments.callee.length) return !a != !b;
return (!a == !b ? arguments.callee.tail(b) : true);
}
// v3.1，使用tail()的版本
function e_xor(a, b) {
if (arguments.length == arguments.callee.length) return !a != !b;
return (!a == !b ? arguments.callee.tail(b) : true);
}
这里又用到了arguments.callee.length来判断形式参数个数。也就是说，递归的结束条件是：只剩下a,b两个参数，无需再扫描tail()部分。当然，return中三元表达式(?undefined右半部分也会中止递归，这种情况下，是已经找到了一个不相同的条件。
在这个例子中，我们将e_xor()写成了一个尾递归的函数，这个尾递归是函数式的精髓了，只可惜在js里面不支持它的优化。WUWU~~ 回头我查查资源，看看新的chrome v8是不是支持了。v8同学，尚V5否？undefined
5、问题的泛化与求解：Guy进阶级别
从上一个小节中，我们看到了Guy解决问题的思路。但是在这个级别上，第一步的抽象通常是最关键的。简单地说，V3里认为：
view plaincopy to clipboardprint?
// v3，采用纯函数式的、递归方案的框架
function e_xor(a, b) {... }
// v3，采用纯函数式的、递归方案的框架
function e_xor(a, b) {... }
这个框架抽象本身可能是有问题。正确的理解不是“a,b求异或”，而是“a跟其它元素求异或”。由此，v4的框架抽象是：
view plaincopy to clipboardprint?
// v4，更优的函数式框架抽象，对接口的思考
function e_xor(a) {... }
// v4，更优的函数式框架抽象，对接口的思考
function e_xor(a) {... }
在v3中，由于每次要向后续部分传入b值，因此我们需要在tail()中做数组拼接concat()。但是，当我们使用v4的框架时，b值本身就隐含在后续部分中，因此无需拼接。这样一来，tail()就有了新的写法——事实上，这更符合tail()的原意，如果真的存在拼接过程，那它更应由foo()来处理，而不是由tail()来处理。
view plaincopy to clipboardprint?
// 更符合原始抽象含义的tail方法
Function.prototype.tail = function() {
return this.apply(this, [].slice.call(this.arguments, this.length));
}
// 更符合原始抽象含义的tail方法
Function.prototype.tail = function() {
return this.apply(this, [].slice.call(this.arguments, this.length));
}
在v4这个版本中的代码写法，会变得更为简单：
view plaincopy to clipboardprint?
// v4.1，相较于v3更为简单的实现
function e_xor(a) {
if (arguments.length < 2) return false;
return (!a == !arguments ? arguments.callee.tail() : true);
}
// v4.1.1，一个不使用三元表达式的简洁版本
function e_xor(a) {
if (arguments.length < 2) return false;
if (!arguments != !a) return true;
return arguments.callee.tail();
}
// v4.1，相较于v3更为简单的实现
function e_xor(a) {
if (arguments.length < 2) return false;
return (!a == !arguments ? arguments.callee.tail() : true);
}
// v4.1.1，一个不使用三元表达式的简洁版本
function e_xor(a) {
if (arguments.length < 2) return false;
if (!arguments != !a) return true;
return arguments.callee.tail();
}
6、问题的泛化与求解：Guy无阶级别
所谓无阶级别，就是你知道他是Guy，但不知道可以Guy到什么程度。例如，我们可以在v4.1版本的e_xor()中发现一个模式，即：
- 真正的处理逻辑只有第二行。
由于其它都是框架部分，所以我们可以考虑一种编程范式，它是对tail的扩展，目的是对在tail调用e_xor——就好象对数组调用sort()方法一样。tail的含义是取数据，而新扩展的含义是数组与逻辑都作为整体。例如：
view plaincopy to clipboardprint?
// 在函数原型上扩展的tailed方法，用于作参数的尾部化处理
Function.prototype.tailed = function() {
return function(f) {// 将函数this通过参数f保留在闭包上
return function() {// tailed()之后的、可调用的e_xor()函数
if (arguments.length < f.length+1) return false;
if (f.apply(this, arguments)) return true;// 调用tailed()之前的函数f
return arguments.callee.apply(this, [].slice.call(arguments, f.length));
}
}(this)
}
// 在函数原型上扩展的tailed方法，用于作参数的尾部化处理
Function.prototype.tailed = function() {
return function(f) {// 将函数this通过参数f保留在闭包上
return function() {// tailed()之后的、可调用的e_xor()函数
if (arguments.length < f.length+1) return false;
if (f.apply(this, arguments)) return true;// 调用tailed()之前的函数f
return arguments.callee.apply(this, [].slice.call(arguments, f.length));
}
}(this)
}
tailed()的用法很简单：
view plaincopy to clipboardprint?
e_xor = function(a){
if (!arguments != !a) return true;
}.tailed();
e_xor = function(a){
if (!arguments != !a) return true;
}.tailed();
简单的来看，我们可以将xor函数作为tailed()的运算元，这样一样，我们可以公开一个名为tailed的公共库，它的核心就是暴露一组类似于xor的函数，开发者可以使用下面的编程范式来实现运算。例如：
view plaincopy to clipboardprint?
/* tiny tailed library, v0.0.0.1 alpha. by aimingoo. */
Function.prototype.tailed = ....;
// 对参数a及其后的所有参数求异或
function xor(a) {
if (!arguments != !a) return true;
}
// ...更多类似的库函数
/* tiny tailed library, v0.0.0.1 alpha. by aimingoo. */
Function.prototype.tailed = ....;
// 对参数a及其后的所有参数求异或
function xor(a) {
if (!arguments != !a) return true;
}
// ...更多类似的库函数
那么，这个所谓的tailed库该如何用呢？很简单，一行代码：
view plaincopy to clipboardprint?
// 求任意多个参数的xor值
xor.tailed()(a,b,c,d,e,f,g);
// 求任意多个参数的xor值
xor.tailed()(a,b,c,d,e,f,g);
现在我们得到了一个半成熟的、名为tailed的开放库。所谓半成熟，是因为我们的tailed()还有一个小小缺陷，下面这行代码：
view plaincopy to clipboardprint?
if (arguments.length < f.length+1) return false;
if (arguments.length < f.length+1) return false;
中间的f.length+1的这个“1”，是一个有条件的参数，它与xor处理数据的方式有关。简单的说，正是因为要比较a与arguments，所这里要+1，如果某种算法要比较 多个运算元，则tailed()就不通用了。所以正确的、完善的tailed应该允许调用者指定终止条件。例如：
view plaincopy to clipboardprint?
// less_one()作为tailed库函数中的全局常量，以及缺省的closed条件
// 当less_one返回true时，表明递归应该终止
function less_one(args, f){
if (args.length < f.length+1) return true;
}
// 在函数原型上扩展的tailed方法，用于作参数的尾部化处理
Function.prototype.tailed = function(closed) {
return function(f) {// 将函数this通过参数f保留在闭包上
return function() {// tailed()之后的、可调用的e_xor()函数
if ((closed||less_one).apply(this, )) return false;
if (f.apply(this, arguments)) return true;// 调用tailed()之前的函数f
return arguments.callee.apply(this, [].slice.call(arguments, f.length));
}
}(this)
}
// less_one()作为tailed库函数中的全局常量，以及缺省的closed条件
// 当less_one返回true时，表明递归应该终止
function less_one(args, f){
if (args.length < f.length+1) return true;
}
// 在函数原型上扩展的tailed方法，用于作参数的尾部化处理
Function.prototype.tailed = function(closed) {
return function(f) {// 将函数this通过参数f保留在闭包上
return function() {// tailed()之后的、可调用的e_xor()函数
if ((closed||less_one).apply(this, )) return false;
if (f.apply(this, arguments)) return true;// 调用tailed()之前的函数f
return arguments.callee.apply(this, [].slice.call(arguments, f.length));
}
}(this)
}
使用的方法仍然是：
view plaincopy to clipboardprint?
xor.tailed()(a,b,c,d,e,f,g);
// 或者
xor.tailed(less_one)(a,b,c,d,e,f,g);
xor.tailed()(a,b,c,d,e,f,g);
// 或者
xor.tailed(less_one)(a,b,c,d,e,f,g);
在不同的运算中，less_one()可以是其它的终止条件。
现在，在这个方案——我的意思是tailed library这个库够Guy了吗？不。所谓意淫无止尽，淫人们自有不同的淫法。比如，在上面的代码中我们可以看到一个问题，就是tailed()中有很多层次的函数闭包，这意味着调用时效率与存储空间都存在着无谓的消耗。那么，有什么办法呢？比如说？哈哈，我们可以搞搞范型编程，弄个模板出来：
view plaincopy to clipboardprint?
/* tiny tailed library with templet framework, v0.0.0.1 beta. by aimingoo. */
Function.prototype.templeted = function(args) {
var buff = ['[', ,']'];
buff = this.toString().replace(/_([^_]*)_/g, function($0,$1) { return args[$1]||'_'});
return eval(buff.join(''));
}
function tailed() {
var f = _execute_;
if (_closed_(arguments, f)) return false;
if (f.apply(this, arguments)) return true;
return arguments.callee.apply(this, [].slice.call(arguments, f.length));
}
function less_one(args, f){
if (args.length < f.length+1) return true;
}
function xor(a) {
if (!arguments != !a) return true;
}
e_xor = tailed.templeted({
closed: less_one,
execute: xor
})
/* tiny tailed library with templet framework, v0.0.0.1 beta. by aimingoo. */
Function.prototype.templeted = function(args) {
var buff = ['[', ,']'];
buff = this.toString().replace(/_([^_]*)_/g, function($0,$1) { return args[$1]||'_'});
return eval(buff.join(''));
}
function tailed() {
var f = _execute_;
if (_closed_(arguments, f)) return false;
if (f.apply(this, arguments)) return true;
return arguments.callee.apply(this, [].slice.call(arguments, f.length));
}
function less_one(args, f){
if (args.length < f.length+1) return true;
}
function xor(a) {
if (!arguments != !a) return true;
}
e_xor = tailed.templeted({
closed: less_one,
execute: xor
})
当然，我们仍然可以做得更多。例如这个templet引擎相当的粗糙，使用eval()的方法也不如new Function来得理想等等。关于这个部分，可以再参考QoBean对元语言的处理方式，因为事实上，这后面的部分已经在逼近meta language编程了。
7、Guy?
我们在做什么？我们已经离真相越来越远了。或者说，我故意地带大家兜着一个又一个看似有趣，却又渐渐远离真相的圈子。
我们不是要找一段“不那么烂的代码”吗？如果是这样，那么对于a,b,c三个运算条件的判断，最好的方法大概是：
view plaincopy to clipboardprint?
(a!=b || a!=c)
(a!=b || a!=c)
或者，如果考虑到a,b,c的类型问题：
view plaincopy to clipboardprint?
(!a!=!b || !a!=!c)
(!a!=!b || !a!=!c)
如果考虑对一组运算元进行判断的情况，那么就把它当成数组，写成:
view plaincopy to clipboardprint?
function e_xor(a) {
for (var i=0; i<arguments.length; i++) {
if (!arguments != !a) return true
}
return false;
}
function e_xor(a) {
for (var i=0; i<arguments.length; i++) {
if (!arguments != !a) return true
}
return false;
}
对于这段代码，我们使用JS默认对arguments的存取规则，有优化就优化，没有就算了，因为我们的应用环境并没有提出“这里的arguments有成千上万个”或“e_xor()调用极为频繁”这样的需求。如果没有需求，我们在这方面所做的优化，就是白费功能——除了技术上的完美之外，对应用环境毫无意义。
够用了。我们的所学，在应用环境中已经足够，不要让技巧在你的代码中泛滥。所谓技术，是控制代码复杂性、让代码变得优美的一种能力，而不是让技术本身变得强大或完美。
所以，我此前在“读烂代码”系统中讨论时，强调的其实是三个过程：
- 先把业务的需求想清楚，
- 设计好清晰明确的调用接口，
- 用最简单的、最短距离的代码实现。
其它神马滴，都系浮云。
支持~~楼下跟上 (*^__^*) 嘻嘻…… 顶起来………… 路过！！！
不发表意见…… 路过！！！
不发表意见…… 路过！！！
不发表意见…… 路过！！！
不发表意见…… 顶起来………… 顶......
楼下跟上..... 顶起来………… (*^__^*) 嘻嘻…… (*^__^*) 嘻嘻…… (*^__^*) 嘻嘻…… 路过！！！
帮顶…… 路过！！！
不发表意见…… 路过！！！
帮顶……