Code merging tutorial

Importing one code into another

🤔

Often, users, when learning web programming, are faced with the problem of reusing their own codes without copying of hundreds of program lines.

Up to this point I have not met brave souls who could find a way out of this situation. So I decided to make my method for inserting one code into another.

Is it even possible?

Yes! Moreover, this mechanism is not difficult to understand, because all the additional code takes less than 400 bytes!

// method for embedding code at url
// callback is called after loading
function requireCode(url, callback) {
  // there is quite a bit of code
}

How does it work?

The function creates a request and sends it to the server, and the server returns an html page, which contains the code we need .

// creating request (ES5)
var xhttp = new XMLHttpRequest();
// determining action with response of the server
xhttp.onreadystatechange = function() {
  // check if the response came
  if(this.readyState == 4 && this.state == 200) {
    // as a test, you can simply display
    // the text of the entire web page
    console.log(this.response);
  }
}
// customize and send
// GET request with url
xhttp.open("GET", url);
xhttp.send();

Then it remains only to select the necessary code from the transmitted web page.

How to select only what we need?

In fact, javascript code we need is in two places on the page.

The first place contains the raw code. This is a code in which most characters are not replaced with escape sequences. It is in the input tag with class saveJsCode .

The second place contains safe code. It is a little harder to work with it, since it is modified quite stronger. It is located in the script tag and is assigned to jsCode field of the window object.

<!-- fragment of the received web page -->
<body>
  ...
  <script>
    window.code = "... html code ...";
    window.cssCode = "... css codd ...";
    window.jsCode = "... js code ...";
  </script>
  ...
  <input class="saveJsCode" value="... js code ...">
  ...
</body>

To select only javascript code, a few string methods are enough:

// web page processing
// response - string containing webpage code
var jsCode = response
  .split('.jsCode = "')[1]
  .split('\n')[0].slice(0, -3)
  .replace(/\\n/g, '\n')
  .replace(/\\"/g, '"')
  .replace(/\\\\/g, '\\')
  .replace(/\\u[\dA-F]{4}/gi, function (match) {
    return String.fromCharCode(parseInt
      (match.replace(/\\u/g, ''), 16));
  });

Putting it all together

After selecting the necessary code from web page, you can call the callback (jsCode) function or immediately run the code for execution by eval (jsCode) function. In any case, the work of our algorithm ends here. Here is the entire code of the function requireCode :

// method for embedding code at url
// callback is called after loading
function requireCode(url, callback) {
  // creating request (ES5)
  var xhttp = new XMLHttpRequest();
  // determining action with response of the server
  xhttp.onreadystatechange = function() {
    // check if the response came
    if(this.readyState == 4 && this.state == 200) {
      // this.response - string containing webpage code
      var jsCode = this.response
        .split('.jsCode = "')[1]
        .split('\n')[0].slice(0, -3)
        .replace(/\\n/g, '\n')
        .replace(/\\"/g, '"')
        .replace(/\\\\/g, '\\')
        .replace(/\\u[\dA-F]{4}/gi, function (match) {
          return String.fromCharCode(parseInt
            (match.replace(/\\u/g, ''), 16));
        });
      callback(jsCode);
    }
  }
  // customize and send
  // GET request with url
  xhttp.open("GET", url);
  xhttp.send();
}

~400 bytes in compressed form.

Импортирование одного кода в другой

🤔

Часто пользователи, осваивая веб-программирование, сталкиваются с проблемой повторного использования своего же кода без банального копирования сотен строк программы.

До этого момента мне не встречались смельчаки, которые смогли бы найти выход из этой ситуации. Поэтому я решил сделать свой метод для вставки одного кода в другой.

А это вообще возможно?

Да! Более того, этот механизм не сложно понять, ведь весь дополнительный код занимает менее 400 байт!

// метод для встраивания кода по адресу url
// после загрузки вызывается callback
function requireCode(url, callback) {
  // тут совсем немного кода
}

А как это работает?

Всё очень просто. Функция создаёт запрос и отправляет его на сервер, а сервер в свою очередь возвращает html страницу, в которой и содержится нужный нам код.

// создание запроса (ES5)
var xhttp = new XMLHttpRequest();
// определение действий с ответом сервера
xhttp.onreadystatechange = function() {
  // проверяем, пришел ли ответ
  if(this.readyState == 4 && this.state == 200) {
    // в качестве теста можно просто
    // вывести текст всей веб-страницы
    console.log(this.response);
  }
}
// настраиваем и отправляем
// GET запрос по адресу url
xhttp.open("GET", url);
xhttp.send();

Далее остается только выделить нужный код из переданной веб-страницы.

Как выделить только то, что нам нужно?

На самом деле javascript код, который нам нужен, находится в двух местах на странице.

Первое место содержит сырой код. Это код, в котором большинство символов не заменены на escape-последовательности. Он находится в тэге input с классом saveJsCode.

Второе место содержит обезвреженный код. С ним немного сложнее работать, так как он модифицирован достаточно сильно. Он находится в тэге script, и присваивается полю jsCode объекта window.

<!-- фрагмент полученной веб-страницы -->
<body>
  ...
  <script>
    window.code = "... html код ...";
    window.cssCode = "... css код ...";
    window.jsCode = "... js код ...";
  </script>
  ...
  <input class="saveJsCode" value="... js код ...">
  ...
</body>

Чтобы выделить только javascript код, достаточно нескольких строковых методов:

// обработка веб-страницы
// response - строка, содержащая код веб-страницы
var jsCode = response
  .split('.jsCode = "')[1]
  .split('\n')[0].slice(0, -3)
  .replace(/\\n/g, '\n')
  .replace(/\\"/g, '"')
  .replace(/\\\\/g, '\\')
  .replace(/\\u[\dA-F]{4}/gi, function (match) {
    return String.fromCharCode(parseInt
      (match.replace(/\\u/g, ''), 16));
  });

Собираем всё вместе

После выделения нужного кода из веб-страницы, можно вызвать функцию callback(jsCode) или сразу запустить код на выполнение функцией eval(jsCode). В любом случае работа нашего алгоритма на этом завершается. Вот весь код функции requireCode:

// метод для встраивания кода по адресу url
// после загрузки вызывается callback
function requireCode(url, callback) {
  // создание запроса (ES5)
  var xhttp = new XMLHttpRequest();
  // определение действий с ответом сервера
  xhttp.onreadystatechange = function() {
    // проверяем, пришел ли ответ
    if(this.readyState == 4 && this.state == 200) {
      // this.response - строка, содержащая
      // код веб-страницы
      var jsCode = this.response
        .split('.jsCode = "')[1]
        .split('\n')[0].slice(0, -3)
        .replace(/\\n/g, '\n')
        .replace(/\\"/g, '"')
        .replace(/\\\\/g, '\\')
        .replace(/\\u[\dA-F]{4}/gi, function (match) {
          return String.fromCharCode(parseInt
            (match.replace(/\\u/g, ''), 16));
        });
      callback(jsCode);
    }
  }
  // настраиваем и отправляем
  // GET запрос по адресу url
  xhttp.open("GET", url);
  xhttp.send();
}

~400 байт в сжатом виде.

How to import one code in another