jQuery插件开发分析和总结.docx

jQuery 插件开发 - 其实很简单 【前言】 jQuery 已经被广泛使用，凭借其简洁的 API，对 DOM 强大的操控性，易扩展性越来越受到 web 开发人员的喜爱，我在社区也发布了很多的 jQuery 插件，经常有人询问一些技巧，因此干脆写这么一篇文章给各位 jQuery 爱好者，算是抛砖引玉吧。 【基础】 样式 很多人会认为样式是个很复杂的东西，需要沉着冷静的心态加上非凡的审美观才能设计出赏心悦目的 UI， 抛 开 图 片 设 计 不 说 ， 其 实 css 也 就 是 那 么 些 属 性 ： position,margin,padding,width,height,left,top,float,border,background... UI 设计的漂亮与否在很大程度上依赖于设计人员对配色的把握和整体效果的协调。举个简单的例子，一个简单的页面，马虎的人： html xmlns =/1999/xhtml head titleTest Page/title /head body jQuery 是一个框架！压缩后有 30 多 k 吧。 /body /html 细心的人： html xmlns =/1999/xhtml head titleTest Page/title style type=text/css body { font-family:宋体; font-size:12px; } /style /head body jQuery 是一个框架！压缩后有 30 多 k 吧。 /body /html 专心的人： html xmlns =/1999/xhtml head titleTest Page/title style type=text/css body { font-family:Verdana,宋体; font-size:12px; } /style /head body jQuery 是一个框架！压缩后有 30 多 k 吧。 /body /html 我们对比一下三者的 UI 效果： 一目了然，或许很多的站点失去关注正是因为这不起眼的 font-family,font-size。当然这还只是个简单的例子，掌握 css 应该从简单做起，从基本入手，在实践中运用并不断深入。 脚本 我们同样需要对 javascript 有着深刻的理解，对 dom, xhr, Regex, call-apply, prototype等都应该有一定的了解。 有人会说要这些有啥用啊，对 dom 的操作其实通过 getElementById, getElementsByTagName 以及其他的 API 都可以轻松的完成，这话是没错，当思路确定后，思想才是重点，一段代码是精华还是糟粕很容易就可以区分出来，究其原因还是取决你自己，举个简单的例子，大量的 html 组装，路人甲： var a = new Array(10); var menu = ; for (var i = 0; i a.length; i++) { menu += li class=style_ + a[i] + + a[i] + /li; } 路人乙： Stotype.format = function() { var args = arguments; return this.replace(/{(\d{1})}/g, function() { return args[arguments[1]]; }); }; var a = new Array(1,2,3,4,5,6,7,8,9,0); var m = li class=style_{0} {0}/li; for (var i = 0; i a.length; i++) { menu += m.format(a[i]); } 在实现方式明确的情况下，优雅高效的代码显然更具吸引力。 【实践】 jQuery 开发或使用，更多的灵感是来自实践，而不是 copy||paste(奉行拿来主义的同学可以离开了)。那么在这里我会用一个简单的例子来阐述 jQuery 插件开发的流程，能否举一反三就看各位看官了。 【目的】 开发一个插件之前我们需要对自己的目的有一个清醒的认识，有很明确的方向感，那么此次我作为示例插件的目的，就是呈现一个用于 UI 的 Slider - 滑动条，常年从事于或暂时专注于 win32 开发的同学应该比较了解。 草图 真正动手编码之前我们还需要有一个草图来描述自己插件的“长相”（事件驱动或 API 封装的可以忽略）。很多的同学在做 UI 开发前往往会忙于搜集各种小图片(非精通 ps 或 iconworkshop 人士)，其实漂亮的图标的确可以美化我们的 UI，不过我一般的处理方式是编写易于扩展的