Question

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

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

在阅读了许多框架的文档并查看了一些教程后，我更喜欢jQuery。它允许在一行中使用非常强大的迭代代码，并且它具有很小的全局变量命名空间冲突的可能性。从我所知道的，声明的唯一全局变量是$变量，其他所有变量都发生在这个名称空间内，如果你想要并排使用两个框架，甚至还有方法可以访问没有这个变量的命名空间。它还包含一个非常小的文件（24千字节gzip），这意味着更少的服务器负载。

我的问题是创建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

Answer 2

您可以在不使用extend方法的情况下添加插件方法：

jQuery.fn.myPlugin = function(opts) { ... }

你可以使用extend：如果你只是想用多个扩展jQuery对象你会做的功能：

jQuery.extend({ 
   funcName: function(){ 
       //function code 
   }, 
   funcName2: function(){ 
       //function code 
   } 
});

“jQuery.extend为jQuery对象添加了一组属性。 jQuery.fn.extend为jQuery.fn对象添加了一组属性（然后可以通过$（）。foo）访问。“

jQuery.fn是jQuery.prototype的快捷方式。

有关插件的官方文档：http://docs.jquery.com/Plugins/Authoring

Mike Alsup有这个很好的教程/模式讨论：http://www.learningjquery.com/2007/10/a-plugin-development-pattern

编辑：另外请注意，使用封隔器/最小化器时要小心你的名字 - 在这方面根据你的选择进行测试。

什么是适当的jQuery插件练习？

2 个答案: