БлогNot. Javascript: как показать коды всех функций из документа?

Javascript: как показать коды всех функций из документа?

На самом деле, самый простой и естественный путь - приложить исходник JS-файла, как делаю я в этом блоге. Но если очень хочется, есть пути и для решения задачи, указанной в заголовке. Приведённый код, скорее, учебный, но подход к проблеме показывает.

Для отображения списка функций подготовим в документе HTML-список <select> с идентификатором selectFunctionId и предустановленной строкой-опцией "Выберите функцию из списка".

Для отображения кода выбранной из списка функции с соблюдением переводов строк в коде будет служить элемент HTML <pre> с идентификатором showFunctionId.

<select id="selectFunctionId" onchange="showFuncs(this.options[this.selectedIndex].value);">
 <option>Выберите функцию из списка
</select>
<pre id="showFunctionId"></pre>

Весь остальной код поместим в обычный тег яваскрипта, функции f1 и f2 добавлены "просто так", чтобы Вы увидели хоть какие-то коды, метод showFuncs умеет показывать тело функции с именем, которое передано ему аргументом, а метод getAllFuncs формирует массив с именами функций, полученных из объекта, переданного аргументом. Мы передадим в качестве аргумента этого метода непосредственно javascript-объект window, следует понимать, что при этом в список могут попасть и имена функций, полученных из ваших встроенных виджетов-расширений браузера и т.п.

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

Отдельно заметим, что показанный подход не сработает для стандартных объектов вроде Math или нативных функций из подписанных расширений браузера, так как они не являются перечислимыми. Для них при попытке просмотра кода мы получим что-то вроде

function open() { [native code] }

Глобальный код под всеми функциями показывает, как загрузить javascript-массив в опции существующего в документе тега <select>.

Вот скрипт в работе, а под катом - полный исходник (без обрамления HTML).



<select id="selectFunctionId" onchange="showFuncs(this.options[this.selectedIndex].value);">
 <option>Выберите функцию из списка
</select>
<pre id="showFunctionId"></pre>
<script type="text/javascript">
 //Просто пара функций для примера:
 function f1(x) { return Math.sqrt(Math.abs(x)); }
 function f2(x) { return (x<0?-1:(x>0?1:0)); }

 function showFuncs (fName) { //Показать код функции с именем fName
  document.getElementById('showFunctionId').innerHTML = eval(fName).toString();
 }

 function getAllFuncs (obj) { //Получить массив с именами функций из объекта obj
  var methods = [];
  for (var m in obj) {        
   if (typeof obj[m] == "function" && obj.hasOwnProperty(m)
 //      && obj.propertyIsEnumerable(m)==true //только перечислимые свойства в список!
      ) {
    methods.push (m);
   }
  }
  return methods;
 }

 //Загрузить массив опций options в элемент HTML select
 var options=getAllFuncs(window);
 var select = document.getElementById("selectFunctionId");
 for (var i = 0; i < options.length; i++) {
  var opt = options[i];
  var el = document.createElement("option");
  el.textContent = opt;
  el.value = opt;
  select.appendChild (el);
 }
</script>
<noscript><div>Извините, требуется включённый Javascript для работы примера!</div></noscript>

26.11.2017, 19:30 [2420 просмотров]


теги: программирование javascript список

К этой статье пока нет комментариев, Ваш будет первым