jQuery 插件多重实例化

2024-01-13

我正在使用发现的 jquery 插件样板here http://jqueryboilerplate.com/.

然而它提到构造函数可以防止多次实例化,我想知道我需要做什么才能修改它以允许多个实例化?

插件样板如下:

// the semi-colon before function invocation is a safety net against concatenated 
// scripts and/or other plugins which may not be closed properly.
;(function ( $, window, undefined ) {

// undefined is used here as the undefined global variable in ECMAScript 3 is
// mutable (ie. it can be changed by someone else). undefined isn't really being
// passed in so we can ensure the value of it is truly undefined. In ES5, undefined
// can no longer be modified.

// window and document are passed through as local variables rather than globals
// as 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',
  document = window.document,
  defaults = {
    propertyName: "value"
  };

// The actual plugin constructor
function Plugin( element, options ) {
this.element = element;

// jQuery has an extend method which merges the contents of two or 
// more objects, storing the result in the first object. The first object
// is generally empty as 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 logic 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));

特别是构造函数部分是:

// 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 ));
    }
  });
}

最终,如果该插件用于在元素上设置一些事件,我希望能够调用:

$('#example1').myplugin({options});
$('#example2').myplugin({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 插件模式 http://www.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

jQuery 插件多重实例化 的相关文章

  • iPhone Web 应用程序禁用缓存

    我使用 PHP 构建了一个 iPhone 网络应用程序 主 也是唯一 页面包括苹果移动网络应用程序支持 and 苹果触摸全屏元标记 以便在添加到主屏幕后可以全屏运行 然而 似乎每次我从主屏幕启动应用程序时 都会使用页面的缓存版本而不是刷新页
  • 错误:捆绑失败:TypeError:无法读取未定义的属性“transformFile”,React Native

    每当我运行react native start时 我都会收到此错误 但是最近在我在节点模块中安装了firebase tools和stripe之后 这种情况开始发生 但在此之前它会运行得很好 这也是错误的堆栈跟踪 ffff 127 0 0 1
  • 可以在 iPad 上自动播放 HTML5 视频吗?

    The
  • Karma Webpack - 错误:找不到模块“./test/utilities.js”

    我正在使用 Karma Webpack 进行项目的单元测试 当我跑步时karma start 我有这个错误 Error Cannot find module test utilities js at myproject test campa
  • 将 Babel 与单个输出文件和 ES6 模块一起使用

    这是我的 gulp 任务 将 ES6 代码编译成单个 ES5 文件 我使用类和模块 import export 在 ES6 中 gulp src paths scripts pipe sourcemaps init pipe babel p
  • 为什么这个 fs.readFile 循环没有将其结果推送到我的数组? [复制]

    这个问题在这里已经有答案了 usr bin env node var fs require fs async require async program require commander program version 0 0 1 usa
  • 使用 javascript 和 jQuery UI datepicker 获取工作日数

    我有两个日期选择器 我可以从中计算天数 而无需计算星期六和星期日 但我想在周五和周六这样做 我尝试过一些不同的方法但失败了 对我来说 处理不包括周六和周日的天数很容易 但处理周五和周六的天数则不然 以下是我的 javascript 代码 f
  • 闭包和异步 Node.js 函数

    All 尝试了解 Node js 上下文中的闭包 异步调用 我有以下代码 timer setInterval pollOID 1000 function pollOID for channel in channels session get
  • 如何在反应路由器的登录页面中隐藏导航栏

    我想隐藏登录页面中的导航栏 我确实做到了 但我在其他页面上看不到导航栏 此代码是 My App jsx 文件的一部分 我在 App 的状态中创造了历史 当路径名是 或 login 时 我会隐藏导航栏 有用 但随后我输入了 ID 和密码 然后
  • 我以为我了解范围

    有人可以告诉我为什么 x 的最后一次记录等于0而不是1 我想因为它是在函数之外声明的 所以它具有全局范围 然后在函数中它的值设置为1并且该值将保持原样一个全球性的 我知道函数内的第一个 x 值是全局的 因为没有 var 关键字声明的任何变量
  • Backbone.View:delegateEvents 未将事件重新绑定到子视图

    我已将这个问题分解为尽可能小的示例 即 它只是为了演示问题 不一定代表现实世界的场景 假设我有一个父视图 此处为 MainView 其中包含一个子视图 此处为 SubView 如果在任何时候我需要重新渲染父视图 从而重新渲染子视图 我就会丢
  • td 内的文本可以随 td 一起调整大小吗? (是其高度的百分比?)

    我有一个 100 占屏幕的表格 里面有 3x3 9 个单元格 每个单元格占 33 到目前为止 一切都很好 这是一个干净 可扩展的井字棋游戏 问题在于 TD 内的文本不会随比例缩放 有没有办法说 我希望文本大小为 TD 高度的 30 或者其他
  • 将变量从一个 jsp 发送到另一个 jsp

    我有一个 JSP 文件jsp 1 jsp和另一个 JSP 文件jsp 2 jsp 我已经包括了jsp 2 jsp in jsp 1 jsp using 现在我需要某个元素上的单击事件 在该事件中 我想将字符串变量传输到包含的 jsp 中 假
  • Bootstrap 多选限制问题

    我使用创建了一个多选下拉列表引导多选 http davidstutz github io bootstrap multiselect 我需要在选项选择中设置一个限制 这里我将其设置为 5 如果达到限制 我只需禁用其他选择选项 它就可以完美工
  • 使用预先存在的数据库创建 PhoneGap iOS 应用程序

    我最近开始开发一个使用 PhoneGap 版本 2 8 0 作为药物查找器的应用程序 过去 我创建了该工具的 Web 版本 它使用 jQuery Mobile 和 PHP 来访问远程 SQL 数据库 PhoneGap 似乎是一个很有吸引力的
  • 检测滚动到 DIV 底部

    我想检测我是否到达了 div 的底部 我的 div 高度为 400px 溢出隐藏 我不知道正常高度但超过400px 我正在使用这段代码 但它不起作用 任何想法 if article txt scrollTop article txt hei
  • 如何捕获 google 地图的无效 API 密钥

    我有这个代码 如果密钥无效 则会弹出警报 但我想在这种情况下执行一些操作 但我不知道如何连接它 有任何想法吗 Google 不提供检查 Google 地图 API 密钥的外部方法 因此 您无法使用例如查询某些服务 此代码有效吗abcde12
  • jQuery:array[i].children() 不是函数

    以下代码的灵感来自http ignorethecode net blog 2010 04 20 footnotes http ignorethecode net blog 2010 04 20 footnotes 当您将光标移到脚注符号上时
  • React Native:当您的应用程序关闭时是否有回调函数?

    我有一个 setInterval 即使您关闭 而不是退出 应用程序也会继续运行 我想在我的应用程序关闭或设备进入睡眠状态时调用一个函数 以便清除 setInterval AppState 是你的朋友 看看AppState 的文档 https
  • Jquery 脉动改变颜色或图像

    我正在尝试使用 jquery 脉动代码让 div 改变颜色 但我希望它从红色变为黑色 但我听说要做到这一点 你必须下载某个插件 所以我希望它脉动为图片 到目前为止我有这两个代码 img src 36 gif alt width 105 he

随机推荐

  • AngularJS 模块和外部控制器

    我有一个包含多个容器的页面 每个容器都有自己的控制器 但指向一个工厂 该工厂处理与 Web 服务 API 交互的所有逻辑 我想为每个控制器都有一个单独的文件BUT我希望所有这些都在一个模块中 我一生都找不到如何将不同文件中的控制器包含到一个
  • 我无法运行超过 100 个进程

    我有大量的 shell 命令通过授权服务的 AuthorizationExecuteWithPrivileges 调用以 root admin 权限执行 问题是 一段时间后 10 15 秒 可能是 100 个 shell 命令 程序停止响应
  • iOS 7 启动图像,仅在设备上显示黑屏

    我至少在 stakoverflow 检查了与此问题相关的所有问题 答案 但没有任何成功 到目前为止我的问题是 我创建了一个新的应用程序 目标 IOS 7 并且我在图像中添加了我的启动图像和我的应用程序图标 xcassets 文件夹 当我在模
  • Eigen:返回对带有编译时维度检查的矩阵块的引用

    我要问的是一个概括这个问题 https stackoverflow com questions 13548253 eigen library return a matrix block in a function as lvalue 具体来
  • 在 UITableViewCell 内编辑 UITextField 时禁用 UITableView 自动滚动

    我正在使用自定义UITableViewCell在我的里面UITableView 这些中的每一个UITableViewCells 相当高并且包含UITextField在顶部 当用户点击UITextField为了编辑它 会出现一个键盘 然后UI
  • C++ 中的静态函数调用非静态函数 [关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 我有一堂课 比如 Class Tes
  • Spring 4 Websocket - 没有任何反应

    我正在学习 spring 4 websocket 如果有人可以指导我逐步学习 spring 4 websocket 或者可以推荐一些书籍 让我可以在其中找到有关上述主题的逐步实用方法 我将非常感激 但在此之前 我尝试使用 tomcat 8
  • 如何解释 PyPi 包名称中的命名约定

    这可以在许多软件包中找到 例如这个 https pypi python org pypi pip https pypi python org pypi pip pip 9 0 1 py2 py3 none any whl 如何解释这个命名约
  • Rails 4 - 如果条件不适用

    我想创建一个具有某些条件的范围 其中返回的不是特定范围 目前 该解决方案有效 scope my scope gt my var scope where TRUE if my var condition1 scope scope where
  • 是否有可用于 ASP.NET MVC 开发的附加库或工具?

    我的第一次经历ASP NET MVC实体框架引起了我对这个框架的兴趣 我想实现一些基本的应用程序 涵盖现实世界 Web 应用程序的基本要求 到目前为止 VS 2008 提供的支持已经令人印象深刻 然而 对于某些领域 使用现有的附加组件或各种
  • 通过 ES6 模块导入加载和使用旧版 JS 模块(例如 IIFE)

    I have IIFE https developer mozilla org en US docs Glossary IIFE旧应用程序中需要适用于 IE10 的某些库代码的函数 无 ES6 模块加载等 但是 我开始开发一个将使用 ES6
  • 如果我想添加 CSS 我应该将其粘贴到哪里?

    这是我需要添加 CSS 的页面 http upload wikimedia org wikipedia commons a a5 Map of USA with state names svg http upload wikimedia o
  • 如何从android中的recyclerView中删除项目

    在我的应用程序中 我应该使用 recyclerView 并删除一些项目 我想从中删除一些项目recyclerview为此 我在以下代码中编写Adapter public class MyAdapter extends RecyclerVie
  • Rails 数据禁用-带有重新启用按钮

    我有一个具有 JavaScript 验证功能的 Rails Devise 表单 当用户按下提交时 验证就会开始工作 并且用户会重新关注他们需要的表单 但是 rails 使用 data disable with 在单击按钮后禁用该按钮 因此在
  • 对函数中的变量进行分组

    我有一种感觉 这是如此明显 当 如果 解决时我会感到羞愧 但我就是无法让它发挥作用 我有一个 html javascript 页面 其中包含多个项目 所有项目都需要通过用户点击来显示或隐藏 所以我有 x 数量的 div 例如 div sty
  • 如何测试一个python模块是否已导入?

    如何测试Python中的模块是否已导入 例如我需要基础知识 if not has imported sys import sys also if not has imported sys path from sys import path
  • 在 std::map 中,获取一个指向不大于 key 的最后一个元素的迭代器

    提问前 我理解的意思std map lower bound http en cppreference com w cpp container map lower bound and std map upper bound http en c
  • 使属性可调用或不可调用

    我想让一个属性要么可调用 要么不可调用 例如 function Test var obj someString here is text Object defineProperty obj string get function retur
  • DB 连接字符串的 Windows 服务的 System.NullReferenceException

    我正在编写一个 Windows 服务 我使用 try 捕获了一个异常 try connStr System Configuration ConfigurationManager AppSettings connStr ToString ca
  • jQuery 插件多重实例化

    我正在使用发现的 jquery 插件样板here http jqueryboilerplate com 然而它提到构造函数可以防止多次实例化 我想知道我需要做什么才能修改它以允许多个实例化 插件样板如下 the semi colon bef