代码之家 › 专栏 › 技术社区 › stevendesu

正确的jquery插件实践是什么?

jquery javascript

stevendesu · 技术社区 · 14 年前

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

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

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

我的问题是,在创建jquery插件时有哪些好的实践?如果我要开始在jquery中对网站进行编码,我应该如何实现最佳的互操作性和设计?我想确保我的代码可以在任何其他jquery旁边运行而不受干扰,可以用我的代码构建插件,并且最小化jquery名称空间的使用,这样我就不会窃取其他脚本可能使用的变量。

2 回复 | 直到 14 年前

Community CDub 8 年前

阅读 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

Mark Schultheiss 14 年前

您可以不使用扩展方法添加插件方法:

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

您可以使用extend:如果您只是想用多个您可以执行的功能:

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

编辑:另一个注意事项是,使用包装器/最小化器时要小心你的名字-在这方面你可以选择其中一个进行测试。