🎶 Sym - 一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)平台

📕 思源笔记 - 一款桌面端笔记应用,支持 Windows、Mac 和 Linux

🎸 Solo - B3log 分布式社区的博客端节点,欢迎加入下一代社区网络

♏ Vditor - 一款浏览器端的 Markdown 编辑器

jQuery 插件开发分析

个人认为 jQuery 很优秀,插件机制也很不错。为什么一定要用面向对象的思想去强调不属于面向对象语言范畴的 JavaScript 呢?面向对象真的有那么完美么?一切从简,提高性能的同时又可以方便扩展不好么?

呃,速度的夸下 jQuery, 嘿嘿。

1.       背景

1.1.   jQuery 简介

1.1.1.      简介

               jQuery 是一套跨浏览器的 JavaScript 框架,强化 HTML 与 JavaScript 之间的操作。由 John Resig 在2006年1月的 BarCamp NYC 上发布。目前全球访问前10000名的网站中已有超过
41%的网站正在使用 jQuery, 其中包括 Google, Digg 以及 WordPress,它是目前最受欢迎的JavaScript 框架。其宗旨是—— WRITE LESS, DO MORE。除此之外,它的文档很完善,而且各种应
用的说明也很详细,同时还有许多成熟的插件可供选择。
 

1.1.2.      特点

Ø  跨浏览器的 DOM 元素选择
Ø  DOM 遍历及修改(包括对 CSS 1-3 的支持)
Ø  事件
Ø  CSS 操作
Ø  特效和动画
Ø  Ajax
Ø  可扩展性
Ø  轻量级
Ø  JavaScript 插件
Ø  常用工具

 

1.2.   jQuery 插件简介

1.2.1.      简介

              jQuery 除了提供简单有效的 DOM, 元素和各种脚本的管理方法外,还提供了添加方法和额外功能到核心模块的机制。由于这种机制,我们能够创建新的代码,然后在任何时候添加到我们应用中需要使用到的地方。这样就可获取一个可重复使用的资源,在其他页面或项目中,我们就不需要再去编写它。使用这种结构创建的附加方法和功能将可作为插件进行捆绑。通过插件开发者自己或其他人以某种方式发布后,它们便可在新的 jQuery 脚本中被使用。

 

1.2.2.      特点

  • 保持链式

              e.g. $(“.className”).css(“font-size”, “22px”).table().dialog();

  • 与 jQuery 风格保持一致
  • 重用性
  • 移植性

      打包一个普通的方法到 jQuery 插件中,通常会更方便:这将允许你在短时间内简单的整合插件到任何项目中。

  • 抽象化

      创建并使用插件,可使你更加专注于重点,而不是细节。允许对固定的常量进行单独指定和扩展。

  • 节约时间

      开发者:基于成熟稳定的插件机制,不需关注整个架构,只需实现所需方法和事件。

      使用者:一句代码就可实现你所需的。

  • Containment(遏制)

      命名空间和作用域在 JavaScript 中是两个非常重要的特性。创建 jQuery 插件意味着功能将被逻辑的加载,只要你熟练,可减少作用域或命名空间的冲突概率。

  • 强大的社区支持
  • 大量的各类插件和完善的文档
  • 不需额外进行管理,避免管理不适导致内存泄露等问题

 

1.2.3.      工作原理

              方法被添加到库中后,当需要使用时,可通过 jQuery 对象中 ‘this’ 对象进行调用。 DOM 节点元素可根据需求被进行相应的管理,按照需要,其方法可返回 ‘this’, 继续进行链式。

2.       插件架构体系

2.1.   架构体系要点

              Options, Events, Methods 是前端开发中重要的三个方面,在编写任何一个插件时,都应从这三方面进行设计和考虑。 jQuery 的插件机制不但从 Options, Events, Methods 为开发人员做了考虑,而且在整个插件的管理上也做了相应的维护和管理,完全不需要从零开始设计架构,验证架构,遭受新架构不合理所带来的损失。因此针对一个基于 jQuery 的插件,只需要设计定义好 Options, Events, Methods,便可交给编码人员进行编码。

2.1.1.      整体架构

jQuery plugin architecture


 

(function( $ ){
    var myPluginObj = {
       this._defaults = {};
       this.settings = {};
   init: function () {};
   destroy: function () {};
};

$.fn.myPlugin = function (options) {
    return this.each(function () {
    });
};

})( jQuery );

 

 

