jquery插件开发模式_使用模块模式的基本jQuery插件

jquery插件开发模式

在这篇文章中&＃xff0c;我将向您展示如何使用模块模式创建一个基本的jQuery插件&＃xff0c;该插件可以与其他选项一起使用。 模块模式的主要重点是保护您的选项和方法&＃xff0c;并提供一个可以在对象上使用的漂亮的公共API。 它通过将Object Literal语法与包含私有和公共对象名称空间的封装变量一起使用来实现此目的。 该插件是一个非常简单的解释示例&＃xff0c;下面的演示为您提供了创建健壮的jQuery插件的基础知识。

相关文章&＃xff1a;

• 普通英语的jQuery函数名称间隔
• 10种Javascript速记编码技术

You Tube视频插件

该插件的目的是创建不同的youtube视频实例&＃xff0c;您可以为其指定标题和网址等选项。

让我们看一下代码...

插件中使用了3个主要变量&＃xff1a;priv&＃xff08;私有&＃xff09;保存私有API&＃xff1b; Plugin&＃xff08;私有&＃xff09;保存公共API&＃xff1b; defaults&＃xff08;缺省&＃xff09;保存默认的插件设置。

var priv &＃61; {}, // private APIPlugin &＃61; {}, // public API// Plugin defaultsdefaults &＃61; {id : &＃39;&＃39;,name : &＃39;&＃39;,url : &＃39;&＃39;};

存储在“默认值”中的默认插件设置将被新设置覆盖。 请记住&＃xff0c;$ .extend&＃xff08;&＃xff09;函数将一个对象与另一个对象合并&＃xff0c;因此此处的选项与默认值合并&＃xff0c;新对象存储在priv.options中。

// Public initialization
Plugin.init &＃61; function(options)
{...$.extend(priv.options, defaults, options);...
}

在这里&＃xff0c;我们可以使用“ this.options”直接在Plugin priv对象上调用这些选项。

priv.options &＃61; {}; //private optionspriv.method1 &＃61; function()
{console.log(&＃39;Private method 1 called...&＃39;);$(&＃39;#videos&＃39;).append(&＃39;

在这里可以实现插件的公共API&＃xff0c;因为我们返回了可以访问公共方法的Plugin对象。

// Return the Public API (Plugin) we want to expose
return Plugin;

运行代码&＃xff0c;我们可以在Firebug中清楚地看到在对象上设置了选项&＃xff0c;并且正确调用了私有/公共方法。

演示版

加载YouTube视频

完整插件

/*** A basic jQuery plugin using the Module Pattern* ** &＃64;author Sam Deering* &＃64;copyright Copyright (c) 2012 jQuery4u* &＃64;license http://jquery4u.com/license/* &＃64;since Version 1.0**/!function(exports, $, undefined)
{var Plugin &＃61; function(){/*-------- PLUGIN VARS ------------------------------------------------------------*/var priv &＃61; {}, // private APIPlugin &＃61; {}, // public API// Plugin defaultsdefaults &＃61; {id : &＃39;&＃39;,name : &＃39;&＃39;,url : &＃39;&＃39;};/*-------- PRIVATE METHODS --------------------------------------------------------*/priv.options &＃61; {}; //private optionspriv.method1 &＃61; function(){console.log(&＃39;Private method 1 called...&＃39;);$(&＃39;#videos&＃39;).append(&＃39;

&＃39;&＃43;this.options.url&＃43;&＃39;

翻译自: https://www.sitepoint.com/jquery-plugin-module-pattern/

jquery插件开发模式