「jQuery插件开发日记」（一）如何建立一个基础的插件 - [翻译]

Sunxb 发布于2019-08-21 10:39 / 1840人阅读

摘要：，翻译自官方网站。如何建立一个基础的插件有时，你想要在你的代码里面实现一个可复用的功能。译者注建立一个基础的插件假设我们现在要建立一个让元素里的文字变绿的插件。链式操作最大的特点之一就是支持链式操作。例如译者注的作用是返还的控制权。

_How to Create a Basic Plugin_，翻译自 jQuery 官方网站。

如何建立一个基础的插件

有时，你想要在你的代码里面实现一个可复用的功能。
举个例子，如果你想要在一个 jQuery 对象上调用一个简单的方法，来对这个对象进行一系列的操作，那么你应该写一个 jQuery 插件。

jQuery是如何工作的

在开始写插件之前，我们必须对 jQuery 的工作方式有些许的认识。来看下面的代码：

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

这是一句非常基础的 jQuery 代码，但是你知道它背后发生了什么吗？当你使用 $ 去选择元素的时候，它就会返回一个 jQuery 对象。这个对象包含可用的所有方法（.css(), .click()等）和所有符合你传入选择器的元素。

这个对象从 $.fn 对象继承所有的方法。 $.fn 对象包括所有 jQuery 对象的方法，也就是说，如果你想添加自己的方法的话，你需要将方法添加到 $.fn 对象上。

※ 译者注 ※ 
$.fn == $.prototype // true

建立一个基础的插件

假设我们现在要建立一个让元素里的文字变绿的插件。
我们需要做的只是在 $.fn 里添加一个方法 greenify。

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

注意到我们在这段代码里面用的是 this 而不是 $(this)。这是因为在 greenify 函数中，this 指代的是 jQuery 对象，所以可以使用 jQuery 的所有方法。

链式操作

jQuery 最大的特点之一就是支持链式操作。链式操作的实现是靠 jQuery 所有的方法返回 jQuery 对象来实现的（也有一些例外，比如无参数的 .width() 返回的就是宽度）。

只需要增加一行代码，我们就可以让我们的插件变得可以链式操作：

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

命名空间

$ 这个变量在很多 JavaScript 库里都很受欢迎。如果你一起使用 jQuery 和其他的库，你可能就得用 jQuery.noConflict() 来让 jQuery 返还对 $ 变量的控制权了。

然而由于 $ 变量已经不是 jQuery 了，我们的插件就没办法工作了。要让我们的插件继续工作，并且也可以和其他的库一起使用，我们需要将我们的代码放入一个即时执行函数表达式中，然后将jQuery当做参数传入，命名为 $：

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

除了上面提到的两个功能，即时执行函数增加了一层作用域，让我们可以定义自己的私有变量。例如：

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

※ 译者注 ※
jQuery.noConflict() 的作用是返还 $ 的控制权。

为什么说是返还呢？因为 jQuery 在初始化的时候，会记录$ 这个变量，然后再将 $ 绑定为自身。
所以调用 jQuery.noConflict()，实际上是将 $ 赋值为之前记录的旧值。

减少绑定方法的数量

当编写插件时，我们最好只在 $.fn 上绑定一个方法。这不仅减少了其他的插件覆盖你的插件的几率，也减少了你的插件覆盖其他插件的几率。

使用 each() 方法

一般来说，使用选择器选择的 jQuery 对象都是一个集合。如果你想对这里的某些元素进行操作（比如获取属性，计算位置等），你就需要用到 .each() 方法来进行遍历。

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

※ 译者注 ※
有读者可能会问，在之前的代码中 .css() 并没有进行遍历，如何使所有元素里的问题都变成绿色？
这是因为 .css() 方法里已经做了这个遍历的工作了。

注意到我们返回的是 .each() 的结果，而不是 this。这是因为 .each() 也是可链式操作的，它返回的也是 this。不过这样写更加契合链式操作的思想。

接受用户配置

当你的插件变得越来越复杂的时候，你最好通过接受用户的配置来让用户定制某些功能。

最简单的方法就是使用一个对象来储存配置。

(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"
});

默认的颜色值 #556b2f 被用户定义的值 orange 覆盖。

※ 译者注 ※
x.extend([deep], target [,obj1][,objN])
.extend() 方法主要是将所有 obj 的属性和方法全部添加到 target 上。同名的会覆盖，而 null 和 undefined 会被忽略。
当只有一个参数的时候，x 就变成了 target，也就是将这个唯一的参数的所有方法和属性全部添加到 x 中。
x 可以是：

$

$.fn


$.extend() 和 $.fn.extend() 的不同也就非常明显了。

完整的例子

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

HTML 结构：


Foo
 

Foo (page.html)

※ 译者注 ※
上面的例子里， this.filter() 和 this.href 的 this 是不同的。前者是 jQuery 对象，后者是 HTMLElement 对象。
var $links = $("a");

$links[0] instanceof HTMLElement; // true
$links.slice(0, 1) instanceof jQuery; // true
$links.each(function(){
    this instanceof HTMLElement; // true
});

GPU云服务器云服务器网站翻译插件 jquery插件 jquery插件源码jquery 手写jQuery插件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85936.html

「jQuery插件开发日记」（二）高级插件理念 - [翻译]

摘要：我们也可以在设置中间允许一个回调函数，来覆盖默认的函数，这也是一个支持定制的非常棒的方法。对外暴露了一个对象。所以我们的设置应该像这样对于也可以使用同样的方法来实现提供回调函数如果你的插件是事件驱动的话，最好为每个事件提供回调函数。 _Advanced Plugin Concepts_，翻译自 jQuery 官方网站。默认设置的共有接口对于上一篇文章最后的代码，我们可以改进，也应该...

paulquei 2019-08-21 10:39 评论0 收藏0
[ 前端实习日记 ] 构建静态页面基础架构

以前我们敲静态页面都是写好html，css, js，然后再去刷新浏览器，艾尼马又不行，有重新写过再刷新，一个页面下来按chrl+r的次数可让你的键盘多活好几天，要不会刷新快捷按钮那不得手残了都。后来，grunt,gulp等工具应运而生，当然它们不止这个功能，但却很好地减轻了我们的负担。这篇文章介绍一些如何使用这些工具使构建页面变得简单高效。这只是个人的目前在用的不成熟的方案，更专业的还请参考...

lidashuang 2019-08-21 10:35 评论0 收藏0
小白成长日记：一步一步写个轮播图插件

摘要：并不是所有人写的代码或者插件都适合小白使用，比如这是一个的滚动插件，大多数人使用了之后发现滚动不了，去作者提，其实是他们并不懂滚动的原理。最近在这里看了一篇关于面试的文章《回顾自己三次失败的面试经历》，作者三次倒在了轮播图上。囧，所以我也写个轮播图看看。这次是用jQuery写的，因为最近一直在研究jQuery插件的写法，所以用jQuery写的，而且我发现，我vue用太多，完全不熟悉d...

notebin 2019-08-22 11:15 评论0 收藏0
7月份前端资源分享

摘要：更多资源请文章转自月份前端资源分享的作用数组元素随机化排序算法实现学习笔记数组随机排序个变态题解析上个变态题解析下中的数字前端开发笔记本过目不忘正则表达式聊一聊前端存储那些事儿一键分享到各种写给刚入门的前端工程师的前后端交互指南物联网世界的更多资源请Star：https://github.com/maidishike... 文章转自：https://github.com/jsfr...

pingan8787 2019-08-20 17:53 评论0 收藏0
库&插件&框架&工具

摘要：一些有用的一些有用的，包括转换小箭头三角形媒体查询等中文指南是当下最热门的前端资源模块化管理和打包工具。 nodejs 入门 nodejs 入门教程，大家可以在 github 上提交错误 2016 年最好用的表单验证库 SMValidator.js 前端表单验证工具分享浅谈前端线上部署与运维说到前端部署，可能大多数前端工程师在工作中都是使用的公司现成的部署系统，与SRE对接、一起完...

Codeing_ls 2019-08-01 18:22 评论0 收藏0