build custom function based on prototype and jquery

Question

I have used both protoype and jquery.

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){}
}

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".

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)

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 ....

How do you guys do?

T.J. Crowder · Accepted Answer · 2011-08-26 13:47:11Z

1

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)

(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)

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.

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){}
});

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;
})();

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.

edited Aug 26, 2011 at 13:47

answered Aug 26, 2011 at 13:38

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

hguser Over a year ago

T.J. Crowder...:Good answer! But I still have some questions,for example,in prototype when we use the Class.create() to crate a new class,then it has a constructor,then we can call it later. But in jquery,how to "new" a class? It seems that I can just call $.search(xxx) rather than 'var foo=new $.search....'. So does it mean that prototype is better when build our own class,but how about if I want to use jquery when I do the dom related operation inside my class?

T.J. Crowder Over a year ago

@hguser: jQuery doesn't provide any helpers around constructor functions at all. jQuery's a fantastic lib for working with browsers, but it doesn't do much beyond that. Prototype has always had a dual purpose: To make it easier to work in browsers, and to add general-purpose language-ish features through things like its Class object, its Enumerable mix-in, various enhancements to the Function object, etc. If you want something similar to Prototype's Class object, I wrote one you can use in jQuery projects.

hguser Over a year ago

Thanks,I got it. It means that I can only choose one of them or use something(your example) instead. BTW,why can not put the "@" in my comment?

T.J. Crowder Over a year ago

@hguser: Well, you can use Prototype and jQuery in the same page if you want via jQuery's noConflict mode. So you could use Prototype for language-like features, and jQuery for DOM stuff. Re the @ sign, since I'm the owner of the answer, any comment will trigger a notification to me, making it unnecessary (from a notification perspective) to put the @t.j. in. Management calls it "noise" and actually took the time and trouble to write code to detect and remove it.

Collectives™ on Stack Overflow

build custom function based on prototype and jquery

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related