Учебники

CoffeeScript — jQuery

Июль 29, 2018

jQuery — это быстрая и лаконичная библиотека / фреймворк, построенная с использованием JavaScript, созданная Джоном Резигом в 2006 году с красивым девизом — пиши меньше, делай больше.

jQuery упрощает обход документов HTML, обработку событий, анимацию и взаимодействие Ajax для быстрой веб-разработки. Посетите наш учебник jQuery, чтобы узнать о jQuery .

Мы также можем использовать CoffeeScript для работы с jQuery . В этой главе вы узнаете, как использовать CoffeeScript для работы с jQuery.

Использование CoffeeScript с jQuery

Хотя jQuery решает проблемы с браузером, использовать его с JavaScript, имеющим некоторые плохие части, немного проблематично. Лучше всего использовать CoffeeScript вместо JavaScript.

Имейте в виду следующие моменты при преобразовании в be при использовании jQuery с CoffeeScript.

Символ $ указывает код jQuery в нашем приложении. Используйте это, чтобы отделить код jQuery от языка сценариев, как показано ниже. 

$(document).ready

Нет необходимости использовать фигурные скобки в CoffeeScript, кроме как при вызове функций с параметрами и работе с неоднозначным кодом, и мы должны заменить функцию определения функции () знаком стрелки, как показано ниже. 

$(document).ready ->

Удалите ненужные операторы return, поскольку CoffeeScript неявно возвращает операторы хвостовой функции.

пример

Ниже приведен код JavaScript, в который элементы <div> вставляются непосредственно перед элементом, по которому щелкнули. 

<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>

Теперь мы можем преобразовать приведенный выше код в код CoffeeScript, как показано ниже 

 <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>

При выполнении это дает следующий вывод.

Что такое обратный звонок?

Обратный вызов является асинхронным эквивалентом для функции. Функция обратного вызова вызывается при завершении данной задачи. Узел интенсивно использует обратные вызовы. Все API-интерфейсы Node написаны таким образом, что они поддерживают обратные вызовы.

Например, функция для чтения файла может начать чтение файла и немедленно вернуть элемент управления в среду выполнения, чтобы можно было выполнить следующую инструкцию. Как только файловый ввод / вывод завершен, он вызовет функцию обратного вызова при передаче функции обратного вызова, содержимое файла в качестве параметра. Таким образом, нет блокировки или ожидания файлового ввода-вывода. Это делает Node.js легко масштабируемым, поскольку он может обрабатывать большое количество запросов, не ожидая, пока какая-либо функция вернет результат.

Пример кода блокировки

Создайте текстовый файл с именем input.txt, имеющий следующий контент 

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

Создайте js-файл с именем main.js, который имеет следующий код — 

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

Теперь запустите main.js, чтобы увидеть результат — 

$ node main.js

Проверьте вывод. 

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

Пример неблокирующего кода

Создайте текстовый файл с именем input.txt, имеющий следующий контент 

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

Обновите файл main.js, чтобы иметь следующий код — 

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");

Теперь запустите main.js, чтобы увидеть результат — 

$ node main.js

Проверьте вывод. 

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

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

Таким образом, блокирующая программа выполняется очень последовательно. С точки зрения программирования проще реализовать логику, но неблокирующие программы не выполняются последовательно. В случае, если программе необходимо использовать какие-либо данные для обработки, они должны храниться в одном и том же блоке для последовательного выполнения.

46
Share: