javascript - 什么是正确的 jQuery 插件实践？

Question

请不要害怕使用任何技术术语或低级解释。我精通计算机体系结构和低级编程语言，可以理解任何优化或内存管理技术，以及复杂的结构(类、成员变量等)

我主要关注的代码是基于网络的应用程序。我经常使用 PHP，而且我一直在快速学习 CSS。然而，Javascript 目前是我的瓶颈。我知道足够的 Javascript 来做任何没有框架的事情(DOM 操作、AJAX 查询等)。我也知道我可以让我的代码运行得更快，针对特定情况对其进行优化，并且我可以通过手动对所有内容进行编码来缩小代码的整体大小(无需包含外部脚本)。但是，为了便于其他程序员阅读并提高编码速度，我正在努力学习至少一种 Javascript 框架。

在阅读了许多框架的文档并查看了一些教程之后，我更喜欢 jQuery。它允许在一行中编写非常强大的迭代代码，并且全局变量 namespace 冲突的可能性非常小。据我所知，声明的唯一全局变量是 $ 变量，其他一切都发生在这个命名空间内，如果你想并排使用两个框架，甚至可以在没有这个变量的情况下访问命名空间。它还包含一个非常小的文件(压缩后为 24 KB)，这意味着更少的服务器负载。

我的问题是创建 jQuery 插件的最佳做法是什么？如果我要开始使用 jQuery 编写网站代码，我应该如何着手实现最佳的互操作性和设计？我想确保我的代码可以与任何其他 jQuery 一起运行而不会受到干扰，可以从我的代码构建插件，并且我尽量减少 jQuery 命名空间的使用，这样我就不会窃取可能被其他人使用的变量脚本。

Answer 1

阅读 jQuery plugin authoring suggestions ，也看 the unminified jQuery 。注意最后一行:window.jQuery = window.$ = jQuery;所以有两个全局变量window.jQuery和 window.$ .要更深入地研究这个问题，请阅读有关 using jQuery with other libraries 的文档的更多信息。 和 jQuery.noConflict() :

  // Trigger no conflict mode.
$.noConflict();
  // Code that uses other library's $ can follow here.

对于编写插件，一定要特别注意名为 Maintaining Chainability 的部分。 (因为 jQuery 很好地利用了可链接性)。您必须明确返回 this在您的插件中以保持可链接性。此外，说到与其他变量的冲突，请确保通过使用闭包来阻止您的插件与其他代码发生冲突:

  // Use a closure so you can use the dollar sign in your plugin, 
  //   but you don't clash with other uses of the dollar sign in the script
  //   around where you define your plugin (other libraries, etc.)
(function( $ ){

    // Adding your plugin to jQuery
  $.fn.yourPlugin = function() {  

      // Maintain chainability
    return this.each(function() {

      // ...

    });

  };
}( jQuery ));

该插件创作页面上还有很多其他重要信息。以上只是骨架。有关于默认值和选项、命名空间和许多其他内容的信息。

此外，如果您担心变量冲突，您还可以为自己的“常规”代码使用闭包……而不仅仅是 jQuery 插件。为此，请将您的脚本包含在 self invoking anonymous function 中。 :

(function() {
    var ...  // these vars will not clash with 
             // anything outside this anonymous function

    // You can do your jQuery in here if you need to access
    //   the local vars:
    $(function() { ... });

}());

例如:

// global 'clash'
var clash = "test";

(function() {
    // local 'clash'
    var clash = "something else";
    // this 'clash' shadows but doesn't change the global 'clash'
}());

alert(clash);
// The global 'clash' has stayed unaffected by the local `clash`
// Output: test

jsFiddle example