Проблемы с созданием текстового узла в голове с помощью функции JS

Question

Это первый раз, когда я работаю с самозапускающимися анонимными функциями, однако я считаю, что мне не хватает чего-то фундаментального и прямо перед моим лицом. По сути, я пытаюсь передать аргумент через функцию writeFontFace() и заставить его написать следующий код в заголовке моего документа, например:

@font-face {
    font-family: 'arrows';
    src: url('fonts/arrows/arrows.eot?');
    src: url('fonts/arrows/arrows.eot?#iefix') format('embedded-opentype'),
         url('fonts/arrows/arrows.woff?') format('woff'),
         url('fonts/arrows/arrows.ttf?') format('truetype'),
         url('fonts/arrows/arrows.svg?#arrows') format('svg');
    font-weight: normal;
    font-style: normal;
}

Теперь, если я откомментирую оператор 'return' в конце этой функции (writeFontFace), я получу соответствующий вывод, который я ожидаю получить, однако (по какой-либо причине) он не добавляет переменную 'script' (содержащий вышеупомянутое определение @ font-face) внутри заголовка моего документа? Не могу понять, почему. Любые предложения и / или комментарии, безусловно, будут оценены... И снова, я впервые работаю с самозапускающимися анонимными функциями, поэтому я был бы признателен за низкий уровень сарказма, если кто-то чувствует, что у него может быть конструктивная критика и / или совет. Как всегда, большое признание заранее.

Приветствия

• Самоисполняющаяся анонимная функция

  (function() {
  
       /**
        * Object Literal           {Property Values}           Constant: property values to be used throughout this object
        */
        const vars = {
             decCharPrefix : '&#',
             decCharSuffix : ';',
             baseGlyphValue: 59392,
           }
       };
  
       /**
        * bpIconFont               {Constructor}               Core: constructor for this library; ensures that this library is instantiated if an internal method is called
        */
       var bpIconFont = function() {
           if(!(this instanceof bpIconFont))
               return new bpIconFont();
       };
  
       /**
        * bpIconFont.fn
        */
       bpIconFont.fn = bpIconFont.prototype = {
           init: function() {
               console.log('bpIconFont Initialized!');
           }
       }
  
       window.bpIconFont = bpIconFont;                         // Expose: anonymous self-executing function to DOM
  
  })();
  
  /**
   * getFontDirectroy         {Method}                    Gets: generates the directory to which the passed font will be placed, via relative path
   * @param                   {Array/String} font         Converts: the passed array or string and generates a 'relative path' for the desired font
   * @return                  {Array/String}              Returns: the relative path for the font
   */
  bpIconFont.fn.getFontDirectroy = function(font) {
      var fontDir = 'fonts/' + font + '/';
      return fontDir;
  };
  
  /**
   * getFontDirectroy         {Method}                    Gets: generates the directory to which the passed font will be placed, via relative path
   * @param                   {Array/String} font         Converts: the passed array or string and generates a 'relative path' for the desired font
   * @return                  {Array/String}              Returns: the relative path for the font
   */
  bpIconFont.fn.writeFontFace = function(font) {
      var dir    = bpIconFont().getFontDirectroy(font);
      var head   = document.getElementsByTagName("head")[0];
      var script = document.createElement('style');
          script.setAttribute('type', 'text/css');
  
      var fontFace = '@font-face {' +
                    '\n\tfont-family: \'' + font +
                  '\';\n\tsrc: url(\'' + dir + font + '.eot?\');' +
                     '\n\tsrc: url(\'' + dir + font + '.eot?#iefix\') format(\'embedded-opentype\'),' +
                       '\n\t\t url(\'' + dir + font + '.woff?\') format(\'woff\'),' +
                       '\n\t\t url(\'' + dir + font + '.ttf?\') format(\'truetype\'),' +
                       '\n\t\t url(\'' + dir + font + '.svg?#' + font + '\') format(\'svg\');' +
                     '\n\tfont-weight: normal;' +
                     '\n\tfont-style: normal;' +
                  '\n}';
  
      script.appendChild(document.createTextNode(fontFace));
  
      head.appendChild(script);
  
      // return fontFace;
  };
  

Answer 1

По сути, если кто-то столкнется с подобной проблемой, приведенный ниже код должен предоставить вам соответствующее исправление:

(function() {

     /**
      * bpIconFont               {Constructor}               Core: constructor for this library; ensures that this library is instantiated if an internal method is called
      */
     var bpIconFont = function() {
         if(!(this instanceof bpIconFont))
         return new bpIconFont();
     };

     /**
      * bpIconFont.fn
      */
     bpIconFont.fn = bpIconFont.prototype = {
         init: function() {
             console.log('bpIconFont Initialized!');
         }
     }

     window.bpIconFont = bpIconFont;                         // Expose: anonymous self-executing function to DOM

})();

     /**
      * Object Literal           {Property Values}           Constant: property values to be used throughout this object
      */
    vars = {
        decCharPrefix : '&#',
        decCharSuffix : ';',
        baseGlyphValue: 59392,
    };

/**
 * getFontDirectroy         {Method}                    Gets: generates the directory to which the passed font will be placed, via relative path
 * @param                   {Array/String} font         Converts: the passed array or string and generates a 'relative path' for the desired font
 * @return                  {Array/String}              Returns: the relative path for the font
 */
bpIconFont.fn.getFontDirectroy = function(font) {
    var fontDir = 'fonts/' + font + '/';
    return fontDir;
};

/**
 * getFontDirectroy         {Method}                    Gets: generates the directory to which the passed font will be placed, via relative path
 * @param                   {Array/String} font         Converts: the passed array or string and generates a 'relative path' for the desired font
 * @return                  {Array/String}              Returns: the relative path for the font
 */
bpIconFont.fn.writeFontFace = function(font) {
    var dir    = bpIconFont().getFontDirectroy(font);
    var head   = document.getElementsByTagName("head")[0];
    var script = document.createElement('style');
        script.setAttribute('type', 'text/css');

    var cssDef = '\ndiv#output-window {' +
                 '\n\tfont-family:\'' + font + '\';' +
                 '\n}';

    var fontFace = '@font-face {' +
                  '\n\tfont-family: \'' + font +
                '\';\n\tsrc: url(\'' + dir + font + '.eot?\');' +
                   '\n\tsrc: url(\'' + dir + font + '.eot?#iefix\') format(\'embedded-opentype\'),' +
                     '\n\t\t url(\'' + dir + font + '.woff?\') format(\'woff\'),' +
                     '\n\t\t url(\'' + dir + font + '.ttf?\') format(\'truetype\'),' +
                     '\n\t\t url(\'' + dir + font + '.svg?#' + font + '\') format(\'svg\');' +
                   '\n\tfont-weight: normal;' +
                   '\n\tfont-style: normal;' +
                '\n}';

    script.appendChild(document.createTextNode(fontFace));
    script.appendChild(document.createTextNode(cssDef));
    head.appendChild(script);

};