Раскрытие магии JavaScript

Мы используем тонны инструментов каждый день. Различные библиотеки и фреймворки являются частью нашей повседневной работы. Мы используем их, потому что мы не хотим изобретать велосипед для каждого проекта, даже если мы не понимаем, что происходит под капотом. В этой статье мы расскажем о некоторых магических процессах, происходящих в самых популярных библиотеках. Мы также посмотрим, сможем ли мы повторить их поведение.

Создание элементов DOM из строки

С появлением одностраничных приложений мы многое делаем с JavaScript. Большая часть логики нашего приложения была перенесена в браузер. Это общая задача для создания или замены элементов на странице. Код, подобный тому, что показан ниже, стал очень распространенным.

var text = $('<div>Simple text</div>');

$('body').append(text);

Результатом является новый элемент <div> Эта простая операция выполняется только с одной строкой jQuery. Без jQuery код немного сложнее, но не намного:

 var stringToDom = function(str) {
  var temp = document.createElement('div');

  temp.innerHTML = str;
  return temp.childNodes[0];
}
var text = stringToDom('<div>Simple text</div>');

document.querySelector('body').appendChild(text);

Мы определили наш собственный служебный метод stringToDom<div> Мы изменили его свойство innerHTML Это работало так же. Тем не менее, мы увидим разные результаты со следующим кодом:

 var tableRow = $('<tr><td>Simple text</td></tr>');
$('body').append(tableRow);

var tableRow = stringToDom('<tr><td>Simple text</td></tr>');
document.querySelector('body').appendChild(tableRow);

Визуально, на странице нет никаких отличий. Однако, если мы проверим сгенерированную разметку с помощью инструментов разработчика Chrome, мы получим интересный результат:

Похоже, наша функция stringToDom<tr> Но в то же время jQuery как-то удалось это сделать. Проблема в том, что строка, содержащая элемент HTML, запускается через парсер в браузере. Этот синтаксический анализатор игнорирует теги, которые не помещены в правильный контекст, и мы получаем только текстовый узел. Строка таблицы без таблицы недопустима для браузера.

jQuery успешно решает проблему, создавая правильный контекст и извлекая только необходимую часть. Если мы немного покопаемся в коде библиотеки, то увидим карту, подобную этой:

 var wrapMap = {
  option: [1, '<select multiple="multiple">', '</select>'],
  legend: [1, '<fieldset>', '</fieldset>'],
  area: [1, '<map>', '</map>'],
  param: [1, '<object>', '</object>'],
  thead: [1, '<table>', '</table>'],
  tr: [2, '<table><tbody>', '</tbody></table>'],
  col: [2, '<table><tbody></tbody><colgroup>', '</colgroup></table>'],
  td: [3, '<table><tbody><tr>', '</tr></tbody></table>'],
  _default: [1, '<div>', '</div>']
};
wrapMap.optgroup = wrapMap.option;
wrapMap.tbody = wrapMap.tfoot = wrapMap.colgroup = wrapMap.caption = wrapMap.thead;
wrapMap.th = wrapMap.td;

Каждому элементу, который требует специальной обработки, назначен массив. Идея состоит в том, чтобы создать правильный элемент DOM и зависеть от уровня вложенности, чтобы получить то, что нам нужно. Например, для элемента <tr><tbody> Итак, у нас есть два уровня вложенности.

Имея карту, мы должны выяснить, какой тег мы хотим в конце. Следующий код извлекает tr<tr><td>Simple text</td></tr>

 var match = /<\s*\w.*?>/g.exec(str);
var tag = match[0].replace(/</g, '').replace(/>/g, '');

Остальное — найти правильный контекст и вернуть элемент DOM. Вот последний вариант функции stringToDom

 var stringToDom = function(str) {
  var wrapMap = {
    option: [1, '<select multiple="multiple">', '</select>'],
    legend: [1, '<fieldset>', '</fieldset>'],
    area: [1, '<map>', '</map>'],
    param: [1, '<object>', '</object>'],
    thead: [1, '<table>', '</table>'],
    tr: [2, '<table><tbody>', '</tbody></table>'],
    col: [2, '<table><tbody></tbody><colgroup>', '</colgroup></table>'],
    td: [3, '<table><tbody><tr>', '</tr></tbody></table>'],
    _default: [1, '<div>', '</div>']
  };
  wrapMap.optgroup = wrapMap.option;
  wrapMap.tbody = wrapMap.tfoot = wrapMap.colgroup = wrapMap.caption = wrapMap.thead;
  wrapMap.th = wrapMap.td;
  var element = document.createElement('div');
  var match = /<\s*\w.*?>/g.exec(str);

  if(match != null) {
    var tag = match[0].replace(/</g, '').replace(/>/g, '');
    var map = wrapMap[tag] || wrapMap._default, element;
    str = map[1] + str + map[2];
    element.innerHTML = str;
    // Descend through wrappers to the right content
    var j = map[0]+1;
    while(j--) {
      element = element.lastChild;
    }
  } else {
    // if only text is passed
    element.innerHTML = str;
    element = element.lastChild;
  }
  return element;
}

Обратите внимание, что мы проверяем, есть ли в строке тег — match != null Если нет, мы просто возвращаем текстовый узел. Все еще используется временный <div> В конце, используя цикл while, мы продвигаемся все глубже и глубже, пока не достигнем нужного тега.

Вот CodePen, показывающий нашу реализацию:

 while

 $http

 dataMockup

 displayUsers()

 ajax

 target

 resolve

 displayUsers = injector.resolve(displayUsers);
