当前位置: 首页 > 编程笔记 >

JavaScript的jQuery库插件的简要开发指南

微生宝
2023-03-14
本文向大家介绍JavaScript的jQuery库插件的简要开发指南,包括了JavaScript的jQuery库插件的简要开发指南的使用技巧和注意事项,需要的朋友参考一下

jQuery 插件通常分两类。

  1.     基于选择器的插件(支持链式操作)
  2.     不基于选择器的插件(不支持链式操作)

前段时间简单学习了 jQuery 插件开发,开发了两个简单的插件,在此对两种插件的开发模式做简要总结。
基于选择器的插件

通常开发模式如下:

(function($, window, undefined) {
 $.fn.PluginName = function(opts) {
 var defaults = {
  // 插件自定义选项的默认值
 };

 // 以用户的自定义选项覆盖默认选项
 var options = $.extend(defaults, opts || {});

 return this.each(function() { // 让插件支持链式操作
  // 在这里编写插件功能代码
 });
 };
})(jQuery, window);

首先,创建一个匿名的自执行函数,形参为 $ 、 window 和 undefined,实参为 jQuery 和 window。

嗯?为什么没有为 undefined 对应地传入一个实参呢?这是一个小技巧,考虑到 undefined 这个变量名可能在其它地方的 JavaScript 代码赋过值,失去了它真正的意义,所以这里干脆不传入这个参数,以确保它在那个匿名自执行函数中是真正的 undefined。

jQuery 传入后对应为 $,这样可以保证插件内调用的 $ 一定是 jQuery 而非 Prototype 之类的库。

此类插件的调用方式一般为 $(selector).PluginName(); 这种形式。

此类具体示例可参考 https://github.com/libuchao/KTwitter
不基于选择器的插件

由于此类插件不依赖于选择器,所以也无链式操作一说。一般开发模式如下:

(function($, window, undefined) {
 $.PluginName = function(opts) {
 var defaults = {
  // 插件自定义选项的默认值
 };

 // 以用户的自定义选项覆盖默认选项
 var options = $.extend(defaults, opts || {});

 // 在这里编写插件功能代码
 };
})(jQuery, window);

此类插件的调用形式一般为 $(selector).PluginName(); 这种形式。

 类似资料:
  • 本文向大家介绍jQuery 插件开发指南,包括了jQuery 插件开发指南的使用技巧和注意事项,需要的朋友参考一下 那么首先我们来简单的看一下最正统的 jQuery 插件定义方式:   先来看模板中的第一行代码(当然我们要把这一行代码的后半部分给揪出来一起看,不然第一行就完全无意义了):  这行代码其实是用于创建一个匿名函数。如果你对匿名函数和闭包不了解,将会对这种代码非常疑惑,那么强烈建议您阅读

  • 对于许多WordPress 用户来说,插件是必须的。WordPress 插件使得那些只有很少或者没有编程能力的用户可以扩展他们博客的功能。插件的形式多种多样,在WordPress 中,插件几乎可以做任何事情。 即便是WordPress 这样一个优秀的独立应用程序,仍旧有许多方面有缺憾。用户所要求的越来越多的WordPress 所应该具有的特性,都很可能被开发成插件。此外还有很多没有实现的创意,而且

  • Vim 插件开发中文指南,主要包括 Vim 脚本语法、插件开发技巧等。 基本语法 注释 在写脚本时,经常需要在源码里面添加一些注释信息,辅助阅读源码,Vim 脚本注释比较简单,是以 " 开头的,只存在行注释,不存在块注释。因此,对于多行注释,需要再每行开头添加 "。 示例: " 这是一行注释, let g:helloworld = 1 " 这是在行尾注释 变量 在 Vim 脚本里,可以使用关键

  • 简介 扩展包是添加功能到 Laravel 的主要方式。扩展包可以包含许多好用的功能,像 Carbon 可用于处理时间,或像 Behat 这种完整的 BDD 测试框架。 当然,这有非常多不同类型的扩展包。有些扩展包是独立运作的,意思是指他们在任何 PHP 框架中都可以使用。刚刚所提到的 Carbon 及 Behat 就是这种扩展包。要在 Laravel 中使用这种扩展包只需要在 composer.j

  • 本文向大家介绍使用jQuery UI库开发Web界面的简单入门指引,包括了使用jQuery UI库开发Web界面的简单入门指引的使用技巧和注意事项,需要的朋友参考一下 一.jQuery UI jQuery UI 是以jQuery 为基础的开源JavaScript 网页用户界面代码库。包 含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很 好交互性的web 应用程序。 j

  • 本文向大家介绍jQuery插件开发汇总,包括了jQuery插件开发汇总的使用技巧和注意事项,需要的朋友参考一下 一、jQuery插件开发两个底层方法 jQuery.extend([deep ], target [, object1 ] [, objectN ] ) 将两个或更多对象的内容合并到第一个对象。 1、deep 如果是true,合并成为递归(又叫做深拷贝) 2、target 一个对象,如果