Carga de JavaScript dinâmica

Algum tempo atrás eu utilizei um script para adicionar funções de forma dinâmica em uma página. Isto é muito útil em páginas que utilizam AJAX para o processamento e desejam carregar as funções sob demanda ou até mesmo proteger o código apenas para usuários autenticados no sistema, fazendo um script que forneça o código apenas quando está autenticado.

Para verificar se uma função existe, devemos usar o seguinte código:

var functionName = 'minhaFuncao';
if ( typeof functionName == 'string' && eval ( 'typeof ' + functionName) != 'function')
{
  alert ( 'Função disponível.');
} else {
  alert ( 'Função indisponível.');
}

Vale lembrar que temos um furo de segurança em potencial ao utilizar a função eval() sem o tratamento adequado. Ou seja, devemos tratar a variável antes para eliminar quaisquer caractere inválido. Podemos utilizar uma expressão regular para isto, já que o nome de uma função em JavaScript deve possuir apenas letras, números (desde que não seja o primeiro caractere), sifrão (cujo uso é aconselhado apenas em funções criadas sob demanda) e underscore. Melhorando o código, ele fica assim:

var functionName = 'minhaFuncao';
if ( functionName.match ( /^[\_\$a-zA-Z]([\_\$0-9a-zA-Z]+)?$/))
{
  if ( typeof functionName == 'string' && eval ( 'typeof ' + functionName) != 'function')
  {
    alert ( 'Função disponível.');
  } else {
    alert ( 'Função indisponível.');
  }
} else {
  alert ( 'Nome de função inválida.');
}

Para carregar este script, devemos criar um elemento script e configurar o tipo para “text/javascript”, colocando a URL que fornece o script no parâmetro url.

Devemos evitar quaisquer tipo de cache HTTP, tanto pelo lado do servidor como pelo lado do cliente. Para isso, podemos adicionar na URL um parâmetro com um número randômico. Para gerar um número randômico, utilizamos o seguinte código:

alert ( Math.round ( Math.random () * 10000000));

Para testar, clique aqui.

Juntando estas partes, podemos escrever uma função, que ficaria assim:

function loadFunction ( functionName, url)
{
  if ( functionName.match ( /^[\_\$a-zA-Z]([\_\$0-9a-zA-Z]+)?$/))
  {
    if ( typeof functionName == 'string' && eval ( 'typeof ' + functionName) != 'function')
    {
      // Cria novo elemento script tipo "text/javascript":
      var script = document.createElement ( 'script');
      script.type = 'text/javascript';

      // Verifica se a URL informada possui parâmetros (para adicionar ? ou &):
      if ( url.match ( /\?/))
      {
        var separador = '&';
      } else {
        var separador = '?';
      }

      // Adiciona URL ao elemento, adicionando variável anti-cache (número randômico):
      script.src = url + separador + 'antiCache=' + Math.round ( Math.random () * 10000000);

      // Insere o elemento no cabeçalho da página:
      document.getElementsByTagName ( 'head')[0].appendChild ( script);
    }
  }
}

Pode-se também utilizar esta função de forma automatizada, fazendo com que passe o nome da função como um parâmetro para um script PHP que gere o código JavaScript, fazendo assim com que seja utilizado apenas um parâmetro na função, deixando mais fácil a utilização da mesma. Então o código ficaria assim:

function loadFunction ( functionName)
{
  if ( functionName.match ( /^[\_\$a-zA-Z]([\_\$0-9a-zA-Z]+)?$/))
  {
    if ( typeof functionName == 'string' && eval ( 'typeof ' + functionName) != 'function')
    {
      // Cria novo elemento script tipo "text/javascript":
      var script = document.createElement ( 'script');
      script.type = 'text/javascript';

      // Adiciona URL ao elemento, adicionando variável anti-cache (número randômico):
      script.src = 'getfunction.php?function=' + escape ( functionName) + '&antiCache=' + Math.round ( Math.random () * 10000000);

      // Insere o elemento no cabeçalho da página:
      document.getElementsByTagName ( 'head')[0].appendChild ( script);
    }
  }
}