displayUsers();

 resolve

 storage

 target

 target

 App.Person = Ember.Object.extend({
  firstName: null,
  lastName: null,
  fullName: function() {
    return this.get('firstName') + ' ' + this.get('lastName');
  }.property('firstName', 'lastName')
});
var ironMan = App.Person.create({
  firstName: "Tony",
  lastName:  "Stark"
});
ironMan.get('fullName') // "Tony Stark"

 Function.prototype.property = function() {
  var ret = Ember.computed(this);
  // ComputedProperty.prototype.property expands properties; no need for us to
  // do so here.
  return ret.property.apply(ret, arguments);
};

 var User = {
  firstName: 'Tony',
  lastName: 'Stark',
  name: function() {
    // getter + setter
  }
};

console.log(User.name); // Tony Stark
User.name = 'John Doe';
console.log(User.firstName); // John
console.log(User.lastName); // Doe

 var User = {
  firstName: 'Tony',
  lastName: 'Stark'
};
Object.defineProperty(User, "name", {
  get: function() { 
    return this.firstName + ' ' + this.lastName;
  },
  set: function(value) { 
    var parts = value.toString().split(/ /);
    this.firstName = parts[0];
    this.lastName = parts[1] ? parts[1] : this.lastName;
  }
});

 console.log(User.name); // Tony Stark
User.name = 'John Doe';
console.log(User.firstName); // John
console.log(User.lastName); // Doe

 var Computize = function(obj) {
  return obj;
}
var User = Computize({
  firstName: 'Tony',
  lastName: 'Stark',
  name: function() {
    ...
  }
});

 Function.prototype.computed = function() {
  return { computed: true, func: this };
};

 name: function() {
  ...
}.computed()

 var Computize = function(obj) {
  for(var prop in obj) {
    if(typeof obj[prop] == 'object' && obj[prop].computed === true) {
      var func = obj[prop].func;
      delete obj[prop];
      Object.defineProperty(obj, prop, {
        get: func,
        set: func
      });
    }
  }
  return obj;
}

 var User = Computize({
  firstName: 'Tony',
  lastName: 'Stark',
  name: function() {
    if(arguments.length > 0) {
      var parts = arguments[0].toString().split(/ /);
      this.firstName = parts[0];
      this.lastName = parts[1] ? parts[1] : this.lastName;
    }
    return this.firstName + ' ' + this.lastName;
  }.computed()
});

 console.log(User.name); // Tony Stark
User.name = 'John Doe';
console.log(User.firstName); // John
console.log(User.lastName); // Doe
console.log(User.name); // John Doe

 <script type="text/jsx">;
  /** @jsx React.DOM */
  var HelloMessage = React.createClass({
    render: function() {
      return <div>Hello {this.props.name}</div>;
    }
  });
</script>;

 <script type="text/template" id="my-content">;
  <div class="content">;
    <h1>;<% title %>;</h1>;
  </div>;
</script>;

 var Component = {
  title: 'Awesome template',
  render: '#my-content'
}

 var Engine = function(comp) {
  var parse = function(tplHTML) {
    // ... magic
  }
  var tpl = document.querySelector(comp.render);
  if(tpl) {
    var html = parse(tpl.innerHTML);
    return stringToDom(html);
  }
}
var el = Engine(Component);

 while

 var parse = function(tplHTML) {
  var re = /<%([^%>]+)?%>/g;
  while(match = re.exec(tplHTML)) {
    console.log(match);
  }
}

 comp

 var fn = new Function('arg', 'console.log(arg + 1);');
fn(2); // outputs 3

 var parse = function(tplHTML) {
  var re = /<%([^%>]+)?%>/g;
  var code = [], cursor = 0;
  while(match = re.exec(tplHTML)) {
    code.push(tplHTML.slice(cursor, match.index));
    code.push({code: match[1]}); // <-- expression
    cursor = match.index + match[0].length;
  }
  code.push(tplHTML.substr(cursor, tplHTML.length - cursor));
  console.log(code);
}

 [
  "<div class="content"><h1>", 
  { code: "title" },
  "</h1></div>"
]

 return "<div class=\"content\"><h1>" + title + "</h1></div>";

 // component
var Component = {
  title: 'Awesome template',
  colors: ['read', 'green', 'blue'],
  render: '#my-content'
}

// template
<script type="text/template" id="my-content">
    <div class="content">
        <h1><% title %></h1>
        <% while(c = colors.shift()) { %>
            <p><% c %></p>
        <% } %>
    </div>
</script>

 var parse = function(tplHTML) {
  var re = /<%([^%>]+)?%>/g;
  var code = [], cursor = 0;
  while(match = re.exec(tplHTML)) {
    code.push(tplHTML.slice(cursor, match.index));
    code.push({code: match[1]}); // <-- expression
    cursor = match.index + match[0].length;
  }
  code.push(tplHTML.substr(cursor, tplHTML.length - cursor));
  var body = 'var r=[];\n';
  while(line = code.shift()) {
    if(typeof line === 'string') {
      // escaping quotes
      line = line.replace(/"/g, '\\"');
      // removing new lines
      line = line.replace(/[\r\t\n]/g, '');
      body += 'r.push("' + line+ '");\n'
    } else {
      if(line.code.match(/(^( )?(if|for|else|switch|case|break|while|{|}))(.*)?/g)) {
        body += line.code + '\n';
      } else {
        body += 'r.push(' + line.code + ');\n';
      }
    }
  }
  body += 'return r.join("");';
  console.log(body);
}

 var r=[];
r.push("<div class=\"content\"><h1>");
r.push(title);
r.push("</h1>");

while(c = colors.shift()) { 
  r.push("<p>");
  r.push(c);
  r.push("</p>");
}

r.push("</div>");
return r.join("");

 body = 'with(component) {' + body + '}';
return new Function('component', body).apply(comp, [comp]);