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

Question

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

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

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

我的问题是创建jQuery插件的好方法是什么？如果我开始在jQuery的编码网站,我应该如何去了解它的最佳的互操作性和设计？我想确保我的代码可以运行沿侧任何其他jQuery的无干扰,有可能构建插件关我的代码,我尽量少用jQuery的命名空间,这样我不偷,可能被另一个使用的变量脚本.

Answer 1

阅读jQuery插件创作建议,还看一下未经说明的jQuery.注意最后一行:window.jQuery = window.$ = jQuery;所以有两个全局变量window.jQuery和window.$.要深入研究这个问题,请阅读有关将jQuery与其他库一起使用的文档,以及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插件.为此,请将脚本包含在自调用匿名函数中:

(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例子