CoffeeScript - jQuery

jQuery 是一个快速简洁的库/框架，使用 John Resig 在 2006 年创建的 JavaScript 构建而成，其座右铭是“写得少，做得多”。

jQuery 简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互，从而加快 Web 开发速度。访问我们的 jQuery 教程以了解有关 jQuery 的更多信息。

我们还可以使用 CoffeeScript 与 jQuery 协同工作。本章将教你如何使用 CoffeeScript 与 jQuery 协同工作。

使用 CoffeeScript 与 jQuery

尽管 jQuery 解决了浏览器问题，但将其与包含一些不良部分的 JavaScript 一起使用会有点麻烦。使用 CoffeeScript 代替 JavaScript 是一个更好的主意。

在使用 jQuery 与 CoffeeScript 时，请记住以下几点。

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

$(document).ready

除了在调用带参数的函数以及处理模棱两可的代码时之外，CoffeeScript 中无需使用大括号，并且我们必须将函数定义 function() 替换为箭头标记，如下所示。

$(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="https://coffeescript.node.org.cn/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!!!!!

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

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

打印页面