CoffeeScript - jQuery

jQuery 是一个快速而简洁的库/框架，使用 JavaScript 构建，由 John Resig 在 2006 年创建，其座右铭是：Write less，do more。

jQuery 简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互，以实现快速 Web 开发。请访问我们的 jQuery 教程来了解jQuery。

我们还可以使用 CoffeeScript 来处理jQuery。本章教您如何使用 CoffeeScript 来处理 jQuery。

将 CoffeeScript 与 jQuery 结合使用

虽然 jQuery 解决了浏览器问题，但将它与存在一些问题的 JavaScript 一起使用会出现一些问题。使用 CoffeeScript 代替 JavaScript 是一个更好的主意。

在将 jQuery 与 CoffeeScript 结合使用时将转换为 be 时，请记住以下几点。

$符号表示我们应用程序中的 jQuery 代码。使用它可以将 jQuery 代码与脚本语言分开，如下所示。

$(document).ready

在 CoffeeScript 中不需要使用大括号，除非在调用带有参数的函数并处理不明确的代码时，我们必须将函数定义 function( )替换为箭头标记，如下所示。

$(document).ready ->

删除不必要的返回语句，因为 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>

执行时，将给出以下输出。

什么是回调？

回调是函数的异步等效项。完成给定任务时调用回调函数。Node 大量使用回调。Node 的所有 API 都是以支持回调的方式编写的。

例如，读取文件的函数可以开始读取文件并立即将控制权返回到执行环境，以便可以执行下一条指令。一旦文件I/O完成，就会调用回调函数，同时向回调函数传递文件的内容作为参数。因此文件 I/O 不会发生阻塞或等待。这使得 Node.js 具有高度可扩展性，因为它可以处理大量请求，而无需等待任何函数返回结果。

阻止代码示例

创建一个名为 input.txt 的文本文件，其中包含以下内容

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

创建一个名为 main.js 的 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!!!!!

这两个例子解释了阻塞和非阻塞调用的概念。第一个示例显示程序会阻塞，直到读取文件，然后才继续结束程序，而在第二个示例中，程序不等待文件读取，而是继续打印“程序结束”。

因此，阻塞程序非常按顺序执行。从编程的角度来看，它更容易实现逻辑，但非阻塞程序不会按顺序执行。如果程序需要使用任何要处理的数据，则应将其保存在同一块中以使其顺序执行。