细说 jQuery 插件篇（一） - 添加全局函数

joyvw 发布于2019-08-19 14:55 / 3513人阅读

摘要：添加全局函数所谓全局函数就是对象的方法，例如在一篇中介绍的等方法。

当我们希望将一些功能性代码重复使用，可以将其打包成一个 jQuery 插件来使用。

使用 $ 别名

首先我们在编写插件时必须保证 jQuery 库已经载入，但是我们不能保证 $ 一定可用，为了使用 $ 别名，我们可以利用 IIFE （Immediately Invoked Function Expression），即立即执行函数：

(function($) {
  //...
}(jQuery));

函数只接收一个参数，我们通过这个参数传入了jQuery对象。因此在这个函数内部，使用 $ 别名就不会有冲突了。

添加全局函数

所谓全局函数就是 jQuery 对象的方法，例如在 Ajax 一篇中介绍的 $.get 等方法。我们来添加一个新的全局函数 $.sum：

(function($) {
  $.sum = function(array) {
    var total = 0;
    $.each(array, function(index, value) {
      value = $.trim(value);
      value = parseFloat(value) || 0;
      total += value;
    });
    return total;
  };
}(jQuery));

我们来测试下这个为数组元素求和的方法是否生效：

隔离函数

现在我们已经在 jQuery 命名空间中创建了一个新的全局函数，但这样写有可能会污染命名空间，例如当其他插件也使用 sum 命名时就会出现冲突，为了避免冲突的发生，我们可以使用命名空间来隔离函数，即将函数封装到一个对象中。

(function($) {
  $.myPlugin = {
    sum: function(array) {
      var total = 0;
      $.each(array, function(index, value) {
        value = $.trim(value);
        value = parseFloat(value) || 0;
        total += value;
      });
      return total;
    },
  }
}(jQuery));

此时我们可以这样来使用：

将上述代码保存到 jQuery.myPlugin.js 文件中，就可以将其作为一个简单的插件来使用了。

参考

http://book.douban.com/subject/24669823/

GPU云服务器云服务器推荐一篇利用th jquery插件源码jquery jquery插件手写jQuery插件

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

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

细说 jQuery 插件篇（二） - 添加实例方法

摘要：前一篇介绍可以通过添加全局函数来开发插件，实际上全局函数就是对对象进行扩展，而添加实例方法就是对对象进行扩展，我们可以使用别名。添加实例方法此时页面内只有一个元素，添加新增的实例方法进入页面后实例方法添加成功。前一篇介绍可以通过添加全局函数来开发 jQuery 插件，实际上全局函数就是对 jQuery 对象进行扩展，而添加实例方法就是对 jQuery.prototype 对象进行扩展...

chanjarster 2019-08-19 14:55 评论0 收藏0
细说 jQuery Ajax操作篇（一） - 数据加载

摘要：同样将其绑定在按钮点击事件上查看结果为这里需要注意，如果文档内的格式错误，虽然不会报错，但是将无法执行回调函数。 Ajax 通俗来讲即不需要刷新页面即可从服务器或客户端上加载数据，当然这些数据的格式是多种多样的。加载 HTML 我们通常使用加载 HTML 的方法来加载 HTML 片段，并插入到指定位置，假设当前页面为： load showImg(http://segmen...

paulli3 2019-08-21 12:21 评论0 收藏0
细说 jQuery Ajax操作篇（三） - 过程处理

摘要：观察函数和函数可以用来作为观察函数，我们可以使用观察函数的回调函数来做相应的处理。当请求开始且尚未进行其他传输时，会触发的回调函数。当最后一次活动请求终止时，则会执行通过注册的回调函数。对于 jQuery 通过 Ajax 方式传递数据时，我们还可以在过程中进行一定的处理，以便达到我们的需求。观察函数 ajaxStart 和 ajaxStop 函数可以用来作为观察函数，我们可以使...

Imfan 2019-08-19 14:56 评论0 收藏0
细说 jQuery 元素篇（一） - 理解 DOM

摘要：最强大的特性之一就是简化了对元素的操作。从图中，我们可以看出元素中父元素子元素之间的关系。被封装到对象中的元素会被自动地，隐式地循环遍历。访问从上可知，返回的是对象，但是我们有时也希望直接对元素进行操作。 DOM - Document Object Model，即文档对象模型，它通过对象树来展示 HTML 代码。jQuery 最强大的特性之一就是简化了对 DOM 元素的操作。 DOM...

everfight 2019-08-19 14:52 评论0 收藏0
细说 jQuery 事件篇（一） - 代码执行时机

摘要：在元素一篇介绍过，可以使用来使得代码在加载完毕后自动执行代码，接下来具体介绍下这个机制。这样看上去貌似没什么问题，但是如果有两个函数需要指定时就会遇到麻烦，因为属性只能保存对一个函数的引用，如果我们写成以下形式最后代码执行后的效果是会覆盖。在元素一篇介绍过，jQuery 可以使用 $(document).ready() 来使得代码在 DOM 加载完毕后自动执行代码，接下来具体介绍下这...

dunizb 2019-08-19 14:51 评论0 收藏0