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="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!!!!!

這兩個示例說明了阻塞和非阻塞呼叫的概念。第一個示例表明程式會阻塞，直到讀取檔案，然後才繼續結束程式，而在第二個示例中，程式不會等待檔案讀取，而是繼續列印“程式結束”。

因此，阻塞程式的執行順序非常嚴格。從程式設計的角度來看，實現邏輯更容易，但非阻塞程式的執行順序並不嚴格。如果程式需要使用任何要處理的資料，則應將其保留在同一個塊中，以使其執行順序保持一致。

列印頁面