CoffeeScript - jQuery
jQuery 是一个快速而简洁的库/框架，使用 JavaScript 构建，由 John Resig 在 2006 年创建，其座右铭是 - 少写，多做。
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="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!!!!!
这两个示例解释了阻塞和非阻塞调用 的概念。 第一个示例显示程序阻塞，直到它读取文件，然后才继续结束程序，而在第二个示例中，程序不等待文件读取，而是继续打印"Program Ended"。
因此，阻塞程序会按顺序执行。 从编程的角度来看，它更容易实现逻辑，但非阻塞程序不会按顺序执行。 如果程序需要使用任何要处理的数据，则应将其保存在同一块中以使其顺序执行。
