Coffeescript 简明教程

CoffeeScript - jQuery

jQuery is a fast and concise library/framework built using JavaScript created by John Resig in 2006 with a nice motto − Write less, do more.

jQuery simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. Visit our jQuery tutorial to know about jQuery.

We can also use CoffeeScript to work with jQuery. This chapter teaches you how to use CoffeeScript to work with jQuery.

Using CoffeeScript with jQuery

Though jQuery solves the browser issues, using it with JavaScript which have some bad parts is a bit problematic. Using CoffeeScript instead of JavaScript is a better idea.

使用 CoffeeScript 使用 jQuery 时请牢记以下要点。

Keep the following points in mind while converting the to be while using jQuery with CoffeeScript.

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

The $ symbol indicates the jQuery code in our application. Use this to separate the jQuery code from the scripting language as shown below.

$(document).ready

在 CoffeeScript 中，除了在使用带有参数调用的函数和处理模棱两可代码时，不需要使用括号，且我们必须使用一个箭头标记（如降所示）替代函数定义 function() 。

There is no need of using braces in in CoffeeScript except while calling the functions with parameters and dealing with the ambiguous code and we have to replace the function definition function() with an arrow mark as shown below.

$(document).ready ->

删掉不必要的 return 语句，因为 CoffeeScript 隐式地返回函数的尾部语句。

Remove the unnecessary return statements, since CoffeeScript implicitly returns the tailing statements of a function.

Example

下面是一个 JavaScript 代码，其中 <div> 元素被插入到所点击元素之前 −

Following is an JavaScript code where <div> elements are being inserted just before the clicked element −

<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 代码，如下所示

Now, we can convert the above code into CoffeeScript code as shown below

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

执行此代码会给你以下输出。

On executing, this gives you the following output.

What is Callback?

回调是一个函数的异步等价物。一个回调函数在给定任务完成时被调用。Node 大量使用回调。Node 的所有 API 都用支持回调的方式编写。

Callback is an asynchronous equivalent for a function. A callback function is called at the completion of a given task. Node makes heavy use of callbacks. All APIs of Node are written is such a way that they supports callbacks.

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

For example, a function to read a file may start reading file and return the control to execution environment immidiately so that next instruction can be executed. Once file I/O is complete, it will call the callback function while passing the callback function, the content of the file as parameter. So there is no blocking or wait for File I/O. This makes Node.js highly scalable, as it can process high number of request without waiting for any function to return result.

Blocking Code Example

创建一个名为 input.txt 的文本文件，内容如下

Create a text file named input.txt having following content

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

创建一个名为 main.js 的 js 文件，其中包含以下代码 −

Create a js file named main.js which has the following code −

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

现在运行 main.js 来查看结果 −

Now run the main.js to see the result −

$ node main.js

验证输出。

Verify the Output.

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

Non-Blocking Code Example

创建一个名为 input.txt 的文本文件，内容如下

Create a text file named input.txt having following content

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

将main.js文件更新为以下代码：

Update main.js file to have following code −

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 来查看结果 −

Now run the main.js to see the result −

$ node main.js

验证输出。

Verify the Output.

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

这两个例子解释了 blocking and non-blocking calls 的概念。第一个例子显示程序在读取文件之前会阻塞，然后才结束程序，而在第二个例子中，程序不会等待文件读取，而是继续打印“Program Ended”。

These two examples explain the concept of blocking and non-blocking calls. The first example shows that the program blocks until it reads the file and then only, it proceeds to end the program, whereas in the second example, the program does not wait for file reading but it just proceeded to print "Program Ended".

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

Thus, a blocking program executes very much in sequence. From programming point of view, its easier to implement the logic but non-blocking programs do not execute in sequence. In case a program needs to use any data to be processed, it should be kept within the same block to make it sequential execution.