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中使用花括号,并且我们必须用箭头标记替换函数定义函数() ,如下所示。

$(document).ready ->

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

以下是一个JavaScript代码,其中<div>元素正插入到被单击元素之前-

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

现在,我们可以将上面的代码转换为CoffeeScript代码,如下所示

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

执行时,将为您提供以下输出。

什么是回叫?

回调是函数的异步等效项。在完成给定任务时将调用回调函数。 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”。

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

Made with ❤️ in Chengdu. Copyright reserved 2019-2022.

蜀ICP备20006366号-1