How to Create a Basic Plugin

Sometimes you want to make a piece of functionality available throughout your code.

For example, perhaps you want a single method you can call on a jQuery selection that performs a series of operations on the selection.

In this case, you may want to write a plugin.

link How jQuery Works 101: jQuery Object Methods

Before we write our own plugins, we must first understand a little about how jQuery works. Take a look at this code:

$( "a" ).css( "color", "red" );

This is some pretty basic jQuery code, but do you know what's happening behind the scenes?

Whenever you use the $ function to select elements, it returns a jQuery object.

This object contains all of the methods you've been using (.css(), .click(), etc.) and all of the elements that fit your selector.

The jQuery object gets these methods from the $.fn object.

This object contains all of the jQuery object methods, and if we want to write our own methods, it will need to contain those as well.

Basic Plugin Authoring

Let's say we want to create a plugin that makes text within a set of retrieved elements green.

All we have to do is add a function called greenify to $.fn and it will be available just like any other jQuery object method.

$.fn.greenify = function() {
this.css( "color", "green" );
}; $( "a" ).greenify(); // Makes all the links green.

Notice that to use .css(), another method, we use this, not $( this ).

This is because our greenify function is a part of the same object as .css().

Chaining

This works, but there are a couple of things we need to do for our plugin to survive in the real world.

One of jQuery's features is chaining, when you link five or six actions onto one selector.

This is accomplished by having all jQuery object methods return the original jQuery object again (there are a few exceptions: .width() called without parameters returns the width of the selected element, and is not chainable).

Making our plugin method chainable takes one line of code:

通过return this来实现链式调用

$.fn.greenify = function() {
this.css( "color", "green" );
return this;
} $( "a" ).greenify().addClass( "greenified" );

Protecting the $ Alias and Adding Scope

The $ variable is very popular among JavaScript libraries, and if you're using another library with jQuery, you will have to make jQuery not use the $ with jQuery.noConflict().

However, this will break our plugin since it is written with the assumption that $ is an alias to the jQuery function.

To work well with other plugins, and still use the jQuery $ alias, we need to put all of our code inside of an Immediately Invoked Function Expression, and then pass the function jQuery, and name the parameter $:

因为不同的插件可能依赖的jQuery版本不同,所以写自己的插件的时候,把jQuery作为参数进行传递【这里还涉及到了iife的概念】

(function ( $ ) {

    $.fn.greenify = function() {
this.css( "color", "green" );
return this;
}; }( jQuery ));

In addition, the primary purpose of an Immediately Invoked Function is to allow us to have our own private variables.

Pretend we want a different color green, and we want to store it in a variable.

iife可以允许我们使用自己的私有变量

(function ( $ ) {

    var shade = "#556b2f";

    $.fn.greenify = function() {
this.css( "color", shade );
return this;
}; }( jQuery ));

Minimizing Plugin Footprint

It's good practice when writing plugins to only take up one slot within $.fn.

This reduces both the chance that your plugin will be overridden, and the chance that your plugin will override other plugins.

In other words, this is bad:

坏的示例

(function( $ ) {

    $.fn.openPopup = function() {
// Open popup code.
}; $.fn.closePopup = function() {
// Close popup code.
}; }( jQuery ));

It would be much better to have one slot, and use parameters to control what action that one slot performs.

确保一个入口

(function( $ ) {

    $.fn.popup = function( action ) {

        if ( action === "open") {
// Open popup code.
} if ( action === "close" ) {
// Close popup code.
} }; }( jQuery ));

Using the each() Method

Your typical jQuery object will contain references to any number of DOM elements, and that's why jQuery objects are often referred to as collections.

If you want to do any manipulating with specific elements (e.g. getting a data attribute, calculating specific positions) then you need to use .each() to loop through the elements.

$.fn.myNewPlugin = function() {

    return this.each(function() {
// Do something to each element here.
}); };

Notice that we return the results of .each() instead of returning this.

Since .each() is already chainable, it returns this, which we then return.

This is a better way to maintain chainability than what we've been doing so far.

Accepting Options

As your plugins get more and more complex, it's a good idea to make your plugin customizable by accepting options.

The easiest way to do this, especially if there are lots of options, is with an object literal.

Let's change our greenify plugin to accept some options.

(function ( $ ) {

    $.fn.greenify = function( options ) {

        // This is the easiest way to have default options.
var settings = $.extend({
// These are the defaults.
color: "#556b2f",
backgroundColor: "white"
}, options ); // Greenify the collection based on the settings variable.
return this.css({
color: settings.color,
backgroundColor: settings.backgroundColor
}); }; }( jQuery ));

Example usage:

$( "div" ).greenify({
color: "orange"
});

The default value for color of #556b2f gets overridden by $.extend() to be orange.

这里涉及到了extend的使用,第一个参数是target object,第二个参数是要被合并到target的object。 数组的话,通过key value进行匹配,相同的key的value会被第二个参数里的数值进行覆盖。

Putting It Together

Here's an example of a small plugin using some of the techniques we've discussed:

(function( $ ) {

    $.fn.showLinkLocation = function() {

        this.filter( "a" ).each(function() {
var link = $( this );
link.append( " (" + link.attr( "href" ) + ")" );
}); return this; }; }( jQuery )); // Usage example:
$( "a" ).showLinkLocation();

