Tiny implementation of jquery
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <div class="a">A</div> <div class="a">B</div> </body> </html> У нас два дива с одинаковым классом. И JS код. $('.a').text('X');
Надо написать крошечную имплементацию jQuery на 5-10 строчек, что бы код выше работал. Как? |
Самый грубый вариант:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script type="text/javascript">
(function() {
function $(selector) {
return new $.prototype.init(selector);
}
$.prototype = {
constructor: $,
length: 0,
init: function(selector) {
var elem, elems = document.querySelectorAll(selector);
for(var i = 0; i < elems.length; i++) {
this[i] = elems[i];
}
this.length = elems.length;
return this;
},
text: function(text) {
for(var i = 0; i < this.length; i++) {
this[i].innerHTML = text;
}
return this;
}
}
$.prototype.init.prototype = $.prototype;
window.$ = $;
}());
</script>
</head>
<body>
<div class="a">A</div>
<div class="a">B</div>
<script>
$('.a').text('X');
</script>
</body>
</html>
|
var $ = (function(){
function jQuery() {
this.elms = null;
return this;
}
jQuery.prototype.query = function(query) {
this.elms = document.querySelectorAll(query);
return this;
}
jQuery.prototype.text = function(str){
if(!this.elms) return this;
Array.prototype.forEach.call(this.elms, function(elm){
elm.textContent = str;
});
console.log(this);
return this;
}
return function(query){
var $ = new jQuery;
return $.query(query);
};
})();
$('.a').text('X');
second var $ = (function(){
var elms = null, self = {
text: function(str){
if(!elms) return this;
Array.prototype.forEach.call(elms, function(elm){
elm.textContent = str;
});
return this;
}
};
return function(query){
elms = document.querySelectorAll(query);
return self;
};
})();
тут chain можно сделать $('.a').text('t').text('z') nvm, thx |
еще вариант:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script type="text/javascript">
(function() {
function $(selector) {
return this instanceof $ ? this.find(selector) : new $(selector);
}
$.prototype = {
constructor: $,
length: 0,
find: function(selector) {
var elem, elems = document.querySelectorAll(selector);
for(var i = 0; i < elems.length; i++) {
this[i] = elems[i];
}
this.length = elems.length;
return this;
},
text: function(text) {
for(var i = 0; i < this.length; i++) {
this[i].innerHTML = text;
}
return this;
}
}
window.$ = $;
}());
</script>
</head>
<body>
<div class="a">A</div>
<div class="a">B</div>
<script>
$('.a').text('X');
</script>
</body>
</html>
|
самое внятное по моему из всех
var $ = function(selector) {
var els = document.querySelectorAll(selector);
return {
text: function(val) {
Array.prototype.forEach.call(els, function(el) {
el.textContent = val;
});
}
};
};
|
| Часовой пояс GMT +3, время: 07:48. |