2.1.2.      Options

              复杂和一些自定义的插件会提供很多的 options。此方面的最佳实践为:插件本身带有默认的设置值,当调用的时候通过 $.extend 进行options 和 settings 的扩展。示例如下:

              $.extend(settings, options);

 

2.1.3.      Methods

              可把插件所需要使用的到方法收集到一个对象中,然后通过指定的参数进行调用。这样对方法的扩展也就演化为对对象的扩展。示例如下:

 

var methods = {
       init : function (options) {},
       show : function ( ) {},
       hide : function ( ) { },
       update : function (content) {}
};

return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));

 

 

 

2.1.4.      Events

              事件需和某一元素进行绑定,在满足特定的情况下被触发。可使用 jQuery 中的 bind 进行绑定,它允许使用命名空间对事件进行绑定。在插件中使用命名空间进行事件绑定是一个很好的实践。这样一来,当你需要 unbind 的时候,就不会被同类型的其他事件所干扰,错误的解除绑定。示例如下:

              $(“.className”).bind(“resize.tab”, method);

              $(“.className”).unbind(“.tab”);

 

2.1.5.      Data

              通常在插件开发的时候,当所给元素被某个插件初始化后,它的一些状态或验证需要被维护住。用 jQuery 中的 data 来为每一个元素维护自己的特有变量同样是一种很棒的实践。示例如下:

              // target: 元素本身

              // inst: 元素本身需维护的数据

              $.data(target, MY_PLUGIN_NAME, inst);

 

2.1.6.      Theme

              同一个页面中的同一种插件,可能会要求有两种以上不同的皮肤,而 jQuery 中只允许一种。本框架解决方案如下:

              在 _defaults 中存在一个 styleClass 对象,记录需要用到的 className,如:"closeIcon": "tabs-close-icon"。对应不同的主题,经处理后,在调用 styleClass.className 时会返回相应的 className-theme,如:当 theme 为 red 时,调用 styleClass.className 时,将返回 tabs-close-icon-red。

              因此当需要两种以上皮肤时,根据指定的 theme 编写不同 class 的样式即可。

 

2.2.   插件开发步骤

2.2.1.      需求

  • 提出需求
  • 需求分析
  • 确定需求
  • 确定边界条件

 

2.2.2.      插件设计

  • 确定可配置项,设计出 Options
  • 确定每一个元素需绑定的事件,设计出 Events
  • 分解需要用到方法的可共用的方法,分析设计出 methods 对象

 

2.2.3.      插件编码

              根据现有框架体系,按照插件设计结果分别进行 Options, Events, methods 的相应套用,搭建出需开发插件的整体框架,然后便可进行细节编码。

 

2.3.   可扩展性解决方案

  • jQuery 1.5 支持子类,继承
  • 对方法的扩展等同于对 object 的扩展,参见 2.1.3
  • 对事件扩展可使用 bind
  • 对 options 扩展可结合 $.extend 并相应的修改 settings/_defaults

 

2.4.   扩展阅读——JavaScriptMVC

2.4.1.      定义:

              JavaScriptMVC 是一个使用 jQuery 进行中型或大型前端项目开发的开源框架,其更加专注于代码的质量、性能和可维护性。

 

2.4.2.      特点

  • 单元测试(尤其是自动化与功能性的测试)
  • 文档生成
  • 分解代码到经逻辑组织的文件中
  • 合理压缩及合并 JavaScript 文件
  • 使用和组织前端模板
  • 制作插件具备自动清理、组织性强、可扩展性高的特点
  • 错误报告

 

3.       总结

       目前全球访问前10000名的网站中已有超过41%的网站正在使用 jQuery, 其中包括 Google, Digg 以及 WordPress,而其插件的开发也越来越普及和通用。这是为什么呢?经过5年的时间洗礼,它依然经久不衰,反而越来越火,这又是为什么呢?

       面对 jQuery,其易用性、浏览器兼容性等各方面的优势无话可说。面对 jQuery 插件,它不仅拥有完善的社区和文档支持,众多的各类插件,而且在编写 jQuery 插件时允许开发人员创建大量额外的库,抽象最具技术含量和有用的功能进行重用,最终可节约开发人员的时间并使开发更加有效。

       因此我们显而易见的便可看到 jQuery 插件的优势,它不仅能使我们更加容易的编写插件,专注于技术细节层面,而且还能使我们的代码更加健壮。


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

留下你的脚步