Inherit all methods from Array.prototype! #24
Conversation
If we initiate the ki object by inheriting from `Array.prototype`, we can save ourselves some extensions because we can already natively use ALL array methods on our collections (they of course need to be wrapped again in `$()` to make them ki collections, which requires that the constructor (`i` function) can deal with arrays as input, which is one of the additions to the i function here, others are:
- DOM node creation like jQuery by passing HTML-tags, see other PR
- `$()` now returns a documentFragment (nice to construct HTML in memory and then append it to the DOM) instead of a useless empty collection
I know, this all adds valuable bytes, but we can now also remove the `splice` and `length` props as they are inherited by `Array.prototype` and I think the huge gain in functionality out of the box would justify the increase in size.
the native array methods that collide with jQuery methods, like `find()` for example, can still be easily overwritten with an extension like this:
```
$.fn.find = function(a){
var r = [];
this.each(function(e) {
r = r.concat(this.slice.call(e.querySelectorAll(a)));
});
return $(r);
};
```
which might be appropriate if we try to mirror jQuery, but in other scenarios the native `.find()` might be enough, who know, that's the nice thing about ki =), it can be extended as needed without having to define a bunch of stuff we might need or not...
|
ki.js looks unmaintained, but I found https://github.com/edwinm/miq/blob/master/miq.js? |
|
Hi @exside just for me to understand the code... Would it possible to explain / convert to readable the i function? Interested in the original ki.js and the inheriting from Array.prototype part, because I'm new with JavaScript. |
ki.js
Outdated
| @@ -10,7 +10,7 @@ | |||
| * a = selector, dom element or function | |||
| */ | |||
| function i(a) { | |||
| c.push.apply(this, a && a.nodeType ? [a] : '' + a === a ? b.querySelectorAll(a) : e) | |||
| c.push.apply(this, a && a.nodeType ? [a] : a && Array.isArray(a) ? a : '' + a === a ? ( a[0] === '<' && a[a.length - 1] === '>' ? [b.createElement(a.replace(/^<(\w+)\s*?\/?>[^\n\r\S]*(?:$|<\/\1>)/, '$1'))] : b.querySelectorAll(a) ) : [b.createDocumentFragment()]); | |||
There was a problem hiding this comment.
a[0] === '<' && a[a.length - 1] === '>' is longer than /^<[^\0]+>$/.test(a)
There was a problem hiding this comment.
Absolutely right, thanks! Updated the PR
Add suggestion to shorten check for tag-string input
|
to split the init function a bit apart: // if the input of the init function a single DOM element node, wrap it in an array
a && a.nodeType ? [a] :
// if the input is already an array, leave it as is
a && Array.isArray(a) ? a :
// check if the input is a string
'' + a === a ?
// and if so, does it look like an HTML tag, for example '<div>'
( /^<[^\0]+>$/.test(a) ?
// if so, strip everything except the tag name so document.createElement() can understand it
[b.createElement(a.replace(/^<(\w+)\s*?\/?>[^\n\r\S]*(?:$|<\/\1>)/, '$1'))] :
// if the input is a string but not a tag, pass it as a selector to document.querySelectorAll()
b.querySelectorAll(a) ) :
// and if the init function is called "empty", return a document fragment, e.g. $() will trigger that
[b.createDocumentFragment()]);and yes, miq is nice and was the inspiration to inherit from the array prototype! I do like the modularity of ki better though...miq, even though very small in size, already includes stuff I don't need ever... and regarding being "maintained": AFAIK it was just an experiment to make the smallest possible "jQuery like" library, never intended for anything serious =)...but it works quite well as a little dom helper for me... if you look for something more modern, also have a look at https://github.com/biancojs/bianco |
|
hi @exside what is gained exactly by extending from Array.prototype? what use-cases would this cover? It would help to see some real-world examples :) |
| // for some reason is needed to get an array-like | ||
| // representation instead of an object | ||
| splice: c.splice | ||
| }}, | ||
| } |
There was a problem hiding this comment.
| } | |
| }); |
Otherwise this errors
|
Upon evaluating this pr all seems well except the fix above, @dciccale this can be merged and given the other issue the use is obvious. I have been able to find no reproduction's and massive benefit If you are looking for a maintainer for this I will do it by the way, interested if min can be done by github actions, more tests, and making it a ES6 module |
If we initiate the ki object by inheriting from
Array.prototype, we can save ourselves some extensions because we can already natively use ALL array methods on our collections (they of course need to be wrapped again in$()to make them ki collections, which requires that the constructor (ifunction) can deal with arrays as input, which is one of the additions to the i function here, others are:$()now returns a documentFragment (nice to construct HTML in memory and then append it to the DOM) instead of a useless empty collectionI know, this all adds valuable bytes (~80 bytes to be exact), but we can now also remove the
spliceandlengthprops as they are inherited byArray.prototypeand I think the huge gain in functionality out of the box would justify the increase in size.the native array methods that collide with jQuery methods, like
find()for example, can still be easily overwritten with an extension like this:which might be appropriate if we try to mirror jQuery, but in other scenarios the native
.find()might be enough, who knows... in my opinion that's the nice thing about ki =), it can be extended as needed without having to define a bunch of stuff we might need or not...