从这章开始就跟传统js比较脱节了，介绍jQuery的细部应用。 这一章的目标是帮助读者们了解现有的plug-in是如何而来, 以及如何按照自己的需求撰写自己的plug-in (if need). 先提一个名词定义： jQuery context 指的是 $("div") 这类已经经过jQuery init过的物件。 （注：这只是笔者方便讲解区分用,不一定是正式定义.） ──────────────────────────────── ＠所以，jQuery 是怎麽运行的呢？ jQuery的大概架构是这样的 , 它透过 javascript 的prototype结构, 把 「jQuery」这个祖先级的 Object , 跟由 jQuery build 出来的 jQuery context做简单的区分. ＠哪里是起点？ 因为这样讲实在是太抽象 , 所以我们要来从程式码看世界 , 接下来我们从 $("div") 这个行为隐含的意义来看起. 翻到原码最开始的地方. var jQuery = window.jQuery = window.$ = function( selector, context ) { return new jQuery.fn.init( selector, context ); }; （注：此处也是 $ 这个缩写的由来 , 可以在这里自由改成别的, 如笔者工作的环境曾经jQuery lib跟prototype lib共用 , 所以改成 jq .) 再搭配 jQuery.fn = jQuery.prototype = {/*...中略...*/ } 这张来看 , 就可以了解到它其实是产生了一个 jQuery型态的资料. 而所有这些资料都共享 jQuery.prototype 所定义的function. 预设的 jQuery.prototype 含有的funciton简单列部份在後面： size get each index attr css text append html ... 看到这里应该很熟悉吧！ 其实就是我们平常操作 $("hi").html()中的html这些函数来由， 当然还有一些纯辅助用的隐藏function。 ＠等等，你说的实在是太快了，我还不懂什麽是prototype！ prototype 在讨论时可能有两种含义， 一种是prototype lib，它跟jQuery一样也是一个有许多支持者的 js lib. 另一种则是用来定义javascript Function 所new 出来共享的成员。 此处我们讲的是後者。 可先行参考ericsk大的介绍文章 http://blog.ericsk.org/archives/1089 此处之所以会用到这特性，是因为不管现有的物件是否已经产生， 当我对 jQuery context 定义 function 後，所有的jQuery context都要有。 ＠科技始终来自於人性（惰性？） 底下以一个简单的例子来看 , 假设我们可能常常有需要把某些元素从 (x1,y1) 移到 (x2,y2) 以过去的作法，我们可能会这样做。 $("#someone").css("position","absolute") .css("left",x2) .css("top",y2); 看起来似乎颇简单 , 但是写久还是会很烦 , 那我们有没有可能把上面的code简化成这样呢？ $("#someone").move(x2,y2); 看起来是不是更简单更直觉了点？ 很多plug-in的目标都是简化一些重复且多余的code . ＠how to do it ? 以这样的例子来看 , 你只要会写funciton , 就可以很快就帮 jQuery context扩充出 move这个function. 只要在 jQuery.js 载入後加上这段code , 就多一个 move(x,y) 可以用了. $.fn.move=function(x,y){ this.css("position","absolute") //此处的this代表着 .css("left",x) // jQuery context .css("top",y); } 注：也可以用底下的写法 , 意义是一样的. jQuery.fn.extend( { move:function(x,y){...} } ) 两种写法的demo page http://tonyq.org/jqtalk/testJQExtend.html http://tonyq.org/jqtalk/testJQPlug.html ＠就这样？ 嗯 , 就扩充方面的确是就这样 , 文末再带一点常见的plug-in模式与参考资料. 如 thick box/light box 这类标榜着加一个class就可以处理好的 , 其实谜底就在於他们载入 .js 档扩充後 ,再执行一段类似这样的code. $(function(){ $(".thickbox").xxxxx(); }); 透过 ready 事件触发他们来做配置 , 而达到使用者几乎不用写js的效果. ＠那些会跳视窗的plug-in怎麽做的？ 有一些比方说 drag and drop , 常常会有一个暂时替代用的元素, 以拖曳来讲，显示在画面上被拖曳的那个元素不一定是真正的元素, 也有可能是复制出来的代替品 , 这类的东西我们就叫 helper . 或者是像tooltip 会显示在物品旁边的那个小视窗元件也是helper. 大部分的helper , 通常是在 载入.js 时 , 把一些不显示html藏在body的尾巴, 如 tooltip plug-in 就是个很典型采用这种方案的. 也有一些是触发时再把一堆html塞进去的 , 如 jQuery.ui.dialog. ＠结论 所谓的plug-in，其实是把重复子问题独立出来解决作成solution的结果, 但是他们通常也有相对的代价 , 挑选plug-in时不能只看功能 , 也要注意是不是会造成页面crash等状况 . 对 javascript 原理多认识一点 , 用起来才比较不会觉得痛苦万分. -- What do you want to have ? / What do you have? 从书本中，你可以发现我的各种兴趣。 从ＣＤ中，你可以了解我所喜欢的偶像明星。 或许从文字你很难以了解一个人，但从物品可以。 My PPolis , My past. http://ppolis.tw/user/Tony --

※ 发信站: 批踢踢实业坊(ptt.cc) ◆ From: 221.169.78.140 ※ TonyQ:转录至看板 Web_Design 11/30 17:11 //修正错字 ※ 编辑: TonyQ 来自: 221.169.78.140 (11/30 17:16)