- Screen name: jeresig
- About Me: Creator of jQuery.
jeresig's Profile
122 Posts
3393 Responses
30
Followers
Show:
- Expanded view
- List view
Private Message
- Below is the full (current) set of features that we're hoping to ship in our October release. This page will be updated as progress is made.
- Core + Dependencies
- Core (jQuery.mobile.js)
- Events (jQuery.mobile.events.js)
- tap, taphold, scrollstart,scrollstop,swipe,swipeleft,swiperight,orientationchange, touchstart, touchmove, touchend
- Support (jQuery.mobile.support.js)
- Interaction states for button-like elements (jQuery.clickable.js)
- Button Markup (jQuery.buttonMarkup.js)
- Hashchange (jQuery.hashchange.js)
- Form Controls
- Button (jQuery.forms.button.js)
- Dependencies: Clickable, Button Markup
- Checkbox / Radio Button (jQuery.forms.checkboxradio.js)
- Dependencies: Clickable, Button Markup
- Select (jQuery.forms.select.js)
- Dependencies: Button Markup
- Input / Textarea (jQuery.forms.textinput.js)
- Expandable Textarea (jQuery.forms.expandable.js)
- Fields (jQuery.fieldContain.js)
- Needed: Slider
- Needed: On/Off Flipswitch
- Needed: spinner input
- Needed: Date Picker
- Needed: Sortable Items (with form input fallbacks)
- Layout
- List View (jQuery.listview.js)
- Dependencies: Button Markup, Hashchange
- Needed: Toggle-able item (check)
- Dialog
- Dependencies: Fixed Header Footer
- Needed: Headings (Styling only)
- Global Navigation (jQuery.globalnav.js)
- Acts as a persistent tabs control
- Dependencies: Button Markup, Fixed Header/Footer
- Collapsible Panel (jQuery.collapsible.js)
- Add option for close adjacent panels on open
- Fixed Header/Footer (jQuery.fixHeaderFooter.js)
- CSS Grids and layouts - 2 col, 3 col, etc
- Hello All -
This is a follow-up to the previous templating discussion (the thread was getting a bit unwieldy and I wanted to address some of the concerns found therein).
To start, I wanted to make one point very clear: The templating code being developed is a jQuery plugin. It's being developed by the jQuery team and will be maintained by the jQuery team as an official plugin. As with every major feature in jQuery we look to see how the community responds and interacts with existing plugins for guidance on what to land into jQuery core. Maybe it'll eventually land in core, maybe not, but our primary goal is to get it out and into the hands of developers to help them to ease their development.
I will also say that no one cares more about increases in complexity or filesize more than me - I'm jQuery's biggest advocate when it comes to keeping a minimal featureset and reasonable download. With templating, especially how I've proposed it, it's possible to add no overhead for existing users, only one new API method, a minimal increase in filesize, and yet yield a surplus of simplification for developing complex HTML structures.
As usual I've been doing my development in the templating plugin Github repository .
The original plugin that I posted had a very crude templating syntax, mostly copied from my older micro templating library .
My original goal was to discuss the overall API for the templating system and then discuss the actual templating syntax second. Either the API, as proposed, is spotless or everyone loves to bikeshed templating syntax (I suspect it's the latter, rather than the former). Regardless I've read through the criticism of the templating syntax and feel as if I've come up with a solution that's good enough to handle most concerns.
I've reduced the templating syntax to three basic components: variable substitution, looping, and conditional (if/else) statements. All of it is extensible and it's possible to override every method with your own functionality, if you so choose. With this reduction there is no longer any overt inline JavaScript code and all logic can be written externally to the template.
I've taken a lot of inspiration from Mustache.js when working on the syntax. I think they did a lot to try and reduce complexity and make it easier for developers to get started - and especially in reducing the interspersing of logic in templates. I've taken some of the core ideas presented, expanded on them slightly, and layered in additional extensibility to build a final solution that should better meet the needs of JavaScript developers.
Variable Substitution
- You can use ${varName} or {{= varName}} to insert in a value. Both map to the same functionality and can be overridden/extended.
- Will output an empty string if null or undefined are found.
- All output is encoded to avoid attempts at injection or malformed output.
-
If you wish to inject raw HTML you can do:
- {{html varName}}
-
If the value is a function it is executed and its contents are substituted. Thus logic can be contained in the data object and be injected directly into the template.
- var user = {
- firstName: "John",
- lastName: "Resig",
- name: function() {
- return this.firstName + " " + this.lastName;
- }
- };
- // Ignore the extra spaces, the forum will mess it up otherwise
- $("#users").append("< li >${name}", user);
- // Will insert the following:
-
// < li >John Resig
In this way you can continue to keep a clean separation between your template logic and the actual markup.
-
jQuery's each method is exposed via the 'each' template method.
- {{each someArray}} ... {{/each}}
-
You can pass the same arguments to the each callback as you would to jQuery's .each():
- {{each users}}< li >${this.name}{{/each}}
- {{each(i, user) users}}< li >${user.name}{{/each}}
-
Additionally the properties of each iterated object are exposed, allowing for this simple result:
- {{each users}}< li >${name}{{/each}}
-
There are also two shortcuts for substituting the current value:
- {{each name}}${this}{{/each}}
- {{each name}}{{=}}{{/each}}
Conditionals
- The only piece of logic introduced into the templating.
-
Can do simple if statements - work similarly to the variable substitution, will pass if the result is not equal to null or undefined (thus will pass if the result is false or 0 or an empty string, for example). (Now works identically to normal JavaScript if statements - I'm considering an ifdef or some such to check to see if a variable is defined.)
- {{if user.name}} User Name: ${user.name}{{/if}}
- You can do basic expressions as well.
- {{if user.height > 5}} This user is tall!{{/if}}
- {{if user.height > 5}} This user is tall!{{/if}}
- You can also do else statements.
- {{if user.name}}
- User Name: ${user.name}
- {{else}}
- No user name.
- {{/if}}
Extensibility
- The majority of the logic in the templates will be contained within the builtin commands or in the data objects themselves.
- New functionality can be easily snapped into the templating system.
- Methods can be standalone (like {{= varName}}) or involve open/closing syntax (like {{each someArray}} ... {{/each}}).
- All native functionality can be overridden, even variable substitution.
-
For example, let's add in a new 'join' method for joining the results from an array.
- jQuery.tmplcmd.join = {
- prefix: "_.push($1.join('$2'))"
- };
You can use it like so:
- {{join cities}} // Will produce: AtlantaBostonPortland
- {{join(, ) cities}} // Will produce: Atlanta, Boston, Portland
(Note: I'm going to be away for the next couple days but I hope to address any comments or questions when I return, either this weekend or next Monday.)Hello All -
After much deliberation the jQuery team has decided to close down the
Google Groups that we've been using for project discussion and move to
a unified forum instead.
The new forum can be found here:
http://forum.jquery.com/
More information about our decision to move can be found here:
http://jquery14.com/day-07/new-jquery-forum
If you have any questions concerning the move please feel free to post
them in the new meta discussion forum here:
http://forum.jquery.com/about-the-jquery-forum
Thanks for your continued support and here's to future community discussions!
--JohnHey Everyone -
So we're in the progress of setting up the new jQuery Forum (as you can see here). We're moving away from using Google Groups, due to the excessive problems that we've had with it. On top of this we see an opportunity to combine some of the disparate jQuery discussion communities (namely the jQueryHelp.com forum).
We analyzed a number of forum solutions and so far we've found Zoho Discussions to be far and away the best. Not only that but the Zoho team has been incredibly accommodating - even going so far as to import all the old jQueryHelp.com and Google Groups posts.
At the time of this post all the old jQueryHelp.com posts and users have been imported into the system. By the end of this weekend the Google Groups (jquery-en, jquery-dev, and jquery-ui) posts and users will be moved over as well. The transition will certainly be rocky but we hope to push through so that we can have an excellent discussion solution in the end.
You'll not that the forum (at this time) isn't styled particularly like the jQuery site. We'll be working to fix this and should have it looking right by the end of the weekend.
We're going to have a full post announcing the forum on Monday, once everything is imported and the site looks correct. Thanks again everyone for your patience and feedback and here's to an exciting 2010!
-- John Resig and the jQuery Team
- This has been discussed before but I was just curious if this would
affect anyone negatively. I'd like to make this change so that less
bubbling has to occur (both documentElement and document no longer
have to get hit).
Roughly, the line in the .live implementation would end up being changed from:
jQuery( this.context )
to:
jQuery( this.context.body || this.context )
(Thus it would only use the body element on HTML documents, as well.)
--John- Looks like the downloaded file may be corrupted, according to this user:
http://twitter.com/lorlarz2
--John- Just wanted to give a heads-up - we've been having a discussion
related to complex jQuery apps over here:
http://groups.google.com/group/jquery-dev/browse_frm/thread/1ec4dca6e02616d6/8ae7f021172ade98?tvc=1#8ae7f021172ade98
Talking about the widget code and the "scalable jQuery" write-up.
--John- An update here:
http://dev.jquery.com/ticket/4097
This is the same problem that the ExtJS guys were running across
recently. A reflow caused a resize which caused a reflow, etc.
Supposed it's been fixed post-RC1.
--John- Hey Everyone -
Just finished up the last ticket for 1.3.2 and wanted to throw a copy
out for people to try:
http://code.jquery.com/nightlies/jquery-2009-02-16.js
Please let me know if anything is breaking from 1.3.1 -> 1.3.2.
There were some logic changes - specifically with cloning in IE (lots
of bug fixes), how the selector engine, how :visible/:hidden work,
.height()/.width(), and .ready() in IE - so watch those areas in
particular.
The current full ticket list can be found here:
http://dev.jquery.com/report/33
Thanks!
--John- Hey Guys -
This bug was sent our way:
http://dev.jquery.com/ticket/4097
But I was unable to duplicate it in IE8 RC1:
http://dev.jquery.com/~john/ticket/4097/
Maybe it's something with my test case? Any input would be appreciated.
--John- Hey Everyone -
jQuery 1.3 is out! Full details here:
http://blog.jquery.com/2009/01/14/jquery-13-and-the-jquery-foundation/
Happy 3rd Birthday, jQuery!
--John- Hey Everyone -
jQuery 1.3rc2 is ready. This means that 1.3 is effectively finished
barring a horrible bug between now and the final release on Wednesday
(the 14th).
You can grab the source here:
http://code.jquery.com/jquery-1.3rc2.js
Please let me know, personally, if you find some bad new bug and we
can triage it together.
A screenshot of the final test run can be found here (on 8 browsers):
http://www.flickr.com/photos/jeresig/3192101251/
A couple bugs were found in last night's rc1 one (a problem with
:not(:first) failing, and two problems with disconnected elements
causing problems).
As of right now users of the Validation plugin and jQuery UI will both
need to upgrade to the latest release when they upgrade to jQuery 1.3.
--John- Beta 2 is now out - and we need help testing it! More information here:
http://blog.jquery.com/2009/01/05/help-test-jquery-13-beta-2/
--John- Hi Everyone -
The jQuery dev team just got jQuery 1.3 Beta 1 out the door. Help us
test this release and make sure it goes nice and smoothly!
http://blog.jquery.com/2008/12/22/help-test-jquery-13-beta-1/
Thanks in advance.
--John- Hi Everyone -
I have the first round of jQuery 1.3 patches ready:
http://dev.jquery.com/~john/jquery1.3/
This is in addition to the Sizzle selector engine patch which I posted
a little bit ago (and which I'll be making an updated version of very
soon).
The patches are as follows:
append.patch: Use DocumentFragment in .domManip. This is a large
overhaul of .domManip (and moves some of the logic into jQuery.clean).
The result is that manipulation code (append/prepend/etc.) is about
15x faster. During this overhaul I made a change to how scripts are
executed. Roughly it means that scripts that are brought in as a
string and inserted are executed - but scripts that exist as DOM nodes
are not. This will solve the common problem wherein a script that
already exists in the page will be dual-executed. Let me know if this
affects your code - I suspect we'll learn more during the beta, as
well.
append-2.patch: Just in case, this is the same patch as above, but
with the old-style of functionality intact.
closest.patch: This adds a new method: .closest(selector). You can
think of it as .firstSelfOrAncestor. This has been a commonly
requested function and it will make implementing delegation code
trivial.
domready.patch: An overhaul of the ready code, removing the the "wait
for stylesheets to load" logic. I did a bunch of testing on this and
it really appears as if it's impossible to get proper stylesheet
loading detection implemented (I wanted to have a "cssready" event for
1.3, but it's not looking likely). Instead we need to back off and
simply provide normal DOM ready functionality in .ready(). This means
that we need to educate users to include their stylesheets before
their scripts in order for them to be accessible in time for DOM
ready.
multi-namespace.patch: This adds multiple-namespace support to events.
Previously you could only do it with one namespace e.g.
.bind("click.foo") or .trigger("click.foo"). The patch allows you to
use any number of namespaces e.g.
.bind("click.foo.bar").trigger("click.bar").unbind(".bar.foo").
selector.patch: Adds a new internal property that keeps track of the
selector chain.
$("div").find("span").filter(":hidden").parent().selector == "div
span.filter(:hidden).parent()". This is meant to be used by plugins
(like liveQuery), primarily. The implementation of selectors like
.parent() will be coming in a follow-up patch along with Sizzle.
strict.patch: Makes it so that we pass strict mode in Firefox 3. Only
a few minor tweaks necessary.
I have the following patches coming:
- Landing Sizzle
- Landing .parent()/.filter()/etc. selector implementation.
- Native event delegation
- Removing the remaining uses of jQuery.browser
--John- Hey Everyone -
I created a new Trac query that lets us see all the tickets that have
attachments and aren't closed (specifically attachments that end in
.patch or .diff).
http://dev.jquery.com/report/29
We should probably do some triage and make sure that ones with test
cases get landed, or rejected, here pretty quickly.
--John- Hey Everyone -
I've been working on a new selector engine for jQuery on-and-off again
these past couple months and I finally have something ready to land:
http://dev.jquery.com/ticket/3563
I've been working on the code for this project over here:
http://github.com/jeresig/sizzle/tree/master
(The end goal is to have this become the new default selector engine
in a number of libraries - Prototype, MochiKit, Dojo, and TinyMCE have
all expressed interest in using it, as well.)
It passes the test suite in Firefox 3, Safari 3.1, and IE 6. There is
one minor bug in Firefox 3.1 and another minor one in Opera 9.6 - both
of which are specific browser bugs (and I'm filing appropriately) and
neither of which are show stoppers.
It's a considerable boost in performance over what we have now, in
jQuery. I'll go into specific details later (once we're sure that
there's no major bugs).
Let me know if you have any questions and I'll be happy to answer them
(although I'll be going out of town tomorrow for a week).
--John- <div dir="ltr">Hi Guys -
At the Ajax Experience we talked about possibly making a reusable function for helping to encapsulate much of the functionality commonly seen in jQuery plugins.
The important points seemed to be:
- Plugins need a way to maintain state from one call to the next (generally in the form of 'options').
- The state needs to be directly associated with the elements that they're called on
- There needs to be a default set of options to load state from
- Plugins need to clean-up any events or data that they bind to an element
- All methods introduced by a plugin should have access to the same state
I put my code up here:
<a href="http://dev.jquery.com/~john/plugins/widget/">http://dev.jquery.com/~john/plugins/widget/</a>
<a href="http://dev.jquery.com/~john/plugins/widget/widget.js">http://dev.jquery.com/~john/plugins/widget/widget.js</a>
This is how you would use it:
The most basic call: Adds a single method (.test()) whose 'this' represents an individual element wrapped in a jQuery set. An empty options object is provided, as well.
<pre id="line1">jQuery.plugin("test", function(a, b){
this.options = a;
this.hide(b);
});
jQuery("div").test("woo", "slow");
</pre>Equivalent to the first style shown above.
<pre id="line1">jQuery.plugin("test", {
setup: function(a, b){
this.options = a;
this.hide(b);
}
});
jQuery("div").test("woo", "slow");
</pre>Next step up: A default set of options is provided - which implies that the first argument to .test() will be an options object.
<pre id="line1">jQuery.plugin("test", {
options: { speed: "slow" },
setup: function(){
this.hide( this.options.speed );
}
});
jQuery("div").test({ speed: "fast" });
</pre>Add in some related methods (related to the root setup method) that also have access to the instance and options.
<pre id="line1">jQuery.plugin("test", {
options: { speed: "slow" },
setup: function(){
this.hide( this.options.speed );
},
methods: {
test2: function(){
this.show( this.options.speed );
}
}
});
jQuery("div").test({ speed: "fast" }).test2();
</pre>
Remove some functionality added previously:
<pre id="line1">jQuery.plugin("test", {
options: { name: "test" },
setup: function(){
this.addClass( <a href="http://this.options.name">this.options.name</a> );
},
teardown: function(){
this.removeClass( <a href="http://this.options.name">this.options.name</a> );
}
});
jQuery("div").test({ name: "blah" });
</pre>
and the cleanup is triggered by (where 'test' is the name of the plugin that you wish to remove):
<pre id="line1">jQuery("div").trigger("remove.test");</pre>
It's not completely clear yet what will happen with the above plugin - I just wanted to put it out there since there was some interest in seeing it.
<br clear="all">--John
</div>- <div dir="ltr"><a href="http://drupal.org/node/315035">http://drupal.org/node/315035</a>
<br clear="all">--John
</div>- I'm curious: Are there any pieces of code that use jQuery, right now,
that you feel are unelegant or ugly? (Presumably ones that've already
been optimized to the best of their ability.)
One area of improvement that I was thinking of was something along the lines of:
// ugly
$("#foo").val( $("#bar").val() );
// a bit better
$("#foo").val( $("#bar") );
this would be an easy change, just make .attr() do something like:
if ( arg.jquery )
val = arg.val() || arg.text() || "";
Any other thoughts? I wonder if there are common cases that could be
improved with some simple code additions to core.
--John- Dan Webb has given us a patch for custom event bubbling:
http://dev.jquery.com/attachment/ticket/3379/bubble.patch
Any thoughts?
--John- This seems feasible.
--John
---------- Forwarded message ----------
From: Óscar Toledo G. <uno@biyubi.com>
Date: Tue, Jul 22, 2008 at 11:14 AM
Subject: jQuery enhancement
To: jeresig@gmail.com
John Resig:
Hi, I noted that on jQuery, when it calculates
jQuery.browser.version and not matches Mozilla,
MSIE, Opera or Webkit, it puts the undefined value.
That would of no harm, but Digg.com (on digg.js)
uses this value as version.split('.'), so
non-recognized browsers trigger a JS error, my
suggestion is to change [])[1] to at least:
[0,"1.0"])[1]
or:
userAgent.match(/\/([\d.]+)/))[1]
So 'version' gets assigned a meaningful value.
This would benefit new browsers.
Thanks for your time.
Óscar Toledo G.
http://www.biyubi.com/- Hi Everyone -
I'm working on that method and I think some improvements could be make
if the API was tweaked a little bit - are any plugins using it? I'd
rather not change it if code will break. Thanks!
--John- «Prev
- Next »
Moderate user : jeresig
© 2013 jQuery Foundation
Sponsored by
and others.