Форум

Manyahin · #1 (**permalink**) 16.04.2014, 13:09

<!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 строчек, что бы код выше работал. Как?

devote · #2 (**permalink**) 16.04.2014, 13:38

Самый грубый вариант:

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

Manyahin · #3 (**permalink**) 16.04.2014, 13:44

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

devote · #4 (**permalink**) 16.04.2014, 13:45

еще вариант:

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

Manyahin · #5 (**permalink**) 24.04.2014, 01:10

самое внятное по моему из всех

var $ = function(selector) { 
  var els = document.querySelectorAll(selector);
  return {
    text: function(val) {
      Array.prototype.forEach.call(els, function(el) {
        el.textContent = val;
      });
    }
  };
};

Форум

Справочник

Discord чат

Курсы javascript