CoffeeScript jQuery的_H5之家 - 中国HTML5教程资源分享第一站

CoffeeScript jQuery的

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

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

我们也可以使用CoffeeScript中使用jQuery工作。本章将教你如何使用CoffeeScript中使用jQuery工作。

使用CoffeeScript中使用jQuery

虽然jQuery的解决了浏览器的问题，使用它使用JavaScript其中有一些不好的地方是有点问题的。使用替代JavaScript的CoffeeScript的是一个更好的主意。

请记住以下几点，而转换同时使用jQuery与CoffeeScript的是。

$符号表明了我们的应用程序jQuery代码。使用此如下图所示的jQuery的代码脚本语言分开。

$(document).ready

没有必要使用括号中的CoffeeScript除了在调用与参数的功能和处理的暧昧代码的，我们有与箭头标记来取代函数定义函数（）如下所示。

$(document).ready ->

删除不必要的return语句，因为CoffeeScript的隐式返回函数的拖尾声明。

例

以下是其中<DIV>被刚刚点击的元素之前插入元素的JavaScript代码 -

<html> <head> <title>The jQuery Example</title> <script type = "text/javascript" src = "http://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></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 = "http://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></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>

上执行，这给你下面的输出。

什么是回调？

回调是一个异步相当于一个功能。回调函数被调用在一个给定的任务的完成。节点大量使用了回调。节点的所有的API都写的是，他们支持回调的这样一种方式。

例如，要读的文件的功能可能会开始阅读文件和immidiately返回控制到执行环境，以便下一个指令可以被执行。一旦文件I / O完成，它会调用回调函数，而通过回调函数，该文件作为参数的内容。因此，有没有堵塞或等待文件I / O。这使得Node.js的高度可扩展的，因为它可以处理大量的请求而不等待任何函数来返回结果。

阻止代码示例

创建一个名为input.txt中含有以下内容的文本文件

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

创建一个js文件名为main.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!!!!!

这两个例子说明阻塞和非阻塞的呼叫的概念。第一个例子表明，程序块，直到它读取该文件，然后只，进入结束程序，而在第二个例子中，程序不等待文件读取，但它只是进行打印“计划结束”。

因此，阻止程序依次执行非常多。但从编程来看，其更容易实现的逻辑，但非阻塞程序不按顺序执行。的情况下的程序需要使用的任何数据进行处理，它应保持相同的块内，使它的顺序执行。

赞助商链接