Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

improved caching and use subclassed Arrays for classList #1

Closed
wants to merge 2 commits into from

3 participants

@fearphage

No description provided.

@wyuenho wyuenho commented on the diff
classList.js
((70 lines not shown))
});
-})();
+// detech mutation support
+div.addEventListener('DOMAttrModified'
@wyuenho
wyuenho added a note

Breaks IE8.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@wyuenho wyuenho commented on the diff
classList.js
((57 lines not shown))
-window.DOMTokenList = DOMTokenList;
+// IE doesn't maintain the length of subclassed arrays but we don't need it
+DOMTokenList.prototype = new Array;
@wyuenho
wyuenho added a note

DOMTokenList is not an array. DOMTokenList only has a length property. This implementation is not spec conformant.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@wyuenho wyuenho commented on the diff
classList.js
((15 lines not shown))
this._element = el;
- if (el.className != this.classCache) {
- this._classCache = el.className;
-
- var classes = this._classCache.split(' '),
- i;
- for (i = 0; i < classes.length; i++) {
- push.call(this, classes[i]);
- }
+ this.push.apply(this, el.className.split(regex));
+ // cache it if we can
+ if (mutationSupported) {
@wyuenho
wyuenho added a note

Why do you need to cache anything? this._element.className is a perfectly good cache.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@wyuenho wyuenho commented on the diff
classList.js
((22 lines not shown))
- },
- toggle: function(token) {
- if (indexOf.call(this, token) === -1) {
- this.add(token);
- } else {
- this.remove(token);
+var
+ key
+ ,regex = /\s+/g
+ ,methods = {
+ add: function(token) {
+ this.push(token);
+ setToClassName(this._element, this);
+ },
+ contains: function(token) {
+ return this.indexOf(token) != -1;
@wyuenho
wyuenho added a note

Breaks IE8.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@wyuenho

#29 supercedes this.

@remy remy closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Feb 8, 2011
  1. @fearphage

    use subclassed array instead of just array methods

    fearphage authored
    removed caching (didn't work as expected)
Commits on Feb 18, 2011
  1. @fearphage

    moar caching

    fearphage authored
This page is out of date. Refresh to see the latest.
Showing with 53 additions and 45 deletions.
  1. +53 −45 classList.js
View
98 classList.js
@@ -1,23 +1,13 @@
-(function () {
+(function (global) {
-if (typeof window.DOMTokenList !== 'undefined') return;
+if (typeof global.DOMTokenList !== 'undefined') return;
-var indexOf = [].indexOf,
- slice = [].slice,
- push = [].push,
- splice = [].splice,
- join = [].join;
-
-function DOMTokenList(el) {
+function DOMTokenList(el) {
this._element = el;
- if (el.className != this.classCache) {
- this._classCache = el.className;
-
- var classes = this._classCache.split(' '),
- i;
- for (i = 0; i < classes.length; i++) {
- push.call(this, classes[i]);
- }
+ this.push.apply(this, el.className.split(regex));
+ // cache it if we can
+ if (mutationSupported) {
@wyuenho
wyuenho added a note

Why do you need to cache anything? this._element.className is a perfectly good cache.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+ el._tokenList = this;
}
};
@@ -25,38 +15,56 @@ function setToClassName(el, classes) {
el.className = classes.join(' ');
}
-DOMTokenList.prototype = {
- add: function(token) {
- push.call(this, token);
- setToClassName(this._element, slice.call(this, 0));
- },
- contains: function(token) {
- return indexOf.call(this, token) !== -1;
- },
- item: function(index) {
- return this[index] || null;
- },
- remove: function(token) {
- var i = indexOf.call(this, token);
- splice.call(this, i, 1);
- setToClassName(this._element, slice.call(this, 0));
- },
- toString: function() {
- return join.call(this, ' ');
- },
- toggle: function(token) {
- if (indexOf.call(this, token) === -1) {
- this.add(token);
- } else {
- this.remove(token);
+var
+ key
+ ,regex = /\s+/g
+ ,methods = {
+ add: function(token) {
+ this.push(token);
+ setToClassName(this._element, this);
+ },
+ contains: function(token) {
+ return this.indexOf(token) != -1;
@wyuenho
wyuenho added a note

Breaks IE8.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+ },
+ item: function(index) {
+ return this[index] || null;
+ },
+ remove: function(token) {
+ this.splice(this.indexOf(token), 1);
+ setToClassName(this._element, this);
+ },
+ toString: function() {
+ return this.join(' ');
+ },
+ toggle: function(token) {
+ this[this.indexOf(token) == -1 ? 'add' : 'remove'](token);
}
}
-};
+ ,div = document.createElement('div')
+ ,mutationSupported = false
+;
-window.DOMTokenList = DOMTokenList;
+// IE doesn't maintain the length of subclassed arrays but we don't need it
+DOMTokenList.prototype = new Array;
@wyuenho
wyuenho added a note

DOMTokenList is not an array. DOMTokenList only has a length property. This implementation is not spec conformant.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+
+for (key in methods) {
+ DOMTokenList.prototype[key] = methods[key];
+}
+global.DOMTokenList = DOMTokenList;
Element.prototype.__defineGetter__('classList', function () {
- return new DOMTokenList(this);
+ return this._tokenList || new DOMTokenList(this);
});
-})();
+// detech mutation support
+div.addEventListener('DOMAttrModified'
@wyuenho
wyuenho added a note

Breaks IE8.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+ ,function detectMutation() {
+ mutationSupported = true;
+ this.removeEventListener('DOMAttrModified', detectMutation, false);
+ }
+ ,false
+);
+div.setAttribute('foo', 'bar');
+div = null;
+document.addEventListener('DOMAttrModified', function (e) { delete e.target._tokenList; }, false);
+})(this);
Something went wrong with that request. Please try again.