This handy plugin goes through all anchors in the collection and appends the href attribute in parentheses.

<!-- Before plugin is called: -->
<a href="page.html">Foo</a> <!-- After plugin is called: -->
<a href="page.html">Foo (page.html)</a>

Our plugin can be optimized though:

(function( $ ) {

    $.fn.showLinkLocation = function() {

        this.filter( "a" ).append(function() {
return " (" + this.href + ")";
}); return this; }; }( jQuery ));

We're using the .append() method's capability to accept a callback, and the return value of that callback will determine what is appended to each element in the collection.

Notice also that we're not using the .attr() method to retrieve the href attribute, because the native DOM API gives us easy access with the aptly named href property.

How to Create a Basic Plugin 如何写一个基础的jQuery插件的更多相关文章

  1. 大前端工程化之写一个简单的webpack插件

    今天写一个简单的webpack插件,来学习一下webpack插件 webpack插件机制可以使开发者在webpack构建过程中加入自己的行为,来针对自己项目中的一些需求做一些定制化 首先我们得知道一个 ...

  2. IDEA Plugin,写一个看股票指数和K线的插件

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 没招了,不写点刺激的,你总是不好好看! 以前,我不懂.写的技术就是技术内容,写的场景 ...

  3. How to Create a Basic Plugin

    Sometimes you want to make a piece of functionality available throughout your code. For example, per ...

  4. jquery ----> How to Create a Basic Plugin (翻译)

    http://learn.jquery.com/plugins/basic-plugin-creation/ 如何创建一个基本的插件 有时候你想在整个代码中提供一些功能. 例如,也许你想要一个单一的方 ...

  5. jQuery-How to Create a Basic Plugin

    官方插件:http://learn.jquery.com/plugins/basic-plugin-creation/ $.extend方法和$.fn.extend方法都可以用来扩展jQuery功能. ...

  6. 写一个简单的JQ插件(例子)

    虽然现在 vue angular react 当道啊但是那 JQ还是有一席之地很多很多的小单位啊.其实还会用到 我也放一个例子吧虽然我也不是很肯定有没有人写的比我更好啊但是我相信 我这个还是蛮实用的 ...

  7. 写一个vue的滚动条插件

    组件源码如下: vue-scroll.vue <template> <div class="vue-scroll" ref="vueScrollW&qu ...

  8. 写一个限制上传文件大小和格式的jQuery插件

    在客户端上传文件,通常需要限制文件的尺寸和格式,最常用的做法是使用某款插件,一些成熟的插件的确界面好看,且功能强大,但美中不足的是:有时候会碰到浏览器兼容问题.本篇就来写一个"原生态&quo ...

  9. 案例实战之如何写一个webpack plugin

    案例实战之如何写一个webpack plugin 1.写一个生成打包文件目录的file.md文件 // 生成一个目录项目目录的文件夹 class FileListPlugin { constructo ...

随机推荐

  1. phpstudy配置多站点

    1.打开vhosts.conf文件     目录 Apache/conf/vhosts.conf #开启apache的vhost模块 (此模块默认是关闭的,去掉前面的#号) LoadModule vh ...

  2. element样式调整用到的东西

    修改element 样式不能j加scoped 一般来说常常用!important,为了提高权重会用到>,有时发现/deep/其实还蛮好用,如下 .range { .el-input--mini ...

  3. RabbitMQ从安装到使用

    一.在Linux中安装RabbitMQ 通过Docker安装: 获取镜像(选用management是带有管理界面的) docker pull rabbitmq:-management 查看下载好的镜像 ...

  4. Linux文件读写笔记

    读文件: #include <stdio.h> #include <stdlib.h> #include <unistd.h> //linux下面的头文件 #inc ...

  5. 【c#】ADO操作Access的mdb数据库只能读不能修改的解决方法

    在使用ACCESS数据库时连接字符串如 string strcon=@"Provider=Microsoft.Jet.OLEDB.4.0;Data Source=F:\Access操作\简易 ...

  6. 构造函数为何不能用abstract, static, final修饰

    不同于方法,构造器不能是abstract, static, final的. 1.构造器不是通过继承得到的,所以没有必要把它声明为final的. 2.同理,一个抽象的构造器将永远不会被实现,所以它也不能 ...

  7. java高并发核心要点|系列4|CPU内存指令重排序(Memory Reordering)

    今天,我们来学习另一个重要的概念. CPU内存指令重排序(Memory Reordering) 什么叫重排序? 重排序的背景 我们知道现代CPU的主频越来越高,与cache的交互次数也越来越多.当CP ...

  8. inoutfy与rsync进行实时同步

    更新阿里epel源 安装镜像源 curl -o /etc/yum.repos.d/epel.repo http://mirrors.aliyun.com/repo/epel-7.repo --- 扩展 ...

  9. IDEA部署Spring-boot到Docker容器

    一.准备工作 idea安装Docker插件 centos7系统安装docker 二.打开docker远程端口 1. 编辑docker.service文件 vim /usr/lib/systemd/sy ...

  10. keep-alive 组件级缓存

    前言 在Vue构建的单页面应用(SPA)中,路由模块一般使用vue-router.vue-router不保存被切换组件的状态, 它进行push或者replace时,旧组件会被销毁,而新组件会被新建,走 ...