Jquery 插件设计模式

2019-09-09 郑州网站建设  

我前面写过javascript 设计模式,它为javascript开发中的一些常见问题提供了很好的解决方法,使用这些设计模式将使你的开发获益良多。众所周知,javascript 设计模式特别有用,另一方面得益于它自己的设计模式:jquery 插件。 官方的jQuery 插件开发指南 可以作为学习编写插件的一个很好的开始。在这篇新闻中我们将更深入了解jquery插件开发技巧。

jquery插件开发经过这几年的不断发展,我们现在很少只使用一种方式来编写插件。事实上,使用特定的设计模式在某些解决某些特定问题或场景,比其它模式更为有效。

一些开发人员可能希望使用jQuery UI 组件 工厂模式(the jQuery UI widget factory),这种模式适合复杂、灵活的UI组件。另外一些开发人员可能喜欢像模块(类似模块模式)一样组织他们的代码,或者使用更正式的模块模式如AMD(asynchronous module definition) 。还有一些开发人员希望他们的插件使用javascript强大的原型继承。还有另外一些开发人员可能想使用自定义的事件或发布/订阅(pub/sub)使插件和app之间通信。等等…

我注意到一些开发者尝试创建一种通用的jquery插件源码(one-size-fits-all jQuery plugin boilerplate), 这引发了我的思考。理论上来说,使用统一源码(boilerplate)是一个很好的想法,然而,实际开发中,我们很少只使用一种模式来开发插件。

假如你自己动手编写过一些jquery插件,它们运行良好,但是,你可能会觉得它可以有更好的代码组织结构,它可以更灵活,解决更多的问题。这听起来很熟悉,你不确定不同的jquery插件模式之间的差异,你会发现我后面将要讲的内容特别有用。

这篇新闻不会为你提供所有问题的解决方法,但是它覆盖了所有开发人员在使用的流行的设计模式。

注:这篇新闻主要面向由中高级的开发人员。如果你觉得还没准备好,推荐你可以先看官方的jQuery 插件开发指南 、Ben Alman的plugin style guide和Remy Sharp的Signs of a Poorly Written jQuery Plugin。

模式(Patterns)

jQuery插件定义了很少的规则,而这也是为什么这些插件办法多种多样的原因之一。最简单的,你可以为jquery的$.fn对象添加一个办法,如:

$.fn.myPluginName = function() { // your plugin 日志ic};

前面的办法很间单,不过下面的这种办法会更好一些:

(function( $ ){ $.fn.myPluginName = function() { // your plugin 日志ic };})( jQuery );

这里,我们在插件代码内嵌到一个匿名函数中,使用匿名函数创建了一个闭包,将jQuery这个全局变量传入匿名函数,并执行匿名函数。这样可以确保$不会和其它的javascript库冲突,避免$变量和页面中的全局变量冲突。

还有另外一种写法是使用$.extend,使用这种办法一次可以定义多个办法,这在有些场景下特别有用:

(function( $ ){ $.extend($.fn, { myplugin: function(){ // your plugin 日志ic } });})( jQuery );

对此,我们可以做一些改进。首先,我们来看第一个完整的模式 - 轻量级的模式(the lightweight pattern),这种模式覆盖了我们日常插件开发的一些最佳实践和常见问题。

注意:

你可在jquery-plugin-patterns(翻译本文时,项目已经迁移到jquery-boilerplate/patterns)这个项目找到这篇新闻里面谈到的设计模式。

虽然,这篇新闻会对每一种模式做讲解,但是还是建议阅读代码中的注释,注释可以让你更深入的了解为什么使用这种做法是最好的。

另外,如果有兴趣的话也可以读一下每种模式后面的扩展内容。

简单的开始(A Lightweight Start)

首先,我们先来看一些基本的、遵循最佳实践(包括jQuery插件编写指南)的设计模式。这种模式在开发一个新的插件或实现一些简单插件时特别理想。轻量级的插件模式遵循了下面的一些原则:

常见的最佳做法,如函数的调用前使用一个分号; window, document, undefined作为参数传入;遵循jQuery风格规范。

插件默认配置。

一个简单的插件的构造函数,用于逻辑相关的初始化和委派元素处理。

使插件的配置可扩展。

避免创建多个实例。

代码:

/*! * jQuery lightweight plugin boilerplate * Original author: @ajpiano * Further changes, comments: @addyosmani * Licensed under the MIT license */// the semi-colon before the function invocation is a safety // net against concatenated scripts and/or other plugins // that are not closed properly.;(function ( $, window, document, undefined ) { // undefined is used here as the undefined global // variable in ECMAScript 3 and is mutable (i.e. it can // be changed by someone else). undefined isn't really // being passed in so we can ensure that its value is // truly undefined. In ES5, undefined can no longer be // modified. // window and document are passed through as local // variables rather than as globals, because this (slightly) // quickens the resolution process and can be more // efficiently minified (especially when both are // regularly referenced in your plugin). // Create the defaults once var pluginName = 'defaultPluginName', defaults = { propertyName: "value" }; // The actual plugin constructor function Plugin( element, options ) { this.element = element; // jQuery has an extend method that merges the // contents of two or more objects, storing the // result in the first object. The first object // is generally empty because we don't want to alter // the default options for future instances of the plugin this.options = $.extend( {}, defaults, options) ; this._defaults = defaults; this._name = pluginName; this.init(); } Plugin.prototype.init = function () { // Place initialization 日志ic here // You already have access to the DOM element and // the options via the instance, e.g. this.element // and this.options }; // A really lightweight plugin wrapper around the constructor, // preventing against multiple instantiations $.fn[pluginName] = function ( options ) { return this.each(function () { if (!$.data(this, 'plugin_' + pluginName)) { $.data(this, 'plugin_' + pluginName, new Plugin( this, options )); } }); }})( jQuery, window, document );

扩展阅读

Plugins/Authoring, jQuery

Signs of a Poorly Written jQuery Plugin, Remy Sharp

How to Create Your Own jQuery Plugin, Elijah Manor

Style in jQuery Plugins and Why It Matters, Ben Almon

Create Your First jQuery Plugin, Part 2, Andrew Wirick

完整的 Widget factory(“Complete” Widget Factory)
河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1525.html转载请标明出处,谢谢合作!
标签:
  • 设计
  • javascript
  • jQuery
  • 前面