从jQuery谈库与框架的设计之优劣

jQuery是业内知名的javascript框架，它的实现和设计可以说代表了javascript界最高的水平，本文试从四个方面来以jQuery为例总结库与框架设计的原则和优劣判断。
解决问题

首先请看一个我实现的框架，我把这个库称为四则运算。

1. function add(a,b) {
2.     return a+b;
3. }
4. function mul(a,b) {
5.     return a*b;
6. }
7. function minus(a,b) {
8.     return a-b;
9. }
10. function div(a,b) {
11.     return a/b;
12. }

复制代码

这个库的API简洁优美，实现的更是优雅无比，它把四则运算统一成了函数形式，使得我们的开发更加方便。最强大的是，这个做法使得四则运算支持函数式编程，比如：

1. function acc(a,b,f) {
2.     var jieguo = a; //http://weibo.com/2178807082/zk1kOcMPU
3.     for(var i = 1; i<b; i++) {
4.         jieguo = f(jieguo,a);
5.     }
6.     return jieguo

复制代码

估计你做梦也想不到这变量其实是$\u200D()吧......
通过\u200D和\u200C的组合，可以制造神奇的代码出来，你的用户一定会交口称赞你的魔法代码的！
不止如此！更多奇怪的字符等你挖掘！
接口设计

除了命名，接口设计也是框架的核心之一。
那些平庸的框架会用"单一职责"原则来设计接口：不论是类还是函数，一个只做一件事，而且跟命名 中所说的完全一致。
Noooooooooooo ! 这也太无趣了！
我们来看看jQuery的$有多少种用法！摘自官方文档：

• jQuery( selector [, context ] )
  
• jQuery( element )
  
• jQuery( elementArray )
  
• jQuery( object )
  
• jQuery( jQuery object )
  
• jQuery()
  
• jQuery( html [, ownerDocument ] )
  
• jQuery( html, attributes )
  
• jQuery( callback )
  

没错！这个函数（jQuery就是）居然有9种重载！而且重载中最少包含了3种毫不相干的使用方法！一段时间里，我曾经在面试中问所有声称自己熟悉jQuery的面试者这个函数有多少种用法，可以答上三种以上的仅有1人，而没有人答出来过超过5种！
可以说，$在jQuery使用者的眼里就是一个神！你能想到的事情它都能做！在可以预见的将来，相信jQuery会结合人工智能，做到不论你想实现任何功能，都只需要写同样的代码：

1. }

复制代码

怎么样，看清楚接口设计的原则了么？那就是：尽量把功能加到以前的接口上，通过加参数、区分参数类型来添加功能，不论它们有没有联系，也不论API的名称是什么！哦...... 对了这个应该结合上文提到的命名，请使用没有任何意义的魔法变量名！
耦合

你可能常常听到一些旧时代的程序员讲，程序必须"高内聚、低耦合"。然而，这个说法具有极大的误导性。
我们先来看看jQuery的事件绑定：

1. $( "button.continue" ).html( "Next Step..." )

复制代码

假如我不想使用选择器，只想要绑定事件到一个DOM元素上怎么办呢？答案是，你要首先把他变成一个jQuery对象才行

1. function traversal(node, f) {
2.     f(node);
3.     if(node.children.length) {
4.         for(var i = 0; i<node.children.length;i++)
5.             traversal(node.children[i],f);
6.     }
7. }
9. traversal(document.body,function(element){
10.     if(element.tagName=="button" && element.className.match(/continue/)) {
11.         element.innerHTML = "Next Step...";
12.     }
13. })

复制代码

接下来我们来看jQuery的ajax部分：

1. var $‍ = 1;

复制代码

假如你仅仅想要使用$.ajax这个功能，不想使用选择器等功能怎么办呢？答案很简单：像你需要使用全部功能一样，在页面引用仅有97k的jQuery，然后使用$.ajax。
从这个例子中我们可以看出，耦合对于一个库的重要性：耦合让你那些不太被人接受的功能，跟着受欢迎的功能一起被强制使用，这样，用户就会逐渐被强奸，逐渐变得认为理所当然，这正是jQuery能够成为"事实标准"的奥秘。

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！