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