CoffeeScript - jQuery

jQuery é uma biblioteca / framework rápida e concisa construída usando JavaScript criado por John Resig em 2006 com um bom lema - Escreva menos, faça mais.

jQuery simplifica a passagem de documentos HTML, manipulação de eventos, animação e interações Ajax para um desenvolvimento web rápido. Visite nosso tutorial jQuery para saber mais sobre jQuery .

Também podemos usar CoffeeScript para trabalhar com jQuery. Este capítulo ensina como usar o CoffeeScript para trabalhar com jQuery.

Usando CoffeeScript com jQuery

Embora o jQuery resolva os problemas do navegador, usá-lo com JavaScript, que tem algumas partes ruins, é um pouco problemático. Usar CoffeeScript em vez de JavaScript é uma ideia melhor.

Mantenha os seguintes pontos em mente ao converter o to be ao usar jQuery com CoffeeScript.

o $símbolo indica o código jQuery em nosso aplicativo. Use isso para separar o código jQuery da linguagem de script, conforme mostrado abaixo.

$(document).ready

Não há necessidade de usar colchetes no CoffeeScript exceto ao chamar as funções com parâmetros e lidar com o código ambíguo e temos que substituir a definição da função function() com uma marca de seta como mostrado abaixo.

$(document).ready ->

Remova as instruções de retorno desnecessárias, uma vez que o CoffeeScript retorna implicitamente as instruções de cauda de uma função.

Exemplo

A seguir está um código JavaScript onde os elementos <div> estão sendo inseridos logo antes do elemento clicado -

<html>

   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").click(function () {
               $(this).before('<div class="div"></div>' );
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
	
      <p>Click on any square below:</p>
      <span id = "result"> </span>
		
      <div class = "div" style = "background-color:blue;"></div>
      <div class = "div" style = "background-color:green;"></div>
      <div class = "div" style = "background-color:red;"></div>
		
   </body>
	
</html>

Agora, podemos converter o código acima em código CoffeeScript, conforme mostrado abaixo

<html>

   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript"
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script src="http://coffeescript.org/extras/coffee-script.js"></script>
	  
      <script type="text/coffeescript">
        $(document).ready ->
          $('div').click ->
            $(this).before '<div class="div"></div>'
            return
          return
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
	
      <p>Click on any square below:</p>
      <span id = "result"> </span>
		
      <div class = "div" style = "background-color:blue;"></div>
      <div class = "div" style = "background-color:green;"></div>
      <div class = "div" style = "background-color:red;"></div>
		
   </body>
	
</html>

Na execução, você obtém a seguinte saída.

O que é Callback?

O retorno de chamada é um equivalente assíncrono para uma função. Uma função de retorno de chamada é chamada na conclusão de uma determinada tarefa. O Node faz uso intenso de retornos de chamada. Todas as APIs do Node são escritas de forma que suportem callbacks.

Por exemplo, uma função para ler um arquivo pode iniciar a leitura do arquivo e retornar o controle ao ambiente de execução imediatamente para que a próxima instrução possa ser executada. Assim que a E / S do arquivo estiver concluída, ele chamará a função de retorno de chamada enquanto passa a função de retorno de chamada, o conteúdo do arquivo como parâmetro. Portanto, não há bloqueio ou espera pela E / S do arquivo. Isso torna o Node.js altamente escalável, pois pode processar um grande número de solicitações sem esperar que nenhuma função retorne o resultado.

Exemplo de código de bloqueio

Crie um arquivo de texto chamado input.txt com o seguinte conteúdo

Tutorials Point is giving self learning content 
to teach the world in simple and easy way!!!!!

Crie um arquivo js chamado main.js que tem o seguinte código -

var fs = require("fs");  
var data = fs.readFileSync('input.txt');  
console.log(data.toString()); 
console.log("Program Ended");

Agora execute o main.js para ver o resultado -

$ node main.js

Verifique a saída.

Tutorials Point is giving self learning content 
to teach the world in simple and easy way!!!!! 
Program Ended

Exemplo de código sem bloqueio

Crie um arquivo de texto chamado input.txt com o seguinte conteúdo

Tutorials Point is giving self learning content 
to teach the world in simple and easy way!!!!!

Atualize o arquivo main.js para ter o seguinte código -

var fs = require("fs");  
fs.readFile('input.txt', function (err, data) { 
  if (err) return console.error(err); 
    console.log(data.toString()); 
}); 
console.log("Program Ended");

Agora execute o main.js para ver o resultado -

$ node main.js

Verifique a saída.

Program Ended 
Tutorials Point is giving self learning content 
to teach the world in simple and easy way!!!!!

Esses dois exemplos explicam o conceito de blocking and non-blocking calls. O primeiro exemplo mostra que o programa bloqueia até ler o arquivo e somente então prossegue para finalizar o programa, enquanto no segundo exemplo, o programa não espera pela leitura do arquivo, mas apenas passa a imprimir "Programa Finalizado".

Assim, um programa de bloqueio é executado em grande parte em sequência. Do ponto de vista da programação, é mais fácil implementar a lógica, mas os programas sem bloqueio não são executados em sequência. Caso um programa necessite utilizar algum dado para ser processado, ele deve ser mantido dentro do mesmo bloco para sua execução sequencial.

↰ Previous page Next page ↱