插件开发

时有的时候有人打听一些本领,因而干脆写这么后生可畏篇小说给各位jQuery爱好者,算是投石问路吧。
样式
比超级多个人会感觉样式是个很复杂的东西,要求沉着冷静的情愫加上非凡的审美观技术设计出适意的UI,抛开图片设计不说,其实css也正是那一个属性:position,margin,padding,width,height,left,top,float,border,background…
UI设计的大好与否在相当的大程度上重视于兼备人士对配色的把握和总体效果的和睦。举个简单的例证,多少个简短的页面,疏忽的人:
复制代码 代码如下:

Test Page

jQuery是三个框架!压缩后有30多k吧。 精心的人: 复制代码 代码如下:

Test Page

jQuery是一个框架!压缩后有30多k吧。 潜心的人:

Test Page

jQuery是二个框架!压缩后有30多k吧。

[Ctrl+A 全选
注:如需引进外界Js需刷新工夫实施]大家比较一下三者的UI效果:
一览精通,也许超级多的站点失去关怀便是因为那不起眼的font-family,font-size。当然那还只是个大致的事例,理解css应该从轻松做起,从着力入手,在实行中运用并不断深远。
bState of Qatar脚本 我们相通供给对javascript有着深切的知晓,对dom, xhr, Regex,
call-apply, prototype等都应当有必然的问询。
有人会说要这一个有何用啊,对dom的操作实际通过getElementById,
getElementsByTagName以致其余的API都足以轻便的达成,那话是不错,当思路鲜明后,观念才是首要,后生可畏段代码是精粹依然糟粕比较轻松就足以分别出来,究其原因仍旧在于你协和,举个大约的例证,大量的html组装,路人甲:
复制代码 代码如下:var a = new Array; var
menu = ”; for (var i = 0; i < a.length; i++State of Qatar { menu += ‘

‘ + a[插件开发。i] + ‘

‘; } 路人乙: 复制代码
代码如下:String.prototype.format = function(卡塔尔国 { var args = arguments;
return this.replace}/g, function(卡塔尔 { return args[arguments[1]]; });
}; var a = new Array; var m = ‘

{0}

‘; for (var i = 0; i < a.length; i++卡塔尔 { menu += m.format; }
在促成格局明显的情景下,温婉高效的代码分明更具吸重力。
jQuery开采或选取,更多的灵感是来自推行,实际不是copy||paste。
那么在这里处笔者会用叁个轻易易行的例证来论述jQuery插件开拓的流水线,能无法举一反三就看各位看官了。
开垦二个插件在此以前大家必要对团结的目标有八个睡醒的认识,有很显眼的方向感,那么此次自身作为示范插件的目的,正是显现贰个用以UI的Slider

  • 滑动条,常年从事于或一时专心于win32支付的同班应该相比较明白。 草图
    真正入手工编织码在此以前我们还索要有五个草图来描述本身插件的“长相”。
    非常多的同校在做UI开采前一再会忙不迭搜集各类小图片,其实好好的Logo确实能够美化大家的UI,可是自个儿日常的处理情势是编辑易于扩大的css,前期的UI显示尽量少使用图片,多用线条达成。
    ok,言归正卷,那么我的slider设计草图是: 解释下下文将动用的多少个词:
    slider:
    此部分是用作拖拽手柄来利用,客商能够透过拖拽此部分来更新completed
    bar的职位。 completed:
    此部分作为bar的内嵌成分,作为特殊效果来显示slider与起先点的离开,亦即与slider的value值关联。
    bar: slider的载体,completed的满值。 思路:
    slider作为手柄提供拖拽作用,成效区域为bar,拖拽进度中completed条必得实时更新,影响区域为slider至bar左端的偏离。
    开垦jQuery UI/Effect
    插件在比相当多时候都要求与UI人机联作,因而在表现上急需提供Html
    tree来绘制我们的插件,最后通过js
    dom来输出,那么在绘制简单的dom布局的时候作者会一向用js来成功,可是要是嵌套相比较复杂的话,大家照旧应当先用html来产生,然后生成成js输出。
    html tree: 复制代码 代码如下:

deafultbar -> bar jquery-completed -> completed jquery-jslider
-> slider 早先时期UI显示上我们不应用图片,尽量用线条、颜色来变成: Css
复制代码 代码如下:/**//*—-default
skin—-*/ .defaultbar {}{ margin-top: 10px; height: 5px;
background-color: #FFFFE0; border: 1px solid #A9C9E2; position:
relative; } .defaultbar .jquery-completed {}{ height: 3px;
background-color: #7d9edb; top: 1px; left:1px; position: absolute; }
.defaultbar .jquery-jslider {}{ height: 15px; background-color:
#E6E6FA; border: 1px solid #A5B6C8; top: -6px; display: block; cursor:
pointer; position: absolute; }
将bar的position属性设置成relative,以方便子节点的生成(子节点使用position:absolute来拿到内联浮动效果)。
那么我们得以看下这一个css和html tree发生的UI效果: ok,具有了所需的成分 –
slider, completed, bar. 一些标准:
当大家画出了UI之后就足以标准编制jQuery插件代码了,然而在着前面大家还索要对jQuery插件开荒的片段典型性有局地叩问。
1. 接受闭包: 复制代码 代码如下: { //
Code goes here }State of Qatar;
那是源于jQuery官方的插件开辟标准供给,使用这种编写情势有哪些好处呢? a卡塔尔防止全局信任。 bState of Qatar 制止第三方破坏。 c卡塔尔(قطر‎ 包容jQuery操作符’$’和’jQuery ‘
我们知晓这段代码在被分析时会形同如下代码: 复制代码 代码如下:var jq = function { // Code
goes here }; jq; 那样效果就映重视帘了。 2. 扩展
jQuery提供了2个供客商扩大的‘基类’ – $.extend和$.fn.extend. $.extend
用于扩大本身艺术,如$.ajax,
$.getJSON等,$.fn.extend则是用以扩大jQuery类,包涵方法和对jQuery对象的操作。为了保持jQuery的完整性,作者比较倾向于使用$.fn.extend进行插件开垦而尽量少使用$.extend.
3. 选择器
jQuery提供了作用强大,并合营七种css版本的采纳器,不过发掘众多同桌在接受选拔器时并未有垂青作用的标题。
a卡塔尔国尽量使用Id接受器,jQuery的选拔器使用的API都以依照getElementById或getElementsByTagName,由此能够精通功效最高的是Id接收器,因为jQuery会直接调用getElementById去获得dom,而通过体制选拔器获取jQuery对象时频仍会接受getElementsByTagName去获得然后筛选。 b卡塔尔国样式接纳器应该尽量鲜明钦命tagName,
如若开垦人士使用样式采纳器来赢得dom,且那么些dom归属同大器晚成体系,比方获取具备className为jquery的div,那么大家相应运用的写法是$并非$,那样写的益处特别显眼,在赢得dom时jQuery会获取div然后进行筛选,并不是收获具备dom再筛选。
c卡塔尔(قطر‎幸免迭代,比比较多同学在动用jQuery获取钦定上下文中的dom时赏识使用迭代情势,如$,获取className为jquery的dom下的有所className为child的节点,其实这么编写代码付出的代价是非常大的,jQuery会不断的开展深层遍历来获得要求的成分,固然真的需求,大家也应有使用诸如$,
$(‘selector1>selector2’卡塔尔, $.children, $.find之类的法子。 起来编码
话题有一点点扯远,ok,在对UI有了分明的认识后我们就足以应用js来输出html了。
大家使用jSlider来命名这几个slider插件(为了防止插件冲突,插件命名时也应特别考证,这里本人就俗二回卡塔尔(قطر‎。
复制代码 代码如下:$.extend($.fn, { ///
/// apply a slider UI /// jSlider: function;
在插件开拓中比较职业的法子是将元数据独立出来并开放API,比方这里的setting参数字传送入值,一时候为了减少代码编写量,作者习于旧贯于直接在插件内赋值:
复制代码 代码如下:var ps = $.extend({
renderTo: $, enable: true, initPosition: ‘max’, size: { barWidth: 200,
sliderWidth: 5 }, barCssName: ‘defaultbar’, completedCssName:
‘jquery-completed’, sliderCssName: ‘jquery-jslider’, sliderHover:
‘jquery-jslider-hover’, onChanging: function(卡塔尔(قطر‎ { }, onChanged: function;
标准的做法: 复制代码
代码如下:$.fn.jSlider.default = { renderTo: $, enable: true,
initPosition: ‘max’, size: { barWidth: 200, sliderWidth: 5 },
barCssName: ‘defaultbar’, completedCssName: ‘jquery-completed’,
sliderCssName: ‘jquery-jslider’, sliderHover: ‘jquery-jslider-hover’,
onChanging: function(卡塔尔 { }, onChanged: function(卡塔尔(قطر‎ { } };
$.extend({},$.fn.jSlider.default,setting卡塔尔国; ok,
上边描述下本身所定义的这个API的作用: renderTo:
jSlider的载体、容器,能够是贰个jQuery对象,也足以是选用器。 enable:
jSlider插件是还是不是可用,true时end-user可拖拽,不然禁绝。 initPosition:
jSlider的始发值,‘max’可能‘min’,亦即 slider的value值,1恐怕0。 size:
jSlider的参数,富含2个值barWidth – bar的长度, sliderWidth –
slider的尺寸。 barCssName: bar的样式名称,便于end-user自行扩大样式。
completedCssName: completed的体制名称。 sliderCssName:
slider的体裁名称。 sliderHover: slider集中时的样式名称。 onChanging:
slider被拖拽时接触的平地风波。 onChanged: slider拖拽甘休时接触的事件。
那时候我们需求将renderTo压迫转变来jQuery对象: ps.renderTo = (typeof
ps.renderTo == ‘string’ ? $ : ps.renderTo卡塔尔(قطر‎; 然后将html tree输出到render:
/* ———-> html tree: 复制代码
代码如下:

—->sliderbar

—-> completed bar

—-> slider

‘卡塔尔国 .attr(‘class’, ps.barCssName卡塔尔(قطر‎ .css(‘width’, ps.size.barWidth卡塔尔国.appendTo; var completedbar = sliderbar.find .attr(‘class’,
ps.completedCssName卡塔尔国; var slider = sliderbar.find .attr(‘class’,
ps.sliderCssNameState of Qatar .css(‘width’, ps.size.sliderWidth卡塔尔(قطر‎;
那样咱们就在UI上平素展现了Html并且用定制的css进行渲染,分别用sliderbar,
completedbar, slider对我们供给的七个指标进行缓存。 ok,
在表现了UI后大家就须要提供方式来促成slider的拖拽,在这里以前大家还供给落到实处二个办法,正是completedbar的实时更新,即在拖动slider的时候让completedbar始终填充左边区域:
复制代码 代码如下:var bw =
sliderbar.width(卡塔尔(قطر‎, sw = slider.width(卡塔尔国; //make sure that the slider was
displayed in the bar ps.limited = { min: 0, max: bw – sw }; if (typeof
window.$sliderProcess == ‘undefined’State of Qatar { window.$sliderProcess = new
Function(‘obj1’, ‘obj2’, ‘left’, ‘obj1.css;obj2.css; }
$sliderProcess(slider, completedbar, eval(‘ps.limited.’ +
ps.initPosition卡塔尔(قطر‎卡塔尔国;
bw,sw用来存款和储蓄sliderbar和slider的长短,此处未有一向运用ps.size里的值是为着防止样式里的border-width对width产生破坏。
定义叁个私用成员limited来存款和储蓄slider[left]的最大值和纤维值,并在末端一贯采取eval(‘ps.limited.’

  • ps.initPositionState of Qatar来博取,进而制止switch操作。
    同不经常间还需定义二个大局Function用来定位completedbar的填充长度以致slider左边间距,小编给其命名字为$sliderProcess。
    那么大家接下去剩下的做事便是slider的拖拽功用了,那么在那间作者会用到早前揭橥的朝气蓬勃款jQuery拖拽插件,并做符合的订制:
    复制代码 代码如下://drag and drop var
    slide = { drag: function { var d = e.data; var l =
    Math.min(Math.max(e.pageX – d.pageX + d.left, ps.limited.min卡塔尔国,
    ps.limited.max卡塔尔(قطر‎; $sliderProcess(slider, completedbar, l卡塔尔国; //push two
    parameters: 1st:percentage, 2nd: event ps.onChanging(l / ps.limited.max,
    eState of Qatar; }, drop: function { slider.removeClass; //push two parameters:
    1st:percentage, 2nd: event ps.onChanged(parseInt / sw – ps.limited.max,
    eState of Qatar; $(卡塔尔国.unbind(‘mousemove’, slide.drag卡塔尔(قطر‎.unbind(‘mouseup’, slide.drop卡塔尔(قطر‎; }
    }; if { //bind events slider.bind(‘mousedown’, function { var d = {
    left: parseInt, pageX: e.pageX }; $.addClass.bind(‘mousemove’, d,
    slide.drag).bind(‘mouseup’, d, slide.drop卡塔尔(قطر‎; }卡塔尔(قطر‎; } 那样当jSlider
    enable属性为true时,在end-user按下鼠标时绑定mousemove事件,在鼠标弹起时移除,我们只必要联合更新slider的left
    属性和completedbar的width就能够,同期在drag中绑定onChanging方法,在drop中绑定onChanged方法,向那七个办法推送的参数相仿,1>百分比,即value值,介于0~1,2>event。
    那么至此大家的jSlider插件就要旨成型,向顾客提供了二个可拖拽的slider。
    临时客户却不是那么轻易知足,于是有人民代表大会喊:“笔者要团结安装value,为啥不提供那个职能?”。
    那么此时大家就必要为客户公开八个主意,用于安装jSlider的value,首先构思的是作为艺术必要叁个效率对象,那么那时候作者又不想将功效对象作为参数传入,那么大家照旧将以此法子作为插件来开辟,我们将艺术命名称叫setSliderValue,开放2个参数,v和
    callback。 即:$.fn.setSliderValue;
    ok,那么余下的就是意义对象了,由从前的宏图能够,在slider拖动时首要作用于2个对象,slider和completedbar,那么我们在jSlider插件末尾加上风流洒脱段代码来回到slider对象:
    复制代码 代码如下:slider.data = { bar:
    sliderbar, completed: completedbar }; return slider;
    那样大家在最早化jSlider的时候就能够一贯用一个变量来获取jSlider对象,然后调用setSliderValue方法了,伪码:
    复制代码 代码如下:var slider =
    $.fn.jSlider; slider.setSliderValue; setSliderValue代码: try {
    //validate if (typeof v == ‘undefined’ || v < 0 || v > 1卡塔尔 { throw
    new Error(”v’ must be a Float variable between 0 and 1.’); } var s
    = this; //validate if (typeof s == ‘undefined’ || typeof s.data ==
    ‘undefined’ || typeof s.data.bar == ‘undefined’) { throw new Error(‘You
    bound the method to an object that is not a slider!’); }
    $sliderProcess(s, s.data.completed, v * s.data.bar.width; if (typeof
    callback != ‘undefined’卡塔尔(قطر‎ { callback { alert; }
    这里雷同调用了全局Function
    $sliderProcess在安装slider的value值时开展completedbar[width]和slider[left]的修正。由于此地举办了要命管理,所以只要end-user在保障setSliderValue被功效于jSlider对象的时候能够去除此十二分管理代码。
    依照jSlider的API大家能够进一层有助于的为其设定皮肤,为了让jSlider特别行业内部,我们必要2张图片:
    用来作为completedbar背景的’bar’和用来作为slider背景的’slider’,ok,我们创新下样式:
    BlueSkin 复制代码
    代码如下:/**//*—-blue skin—-*/ .bluebar {}{ margin-top: 10px;
    height: 4px; background:#F7F7F7; border:solid 1px #3e3e3e; position:
    relative; } .bluebar .jquery-completed {}{ height: 4px;
    background:url(../images/slider/blue/bar.gif卡塔尔(قطر‎ left center no-repeat;
    top: 0; left:0; position: absolute; } .bluebar .jquery-jslider {}{
    height: 17px; background:url(../images/slider/blue/slider.gif卡塔尔(قطر‎ center 0
    no-repeat; top: -4px; display: block; cursor: pointer; position:
    absolute; } .bluebar .jquery-jslider-hover {}{
    background-position:center -17px; }
    由于在装置样式时作者依然让子节点样式使用了API的默许值,由此在创造jSlider时大家只要求设置barCssName就能够了:
    复制代码 代码如下:var blue =
    $.fn.jSlider({ renderTo: ‘#slidercontainer’, size: { barWidth: 500,
    sliderWidth: 10 }, barCssName: ‘bluebar’, onChanging: function { // code
    goes here } }卡塔尔(قطر‎; 呈现出来的UI: 我们如此来设置其值: 复制代码 代码如下://set percentage with a
    callback function blue.setSliderValue(0.65, function { // code goes here
    }卡塔尔;
    当然,大家不光能够将jSlider作为slider使用,有的时候候它也是叁个progressbar:
    (代码笔者就不贴了,间接在demo里查看 ;-卡塔尔(قطر‎ State of Qatar通篇到此地就香消玉殒了,轻便的介绍了生龙活虎款jQuery插件的开采流程,以致支付中应当小心的细节,那么在下后生可畏篇的稿子中作者会向大家介绍怎么着成立三个通用型的
    自动完毕 插件。

发表评论

电子邮件地址不会被公开。 必填项已用*标注