CoffeeScript教程

CoffeeScript - jQuery

jQuery是一个快速简洁的库/框架，使用由John Resig在2006年创建的JavaScript构建，其中有一个很好的座右铭 - 写得少，做得更多.

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

我们也可以使用CoffeeScript来处理的jQuery 的.本章将教你如何使用CoffeeScript来使用jQuery.

将CoffeeScript与jQuery一起使用

虽然jQuery解决了浏览器问题，但将它与JavaScript一起使用有一些不好的部分有点问题.使用CoffeeScript而不是JavaScript是一个更好的主意.

在使用带有CoffeeScript的jQuery转换时要记住以下几点.

$ 符号表示我们的应用程序中的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");