基于原型和jQuery构建自定义函数 [英] build custom function based on prototype and jquery

问题描述

我已经使用了原型和jQuery.

I have used both protoype and jquery.

有时候我必须构建一些自定义函数，例如，我想创建一个通用的Search类，在原型中，我可以这样写:

Sometimes I have to build some custom functions,for exmaple,I want to make a common Search class,in prototype I may write it this way:

var Searcher=Class.create();
Searcher.prototype={
  initilize:function(xxx){},
  search:function(url,para){
    //here ,I may use some internal method,
    this._check(url,para)
  }
  _check:function(url,para){}
}

在上面的代码中，在搜索"方法中，我需要"_check"方法，该方法可能会重复使用.因此，我将代码添加到函数"_check"中.

In the above code,in the method of "search",I need "_check" method which maybe used repeated. So I extra the codes to the function "_check".

但是，当我想在jquery中执行相同的操作时，我不知道该怎么做:

However when I want to do the samething in jquery,I do not know how to do :

(function($){
  $.search=function(xxxx){
    //how about if I want to extra some common codes to a method,where to place it?

    //here?
    function _check(xxxx){}
  }

  //or here?
  $._check=function(xxxx) {}
})(JQuery)

在构建自定义util类时，似乎应该首选原型，但是我真的很喜欢dom操作方式，例如链操作"，"css"，....

It seems that the prototype should be preferred when build custom util class,but I really like the dom operation manner such as the "chain operation",the "css",the ....

你们好吗?

推荐答案

在jQuery中，这是插件函数可以使用的私有实用程序函数的常用模式:

In jQuery, this is the usual pattern of private utility functions that your plug-in function may use:

(function($){
  $.search=function(xxxx){
    // You can use _check() here
  };

  function _check(xxxx) {
    // Do the work that _check does
  }
})(jQuery)

(还要注意，jQuery中的j是小写而不是大写.)

(Also note that the j in jQuery is in lower, not upper, case.)

因为我热衷于命名函数，所以我通常会接受再进一步:

Because I'm keen on named functions, I usually take it a step further:

(function($){
  $.search=search;

  function search(xxxx){
    // You can use _check() here; if you want to pass on `this`, either
    // do it as an argument or do this:  _check.call(this, xxxx);
  }

  function _check(xxxx) {
    // Do the work that _check does
  }
})(jQuery)

在两种情况下，您的_check函数都是您的插件完全私有的，因为它的作用域是您用来包装该插件的匿名函数.

In both cases, your _check function is completely private to your plug-in, because it's scoped to the anonymous function you've used to wrap your plug-in.

旁注:您的原型示例已过时. Class.create的这种使用样式可以追溯到v1.5.自从v1.6发布(四年前)以来，您可以执行以下操作:

Side note: Your Prototype example is out of date. That style of use of Class.create dates from v1.5. Since v1.6 was released (four years ago), you do this:

var Searcher=Class.create({
  initialize:function(xxx){},
  search:function(url,para){
    //here ,I may use some internal method,
    this._check(url,para)
  }
  _check:function(url,para){}
});

请注意，我如何将定义原型方法的对象传递给Class.create，而不是随后替换原型. v1.6及更高版本的原型为您提供了替换丢失的原型的机会.还可能需要指出，您的_check方法不是私有的，任何人都可以调用它.如果您确实希望将其设为私有，则可以使用与上述相同的技术:

Note how I'm passing the object defining the methods for the prototype into Class.create, not replacing the prototype afterward. Prototype v1.6 and above do plumbing for you on the prototype that you lose if you replace it. It's probably also worth pointing out that your _check method is not private, anyone can call it. If you really want it to be private, you can use the same technique as above:

var Searcher = (function() {
  var rv = Class.create({
    initialize:function(xxx){},
    search:function(url,para){
      //here ,I may use some internal method,
      _check.call(this, url, para)
    }
  });

  function _check(url,para){}

  return rv;
})();

请注意，您调用_check的方式会发生变化.如果要this在_check中表示与<​​c9>中相同的含义，这就是您要执行的操作，或者您可以将其设为传递给_check的参数.

Note that the way you call _check changes. That's how you do it if you want this to mean the same thing in _check that it does in search, or you can just make it an argument you pass to _check.

这篇关于基于原型和jQuery构建自定义函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！