大道至简-JQuery的设计思想

做Web前端开发的朋友对JQuery这个Javascript库应该是最熟悉不过的了,本人也跟大家一样使用了多年的JQuery,可以说是Web开发中无法脱离JQuery了,让我们来看一下JQuery的设计思想,如何做到如此的深受开发者喜爱的。

1. JQuery的宣传口号就是Write Less,Do More.这是因为Javascript对Dom操作太不方便了,做一个操作需要很多个方法才能达到,JQuery首要就是解决的这个问题,将用到的方法进行封装,用最少的代码实现需要做的事情。

2. 除了方法的封装,JQuery做的另外一件事就是批量操作,将对象进行封装,将Javascript对象封装成JQuery对象,JQuery对象其实包含了一个Javascript对象数组,这样对这个JQuery对象进行操作时,实际上是对一系列的Javascript对象进行了同样的操作。

基于上面两点,就是JQuery设计的基础了,通常的JQuery操作就是1.选择Dom对象(选择器)形成一个JQuery对象 2.对这个JQuery对象进行方法的调用。OK!就仅仅这两步,这就是JQuery了!

$(Selector).function();

大道至简,这样的设计简直是太妙了,基于这个思路,可以进行各种有想象力的扩展。

JQuery的方法是通过$.fn进行扩展的,所有的JQuery方法都包含在$.fn对象的属性中,例如需要扩展一个方法smile,那么只需这样定义$.fn.smile=function(){........}; 同样JQuery UI依旧继承这种思想,一个UI控件的创建和初始化也是通过这种JQuery的方法来实现的,例如一个按钮:$("#button").button();

正是这样通过简单的方法实现了无限的想象力,对于初学者来说,只需要掌握选择器和方法,就理解了JQuery的精髓了,上手会非常的快,学习成本几乎没有,但是带来的工作效率,节省的开发时间80%毫不夸张吧!

另外JQuery有一个友好的约定,方法调用之后,如果方法是void的,那么还是返回原JQuery对象,这样在对一个对象进行连续方法调用的时候就会非常方便,例如$("#button").button().click(function(){...}); 不需要再起一行浪费更多的敲代码的时间了。

有的Javascript的库,增强了面向对象的支持,例如prototype.js,使语法更加接近于面向对象,虽然我是一个面向对象的坚实拥护者,但是对于通常的Web界面开发的脚本语言来说,感觉面向对象的必要性就不太大了,使用Javascript或JQuery的对象就足够了。当然对于一些RIA富客户端的程序开发,使用面向对象的方法会更加易于维护与扩展,例如ExtJS侧重于在客户端表现丰富的控件,适合于企业应用程序开发,就是使用了面向对象的设计思想了。

现在无论是互联网各网站还是各种开发框架,都默认使用JQuery做为基础的Javascript操作库,可谓是遍地开花,可见一个如此简单的设计成为影响了几乎所有WEB开发者的技术,再次赞叹大道至简的JQuery设计!

你可能感兴趣的:(技术,架构设计)