写出更易懂的代码(一)

今天周日，外面天气不好，舍友出去跟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代码几乎不会影响到网络带宽。

转载于:https://www.cnblogs.com/lefeng/archive/2012/05/13/2498253.html

写出更易懂的代码(一)相关推荐

如何写出更好的代码（文末有福利）
女主宣言我们在过去的几期推送里已经给大家介绍了笔者根据多年研发经验总结出来的编码规范和 git 等实用工具的运用场景,今天咱们就来继续聊聊项目开发过程的诸多方法论.本文最先发布于 7rule,转载已 ...
程序员如何写出更好的代码
Martin Thompson是Java Champion称号获得者,同时也是一名高性能计算科学家.他说,为了写出更好的代码,程序员需要运用基本设计原则,阅读已有代码.在QCon London 201 ...
【整洁之道】如何写出更整洁的代码(上)
如何写出更整洁的代码代码整洁之道不是银弹,不会立竿见影的带来收益. 没有任何犀利的武功招式,只有一些我个人异常推崇的代码整洁之道的内功心法.它不会直接有效的提高你写代码的能力与速度,但是对于程序员的 ...
两大方案，只为写出更安全的代码！
[CSDN 编者按]安全漏洞的源头是开发,只有当开发人员写出了包含安全漏洞的代码,黑客才有机可乘.因此,如何保障开发写出更"安全"的代码,是安全防护工作中最重要的一环. 作者 | ...
[翻译Joel On Software]Joel测试：12步写出更高质量代码/The Joel Test: 12 Steps to Better Code
Joel on Software The Joel Test: 12 Steps to Better Code Joel测试:12步写出更高质量代码 byJoel Spolsky Wednesday, ...
如何写出更优雅的代码——编程范式简述
<如何写出更优雅的代码--编程范式简述>源站链接,阅读体检更佳! 什么是程序? 1976年,瑞士计算机科学家,Algol W,Modula,Oberon 和 Pascal 语言的设计师 N ...
jvm大局观之内存管理篇: 理解jvm安全点,写出更高效的代码
jvm大局观之内存管理篇: 理解jvm安全点,写出更高效的代码 - 知乎前言本篇是java内存区域管理系列教程之一 - 在得知GC Root的组成之后,如何在垃圾回收发生的时刻,找到GC Root ...
python优雅代码大全_10个Python技巧帮你写出更优雅的代码
阅读本文需要 2 分钟,公众号 somenzz ,欢迎学习 Python 的朋友订阅. 现在写代码的门槛非常低了,少儿都开始编程了,但从代码的风格一眼看出编码水平.是的,写代码是容易的,写出易读的代码 ...
使用这45个小技巧，帮助你写出更优雅的代码
前言不知道大家有没有经历过维护一个已经离职的人的代码的痛苦,一个方法写老长,还有很多的if else ,根本无法阅读,更不知道代码背后的含义,最重要的是没有人可以问,此时只能心里默默地问候这个留坑的 ...

写出更易懂的代码(一)

写出更易懂的代码(一)相关推荐

最新文章

热门文章